<template>
  <a-modal
    title="添加督查对象"
    :open="dialogFormVisible"
    @ok="saveChange"
    @cancel="dialogFormVisible = false"
    width="80%"
  >
    <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>
        <provTreeListQy
          ref="provTreeListQyRef"
          v-show="showLeftTree"
          :ddczId="dczId"
          rootCode="000000"
          rootType="1"
          style="max-height:485px;"
          @treeDataEmit="treeDataEmit"
          @provTreeSelectChange="provTreeSelectChangeHandler_qy"
        >
        </provTreeListQy>
        <provTreeList
          v-show="!showLeftTree"
          rootCode="000000"
          rootType="1"
          style="max-height:485px;"
          @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>
        <div style="padding:10px">
          <a-form layout="inline">
            <a-form-item label="电站名称">
              <a-input
                v-model:value="searchNameOfSdName"
                placeholder="请输入电站名称"
                allow-clear
              />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="refreshCurrentShow">
                查询
              </a-button>
            </a-form-item>
          </a-form>
          <a-table
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: handleSelectionChange,
            }"
            :columns="columns"
            :data-source="currentShowList"
            @change="handleCurrentChange"
            :loading="loading"
            rowKey="index"
            :pagination="{
              total,
              defaultPageSize: pageSize,
              showTotal: (total) => `共${total}条`,
            }"
            style="width: 100%;"
          >
            <template #bodyCell="{ column, record, text, index }">
              <template v-if="column.dataIndex === 'hystType'">
                <span v-if="record.hystType == '1'">引水式</span>
                <span v-else-if="record.hystType == '2'">水库枢纽式</span>
                <span v-else-if="record.hystType == '3'">河床式</span>
                <span v-else>{{ record.hystType }}</span>
              </template>
            </template>
          </a-table>
        </div>
      </a-layout-content>
    </a-layout>
  </a-modal>
</template>

<script>
import { getSupObjListNotInspGroupId } from '../../api/duChaPlan.js';
import request from '../../utils/gw_ajax_request.js';
import provTreeList from '../../widgets/provTreeList.vue';
import provTreeListQy from '../../widgets/provTreeList_quyu.vue';

export default {
  props: ['dczId', 'dczName', 'plnaId', 'objType'],
  data() {
    return {
      addOnce: false,
      searchNameOfSdName: '',
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      currentShowList: [],
      dialogFormVisible: false,
      formLabelWidth: '120',
      addArr: '',
      addName: '',
      addLttd: '',
      addLgtd: '',
      multipleSelection: [],
      searchProvTreeListCode: '',
      qyDataList: [],
      loading: false,
      showLeftTree: true,
      addRsvrVisible: false,
      props: {
        value: 'id',
        label: 'label',
        children: 'cities',
      },
      selectedRowKeys: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '电站名称',
          dataIndex: 'name',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '电站规模（kw）',
          dataIndex: 'insCap',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '开发方式',
          dataIndex: 'hystType',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '所在位置',
          dataIndex: 'loc',
          align: 'center',
          ellipsis: true,
        },
      ],
    };
  },
  components: {
    provTreeListQy,
    provTreeList,
  },
  watch: {
    dczId: function (n, o) {
      this.searchProvTreeListCode = '';
    },
    objType: function (n, o) {
      this.searchProvTreeListCode = '';
      this.objType = n;
    },
    qyDataList(n, o) {
      if (this.qyDataList.length == 0) {
        this.showLeftTree = false;
      } else {
        this.showLeftTree = true;
      }
      console.log('区域树' + n.length + this.showLeftTree + this.objType);
      this.getTableData_sz();
    },
  },
  computed: {
    userId: () =>
      localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096',
  },
  mounted() {
    this.getTableData_sz();
  },
  methods: {
    showDialog() {
      this.dialogFormVisible = true;
      if (this.$refs['provTreeListQyRef']) {
        this.$refs['provTreeListQyRef'].getQyList();
      }
      this.getTableData_sz();
    },
    saveChange() {
      this.selectedRowKeys = [];
      this.addObjectChange();
    },
    treeDataEmit(item) {
      this.qyDataList = item;
      if (this.qyDataList.length == 0) {
        this.showLeftTree = false;
      } else {
        this.showLeftTree = true;
      }
    },
    getTableData_sz() {
      if (this.qyDataList.length == 0) {
        this.showLeftTree = false;
      } else {
        this.showLeftTree = true;
      }
      this.loading = true;
      var str = '';
      for (var i = 0; i < this.qyDataList.length; i++) {
        str += this.qyDataList[i].adCode + ',';
      }
      str = str.substring(0, str.length - 1);
      getSupObjListNotInspGroupId(
        str,
        this.dczId,
        '',
        this.pageSize,
        this.pageIndex,
        '59',
        this.searchNameOfSdName,
        '',
      ).then((res) => {
        this.loading = false;
        this.currentShowList = res.data.list;
        this.currentShowList.forEach((element, index) => {
          element['index'] = this.pageSize * (this.pageIndex - 1) + index + 1;
        });
        this.total = res.data.total;
      });
    },
    getTableData_sz1() {
      getSupObjListNotInspGroupId(
        this.searchProvTreeListCode,
        this.dczId,
        '',
        this.pageSize,
        this.pageIndex,
        '59',
        this.searchNameOfSdName,
        '',
      ).then((res) => {
        this.loading = false;
        this.currentShowList = res.data.list;
        this.currentShowList.forEach((element, index) => {
          element['index'] = this.pageSize * (this.pageIndex - 1) + index + 1;
        });
        this.total = res.data.total;
      });
    },
    handleSelectionChange(val, row) {
      this.selectedRowKeys = val;
      this.multipleSelection = row;
    },
    handleCurrentChange(val) {
      this.pageIndex = val.current;
      this.refreshCurrentShow();
    },
    refreshCurrentShow: function () {
      if (this.searchProvTreeListCode) {
        this.getTableData_sz1();
      } else {
        this.getTableData_sz();
      }
    },
    addObjectChange() {
      if (this.addOnce) {
        this.addOnce = false;
        return;
      }
      this.addOnce = true;
      var objArr = [];
      const length = this.multipleSelection.length;
      for (let i = 0; i < length; i++) {
        var obj = {};
        obj['code'] = this.multipleSelection[i].code;
        obj['name'] = this.multipleSelection[i].name;
        obj['ptype'] = '59';
        objArr.push(obj);
      }
      try {
        request
          .post('/supervision/plan/insertSupervisionObj', {
            persid: this.userId,
            nm: this.dczName,
            id: this.dczId,
            persAllAreaDtoList: [],
            persAllDtoList: [],
            persAllObjDtoList: objArr,
          })
          .then((response) => {
            if (response.success == true) {
              this.addOnce = false;
              this.dialogFormVisible = false;
              this.$message.success('添加成功');
              this.$emit('addSuccess');
            }
          });
      } catch (e) {
        alert('暂无数据');
      }
    },
    provTreeSelectChangeHandler(params) {
      this.searchProvTreeListCode = params.code;
      this.getTableData_sz1();
    },
    provTreeSelectChangeHandler_qy(params) {
      this.searchProvTreeListCode = params.code;
      this.getTableData_sz1();
    },
  },
};
</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;
}
:deep(.form .ant-select) {
  width: 20%;
}
:deep(.ant-form-item) {
  margin-bottom: 10px;
}
</style>
