<template>
  <el-dialog class="client-data-dialog" title="业务组人员维护" :visible.sync="visible" :before-close="handleClose">

    <el-form :model="bankCardModel">
      <table style="width: 100%">
        <tr>
          <th>组类型</th>
          <td>
            <el-select v-model="bizGroup" placeholder="组类型">
              <el-option v-for="item in userGroupList" :key="item.value"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <th>用户名字</th>
          <td>
            <el-autocomplete style="width: 80%"
                             v-model="realName"
                             :fetch-suggestions="querySearchAsync"
                             placeholder="请输入内容"
                             @select="handleSelect"
            ></el-autocomplete>
          </td>
        </tr>
      </table>
    </el-form>

    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitClick" :loading="ui.submitLoading">新 增</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">


  export default {
    name: 'ClientUploadDialog',
    props: {
      dialogVisible: {
        type: Boolean,
        required: true
      },
    },
    data() {
      return {
        bankCardModel: {},
        loginName: '',
        realName: '',
        userGroupList:[],
        ui: {
          submitLoading: false
        },
        visible: this.$props.dialogVisible,
        bizGroup: '',
        allUser: [],
      }
    },
    mounted: function () {
      this.$$get(`/user/select`)
        .then(res => {
          if (res.data.code < 1)
            throw res.data.msg;
          var array = []
          res.data.data.forEach((item, index) => {
            array[index] = {value: item.userName, lable: item.loginName,}
          })
          this.allUser = array;
        })
        .catch(err => this.$$msg.err(err))
       // 获取当前用户组
      this.$$get('/group/getGroupList/')
      .then(res => {
          if (res.data.code == 1){
              if (res.data.code != 1) {
                  this.$message.error(res.data.msg);
                  this.userGroupList = '';
                  return
              }
              console.log(res.data.data)
              this.userGroupList = res.data.data;
          }else{
          this.$message({message: res.data.msg, type: 'error'});
          }
      })
      .catch(err => this.$$msg.err(err))
    },

    methods: {
      querySearchAsync(queryString, cb) {
        var allUser = this.allUser;
        var results = queryString ? allUser.filter(this.createStateFilter(queryString)) : allUser;
        cb(results);
      },
      handleSelect(item) {
        this.loginName = item.lable;
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().search(queryString.toLowerCase()) >= 0);
        };
      }
      ,

      /** 提交点击 */
      async submitClick() {
        this.$$post('/group/insert', {
          bizGroup: this.bizGroup,
          loginName: this.loginName
        })
          .then(res => {
            if (res.data.code < 1) {
              this.$message.error(res.data.msg);
              return
            }
            this.$message({message: '新增成功', type: 'success'});
            this.handleClose();
            window.location.reload();
          })
          .catch(err => {
            this.showErrorAlert(err)
          })
      }
      ,

      /** 关闭处理 */
      handleClose() {
        this.visible = false;
        setTimeout(() => {
          this.$emit('update:dialogVisible', false)
        }, 300);
      }
    }
  }
</script>
