<template>
  <!-- 弹出窗 -->
    <el-dialog title="添加稽察对象" v-model:visible="dialogFormVisible" width="80%" @close="CloseDialog" :modal-append-to-body="true" :append-to-body="true">
        <el-container>
            <el-aside width="200px" style="border:1px solid #d5d5ff">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">
                    <el-icon><Share /></el-icon>所属机构
                </p>
              <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all="true"></el-tree>
            </el-aside>
            <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">督查对象</p>
                <el-form style="padding:10px">
                    <div>
                        <el-form size="small" :inline="true" class="demo-form-inline">
                            <el-form-item label="项目名称">
                                <el-input style="width:140px;" v-model="searchNameOfSzName" clearable placeholder="请输入项目名称" ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="refreshCurrentShow">查询</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table
                            border
                            v-loading="loading"
                            :data="currentShowList"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column align="center" type="selection" width="60"></el-table-column>
                            <el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="name" label="项目名称" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="type" label="项目类型" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="location" label="位置" min-width="150"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="admOrg" label="所属流域机构" min-width="100"></el-table-column>
                        </el-table>
                        <div class="block"
                            style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;background-color: #fff;">
                            <el-pagination
                                small
                                @current-change="handleCurrentChange"
                                :pager-count="5"
                                :current-page="pageIndex"
                                :page-size="pageSize"
                                layout="total, prev, pager, next"
                                :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </el-form>
            </el-main>
        </el-container>
        <el-dialog title="添加项目" v-model:visible="addObjDialogVisible" append-to-body>
          <el-form label-width="120px" :model="formObj" ref="formObj">
            <el-form-item label="项目名称" required >
              <el-input v-model="formObj.name" autocomplete="off" style="width:70%;"></el-input>
            </el-form-item>
                    <el-form-item label="项目类型" required>
                        <el-input v-model="formObj.type" autocomplete="off" style="width:70%;"></el-input>
            </el-form-item>

            <el-form-item label="行政区域" required>
              <div>
                <el-select v-model="provName" placeholder="选择省" @change="provChange" style="width:20%">
                  <el-option
                    v-for="item in provList"
                    :key="item.adCode"
                    :label="item.adName"
                    :value="item.adCode">
                  </el-option>
                </el-select>
                <el-select v-model="cityName" placeholder="选择市" @change="cityChange" style="width:20%">
                  <el-option
                    v-for="item in cityList"
                    :key="item.adCode"
                    :label="item.adName"
                    :value="item.adCode">
                  </el-option>
                </el-select>
                <el-select v-model="countryName" placeholder="选择县" @change="countryChange" style="width:20%">
                  <el-option
                    v-for="item in countryList"
                    :key="item.adCode"
                    :label="item.adName"
                    :value="item.adCode">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="所在地点" required >
              <el-input v-model="formObj.location" autocomplete="off" style="width:70%;"></el-input>
            </el-form-item>
                    <el-form-item label="流域机构"  >
              <el-input v-model="formObj.admOrg" autocomplete="off" style="width:70%;"></el-input>
            </el-form-item>

            <el-form-item label="经度">
                <el-input v-model="formObj.centerX" autocomplete="off" style="width:70%;"></el-input>
            </el-form-item>
            <el-form-item label="纬度">
                <el-input v-model="formObj.centerY" autocomplete="off" style="width:70%;"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addObjDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addNewJcObj('formObj')">确 定</el-button>
          </div>
        </el-dialog>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveChange">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import request from '@/utils/gw_ajax_request.js';
export default {
  components: {
    Share,},
  props: ['dczId', 'dczName', 'plnaId', 'objType', 'nodeAreaList', 'nodeRow'],
  computed: {
    userId: () =>
      localStorage.getItem('userid')
        ? localStorage.getItem('userid')
        : '1098101939614724096',
  },
  data() {
    return {
      addOnce: false,
      searchNameOfSzName: '',
      searchNameOfAdName: '',
      searchNameOfwtdstNm: '',
      rsAdmDep: '',
      type: '',
      wtdstState: '',
      engLevel: '',
      wtdstType: '',
      stnm: '',
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      currentShowList: [],
      dialogFormVisible: true,
      formLabelWidth: '120',
      addArr: '',
      addName: '',
      addLttd: '',
      addLgtd: '',
      multipleSelection: [],
      gongchengguimo: [
        {
          value: '类型一',
          label: '类型一',
        },
        {
          value: '类型二',
          label: '类型二',
        },
      ],
      searchProvTreeListCode: '',
      qyDataList: [],
      loading: false,
      showLeftTree: true,
      addObjDialogVisible: false,
      formObj: {
        name: '',
        admOrg: '',
        rsLoc: '',
        location: '',
        intm: '',
        type: '',
        regCode: '',
        centerX: '',
        centerY: '',
        adCode: '',
      },
      currentAdCode: '',
      props: {
        value: 'id',
        label: 'label',
        children: 'cities',
      },
      provList: [],
      cityList: [],
      countryList: [],
      provName: '',
      cityName: '',
      countryName: '',
      provNames: '',
      cityNames: '',
      countryNames: '',
      curSelectItem: 0,
      treeData: [],
      defaultProps: {
        label: 'adName',
      },
      leftAdCode: '',
      ifLeftClick: true,
    };
  },
  watch: {
    nodeAreaList(n) {
      this.$nextTick(() => {
        this.treeData = n;
      });
    },
    leftAdCode() {
      this.getTableData_jc();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getTableData_jc();
      this.treeData = this.nodeAreaList;
    });
  },
  computed: {
    userId: () =>
      localStorage.getItem('userid')
        ? localStorage.getItem('userid')
        : '1098101939614724096',
  },
  methods: {
    gateTypeFormatter(row, column) {
      return row.gateType == '1'
        ? '分(泄)洪闸'
        : row.gateType == '2'
          ? '节制闸'
          : row.gateType == '3'
            ? '排(退)水闸'
            : row.gateType == '4'
              ? '引(进)水闸'
              : row.gateType == '5'
                ? '挡潮闸'
                : row.gateType == '6'
                  ? '船闸'
                  : row.gateType == '9'
                    ? '其它'
                    : '';
    },
    showDialog() {
      this.dialogFormVisible = true;
      this.getTableData_jc();
    },
    saveChange() {
      this.addObjectChange();
    },
    treeDataEmit(item) {
      this.qyDataList = item;
      if (this.qyDataList.length == 0) {
        this.showLeftTree = false;
      } else {
        this.showLeftTree = true;
      }
    },
    getTableData_jc() {
      let str = '';
      if (this.ifLeftClick) {
        if (this.nodeAreaList && this.nodeAreaList.length > 0) {
          this.nodeAreaList.forEach((item) => {
            str += item.adCode + ',';
          });
        }
        this.leftAdCode = str.substring(0, str.length - 1);
      } else {
        this.leftAdCode = this.leftAdCode;
      }
      request
        .post(`/tac/insp/year/batch/obj/getBaseNotInGroupPageByGroupId`, {
          adCode: this.leftAdCode,
          ojbNm: this.searchNameOfSzName,
          pageSize: this.pageSize,
          pageNum: this.pageIndex,
          groupId: this.nodeRow.id,
        })
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              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) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.refreshCurrentShow();
    },
    refreshCurrentShow: function () {
      if (this.searchProvTreeListCode) {
        this.getTableData_jc1();
      } else {
        this.getTableData_jc();
      }
    },
    toAddNewObj() {
      this.provName = '';
      this.cityName = '';
      this.countryName = '';
      for (var obj in this.formObj) {
        this.formObj[obj] = '';
      }
      this.addObjDialogVisible = true;
      this.curSelectItem = null;
      this.getAreaList();
    },
    addNewJcObj(formName) {
      if (!this.formObj.name) {
        this.$message.warning('请输入项目名称');
        return;
      }
      if (!this.formObj.type) {
        this.$message.warning('请选择项目类型');
        return;
      }

      if (!this.formObj.location) {
        this.$message.warning('请输入所在地');
        return;
      }
      if (!this.provName) {
        this.$message.warning('请选择省');
        return;
      }
      this.formObj.adCode = this.currentAdCode;
      this.formObj.persId = this.userId;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request
            .post('/tac/att/pawp/base', this.formObj)
            .then((res) => {
              if (res.success) {
                this.$message.success('添加成功');
                this.getTableData_jc();
                this.addObjDialogVisible = false;
                this.formObj = {
                  name: '',
                  admOrg: '',
                  rsLoc: '',
                  location: '',
                  type: '',
                  regCode: '',
                  intm: '',
                  adCode: '',
                  centerX: '',
                  centerY: '',
                };
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((res) => {
              this.$message.error('请求错误' + res.message);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editHandler(row) {
      const rowObj = {};
      Object.assign(rowObj, row);
      this.formObj = rowObj;
      this.addObjDialogVisible = true;
      this.curSelectItem = null;
      this.getAreaList();
    },
    deleteHandler(row) {
      var url = '/tac/att/pawp/base/del/' + row.id;
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          request.get(url, {}).then((res) => {
            if (res.success) {
              this.$message.success('删除成功');
              this.getTableData_jc();
            } else {
              _this.$message.error('删除失败');
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    addObjectChange: function () {
      try {
        request
          .post('/tac/insp/year/batch/obj/inesrtBatchObj', {
            groupNm: this.nodeRow.group,
            groupId: this.nodeRow.id,
            persId: this.userId,
            yearBatchId: this.nodeRow.yearBatchId,
            baseList: this.multipleSelection,
          })
          .then((response) => {
            if (response.success == true) {
              this.dialogFormVisible = false;
              this.$message.success('添加成功');
              this.$emit('closeDialog');
            }
          });
      } catch (e) {
        alert('暂无数据');
      }
    },
    provTreeSelectChangeHandler: function (params) {
      this.searchProvTreeListCode = params.code;
      this.getTableData_jc1();
    },
    provTreeSelectChangeHandler_qy(params) {
      this.searchProvTreeListCode = params.code;
      this.getTableData_jc1();
    },
    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;
            }
          }
        });
    },
    provChange(val) {
      this.curSelectItem = 1;
      this.cityName = '';
      this.countryName = '';
      this.formObj.adCode = val;
      this.currentAdCode = 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.adCode = val;
        this.currentAdCode = 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.adCode = val;
        this.currentAdCode = val;
        this.countryList.forEach((ele) => {
          if (ele.adCode == this.countryName) {
            this.countryNames = ele.adName;
          }
        });
        this.formObj.location =
          this.provNames + this.cityNames + this.countryNames;
      }
    },
    handleNodeClick(node, data) {
      this.leftAdCode = '';
      console.log(node, data);
      this.leftAdCode = node.adCode;
      this.ifLeftClick = false;
    },
    CloseDialog() {
      this.$emit('closeDialog');
    },
  },
};
</script>
<style>
</style>
