<template>
  <div id="">
    <a-layout style="height:520px;">
      <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: 8}" :wrapper-col="{span: 16}" :rules="rules">
          <p style="margin-top:10px;margin-bottom: 10px">
            <a-icon type="caret-right" /><span style="width:120px;padding-left: 10px">基础信息</span><span class="hrs"></span>
            <a-button style="float: right;background-color: #ebb563;border-color: #ebb563;" @click="recentAppearance">近期面貌</a-button>
            <a-button style="float: right;background-color: #ebb563;border-color: #ebb563; margin-right: 10px;" @click="imageClick">影像</a-button>
          </p>
          <a-form-item label="水库名称">
            <a-input v-model:value="formObj.rsName" readonly autocomplete="off" style="width:70%;"/>
          </a-form-item>
          <a-form-item label="管理机构">
            <a-input v-model:value="formObj.rsAdmName" autocomplete="off" style="width:70%;" />
          </a-form-item>
          <a-form-item label="行政区域" required>
            <div v-if="showLocSelect">
              <a-select v-model:value="provName" @change="provChange" placeholder="选择省" style="width: 28%">
                <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="选择市" style="width: 28%">
                <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="选择县" style="width: 28%">
                <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.location" autocomplete="off" style="width:90%;" />
              &#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.rsLoc" placeholder="请输入详细地点" autocomplete="off" style="width:70%;" />
          </a-form-item>
          <a-form-item label="注册登记号">
            <a-input v-model:value="formObj.regCode" autocomplete="off" style="width:70%;" />
          </a-form-item>
          <a-form-item label="工程规模" prop="engScal">
            <a-select v-model:value="formObj.engScal" placeholder="请选择">
              <a-select-option v-for="item in gongchengguimo" :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.rsClass" autocomplete="off" style="width:70%;" />
          </a-form-item>
          <a-form-item label="主坝坝型">
            <a-input v-model:value="formObj.damType" autocomplete="off" style="width:70%;" />
          </a-form-item>
          <a-form-item label="总库容(万m³)">
            <a-input v-model:value="formObj.totCap" autocomplete="off" style="width:70%;" />
          </a-form-item>
          <a-form-item label="主坝最大坝高(m)">
            <a-input v-model:value="formObj.damSizeHig" autocomplete="off" style="width:70%;" />
          </a-form-item>
          <a-form-item label="设计洪水位(m)">
            <a-input v-model:value="formObj.desFlStag" autocomplete="off" style="width:70%;" allow-clear/>
          </a-form-item>
          <a-form-item label="防洪高水位(m)">
            <a-input v-model:value="formObj.flConTopStag" autocomplete="off" style="width:70%;" allow-clear />
          </a-form-item>
          <a-form-item label="下闸蓄水时间">
            <unlimitDatePicker v-model="formObj.impdDt" :editable="false" type="date" placeholder="选择日期">
            </unlimitDatePicker>
          </a-form-item>
          <a-form-item label="最近一次加固改造_蓄水运行时间">
            <unlimitDatePicker v-model="formObj.rnfcImpdDt" :editable="false" type="date" placeholder="选择日期">
            </unlimitDatePicker>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 16, offset: 8 }">
            <a-button type="primary" @click="addHandler" v-if="addHandler">保 存</a-button>
          </a-form-item>
        </a-form>
      </a-layout-content>
      <theRecentAppearance
        v-if="xcztShow"
        @jqmmDialogClose="jqmmDialog"
        :jqmmShow="xcztShow"
        :jqmmEngId="currentObjectRgstrId"
        :dialogTitle="currentObjectName + '近期面貌'"
        style="z-index: 9999;">
      </theRecentAppearance>
      <a-modal :open="imageShow" :title="currentObjectName + '影像'" :mask-closable="false" :footer="null" @cancel="imageShow = false" >
        <div style="height: 60vh;">
          <mapLocation ref="mapRef" v-if="imageShow" :gdX="centerX" :gdY="centerY"></mapLocation>
        </div>
      </a-modal>
    </a-layout>
  </div>
</template>

<script>
import { getrgstrIdObject1 } from '../../../api/duChaTianBao.js';
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: [
    'currentObjectRgstrId',
    'currentResCode',
    'currentObjectId',
    'currentObjectName',
  ],
  data() {
    return {
      formObj: {
        rsName: '',
        rsAdmName: '',
        rsLoc: '',
        engScal: '',
        rsClass: '',
        totCap: '',
        damType: '',
        damSizeHig: '',
        desFlStag: '',
        flConTopStag: '',
        impdDt: '',
        rnfcImpdDt: '',
        location: '',
        admDiv: '',
      },
      dialogFormVisible: false,
      formLabelWidth: '160px',
      loading: true,
      operationType1: '',
      currentResCode1: '',
      currentObjectId1: '',
      value1: '',
      gongchengguimo: [
        //   {
        //     value: "1",
        //     label: "大（1）型"
        //   },
        //    {
        //     value: "2",
        //     label: "大（2）型"
        //   },
        //    {
        //     value: "3",
        //     label: "中型"
        //   },
        {
          value: '4',
          label: '小（1）型',
        },
        {
          value: '5',
          label: '小（2）型',
        },
        //   {
        //     value: "9",
        //     label: "其他"
        //   },
      ],
      zhubaleixing: [
        {
          value: '1',
          label: '混凝土坝',
        },
        {
          value: '2',
          label: '碾压混凝土坝',
        },
        {
          value: '3',
          label: '浆砌石坝',
        },
        {
          value: '4',
          label: '土坝',
        },
        {
          value: '5',
          label: '堆石坝',
        },
        {
          value: '6',
          label: '挡水坝',
        },
        {
          value: '7',
          label: '其他',
        },
      ],
      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('userid')
        ? localStorage.getItem('userid')
        : '';
    },
  },
  mounted() {
    this.currentResCode1 = this.currentResCode;
    this.currentObjectId1 = this.currentObjectId;
    this.getRgstridObj();
    this.getAreaList();
  },
  watch: {
    currentObjectRgstrId(n, o) {
      this.getRgstridObj();
    },
    showLocSelect(val) {
      if (!val) {
        this.formObj.location = this.locat.location;
        this.formObj.admDiv = this.locat.admDiv;
        this.provName = '';
        this.cityName = '';
        this.countryName = '';
      }
    },
  },
  methods: {
    getRgstridObj() {
      getrgstrIdObject1(this.currentResCode1, this.recPersId).then(
        (res) => {
          if (res.data) {
            this.formObj = res.data;
            this.locat.location = res.data.location;
            this.locat.admDiv = res.data.admDiv;
            this.centerX = res.data.centerX;
            this.centerY = res.data.centerY;
            // _self.value1 = dateFormat(res.data.compDate, 'yyyy-MM-dd');
          } else {
            this.formObj = {};
          }
        },
        (err) => {},
      );
    },
    addHandler() {
      // _self.formObj.compDate = _self.value1;
      // _self.formObj['compDateStr'] = dateFormat(_self.value1, 'yyyy-MM-dd');
      this.formObj['persId'] = this.recPersId;
      this.formObj.objId = this.currentObjectId1;
      // _self.formObj.compDateDesc = _self.formObj.compDateStr==''?null:_self.formObj.compDateStr;
      console.log(this.formObj);
      // 基础信息纠错，经纬度修改粗略校验经度纬度整数部分的范围
      try {
        this.$confirm('确认保存基础信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          request.post('/dc/att/rsBase/update', this.formObj).then((res) => {
            if (res.success) {
              this.$emit('addShuiKuSuccess');
              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;
      }
    },
    // formatEngScal(val) {
    //     switch (val) {
    //         case '1':
    //             val = '大（1）型';
    //             break;
    //         case '2':
    //             val = '大（2）型';
    //             break;
    //         case '3':
    //             val = '中型';
    //             break;
    //         case '4':
    //             val = '小（1）型';
    //             break;
    //         case '5':
    //             val = '小（2）型';
    //             break;
    //         case '9':
    //             val = '其他';
    //             break;
    //     }
    //     return val;
    // },
    // formatdamType(val) {
    //     switch (val) {
    //         case '1':
    //             val = '混凝土坝';
    //             break;
    //         case '2':
    //             val = '碾压混凝土坝';
    //             break;
    //         case '3':
    //             val = '浆砌石坝';
    //             break;
    //         case '4':
    //             val = '土坝';
    //             break;
    //         case '5':
    //             val = '堆石坝';
    //             break;
    //         case '6':
    //             val = '挡水坝';
    //             break;
    //         case '7':
    //             val = '其它';
    //             break;
    //     }
    //     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.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;
      }
    },
    //  近期面貌
    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>

</style>
