<template>
  <a-modal
    title="新增农饮工程"
    :open="addNyVisible" @update:open="addNyVisible = $event"
    @ok="addNewNyPro"
    @cancel="cancelHandler"
    width="50%"
  >
    <a-form
      :model="formObj"
      ref="formObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 15 }"
    >
      <a-form-item label="工程名称">
        <a-input v-model:value="formObj.prjName" autocomplete="off" />
      </a-form-item>
      <a-form-item label="工程所属市县">
        <div v-if="showLocSelect">
          <a-select
            v-model:value="cityName"
            @change="cityChange"
            placeholder="选择市"
            style="margin-right: 10px;"
          >
            <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>
          &#x3000;
          <span
            v-if="showLocSelect"
            @click="showLocSelect = false"
            style="color: #009fff;font-size:12px;cursor:pointer"
          >取消</span
          >
        </div>
        <div v-else>
          <a-input v-model:value="formObj.adName" autocomplete="off" />
          &#x3000;
          <span
            @click="showLocSelect = true"
            style="color: #009fff;font-size:12px;cursor:pointer"
          >更改</span
          >
        </div>
      </a-form-item>
      <a-form-item label="工程地址">
        <a-input v-model:value="formObj.loc" autocomplete="off" />
      </a-form-item>
      <a-form-item label="水源类型">
        <a-input v-model:value="formObj.wtType" autocomplete="off" />
      </a-form-item>
      <a-form-item label="设计供水规模(m³/d)">
        <a-input v-model:value="formObj.desWasuScal" autocomplete="off" />
      </a-form-item>
      <a-form-item label="设计供水人口">
        <a-input v-model:value="formObj.desWsp" autocomplete="off" />
      </a-form-item>
      <a-form-item label="实际供水人口">
        <a-input v-model:value="formObj.actWsp" autocomplete="off" />
      </a-form-item>
      <a-form-item label="管理单位">
        <a-input v-model:value="formObj.mgDep" autocomplete="off" />
      </a-form-item>
      <a-form-item label="责任人名称">
        <a-input v-model:value="formObj.mgPers" autocomplete="off" />
      </a-form-item>
      <a-form-item label="责任人电话">
        <a-input v-model:value="formObj.mgPersTel" autocomplete="off" />
      </a-form-item>
      <a-form-item label="达标等级">
        <a-select v-model:value="formObj.lev" placeholder="请选择">
          <a-select-option
            v-for="item in levList"
            :key="item.value"
            :value="item.value"
          >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="经度">
        <a-input v-model:value="formObj.centerX" autocomplete="off" />
      </a-form-item>
      <a-form-item label="纬度">
        <a-input v-model:value="formObj.centerY" autocomplete="off" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import request from '../../utils/gw_ajax_request';
export default {
  data() {
    return {
      formObj: {},
      dialogFormVisible: false,
      currentResCode1: '',
      currentObjectId1: '',
      value1: '',
      provList: [],
      cityList: [],
      countryList: [],
      townList: [],
      villageList: [],
      provName: '',
      cityName: undefined,
      countryName: undefined,
      townName: '',
      villageName: '',
      provNames: '',
      cityNames: '',
      countryNames: '',
      townNames: '',
      villageNames: '',
      curSelectItem: 1,
      showLocSelect: false,
      locat: {
        location: '',
        adCode: '',
      },
      xcztShow: false,
      imageShow: false,
      xcztEngId: '',
      centerX: 0,
      centerY: 0,
      addNyVisible: true,
      levList: [
        { label: '一级', value: '1' },
        { label: '二级', value: '2' },
        { label: '三级', value: '3' },
      ],
    };
  },
  computed: {
    recPersId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
  },
  mounted() {
    this.getAreaList();
  },
  watch: {
    showLocSelect(val) {
      if (!val) {
        this.formObj.rvLoc = this.locat.location;
        this.formObj.adCode = this.locat.adCode;
        this.provName = '';
        this.cityName = '';
        this.countryName = '';
      }
    },
  },
  methods: {
    addNewNyPro() {
      this.formObj['persId'] = this.recPersId;
      console.log(this.formObj);
      // 基础信息纠错，经纬度修改粗略校验经度纬度整数部分的范围
      if (this.formObj.centerYGd < 4 || this.formObj.centerYGd > 54) {
        this.$message.error('纬度的整数范围应在4-54之间，请重新填写！');
        this.formObj.centerYGd = '';
        return;
      }
      if (this.formObj.centerXGd < 74 || this.formObj.centerXGd > 136) {
        this.$message.error('经度的整数范围应在74-136之间，请重新填写！');
        this.formObj.centerXGd = '';
        return;
      }
      try {
        this.$confirm({
          title: '提示',
          content: '确认保存基础信息？?',
          okType: 'warning',
          onOk: () => {
            request.post('/att/rdwpjx/base', this.formObj).then((res) => {
              if (res.success) {
                this.$emit('addShuiKuSuccess');
                this.showLocSelect = false;
                this.$message.success('添加成功');
              }
              this.$emit('cancelHandler');
            });
          },
        });
      } catch (e) {}
    },
    cancelHandler() {
      this.$emit('cancelHandler');
    },
    getAreaList(val) {
      const areaParams = {
        adName: '',
        id: this.dczId,
        pageNum: 1,
        pageSize: 10000,
      };
      let adCode = '';
      if (!val) {
        adCode = '360000000000';
      } 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 if (this.curSelectItem == 3) {
              this.townList = res.data;
            } else if (this.curSelectItem == 4) {
              this.villageList = res.data;
            } else {
              this.provList = res.data;
            }
          }
        });
    },
    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.townName = '';
        this.villageName = '';
        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) {
      this.curSelectItem = 3;
      if (val && val != '') {
        this.formObj.adCode = val;
        this.townName = '';
        this.villageName = '';
        this.countryList.forEach((ele) => {
          if (ele.adCode == this.countryName) {
            this.countryNames = ele.adName;
          }
        });
        this.formObj.adName =
          this.provNames + this.cityNames + this.countryNames;
        this.getAreaList(val);
      }
    },
    townChange(val) {
      this.curSelectItem = 4;
      if (val && val != '') {
        this.formObj.adCode = val;
        this.villageName = '';
        this.townList.forEach((ele) => {
          if (ele.adCode == this.townName) {
            this.townNames = ele.adName;
          }
        });
        this.formObj.adName =
          this.provNames + this.cityNames + this.countryNames + this.townNames;
        this.getAreaList(val);
      }
    },
    villageChange(val) {
      if (val && val != '') {
        this.formObj.adCode = val;
        this.villageList.forEach((ele) => {
          if (ele.adCode == this.villageName) {
            this.villageNames = ele.adName;
          }
        });
        this.formObj.adName =
          this.provNames +
          this.cityNames +
          this.countryNames +
          this.villageNames;
      }
    },
  },
};
</script>

<style lang="less" scoped>
:deep(form .ant-select) {
  width: 40%;
}
:deep(.ant-form-item) {
  margin-bottom: 10px;
}
</style>
