<template>
  <a-layout style="margin: 10px;">
    <a-layout-header style="background:#fff">
      <a-form
        :model="queryParams"
        ref="searchForm"
        layout="inline"
        class="form-model">
        <a-form-item label="督查区域">
          <a-input v-model:value="queryParams.cityNameDc" placeholder="请输入督查区域" allow-clear />
        </a-form-item>
        <a-form-item label="业务平台门户">
          <a-input v-model:value="queryParams.titleName" placeholder="请输入业务平台门户" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="selectTable" size="small">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="updateTable" size="small">更新</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="addTable" size="small">新增</a-button>
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content>
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        ref="table"
        bordered
        style="width: 100%;"
        :style="{height: tableHeight + 'px'}"
        :scroll="{x: 'max-content', y: tableHeight - 54}"
        :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <a-button @click="handleEdit(record)" type="primary" size="small" style="margin-right: 10px;">区域编辑</a-button>
            <a-button @click="gatewayEdit(record)" type="primary" size="small" style="margin-right: 10px;">门户编辑</a-button>
            <a-radio :checked="record.orgType == 1" @change="setOrgType($event, record)">设为主行政区</a-radio>
            <a-button @click="handleDelete(record)" type="primary" size="small" style="margin-right: 10px;">删除</a-button>
          </template>
        </template>
      </a-table>
      <a-pagination
        :current="queryParams.pageNum"
        show-size-changer
        :pageSize="queryParams.pageSize"
        @update:pageSize="queryParams.pageSize = $event"
        :total="total"
        :page-size-options="['10','20','50','100']"
        :show-total="total => `共${total}条`"
        @showSizeChange="handleSizeChange"
        @change="handlePageNumChange"
        style="margin-top: 10px;"
      />
    </a-layout-content>

    <a-modal
      title="操作"
      v-model:open="showSetOrgIdYwpt"
      @cancel="showSetOrgIdYwpt = false"
      @ok="setOrgIdYwpt"
      width="50%">
      <a-form
        :model="orgIdYwptForm"
        ref="searchYwptForm"
        :label-col="{span: 9}"
        :wrapper-col="{span: 15}"
        layout="inline"
        class="form-model">
        <a-form-item label="地区名称" prop="name">
          <a-input v-model:value="orgIdYwptForm.name" placeholder="请输入业务平台地区" allow-clear />
        </a-form-item>
        <a-form-item label="门户名称" prop="titleName">
          <a-input v-model:value="orgIdYwptForm.titleName" placeholder="请输入业务平台门户" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="searchOrgIdYwpt" size="small">查询</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :row-selection="{
          type: 'radio',
          selectedRowKeys: currentRowKey,
          onChange: handleSelectionChange
        }"
        :columns="orgIdYwptColumns"
        :data-source="orgIdYwptData"
        @change="handleCurrentChange"
        :loading="orgIdYwptLoading"
        bordered
        rowKey="id"
        :pagination="{
          current: orgIdYwptForm.pageNum,
          total: orgIdYwptTotal,
          defaultPageSize: orgIdYwptForm.pageSize,
          showTotal: (orgIdYwptTotal) => `共${orgIdYwptTotal}条`,
        }"
        ref="menTable"
        class="ywpt_table"
      >
      </a-table>
    </a-modal>

    <a-modal
      title="操作"
      v-model:open="showGateway"
      @cancel="showGateway = false"
      @ok="setGateway"
      width="50%">
      <a-form
        :model="gatewayForm"
        ref="searchGatewayForm"
        :label-col="{span: 9}"
        :wrapper-col="{span: 15}"
        layout="inline"
        class="form-model">
        <a-form-item label="门户名称" prop="name">
          <a-input v-model:value="gatewayForm.name" placeholder="请输入门户名称" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="searchGateway" size="small">查询</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :row-selection="{
          type: 'radio',
          selectedRowKeys: currentRowKey1,
          onChange: handleSelectionChange1
        }"
        :columns="gatewayColumns"
        :data-source="gatewayData"
        @change="handleCurrentChange1"
        :loading="gatewayLoading"
        bordered
        rowKey="id"
        :pagination="{
          current: gatewayForm.pageNum,
          total: gatewayTotal,
          defaultPageSize: gatewayForm.pageSize,
          showTotal: (gatewayTotal) => `共${gatewayTotal}条`,
        }"
        ref="menTable"
        class="ywpt_table"
      >
      </a-table>
    </a-modal>

    <a-modal
      title="新增"
      v-model:open="showAdd"
      @cancel="showAdd = false"
      @ok="handleAddChecked"
      width="50%">
      <a-form
        :model="addForm"
        ref="addForm"
        :label-col="{span: 9}"
        :wrapper-col="{span: 15}"
        layout="inline"
        class="form-model">
        <a-form-item label="地区名称" prop="name">
          <a-input v-model:value="addForm.name" placeholder="请输入业务平台地区" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="searchAddTable" size="small">查询</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :row-selection="{
          type: 'radio',
          selectedRowKeys: currentRowKeyAdd,
          onChange: handleSelectionChangeAdd
        }"
        :columns="addTableColumns"
        :data-source="addTableData"
        @change="handleCurrentChangeAdd"
        :loading="addLoading"
        bordered
        rowKey="id"
        :pagination="{
          current: addForm.pageNum,
          total: addTotal,
          defaultPageSize: addForm.pageSize,
          showTotal: (addTotal) => `共${addTotal}条`,
        }"
        ref="menTable"
        class="ywpt_table"
      >
      </a-table>
    </a-modal>
  </a-layout>
</template>

<script>
import request from '@/utils/gw_ajax_request';
export default {
  data() {
    return {
      tableHeight: 0,
      queryParams: {
        cityNameDc: '',
        titleName: '',
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      loading: false,
      tableData: [],
      columns: [
        {
          title: '督查系统地市',
          dataIndex: 'cityNameDc',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '督查系统区县',
          dataIndex: 'countyNameDc',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '督查系统行政区划',
          dataIndex: 'adCodeDc',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '业务平台行政区划',
          dataIndex: 'titleName',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        // {
        //   title: '业务平台行政区划编码',
        //   dataIndex: 'adCodeYwpt',
        //   width: 200,
        //   align: 'center',
        //   ellipsis: true
        // },
        {
          title: '业务平台门户',
          dataIndex: 'kpName',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      currentRow: null,
      showSetOrgIdYwpt: false,
      orgIdYwptForm: {
        name: '',
        titleName: '',
        pageNum: 1,
        pageSize: 10,
      },
      orgIdYwptTotal: 0,
      orgIdYwptLoading: false,
      orgIdYwptData: [],
      orgIdYwptColumns: [
        {
          title: '地市名称',
          dataIndex: 'parentName',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '区县名称',
          dataIndex: 'name',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '门户名字',
          dataIndex: 'titleName',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '行政区划',
          dataIndex: 'adCode',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
      ],
      currentRowKey: [],
      multipleSelection: [],

      showGateway: false,
      gatewayForm: {
        name: '',
        pageNum: 1,
        pageSize: 10,
      },
      gatewayTotal: 0,
      gatewayLoading: false,
      currentRowKey1: [],
      multipleSelection1: [],
      gatewayData: [],
      gatewayColumns: [
        {
          title: '门户名称',
          dataIndex: 'name',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '业务平台名称',
          dataIndex: 'sysname',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
      ],

      showAdd: false,
      addForm: {
        name: '',
        pageNum: 1,
        pageSize: 10,
      },
      addTotal: 0,
      addLoading: false,
      currentRowKeyAdd: [],
      multipleSelectionAdd: [],
      addTableData: [],
      addTableColumns: [
        {
          title: '区域名称',
          dataIndex: 'name',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '行政区划编码',
          dataIndex: 'adCode',
          width: 200,
          align: 'center',
          ellipsis: true,
        },
      ],
    };
  },
  created() {
    this.getTableData();
  },
  mounted() {
    // 浏览器自适应
    this.tableHeight = window.innerHeight - 240;
    window.addEventListener('resize', () => {
      return (() => {
        this.tableHeight = window.innerHeight - 240;
      })();
    });
  },
  methods: {
    // 查询
    selectTable() {
      this.queryParams.pageNum = 1;
      this.getTableData();
    },
    // 获取表格数据
    getTableData() {
      this.loading = true;
      request
        .post('/bis/insp/bisInspYwptAssociation/getPageList', this.queryParams)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            const { total, list } = res.data;
            this.tableData = list;
            this.total = total;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 编辑
    handleEdit(row) {
      this.currentRow = row;
      this.currentRowKey = [];
      this.multipleSelection = [];
      this.showSetOrgIdYwpt = true;
      this.getOrgIdYwptData();
    },
    // 设置主行政区
    setOrgType(e, row) {
      // if (!row.kpId) {
      //   return this.$message.info('需要先关联门户')
      // }
      this.$confirm({
        title: '提示',
        content: '确定设为主行政区?',
        okType: 'warning',
        onOk: () => {
          const params = {
            orgIdDc: row.orgIdDc,
            orgType: '1',
            id: row.id,
          };
          request
            .post('/bis/insp/bisInspYwptAssociation/update', params)
            .then((res) => {
              if (res.success) {
                this.$message.success('设置成功!');
                this.getTableData();
              } else {
                this.$message.error(res.message);
              }
            });
        },
      });
    },
    // 分页
    handleSizeChange(current, size) {
      this.queryParams.pageSize = size;
      this.getTableData();
    },
    handlePageNumChange(item) {
      this.queryParams.pageNum = item;
      this.getTableData();
    },
    searchOrgIdYwpt() {
      this.orgIdYwptForm.pageNum = 1;
      this.getOrgIdYwptData();
    },
    getOrgIdYwptData() {
      this.orgIdYwptLoading = true;
      request
        .post('/bis/insp/bisInspOrgYwpt/getPageList', this.orgIdYwptForm)
        .then((res) => {
          if (res.success) {
            this.orgIdYwptLoading = false;
            const { total, list } = res.data;
            this.orgIdYwptData = list;
            this.orgIdYwptTotal = total;
          } else {
            this.$message.error(res.message);
            this.orgIdYwptLoading = false;
          }
        });
    },
    handleSelectionChange(val, data) {
      this.currentRowKey = val;
      this.multipleSelection = data;
    },
    handleCurrentChange(item) {
      this.orgIdYwptForm.pageNum = item.current;
      this.getOrgIdYwptData();
    },
    setOrgIdYwpt() {
      if (this.multipleSelection.length == 0) {
        return this.$message.info('请选择要绑定的数据');
      }
      const params = {
        orgIdDc: this.currentRow.orgIdDc,
        orgIdYwpt: this.multipleSelection[0].id,
        id: this.currentRow.id,
      };
      request
        .post('/bis/insp/bisInspYwptAssociation/update', params)
        .then((res) => {
          if (res.success) {
            this.$message.success('绑定成功!');
            this.showSetOrgIdYwpt = false;
            this.$refs.searchYwptForm.resetFields();
            this.currentRowKey = [];
            this.multipleSelection = [];
            this.getTableData();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    updateTable() {
      const params = {
        token: sessionStorage.getItem('Authorization'),
      };
      request
        .post('/bis/insp/bisInspOrgYwpt/updateYwptInfo', params)
        .then((res) => {
          if (res.success) {
            this.$message.success('操作成功');
          } else {
            this.$message.error(res.message);
          }
        });
    },
    bisInspKpYwpt() {
      request
        .post('/bis/insp/BisInspKpYwpt/getPageList', this.gatewayForm)
        .then((res) => {
          if (res.success) {
            this.gatewayLoading = false;
            const { total, list } = res.data;
            this.gatewayData = list;
            this.gatewayTotal = total;
          } else {
            this.$message.error(res.message);
            this.gatewayLoading = false;
          }
        });
    },
    gatewayEdit(row) {
      this.currentRow = row;
      this.currentRowKey1 = [];
      this.multipleSelection1 = [];
      this.showGateway = true;
      this.bisInspKpYwpt();
    },
    searchGateway() {
      this.gatewayForm.pageNum = 1;
      this.bisInspKpYwpt();
    },
    setGateway() {
      if (this.multipleSelection1.length == 0) {
        return this.$message.info('请选择要绑定的数据');
      }
      const params = {
        orgIdDc: this.currentRow.orgIdDc,
        kpId: this.multipleSelection1[0].id,
        id: this.currentRow.id,
      };
      request
        .post('/bis/insp/bisInspYwptAssociation/update', params)
        .then((res) => {
          if (res.success) {
            this.$message.success('绑定成功!');
            this.showGateway = false;
            this.$refs.searchGatewayForm.resetFields();
            this.currentRowKey1 = [];
            this.multipleSelection1 = [];
            this.getTableData();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleSelectionChange1(val, data) {
      this.currentRowKey1 = val;
      this.multipleSelection1 = data;
    },
    handleCurrentChange1(item) {
      this.gatewayForm.pageNum = item.current;
      this.bisInspKpYwpt();
    },
    addTable() {
      this.currentRowKeyAdd = [];
      this.multipleSelectionAdd = [];
      this.showAdd = true;
      this.getPageDcList();
    },
    handleAddChecked() {
      if (this.multipleSelectionAdd.length == 0) {
        return this.$message.info('请选择要绑定的数据');
      }
      const params = {
        orgIdDc: this.multipleSelectionAdd[0].id,
      };
      request
        .post('/bis/insp/bisInspYwptAssociation/add', params)
        .then((res) => {
          if (res.success) {
            this.$message.success('添加成功!');
            this.showAdd = false;
            this.$refs.addForm.resetFields();
            this.currentRowKeyAdd = [];
            this.multipleSelectionAdd = [];
            this.getTableData();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    getPageDcList() {
      request
        .post('/bis/insp/bisInspOrgYwpt/getPageDcList', this.addForm)
        .then((res) => {
          if (res.success) {
            this.addLoading = false;
            const { total, list } = res.data;
            this.addTableData = list;
            this.addTotal = total;
          } else {
            this.$message.error(res.message);
            this.addLoading = false;
          }
        });
    },
    searchAddTable() {
      this.addForm.pageNum = 1;
      this.getPageDcList();
    },
    handleSelectionChangeAdd(val, data) {
      this.currentRowKeyAdd = val;
      this.multipleSelectionAdd = data;
    },
    handleCurrentChangeAdd(item) {
      this.addForm.pageNum = item.current;
      this.getPageDcList();
    },
    handleDelete(row) {
      this.$confirm({
        title: '提示',
        content: '确定删除吗?',
        okType: 'warning',
        onOk: () => {
          request
            .post(`/bis/insp/bisInspYwptAssociation/delete/${row.id}`)
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功!');
                this.getTableData();
              } else {
                this.$message.error(res.message);
              }
            });
        },
      });
    },
  },
};
</script>

<style lang='less' scoped>
/deep/ .ant-layout-sider,
/deep/ .ant-layout-header,
/deep/ .ant-layout-content {
  background: #fff;
}

/deep/ .ant-table-scroll {
  position: relative;
  z-index: 1;
}

.ywpt_table {
  /deep/ .ant-table-pagination {
    float: left;
  }
  /deep/ .ant-table-thead > tr > th,
  /deep/ .ant-table-tbody > tr > td {
    padding: 0;
    height: 36px;
  }
}
</style>
