<template>
  <div style="height:100%;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between;">
    <div class="box-card" style="background-color: #ECF8FF; height: 40px; font-size: small; line-height: 30px; display: flex; justify-content: space-between; align-items: center;">
      <div style="display:flex;" class="checkbox_left">
        <a-checkbox :checked="checked" @change="onChecked">本级</a-checkbox>
        <a-input-search
          v-model="input5"
          placeholder="请输入人员名称"
          enter-button
          @search="searchDcryResult"
          allow-clear
          style="width: 200px; margin-left: 30px;"/>
      </div>
      <a-button
        @click="editHandler"
        v-if="readOnlyRole == 'display'"
        type="primary"
        icon="edit"
        size="small"
        ghost
        style="float: right; margin-right: 10px; height: 30px;">添加人员</a-button>
    </div>

    <a-table
      :data-source="tableData"
      :columns="columns"
      @change="handleCurrentChange"
      :loading="loading"
      rowKey="index"
      :pagination="{current: pageIndex, total, defaultPageSize: pageSize, showTotal: total => `共${total}条`}"
      style="width: 100%;"
      :style="{height: tableHeight + 'px'}"
    >
      <span slot="action" slot-scope="text" v-if="readOnlyRole == 'display'">
        <img src="../../assets/img/delete.png" @click="deleteHandler(text)" title="删除" style="cursor:pointer;width: 20px;" />
      </span>
    </a-table>
  </div>
</template>

<script>
import { deleteMember, getDcryList } from '../../api/duChaPlan';
export default {
  props: ['dczId'],
  data() {
    return {
      checked: false,
      input5: '',
      isAll: '1',
      pageIndex: 1,
      pageSize: 12,
      total: 0,
      loading: false,
      tableHeight: window.innerHeight - 230,
      tableData: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          width: 70,
          ellipsis: true,
        },
        {
          title: '姓名',
          dataIndex: 'persName',
          align: 'center',
          width: 150,
          ellipsis: true,
        },
        {
          title: '性别',
          dataIndex: 'sex1',
          align: 'center',
          width: 80,
          ellipsis: true,
        },
        {
          title: '手机号码',
          dataIndex: 'mobilenumb',
          align: 'center',
          width: 150,
          ellipsis: true,
        },
        {
          title: '机构名称',
          dataIndex: 'orgName',
          align: 'center',
          width: 150,
          ellipsis: true,
        },
        {
          title: '人员类型',
          dataIndex: 'personType_jc',
          align: 'center',
          width: 150,
          ellipsis: true,
        },
        {
          title: '所在分组',
          dataIndex: 'pnm',
          align: 'center',
          width: 280,
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      readOnlyRole: localStorage.getItem('readOnlyRole'),
    };
  },
  created() {},
  methods: {
    getDcryResult() {
      if (!this.dczId) {
        this.loading = false;
        return;
      }
      this.loading = true;
      getDcryList(
        this.dczId,
        this.pageSize,
        this.pageIndex,
        this.isAll,
        this.input5,
      ).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.tableData.forEach((item, index) => {
          item['index'] = this.pageSize * (this.pageIndex - 1) + index + 1;
          switch (item.pertype) {
            case '1':
              item['personType_sk'] = '组长';
              item['personType_jc'] = '组长';
              break;
            case '2':
              item['personType_sk'] = '组员';
              item['personType_jc'] = '组员';
              break;
            case '3':
              item['personType_sk'] = '联络员';
              item['personType_jc'] = '联络员';
              break;
            case '4':
              item['personType_sk'] = '专家';
              item['personType_jc'] = '';
              break;
            case '5':
              item['personType_sk'] = '副组长';
              item['personType_jc'] = '';
              break;
            case '11':
              item['personType_sk'] = '';
              item['personType_jc'] = '前期专家';
              break;
            case '12':
              item['personType_sk'] = '';
              item['personType_jc'] = '监管专家';
              break;
            case '13':
              item['personType_sk'] = '';
              item['personType_jc'] = '计划专家';
              break;
            case '14':
              item['personType_sk'] = '';
              item['personType_jc'] = '财务专家';
              break;
            case '15':
              item['personType_sk'] = '';
              item['personType_jc'] = '质量专家';
              break;
            case '16':
              item['personType_sk'] = '';
              item['personType_jc'] = '安全专家';
              break;
            case '19':
              item['personType_sk'] = '';
              item['personType_jc'] = '助理';
              break;
            case '20':
              item['personType_sk'] = '';
              item['personType_jc'] = '特派员';
              break;
            default:
              item['personType_sk'] = '';
              item['personType_jc'] = '';
          }
          item['personType'] = item.pertype == '1' ? '组长' : '组员';
          item['sex1'] = item.sex == '1' ? '男' : item.sex == '2' ? '女' : '';
        });
        this.loading = false;
      });
    },
    onChecked(e) {
      this.checked = e.target.checked;
    },
    searchDcryResult(val) {
      this.input5 = val;
      this.pageIndex = 1;
      this.getDcryResult();
    },
    editHandler() {
      this.$emit('showEditDialog');
    },
    handleCurrentChange(item) {
      this.pageIndex = item.current;
      this.getDcryResult();
    },
    deleteHandler(item) {
      this.$confirm({
        title: '提示',
        content: '是否确认删除?',
        okType: 'info',
        onOk: () => {
          deleteMember(item.id, item.guid).then((res) => {
            if (res.success) {
              this.getDcryResult();
              this.$message.success('删除成功');
            } else {
              if (res.message == '请先删除登记表') {
                this.$message.warning('请联系管理员，删除登记表！');
              } else {
                this.$message.error('删除失败');
              }
            }
          });
        },
        onCancel: () => {
          this.$message.info('已取消删除');
        },
      });
    },
  },
  watch: {
    dczId: function (n, o) {
      this.getDcryResult();
    },
    checked(n, o) {
      if (n == true) {
        this.isAll = '0';
      } else {
        this.isAll = '1';
      }
      this.pageIndex = 1;
      this.getDcryResult();
    },
  },
};
</script>

<style lang='less' scoped>
.checkbox_left{
  margin-left: 20px;
}
/deep/ .ant-checkbox-wrapper {
  white-space: nowrap;
}
/deep/ .ant-table-pagination {
  float: left;
}
/deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
  padding: 0;
  height: 50px;
}
</style>
