﻿﻿﻿﻿﻿﻿﻿﻿<template>
  <a-modal title="添加供水工程" width="60%" @cancel="closeDuChaDuiXiangDialog" :open="dialogFormVisible">
    <a-layout>
      <a-layout-content style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">督查对象</p>
        <a-form layout="inline" :label-col="{span: 6}" :wrapper-col="{span: 18}" style="padding:10px" class="demo-form-inline">
          <a-form-item label="供水工程名称">
            <a-input style="width:140px;" v-model:value="searchNameOfRsName" allow-clear placeholder="请输入供水工程名称"></a-input>
          </a-form-item>
          <a-form-item label="工程类型">
            <a-select v-model:value="engScal" placeholder="请选择" allow-clear style="width:200px;" >
              <a-select-option value="1">万人工程</a-select-option>
              <a-select-option value="2">千人工程</a-select-option>
              <a-select-option value="3">千人以下集中供水工程</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="refreshCurrentShow" size="small">查询</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="toAddNewRsvr" size="small">添加新供水工程</a-button>
          </a-form-item>
        </a-form>
        <a-table
          :data-source="currentShowList"
          :columns="columns"
          bordered
          :loading="loading"
          style="width: 100%"
          row-key="id"
          :row-selection="{
            columnWidth: 60,
            selectedRowKeys: selectedRowKeys,
            onChange: handleSelectionChange,
          }">
          <span slot="engType" slot-scope="text">
            {{ engScalFormatter(text) }}
          </span>
        </a-table>
        <a-pagination
          show-size-changer
          :pageSize.sync="pageSize"
          :total="total"
          :show-total="total => `共${total}条`"
          @change="handleCurrentChange"
          style="margin-top: 10px;" />
      </a-layout-content>
    </a-layout>
    <div slot="footer" class="dialog-footer">
      <a-button @click="closeDuChaDuiXiangDialog">取 消</a-button>
      <a-button type="primary" @click="saveChange">确 定</a-button>
    </div>
    <a-modal title="添加新供水工程" :open="addRsvrVisible" @cancel="addRsvrVisible = false" width="40%" >
      <a-form :model="formObj" :label-col="{span: 8}" :wrapper-col="{span: 16}" :rules="rules" ref="formObj">
        <a-form-item label="工程名称" prop="rsName">
          <a-input style="width:60%;" v-model:value="formObj.rsName" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="所在地点" prop="location">
          <a-input style="width:60%;" v-model:value="formObj.location" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="工程类型" prop="engType">
          <a-select v-model:value="formObj.engType" placeholder="请选择" allow-clear style="width:60%;">
            <a-select-option value="1">万人工程</a-select-option>
            <a-select-option value="2">千人工程</a-select-option>
            <a-select-option value="3">千人以下集中供水工程</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <div slot="footer" class="dialog-footer">
        <a-button @click="addRsvrVisible = false">取 消</a-button>
        <a-button type="primary" @click="addNewRsvr('formObj')">确 定</a-button>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import {
  addDcAndObjRel,
  getObjListNotInspGroupId,
} from '../../../api/duChaDuiXiang_xsk_API';
import request from '../../../utils/gw_ajax_request';
import provTreeList from '../../../widgets/provTreeList.vue';
import provTreeListQy from '../../../widgets/provTreeList_quyu.vue';
export default {
  components: {
    provTreeList: provTreeList,
    provTreeListQy,
  },
  props: [
    'dczId',
    'dczName',
    'plnaId',
    'objType',
    'rowData',
    'villageAdCode',
    'villageId',
  ],
  data() {
    return {
      addOnce: false,
      objTypeName: '小水库',
      xsk: true,
      ncys: false,
      shgc: false,
      dxs: false,
      searchNameOfRsName: '',
      searchNameOfAdName: '',
      searchNameOfwtdstNm: '',
      addLevel: '',
      rsAdmDep: '',
      engScal: '',
      wtdstState: '',
      engLevel: '',
      wtdstType: '',
      stnm: '',
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      currentShowList: [],
      dialogFormVisible: true,
      formLabelWidth: '120',
      addArr: '',
      addName: '',
      addLttd: '',
      addLgtd: '',
      multipleSelection: [],
      searchProvTreeListCode: '',
      qyDataList: [],
      loading: false,
      showLeftTree: true,
      addRsvrVisible: false,
      formObj: {
        rsName: '',
        rsAdmName: '',
        rsLoc: '',
        location: '',
        engType: '',
      },
      areasList: [],
      props: {
        value: 'id',
        label: 'label',
        children: 'cities',
      },
      rules: {
        rsName: [
          { required: true, message: '请输入工程名称', trigger: 'blur' },
        ],
        location: [
          { required: true, message: '请输入所在地点', trigger: 'blur' },
        ],
        engType: [
          { required: true, message: '请选择工程类型', trigger: 'blur' },
        ],
      },
      provList: [],
      cityList: [],
      countryList: [],
      provName: '',
      cityName: '',
      countryName: '',
      provNames: '',
      cityNames: '',
      countryNames: '',
      curSelectItem: 0,
      selectedRowKeys: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 40,
          align: 'center',
        },
        {
          title: '供水工程名称',
          dataIndex: 'cwsName',
          width: 100,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '所在地点',
          dataIndex: 'cwsLoc',
          width: 100,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '工程类型',
          dataIndex: 'engType',
          width: 80,
          align: 'center',
        },
      ],
    };
  },
  watch: {
    dczId: function (n, o) {
      this.searchProvTreeListCode = '';
    },
    qyDataList(n, o) {
      if (this.qyDataList.length == 0) {
        this.showLeftTree = false;
      } else {
        this.showLeftTree = true;
      }
      console.log('区域树' + n.length + this.showLeftTree + this.objType);
      if (this.objType == '1') {
        this.getTableData_sk();
        this.getAreaList();
      } else if (this.objType == '5') {
        this.getTableData_dxs();
      }
    },
  },
  mounted() {
    this.getTableData_sk();
  },
  computed: {
    userId: () =>
      localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096',
  },
  methods: {
    changeCurrentObjSelectName(item) {
      this.objType = item;
    },
    selectChange(val) {
      console.log(val);
      this.objType = val;
    },
    engScalFormatter: (row, column) =>
      row.engType == 1
        ? '万人工程'
        : row.engType == 2
          ? '千人工程'
          : row.engType == 3
            ? '千人以下集中供水工程'
            : '',
    wtdstStateFormatter: (row, column) =>
      row.wtdstState == 1 ? '已修复' : '未修复',
    rsAdmDepFormatter: (row, column) =>
      row.rsAdmDep == 1
        ? '水利部门'
        : row.rsAdmDep == 2
          ? '电力部门'
          : row.rsAdmDep == 3
            ? '农业部门'
            : row.rsAdmDep == 4
              ? '林业部门'
              : row.rsAdmDep == 5
                ? '城建部门'
                : row.rsAdmDep == 6
                  ? '航运部门'
                  : row.rsAdmDep == 7
                    ? '环保部门'
                    : '其他部门',
    adGradFormatter: (row, column) =>
      row.adGrad == 1
        ? '国家级'
        : row.adGrad == 2
          ? '省级'
          : row.adGrad == 3
            ? '地市级'
            : row.adGrad == 4
              ? '县级'
              : row.adGrad == 5
                ? '乡级'
                : row.adGrad == 6
                  ? '村'
                  : '村组',
    adNameFormatter: (row, column) => row.adName,
    adFullNameFormatter: (row, column) => row.adFullName,
    adCodeFormatter: (row, column) => row.adCode,
    saveChange() {
      this.addObjectChange();
    },
    treeDataEmit(item) {
      this.qyDataList = item;
      if (this.qyDataList.length == 0) {
        this.showLeftTree = false;
      } else {
        this.showLeftTree = true;
      }
    },
    getTableData_sk() {
      this.loading = true;
      const obj = {
        adCode: this.villageAdCode.substr(0, 6),
        engType: this.engScal,
        name: this.searchNameOfRsName,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        regstrId: this.rowData.regstrId,
      };
      request.post('/bis/insp/villjx/prjct/pageNotDC', obj).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: function (callBackFunction = null) {
      if (!this.dczId) {
        // this.dczId = 'jwW2Wihf5E9X3UC9t45fmSHyffUs2rzI';
      }
      if (this.objType == '1' || this.objType == '5') {
        return;
      }
      let str = '';
      for (var i = 0; i < this.qyDataList.length; i++) {
        str += this.qyDataList[i].adCode + ',';
      }
      str = str.substring(0, str.length - 1);
      getObjListNotInspGroupId(
        this.dczId,
        this.objType,
        this.pageSize,
        this.pageIndex,
        this.searchNameOfRsName, // 水库名称
        this.searchNameOfAdName, // 农村饮水行政区划名称
        this.searchNameOfwtdstNm, // 水毁工程名称
        this.engScal, // 水库-工程规模
        this.rsAdmDep, // 水库-归口管理部门
        this.wtdstType, // 水毁-工程类别
        this.wtdstState, // 水毁-修复状态
        this.searchProvTreeListCode == '' ? str : this.searchProvTreeListCode,
      ).then(
        (res) => {
          this.currentShowList = [];
          res.data.list.forEach((element, index) => {
            element['index'] = this.pageSize * (this.pageIndex - 1) + index + 1;
            this.currentShowList.push(element);
          });
          console.log(this.currentShowList);
          this.total = res.data.total;
          if (callBackFunction && typeof callBackFunction === 'function') {
            callBackFunction();
          }
        },
        (err) => {
          console.log('查询错误');
          if (callBackFunction && typeof callBackFunction === 'function') {
            callBackFunction();
          }
        },
      );
    },
    handleSelectionChange(val, row) {
      this.selectedRowKeys = val;
      this.multipleSelection = row;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.refreshCurrentShow();
    },
    refreshCurrentShow: function () {
      this.getTableData_sk();
    },
    addObjectChange: function () {
      const length = this.multipleSelection.length;
      for (let i = 0; i < length; i++) {
        this.addArr += this.multipleSelection[i].cwsCode + ';';
      }
      this.addArr = this.addArr.substr(0, this.addArr.length - 1);
      try {
        const obj = {
          villageId: this.villageId,
          cwsIds: this.addArr,
          rgstrId: this.rowData.rgstrId,
        };

        request.post(`/bis/insp/villjx/prjct/addBatch`, obj).then((res) => {
          if (res.success) {
            this.dialogFormVisible = false;
            this.$message.success('添加成功');
            this.$emit('addSuccess');
            _self.addArr = '';
          } else {
            this.$message.warning(res.message);
          }
        });
      } catch (e) {
        alert('暂无数据');
      }
    },
    provTreeSelectChangeHandler: function (params) {
      this.searchProvTreeListCode = params.code;
      if (this.objType == '1') {
        this.getTableData_sk1();
      } else if (this.objType == '2' || this.objType == '3') {
        this.getTableData();
      } else {
      }
    },
    provTreeSelectChangeHandler_qy(params) {
      this.searchProvTreeListCode = params.code;
      if (this.objType == '1') {
        this.getTableData_sk1();
      } else if (this.objType == '5') {
        this.getTableData_dxs1();
      } else if (this.objType == '2' || this.objType == '3') {
        this.getTableData();
      }
    },
    toAddNewRsvr() {
      this.cityList = [];
      this.countryList = [];
      this.provList = [];
      this.provName = '';
      this.cityName = '';
      this.countryName = '';
      for (var obj in this.formObj) {
        this.formObj[obj] = '';
      }
      this.addRsvrVisible = true;
      this.curSelectItem = null;
      this.getAreaList();
    },
    addNewRsvr(formName) {
      const obj = {
        addvcd: this.villageAdCode,
        cwsName: this.formObj.rsName,
        cwsLoc: this.formObj.location,
        engType: this.formObj.engType,
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request
            .post('/dc/att/cwsBase/insert', obj)
            .then((res) => {
              if (res.success) {
                this.$message.success('添加成功');
                this.getTableData_sk();
                this.addRsvrVisible = false;
              } else {
                _this.$message.error(res.message);
              }
            })
            .catch((res) => {
              this.$message.error(res.message);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getAreaList(val) {
      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;
            }
          }
        });
    },
    handleItemChange(val) {
      this.getAreaList(val);
    },
    provChange(val) {
      this.curSelectItem = 1;
      this.cityName = '';
      this.countryName = '';
      this.formObj.admDiv = val;
      this.provList.forEach((ele) => {
        if (ele.adCode == this.provName) {
          this.provNames = ele.adName;
        }
      });
      this.formObj.location = this.provNames;
      this.getAreaList(val);
    },
    cityChange(val) {
      this.curSelectItem = 2;
      if (val && val != '') {
        this.formObj.admDiv = val;
        this.countryName = '';
        this.cityList.forEach((ele) => {
          if (ele.adCode == this.cityName) {
            this.cityNames = ele.adName;
          }
        });
        this.formObj.location = this.provNames + this.cityNames;
        this.getAreaList(val);
      }
    },
    countryChange(val) {
      if (val && val != '') {
        this.formObj.admDiv = val;
        this.countryList.forEach((ele) => {
          if (ele.adCode == this.countryName) {
            this.countryNames = ele.adName;
          }
        });
        this.formObj.location =
          this.provNames + this.cityNames + this.countryNames;
      }
    },

    closeDuChaDuiXiangDialog() {
      this.dialogFormVisible = false;
      this.$emit('closeDuChaDuiXiangDialog');
    },
  },
};
</script>

<style lang='less' scoped>

</style>
