<template>
  <el-container>
    <el-main>
      <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
        <el-form-item prop="cityId" label="城市ID">
          <template>
            <el-select v-model="formData.cityId" clearable placeholder="请选择" :disabled="checkSubColumn('cityId')">
              <el-option v-for="item in cityIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item prop="landmarkId" label="地标ID">
          <template>
            <el-select v-model="formData.landmarkId" clearable placeholder="请选择" :disabled="checkSubColumn('landmarkId')">
              <el-option v-for="item in landmarkIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item prop="areaId" label="区域ID">
          <template>
            <el-select v-model="formData.areaId" clearable placeholder="请选择" :disabled="checkSubColumn('areaId')">
              <el-option v-for="item in areaIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item prop="pointName" label="名称">
          <el-input v-model="formData.pointName" :disabled="checkSubColumn('pointName')"></el-input>
        </el-form-item>
        <el-form-item prop="doorFlag" label="门">
          <el-switch v-model="formData.doorFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="checkSubColumn('doorFlag')"></el-switch>
        </el-form-item>
        <el-form-item prop="remark" label="备注">
          <el-input v-model="formData.remark" :disabled="checkSubColumn('remark')"></el-input>
        </el-form-item>
        <template v-if="landMarkInfo.defaultMode!=3">
          <el-form-item prop="mapX" label="X">
            <el-input v-model="formData.mapX" :disabled="checkSubColumn('mapX')" disabled></el-input>
          </el-form-item>
          <el-form-item prop="mapY" label="Y">
            <el-input v-model="formData.mapY" :disabled="checkSubColumn('mapY')" disabled></el-input>
          </el-form-item>
          <el-form-item prop="mapIndex" label="index">
            <el-input v-model="formData.mapIndex" :disabled="checkSubColumn('mapIndex')" disabled></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item>
            <el-button type="text" @click="mapDialogVisible = !mapDialogVisible">点击打开地图选择地址</el-button>

            <div class="amap-page-container" v-if="mapDialogVisible">
              <coordinate-select @closeMap="mapDialogVisible = !mapDialogVisible"   :value="[formData.longitude||118.79647,formData.latitude||32.05838]" @selected="coordinateSelected" v-if="mapDialogVisible"></coordinate-select>
            </div>
          </el-form-item>

          <el-form-item prop="longitude" label="经度">
            <el-input v-model="formData.longitude" :disabled="'longitude'==subColumn"></el-input>
          </el-form-item>

          <el-form-item prop="latitude" label="纬度">
            <el-input v-model="formData.latitude" :disabled="'latitude'==subColumn"></el-input>
          </el-form-item>
        </template>

        <el-form-item>
          <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
          <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
    <el-aside width="640px" v-if="landmarkId&&landMarkInfo.defaultMode!=3">
      <el-card style="height:660px;">
        <drug-area :doorFlag="doorFlag" :isAreaShowPoint="true" :areaWidth="areaWidth" :areaHeight="areaHeight" :landmarkId="landmarkId" :areaId="areaId" :mapPointInfo="mapPointInfo" @mapAddition="mapAddition" @subtraction="subtraction" @choosePoint="choosePoint"></drug-area>
      </el-card>
    </el-aside>
  </el-container>
</template>
<script>
import formValidator from '../formValidator';
import drugArea from '../components/DrugArea';
import CoordinateSelect from '../components/CoordinateSelect';

export default {
  created() {

    if (this.$route.query.column) {

      var columnList = this.$route.query.column.split(';')
      columnList.forEach(item => {
        var tempColumn = item;
        this.subColumnList.push(tempColumn.split(',')[1]);
      })

    }


    if (this.$route.query.id) {
      this.$http.get({
        url: '/areaShowPoint/getOne',
        data: {
          id: this.$route.query.id
        }
      }).then(res => {
        if (res.success) {

          if (!res.data.mapX) {
            res.data.mapX = ''
          }
          if (!res.data.mapY) {
            res.data.mapY = ''
          }
          if (!res.data.mapIndex) {
            res.data.mapIndex = ''
          }
          if (!res.data.longitude) {
            res.data.longitude = ''
          }
          if (!res.data.lnglat) {
            res.data.lnglat = ''
          }
          this.formData = res.data;
          if (this.$route.query.column) {
            var columnList = this.$route.query.column.split(';')
            columnList.forEach(item => {
              var tempColumn = item;
              this.formData[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
            })

          }




          this.formData.doorFlag = this.formData.doorFlag == 'Y' ? true : false;
        }
      })
    } else {
      if (this.$route.query.column) {
        var columnList = this.$route.query.column.split(';')
        columnList.forEach(item => {
          var tempColumn = item;
          this.formData[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
        })

      }
    }




    this.$http.get({
      url: '/cityInfo/all'
    }).then(res => {
      if (res.success) {

        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.cityIdOptions.push({ label: item.cityName, value: String(item.id) });
          })
        }
      }
    });



    this.$http.get({
      url: '/landMark/all'
    }).then(res => {
      if (res.success) {

        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.landmarkIdOptions.push({ label: item.mapName, value: String(item.id) });
          })
        }
      }
    });



    this.$http.get({
      url: '/areaInfo/all'
    }).then(res => {
      if (res.success) {

        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.areaIdOptions.push({ label: item.areaName, value: String(item.id) });
          })
        }
      }
    });
  },
  data() {
    return {
      saving: false,
      formData: {
        mapX: '',
        mapY: '',
        mapIndex: '',
        latitude: '',
        longitude: '',
        landmarkId: 0,
      },
      rules: {
        pointName:
          [
            { required: true, message: '请输入 名称', trigger: 'blur' },
          ],
      },
      cityIdOptions: [],
      landmarkIdOptions: [],
      areaIdOptions: [],
      subColumn: '',
      subValue: '',
      subColumnList: [],
      areaWidth: 1000,
      areaHeight: 1000,
      mapDialogVisible: false,
      landMarkInfo: {
        defaultMode:3
      }
    }
  },
  watch: {
    landmarkId() {
      if (this.landmarkId) {
        this.$http.get({
          url: '/landMark/getOne',
          data: {
            id: this.landmarkId
          }
        }).then(res => {
          if (res.success) {
            this.landMarkInfo = res.data
          }
        })
      }

    }
  },
  computed: {
    mapPointInfo() {
      return {
        x: this.formData.mapX || '',
        y: this.formData.mapY || '',
        index: this.formData.mapIndex || ""
      }
    },
    landmarkId() {
      return Number(this.formData.landmarkId) || 0
    },
    areaId() {
      return Number(this.formData.areaId) || 0
    },
    doorFlag() {
      return this.formData.doorFlag
    }
  },
  methods: {
    choosePoint(jsonp) {

      this.formData.mapX = jsonp.x;
      this.formData.mapY = jsonp.y;
      this.formData.mapIndex = jsonp.index
    },
    mapAddition() {
      // if (this.areaWidth < 3000) {
        this.areaWidth += 500
        this.areaHeight += 500
      // }

    },
    subtraction() {
      if (this.areaWidth > 1000) {
        this.areaWidth -= 500
        this.areaHeight -= 500
      }
    },
    onSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          return false;
        }
      });
    },
    submit() {
      var data = JSON.parse(JSON.stringify(this.formData));

      data.doorFlag = this.formData.doorFlag ? 'Y' : 'N';

      this.$http.post({
        url: this.formData.id ? '/areaShowPoint/update' : '/areaShowPoint/save',
        data: data
      }).then(res => {
        if (res.success) {
          this.$message.success('成功');
          this.$router.go(-1);
        } else {
          this.$message.warning('失败')
        }
      });
    },
    onDelete() {
      this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
        return this.$http.post({
          url: '/areaShowPoint/del',
          data: { id: this.formData.id }
        })
      }).then(() => {
        this.$message.success('删除成功');
        this.$router.go(-1);
      }).catch(action => {
        if (action === 'cancel') {
          this.$message.info('删除取消');
        } else {
          this.$message.error('删除失败');
        }
      })
    },
    checkSubColumn(value) {
      if (this.$route.query.column) {
        if (this.subColumnList.indexOf(value) >= 0) {
          return true;
        }

      }
      return false;
    },
    coordinateSelected(data) {
      //this.formData.address = data.formattedAddress;
      this.formData.latitude = data.lnglat.lat;
      this.formData.longitude = data.lnglat.lng;
    },
  },
  components: {
    drugArea, CoordinateSelect
  }
}
</script>
<style lang="less" scoped>
</style>
