<template>
  <a-modal
    title="添加区域"
    :open="dialogFormVisible"
    @ok="addMens"
    @cancel="dialogFormVisible = false"
    width="70%"
  >
    <a-layout>
      <a-layout-sider
        width="200px"
        style="border:1px solid #d5d5ff; background: #fff;"
      >
        <p
          style="font-weight:bolder;background-color:#d5d5ff;padding:3px;margin: 0;"
        >
          <a-icon type="share-alt" />所属机构
        </p>
        <provTreeList
          rootCode="000000"
          rootType="1"
          :style="{ 'max-height': tableHeight + 'px' }"
          @provTreeSelectChange="provTreeSelectChangeHandler"
        ></provTreeList>
      </a-layout-sider>
      <a-layout-content
        style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;"
      >
        <p
          style="font-weight:bolder;background-color:#d5d5ff;padding:3px;margin: 0;"
        >
          督查区域
        </p>
        <a-table
          :row-selection="{
            selectedRowKeys: bisInspAllRlationParams,
            onChange: handleSelectionChange,
          }"
          :columns="columns"
          :data-source="currentShowList"
          :loading="loading"
          rowKey="index"
          ref="menTable"
        >
        </a-table>
      </a-layout-content>
    </a-layout>
  </a-modal>
</template>

<script>
import { addDcqyOthers, getOptionalArea } from '../../api/duChaPlan.js';
import request from '../../utils/gw_ajax_request.js';
import provTreeList from '../../widgets/provTreeListAndChina.vue';
export default {
  props: ['dczId', 'dczName', 'jiGouId', 'objType'],
  data() {
    return {
      dialogFormVisible: false,
      addOnce: false,
      pageSize: 10,
      pageIndex: 1,
      currentShowList: [],
      multipleSelection: [],
      searchProvTreeListCode: '',
      tableHeight: window.innerHeight - 220,
      loading: false,
      bisInspAllRlationParams: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          ellipsis: true,
          width: '60px',
          customCell: () => {
            return {
              style: {
                'min-width': '60px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '60px',
              },
            };
          },
        },
        {
          title: '名称',
          dataIndex: 'AD_NAME',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '编码',
          dataIndex: 'AD_CODE',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
      ],
    };
  },
  components: {
    provTreeList,
  },
  computed: {
    userId: () =>
      localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096',
  },
  mounted() {
    this.searchProvTreeListCode = '';
  },
  methods: {
    showDialog() {
      this.dialogFormVisible = true;
      this.getTableData();
    },
    handleSelectionChange(val, row) {
      this.bisInspAllRlationParams = val;
      this.multipleSelection = row;
    },
    getTableData() {
      getOptionalArea(this.dczId, this.searchProvTreeListCode).then(
        (response) => {
          var arr = response.data;
          arr.forEach((arrItem, index) => {
            arrItem['index'] = this.pageSize * (this.pageIndex - 1) + index + 1;
          });
          this.currentShowList = arr;
        },
      );
    },
    addMens() {
      if (this.addOnce) {
        this.addOnce = false;
        return;
      }
      this.addOnce = true;
      this.multipleSelection.forEach((item, index) => {
        item.id = this.dczId;
        item['adCode'] = item.AD_CODE;
        item['adName'] = item.AD_NAME;
      });
      this.addOnce = false;
      try {
        request
          .post('/dc/insp/selarea/muli/insert', this.multipleSelection)
          .then((res) => {
            if (res.success) {
              this.$message.success('添加成功');
              this.$emit('addSuccess');
              this.dialogFormVisible = false;
              this.bisInspAllRlationParams = [];
            }
          });
      } catch (e) {
        this.$message.success('添加失败');
      }
    },
    provTreeSelectChangeHandler: function (params) {
      this.searchProvTreeListCode = params.code;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.ant-table-pagination) {
  float: left;
}
:deep(.ant-table-thead > tr > th),
:deep(.ant-table-tbody > tr > td) {
  padding: 0;
  height: 36px;
}
</style>
