<template>
  <el-dialog :close-on-click-modal="false" :title="isAdd ? '新建用户黑名单' : '编辑用户黑名单'" width="500px" :visible.sync="visible">
    <div class="user-search">
      <el-select
        v-model="searchKey" filterable remote reserve-keyword
        placeholder="请输入关键词" :remote-method="userQuery"
        :loading="userLoading" value-key="buyerUserId" @change="userSelectChane"
      >
        <el-option v-for="item in userOptions" :key="item.buyerUserId" :label="item.name" :value="item" />
      </el-select>
    </div>
    <div class="user-result">
      <el-descriptions v-if="JSON.stringify(resultData) !== '{}'" class="margin-top" title="" :column="1" border>
        <el-descriptions-item>
          <template #label>
            userid
          </template>
          {{ resultData.buyerUserId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            openid
          </template>
          {{ resultData.wechatOpenId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            昵称
          </template>
          {{ resultData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            手机号
          </template>
          {{ resultData.phone }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="doCancel">取消</el-button>
      <el-button type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addBlack,
  searchUser
} from '@/api/risk'

export default {
  name: 'AdForm',
  data() {
    return {
      visible: false,
      isAdd: false,
      searchKey: '',
      userParams: {
        searchKey: '',
        page: 1,
        pageSize: 10
      },
      userLoading: false,
      userOptions: [],
      resultData: {}
    }
  },
  methods: {
    // 打开弹出窗
    show(row) {
      this.isAdd = !row
      if (this.isAdd) {
        this.searchKey = ''
        this.resultData = {}
      } else {
        this.form = JSON.parse(JSON.stringify(row))
      }
      this.visible = true
    },
    // 取消
    doCancel() {
      this.visible = false
    },
    // 提交
    doSubmit() {
      if (JSON.stringify(this.resultData) === '{}') {
        this.$message({
          message: '请先查找用户',
          type: 'warning'
        })
        return false
      }
      const params = {
        type: 2,
        buyerUserId: this.resultData.buyerUserId
      }
      addBlack(params).then((res) => {
        this.$message({
          message: '新增成功',
          type: 'success'
        })
        this.$emit('reset')
        this.visible = false
      })
        .catch((err) => {
          this.visible = false
        })
    },
    // 用户搜索
    userQuery(val) {
      if (val) {
        this.userLoading = true
        this.userParams.searchKey = val
        searchUser(this.userParams).then((res) => {
          this.userOptions = res.data.list
          this.userLoading = false
        })
          .catch((err) => {
            this.userLoading = false
          })
      }
    },
    userSelectChane(val) {
      this.resultData = val || {}
    }
  }
}
</script>

<style scoped lang="scss">
.user-search {
	margin-bottom: 10px;
}

.head-container .el-form-item {
	margin-bottom: 0px;
}
</style>
