﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿<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="searchNameOfSzName"
                placeholder="请输入名称"
                allow-clear
              />
            </a-form-item>
            <a-form-item label="督查类别">
              <a-select
                v-model:value="type"
                placeholder="督查类别"
                allow-clear
                style="width: 110px"
              >
                <a-select-option
                  v-for="item in commonType"
                  :key="item.dictTypeCd"
                  :value="item.dictTypeCd"
                >{{ item.dictTypeDesc }}</a-select-option
                >
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="refreshCurrentShow">
                查询
              </a-button>
              <a-button
                type="primary"
                @click="addRsvrVisible = true"
                style="margin-left: 10px;"
              >
                添加对象
              </a-button>
            </a-form-item>
          </a-form>
          <a-table
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: handleSelectionChange,
              getCheckboxProps: getCheckboxProps,
            }"
            :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 }">
              <span v-if="column.dataIndex === 'prjType'">
                <img
                  src="../../assets/images/choucha.png"
                  v-if="record.prjType == 'province'"
                  style="width: 25px;height:20px;float: left;"
                />
                <img
                  src="../../assets/images/zicha.png"
                  v-if="record.prjType == 'other'"
                  style="width: 25px;height:20px;float: left;"
                />
              </span>
            </template>
          </a-table>
        </div>
      </a-layout-content>
    </a-layout>
    <a-modal
      title="添加新对象"
      v-model:open="addRsvrVisible"
      @ok="addNewObj('formObj')"
      @cancel="addRsvrVisible = false"
      width="50%"
    >
      <a-form
        :model="formObj"
        ref="formObj"
        :label-col="{ span: 4 }"
        style="max-width:100%"
      >
        <a-form-item label="对象名称" required>
          <a-input v-model:value="formObj.nm" autocomplete="off" />
        </a-form-item>
        <a-form-item label="行政区域" required>
          <div>
            <a-select
              v-model:value="provName"
              @change="provChange"
              placeholder="选择省"
            >
              <a-select-option
                v-for="item in provList"
                :key="item.adCode"
                :value="item.adCode"
              >{{ item.adName }}</a-select-option
              >
            </a-select>
            <a-select
              v-model:value="cityName"
              @change="cityChange"
              placeholder="选择市"
            >
              <a-select-option
                v-for="item in cityList"
                :key="item.adCode"
                :value="item.adCode"
              >{{ item.adName }}</a-select-option
              >
            </a-select>
            <a-select
              v-model:value="countryName"
              @change="countryChange"
              placeholder="选择县"
            >
              <a-select-option
                v-for="item in countryList"
                :key="item.adCode"
                :value="item.adCode"
              >{{ item.adName }}</a-select-option
              >
            </a-select>
          </div>
        </a-form-item>
        <a-form-item label="督查类别" required>
          <a-select
            v-model:value="formObj.objType"
            placeholder="督查类别"
            allow-clear
          >
            <a-select-option
              v-for="item in commonType"
              :key="item.dictTypeCd"
              :value="item.dictTypeCd"
            >{{ item.dictTypeDesc }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="工程位置" required>
          <a-input v-model:value="formObj.loc" autocomplete="off" />
        </a-form-item>
        <a-form-item label="经度">
          <a-input v-model:value="formObj.gdX" autocomplete="off" />
        </a-form-item>
        <a-form-item label="纬度">
          <a-input v-model:value="formObj.gdY" autocomplete="off" />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model:value="formObj.note" autocomplete="off" />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-modal>
</template>

<script>
import { h } from 'vue';
import { getSupObjListNotInspGroupIdTwo } from '../../api/duChaPlan';
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 {
      type: undefined,
      commonType: [],
      addOnce: false,
      searchNameOfSzName: '',
      searchNameOfAdName: '',
      searchNameOfwtdstNm: '',
      rsAdmDep: '',
      engScal: '',
      wtdstState: '',
      engLevel: '',
      wtdstType: '',
      stnm: '',
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      currentShowList: [],
      dialogFormVisible: false,
      formLabelWidth: '120',
      addArr: '',
      addName: '',
      addLttd: '',
      addLgtd: '',
      multipleSelection: [],
      searchProvTreeListCode: '',
      qyDataList: [],
      loading: false,
      showLeftTree: true,
      addRsvrVisible: false,
      formObj: {
        nm: '',
        adCode: '',
        adName: '',
        loc: '',
        objType: '',
        gdX: '',
        gdY: '',
        note: '',
        ownerOfc: '',
      },
      props: {
        value: 'id',
        label: 'label',
        children: 'cities',
      },
      provList: [],
      cityList: [],
      countryList: [],
      provName: '',
      cityName: '',
      countryName: '',
      provNames: '',
      cityNames: '',
      countryNames: '',
      curSelectItem: 0,
      selectedRowKeys: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '对象名称',
          dataIndex: 'nm',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '行政区划',
          dataIndex: 'adName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '督查类别',
          dataIndex: 'type',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '督查分类',
          dataIndex: 'prjType',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '位置',
          dataIndex: 'location',
          align: 'center',
          ellipsis: true,
        },
      ],
    };
  },
  components: {
    provTreeListQy,
    provTreeList,
  },
  watch: {
    dczId: function (n, o) {
      this.searchProvTreeListCode = '';
    },
    objType: function (n, o) {
      this.searchProvTreeListCode = '';
      this.objType = n;
      console.log(this.objType, 'xxxxxxx1');
      this.getAreaList();
    },
    qyDataList(n, o) {
      if (this.qyDataList.length == 0) {
        this.showLeftTree = false;
      } else {
        this.showLeftTree = true;
      }
      this.getTableData_172();
      this.getAreaList();
    },
  },
  computed: {
    userId: () =>
      localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096',
    isAdCodeChecked: () => {
      const adCode = localStorage.getItem('currentAdCode')
        ? localStorage.getItem('currentAdCode')
        : '';
      const s = adCode.replaceAll('00', '');
      console.log(s, 's');
      return s.length === 2;
    },
  },
  created() {
    this.getCommonDict();
  },
  mounted() {
    this.getTableData_172();
  },
  methods: {
    getCheckboxProps(row) {
      let isChecked = false;
      if (this.isAdCodeChecked) {
        if (row.prjType === 'province') {
          isChecked = true;
        }
      } else {
        if (row.prjType === 'other') {
          isChecked = true;
        }
      }
      return {
        prop: {
          disabled: isChecked,
          prjType: row.prjType,
        },
      };
    },
    getCommonDict() {
      request
        .get('/dict/type/by/gnrl')
        .then((res) => {
          console.log(res, 'res');
          if (res.success) {
            this.commonType = res.data;
            this.columns.forEach((item) => {
              if (item.title == '督查类别') {
                item.customRender = (value, row, index) => {
                  let name = '';
                  this.commonType.forEach((item) => {
                    if (item.dictTypeCd == row.type) {
                      name = item.dictTypeDesc;
                    }
                  });
                  return h('span', null, name);
                };
              }
            });
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((res) => {
          this.$message.error('请求错误' + res.message);
        });
    },
    addNewObj(formName) {
      if (!this.formObj.nm) {
        this.$message.warning('请输入对象名称');
        return;
      }
      if (!this.provName) {
        this.$message.warning('请选择省份');
        return;
      }
      if (!this.cityName) {
        this.$message.warning('请选择市区');
        return;
      }
      if (!this.countryName) {
        this.$message.warning('请选择区县');
        return;
      }
      if (!this.formObj.objType) {
        this.$message.warning('请选择督查类别');
        return;
      }
      if (!this.formObj.loc) {
        this.$message.warning('请输入工程位置');
        return;
      }
      this.commonType.forEach((item) => {
        if (this.formObj.objType == item.dictTypeCd) {
          this.formObj.ownerOfc = item.ownerOfc;
        }
      });
      request
        .post('/att/gnrl/base', this.formObj)
        .then((res) => {
          if (res.success) {
            this.$message.success('添加成功');
            this.getTableData_172_1();
            this.addRsvrVisible = false;
            this.provName = '';
            this.cityName = '';
            this.countryName = '';
            this.formObj = {};
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((res) => {
          this.$message.error('请求错误' + res.message);
        });
    },
    showDialog() {
      this.dialogFormVisible = true;
      this.pageIndex = 1;
      this.pageSize = 10;
      if (this.$refs['provTreeListQyRef']) {
        this.$refs['provTreeListQyRef'].getQyList();
      }
      this.getTableData_172();
    },
    saveChange() {
      this.selectedRowKeys = [];
      this.addObjectChange();
    },
    treeDataEmit(item) {
      this.qyDataList = item;
      if (this.qyDataList.length == 0) {
        this.showLeftTree = false;
      } else {
        this.showLeftTree = true;
      }
    },
    getTableData_172() {
      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);
      getSupObjListNotInspGroupIdTwo(
        str,
        this.dczId,
        '',
        this.pageSize,
        this.pageIndex,
        this.objType,
        this.searchNameOfSzName,
        this.type,
        this.isAdCodeChecked,
      ).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_172_1() {
      getSupObjListNotInspGroupIdTwo(
        this.searchProvTreeListCode,
        this.dczId,
        '',
        this.pageSize,
        this.pageIndex,
        this.objType,
        this.searchNameOfSzName,
        this.type,
        this.isAdCodeChecked,
      ).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_172_1();
      } else {
        this.getTableData_172();
      }
    },
    addObjectChange: function () {
      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].nm;
        obj['objId'] = this.multipleSelection[i].objId;
        obj['ptype'] = this.objType;
        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');
            }
          });
        // addDcAndObjRel(
        //   _self.addArr,
        //   _self.addName,
        //   _self.addLttd,
        //   _self.addLgtd,
        //   _self.objType,
        //   _self.dczId,
        //   _self.plnaId,
        //   _self.plnaId,
        // ).then(response => {
        //   if (response.success == true) {
        //     _self.addOnce = false;
        //     this.dialogFormVisible = false;
        //     // this.getTableData();
        //     this.$message.success("添加成功");
        //     this.$emit("addSuccess");
        //     // _self.dczId = "";
        //     _self.addArr = "";
        //   }
        // });
      } catch (e) {
        alert('暂无数据');
      }
    },

    provTreeSelectChangeHandler: function (params) {
      this.searchProvTreeListCode = params.code;
      this.getTableData_172_1();
    },
    provTreeSelectChangeHandler_qy(params) {
      this.searchProvTreeListCode = params.code;
      this.getTableData_172_1();
    },
    provChange(val) {
      this.curSelectItem = 1;
      this.cityName = '';
      this.countryName = '';
      this.formObj.adCode = val;
      this.provList.forEach((ele) => {
        if (ele.adCode == this.provName) {
          this.provNames = ele.adName;
        }
      });
      this.formObj.adName = this.provNames;
      this.getAreaList(val);
    },
    cityChange(val) {
      this.curSelectItem = 2;
      if (val && val != '') {
        this.formObj.adCode = val;
        this.countryName = '';
        this.cityList.forEach((ele) => {
          if (ele.adCode == this.cityName) {
            this.cityNames = ele.adName;
          }
        });
        this.formObj.adName = this.provNames + this.cityNames;
        this.getAreaList(val);
      }
    },
    countryChange(val) {
      if (val && val != '') {
        this.formObj.adCode = val;
        this.countryList.forEach((ele) => {
          if (ele.adCode == this.countryName) {
            this.countryNames = ele.adName;
          }
        });
        this.formObj.adName =
          this.provNames + this.cityNames + this.countryNames;
      }
    },
    getAreaList(val) {
      const areaParams = {
        adName: '',
        id: this.dczId,
        pageNum: 1,
        pageSize: 10000,
      };
      let adCode = '';
      if (!val) {
        adCode = '000000000000';
      } else {
        adCode = val;
      }
      request
        .get('/dc/ad/base/getAdData', { params: { adCode: adCode } })
        .then((res) => {
          if (res.success) {
            if (this.curSelectItem == 1) {
              this.cityList = res.data;
            } else if (this.curSelectItem == 2) {
              this.countryList = res.data;
            } else {
              this.provList = res.data;
            }
          }
        });
    },
  },
};
</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: 28%;
}
:deep(.ant-form-item) {
  margin-bottom: 10px;
}
</style>
