<template>
  <div id="">
    <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 :model="formObj" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
          <p style="margin-top:10px;margin-bottom: 10px;overflow: hidden;">
            <a-icon type="caret-right" />
            <span style="width:120px;padding-left: 10px">基本信息</span>
            <span class="hrs"></span>
            <a-button type="danger" style="float: right;" @click="recentAppearance">近期面貌</a-button>
            <a-button type="danger" style="float: right; margin-right: 10px;" @click="imageClick">影像</a-button>
          </p>
          <a-form-item label="水源名称">
            <a-input v-model:value="formObj.nm" autocomplete="off" style="width:90%;"></a-input>
          </a-form-item>
          <a-form-item label="水源地址">
            <a-input v-model:value="formObj.loc" autocomplete="off" style="width:90%;" allow-clear></a-input>
          </a-form-item>
          <a-form-item label="计划完工时间">
            <a-date-picker v-model:value="formObj.planCpmTm" placeholder="选择日期"></a-date-picker>
          </a-form-item>
          <a-form-item label="主要建设内容">
            <a-textarea v-model:value="formObj.buldNote" autocomplete="off" allow-clear></a-textarea>
          </a-form-item>
          <a-form-item label="总投资（万元）">
            <a-input v-model:value="formObj.cost" autocomplete="off" allow-clear></a-input>
          </a-form-item>
          <a-form-item label="完成投资（万元）">
            <a-input v-model:value="formObj.comCost" autocomplete="off" allow-clear></a-input>
          </a-form-item>
          <a-form-item label="工程建设进展">
            <a-textarea v-model:value="formObj.prjPrsg" autocomplete="off" allow-clear></a-textarea>
          </a-form-item>
          <a-form-item label="经度">
            <a-input v-model:value="formObj.centerX" autocomplete="off" allow-clear></a-input>
          </a-form-item>
          <a-form-item label="纬度">
            <a-input v-model:value="formObj.centerY" autocomplete="off" allow-clear></a-input>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="addHandler" v-if="openType">保 存</a-button>
          </a-form-item>
        </a-form>
      </a-layout-content>
    </a-layout>
    <theRecentAppearance
      v-if="xcztShow"
      @jqmmDialogClose="jqmmDialog"
      :jqmmShow="xcztShow"
      :openType="openType"
      :jqmmEngId="currentObjectRgstrId"
      :dialogTitle="currentObjectName + '近期面貌'"
      style="z-index: 9999;">
    </theRecentAppearance>
    <a-modal :title="currentObjectName + '影像'" :open="imageShow" width="60%" @cancel="imageShow = false">
      <div style="height: 60vh;">
        <mapLocation ref="mapRef" v-if="imageShow" :gdX="centerX" :gdY="centerY"></mapLocation>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getrgstrIdObjectById_yjbysy } from '../../../api/duChaTianBao';
import request from '../../../utils/gw_ajax_request';
import { dateFormat } from '../../../utils/gw_date';
import unlimitDatePicker from '../../../widgets/baseWidget/unLimitdatePicker.vue';
import inputWith from '../../../widgets/inuptWith.vue';
import theRecentAppearance from '../../duChaDuiXiang/theRecentAppearance';
import mapLocation from '../mapLocation';

export default {
  components: {
    inputWith: inputWith,
    unlimitDatePicker: unlimitDatePicker,
    theRecentAppearance,
    mapLocation,
  },
  props: [
    'id',
    'currentObjectRgstrId',
    'currentResCode',
    'currentObjectId',
    'currentObjectName',
    'openType',
  ],
  data() {
    return {
      formObj: {
        nm: '',
        adCode: '',
        adName: '',
        loc: '',
        planCpmTm: '',
        buldNote: '',
        cost: '',
        comCost: '',
        prjPrsg: '',
      },
      dialogFormVisible: false,
      formLabelWidth: '160px',
      loading: true,
      operationType1: '',
      currentResCode1: '',
      currentObjectId1: '',
      value1: '',
      provList: [],
      cityList: [],
      countryList: [],
      provName: '',
      cityName: '',
      countryName: '',
      provNames: '',
      cityNames: '',
      countryNames: '',
      curSelectItem: 0,
      showLocSelect: false,
      locat: {
        location: '',
        admDiv: '',
      },
      xcztShow: false,
      imageShow: false,
      xcztEngId: '',
      centerX: 0,
      centerY: 0,
    };
  },
  computed: {
    recPersId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
  },
  watch: {
    id(n, o) {
      this.getRgstridObj();
    },
    showLocSelect(val) {
      if (!val) {
        this.formObj.rvLoc = this.locat.location;
        this.formObj.admDiv = this.locat.admDiv;
        this.provName = '';
        this.cityName = '';
        this.countryName = '';
      }
    },
  },
  mounted() {
    this.currentResCode1 = this.currentResCode;
    this.currentObjectId1 = this.currentObjectId;
    this.getRgstridObj();
    this.getAreaList();
  },
  methods: {
    getRgstridObj() {
      getrgstrIdObjectById_yjbysy(this.currentObjectRgstrId).then(
        (res) => {
          if (res.data) {
            this.formObj = res.data;
          } else {
            this.formObj = {};
          }
        },
        (err) => {},
      );
    },
    addHandler() {
      this.formObj['persId'] = this.recPersId;
      this.formObj.objId = this.currentObjectId1;
      this.formObj.rgstrId = this.currentObjectRgstrId;
      try {
        this.$confirm({
          title: '提示',
          content: '确认保存基础信息？',
          okType: 'warning',
          onOk: () => {
            request.post('/bis/insp/wtsr', this.formObj).then((res) => {
              if (res.success) {
                this.showLocSelect = false;
                this.getRgstridObj();
                this.$message.success('修改成功');
              } else {
                this.$emit('cancelHandler');
              }
            });
          },
        });
      } catch (e) {}
    },
    cancelHandler() {
      this.$emit('cancelHandler');
    },
    formatRadio(val) {
      if (val == '1') {
        return '是';
      } else if (val == '0') {
        return '否';
      } else {
        return val;
      }
    },
    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;
            }
          }
        });
    },
    provChange(val) {
      this.curSelectItem = 1;
      this.cityName = '';
      this.countryName = '';
      this.provList.forEach((ele) => {
        if (ele.adCode == this.provName) {
          this.provNames = ele.adName;
        }
      });
      this.formObj.adName = this.provNames;
      this.formObj.adCode = val;
      this.getAreaList(val);
    },
    RsvrTypeChange(val) {},
    cityChange(val) {
      this.curSelectItem = 2;
      if (val && val != '') {
        this.countryName = '';
        this.cityList.forEach((ele) => {
          if (ele.adCode == this.cityName) {
            this.cityNames = ele.adName;
          }
        });
        this.formObj.adName = this.provNames + this.cityNames;
        this.formObj.adCode = val;
        this.getAreaList(val);
      }
    },
    countryChange(val) {
      if (val && val != '') {
        this.countryList.forEach((ele) => {
          if (ele.adCode == this.countryName) {
            this.countryNames = ele.adName;
          }
        });
        this.formObj.adName =
          this.provNames + this.cityNames + this.countryNames;
        this.formObj.adCode = val;
      }
    },
    //  近期面貌
    recentAppearance() {
      this.xcztShow = true;
    },
    jqmmDialog() {
      this.xcztShow = false;
    },
    // 影像
    imageClick() {
      if (!this.centerX && !this.centerY) {
        this.$message.warning('暂无经纬度信息！');
        return false;
      }
      this.imageShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
#dcdxHeader {
  padding: 15px 20px;
}

#dxdcFooter {
  text-align: center;
}

#dxdcAside {
  border: 1px solid #d5d5ff;
}

:deep(form .ant-select) {
  width: 20%;
}
</style>
