<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"
        @change="userSelectChane"
        value-key='buyerUserId'
      >
        <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 slot="label">
            userid
          </template>
          {{ resultData.buyerUserId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            openid
          </template>
          {{ resultData.wechatOpenId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            昵称
          </template>
          {{ resultData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="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>
