<!--
批量添加人员白名单
@Author: linqian
@Date: 2021-07-08 09:43
-->
<template>
  <div>
    <dg-row>
      <!-- 搜索栏 -->
      <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
      <!-- 表格 -->
      <new-table
        ref="table"
        :selection="true"
        :tableUrl="tableUrl"
        :tableHeader="tableHeader"
        :condition="condition"
        @selection-change="handleSelectChange"
      >
      </new-table>
    </dg-row>
    <div v-footer>
      <dg-button @click="handleCancel">取消</dg-button>
      <dg-button type="primary" @click="handleSubmit">保存</dg-button>
    </div>
  </div>
</template>

<script>
import { notInWhiteUserTableUrl } from '@/api/list-manage';
import newTable from '@/components/new-table';
import batchSetlevelUser from './batch-setlevel-user.vue';
import searchBar from '@/components/search-bar';
import { searchOpt } from '@/mixins/page-opt';

export default {
  components: {
    newTable,
    searchBar
  },
  mixins: [searchOpt],
  data() {
    return {
      tableUrl: notInWhiteUserTableUrl,
      conditionForm: [
        {
          label: '姓名',
          name: 'name',
          op: 'like',
          value: '',
          component: 'ElInput',
          attr: {
            placeholder: '请输入姓名',
            style: 'width: 130px'
          }
        },
        {
          label: '身份证号码',
          name: 'idcard',
          op: 'like',
          value: '',
          component: 'ElInput',
          attr: {
            placeholder: '请输入身份证号码'
          }
        },
        {
          label: '单位名称',
          name: 'orgId',
          op: '=',
          value: '',
          apiName: 'getOrgTree',
          nodeKey: 'id',
          type: 'APP',
          component: 'SelectOrgTree',
          placeholder: '请选择单位名称'
        }
      ],
      tableHeader: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '身份证号码',
          prop: 'idcard'
        },
        {
          label: '单位名称',
          prop: 'orgName'
        }
      ],
      selectList: []
    };
  },
  computed: {},
  methods: {
    /**
     * 取消
     */
    handleCancel() {
      this.$emit('close');
    },
    handleSelectChange(selection) {
      this.selectList = this.$lodash.cloneDeep(selection);
    },
    /**
     * 确定
     */
    handleSubmit() {
      const selectedData = this.selectList;
      if (selectedData.length > 0) {
        this.setLevel(selectedData);
      } else {
        this.$message.warning('请至少选择一个人员!');
      }
    },
    /**
     * 设置名单级别
     */
    setLevel(selectedData) {
      const vm = this;
      const layer = this.$dgLayer({
        title: '设置白名单级别',
        content: batchSetlevelUser,
        props: {
          selectedData,
          operate: 'add'
        },
        on: {
          success() {
            vm.$emit('success');
            layer.close(layer.dialogIndex);
          }
        },
        cancel: function (index) {
          // 关闭对应弹窗的ID
          layer.close(index);
          return false;
        },
        area: ['800px', '600px']
      });
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss'>
</style>