<template>
  <el-container>
    <el-main>
      <div :style="{height:totalHeight-70+'px'}" style="overflow:auto">
        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
          <el-form-item prop="ownedLandMarkId" label="所属地标ID">
            <template>
              <el-select v-model="formData.ownedLandMarkId" clearable placeholder="请选择" :disabled="checkSubColumn('ownedLandMarkId')">
                <el-option v-for="item in ownedLandMarkIdOptions" :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="thingId" label="事物ID">
            <template>
              <el-select v-model="formData.thingId" clearable placeholder="请选择" :disabled="checkSubColumn('thingId')">
                <el-option v-for="item in thingIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item prop="aimGroupId" label="点标组ID">
            <template>
              <el-select v-model="formData.aimGroupId" clearable placeholder="请选择" :disabled="checkSubColumn('aimGroupId')">
                <el-option v-for="item in aimGroupIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item prop="templateAimId" label="模板点标ID">
            <template>
              <el-select v-model="formData.templateAimId" clearable placeholder="请选择" :disabled="checkSubColumn('templateAimId')">
                <el-option v-for="item in templateAimIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item prop="name" label="名称">
            <el-input v-model="formData.name" :disabled="checkSubColumn('name')"></el-input>
          </el-form-item>
          <el-form-item prop="type" label="类别">
            <el-input v-model="formData.type" :disabled="checkSubColumn('type')"></el-input>
          </el-form-item>

          <el-form-item prop="arContentGroupId" label="AR内容组ID">
            <el-input v-model="formData.arContentGroupId" :disabled="checkSubColumn('arContentGroupId')"></el-input>
          </el-form-item>
          <el-form-item prop="arKitPosX" label="ArKit坐标X">
            <el-input v-model="formData.arKitPosX" :disabled="checkSubColumn('arKitPosX')"></el-input>
          </el-form-item>
          <el-form-item prop="arKitPosY" label="ArKit坐标Y">
            <el-input v-model="formData.arKitPosY" :disabled="checkSubColumn('arKitPosY')"></el-input>
          </el-form-item>
          <el-form-item prop="arKitPosZ" label="ArKit坐标Z">
            <el-input v-model="formData.arKitPosZ" :disabled="checkSubColumn('arKitPosZ')"></el-input>
          </el-form-item>
          <el-form-item prop="arKitScale" label="ArKit缩放">
            <el-input v-model="formData.arKitScale" :disabled="checkSubColumn('arKitScale')"></el-input>
          </el-form-item>
          <el-form-item prop="arKitAngle" label="ArKit角度">
            <el-input v-model="formData.arKitAngle" :disabled="checkSubColumn('arKitAngle')"></el-input>
          </el-form-item>
          <el-form-item prop="arKitShowLenth" label="ArKit一定距离显示">
            <el-input v-model="formData.arKitShowLenth" :disabled="checkSubColumn('arKitShowLenth')"></el-input>
          </el-form-item>
          <el-form-item prop="gyroPosX" label="Gyro坐标X">
            <el-input v-model="formData.gyroPosX" :disabled="checkSubColumn('gyroPosX')"></el-input>
          </el-form-item>
          <el-form-item prop="gyroPosY" label="Gyro坐标Y">
            <el-input v-model="formData.gyroPosY" :disabled="checkSubColumn('gyroPosY')"></el-input>
          </el-form-item>
          <el-form-item prop="gyroPosZ" label="Gyro坐标Z">
            <el-input v-model="formData.gyroPosZ" :disabled="checkSubColumn('gyroPosZ')"></el-input>
          </el-form-item>
          <el-form-item prop="gyroPosScale" label="Gyro缩放">
            <el-input v-model="formData.gyroPosScale" :disabled="checkSubColumn('gyroPosScale')"></el-input>
          </el-form-item>
          <el-form-item prop="gyroPosAngle" label="Gyro角度">
            <el-input v-model="formData.gyroPosAngle" :disabled="checkSubColumn('gyroPosAngle')"></el-input>
          </el-form-item>
          <el-form-item prop="gyroPosShowLenth" label="Gyro一定距离显示">
            <el-input v-model="formData.gyroPosShowLenth" :disabled="checkSubColumn('gyroPosShowLenth')"></el-input>
          </el-form-item>
          <el-form-item prop="vuforiaImageInfoAreaMarking" label="Gyro绑定识别图区域标记编号">
            <el-input v-model="formData.vuforiaImageInfoAreaMarking" :disabled="checkSubColumn('vuforiaImageInfoAreaMarking')"></el-input>
          </el-form-item>
          <el-form-item prop="remark1" label="模型X">
            <el-input v-model="formData.remark1" :disabled="checkSubColumn('remark1')"></el-input>
          </el-form-item>
          <el-form-item prop="remark2" label="模型Y">
            <el-input v-model="formData.remark2" :disabled="checkSubColumn('remark2')"></el-input>
          </el-form-item>
          <el-form-item prop="remark3" label="模型Z">
            <el-input v-model="formData.remark3" :disabled="checkSubColumn('remark3')"></el-input>
          </el-form-item>
          <el-form-item prop="remark4" label="显示摄像头前">
            <el-input v-model="formData.remark4" :disabled="checkSubColumn('remark4')"></el-input>
          </el-form-item>
          <el-form-item prop="remark5" label="备注5">
            <el-input v-model="formData.remark5" :disabled="checkSubColumn('remark5')"></el-input>
          </el-form-item>
          <el-form-item prop="remark6" label="备注6">
            <el-input v-model="formData.remark6" :disabled="checkSubColumn('remark6')"></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>
          <el-form-item prop="posX" label="坐标X">
            <el-input v-model="formData.posX" :disabled="checkSubColumn('posX')" disabled></el-input>
          </el-form-item>
          <el-form-item prop="posY" label="坐标Y">
            <el-input v-model="formData.posY" :disabled="checkSubColumn('posY')" disabled></el-input>
          </el-form-item>
          <el-form-item prop="posZ" label="坐标Z">
            <el-input v-model="formData.posZ" :disabled="checkSubColumn('posZ')"></el-input>
          </el-form-item>
          <el-form-item prop="remark7" label="备注7">
            <el-input v-model="formData.remark7" :disabled="checkSubColumn('remark7')"></el-input>
          </el-form-item>
          <el-form-item prop="remark8" label="备注8">
            <el-input v-model="formData.remark8" :disabled="checkSubColumn('remark8')"></el-input>
          </el-form-item>
          <el-form-item prop="remark9" label="备注9">
            <el-input v-model="formData.remark9" :disabled="checkSubColumn('remark9')"></el-input>
          </el-form-item>
          <el-form-item prop="frontLevelId" label="上级ID">
            <template>
              <el-select v-model="formData.frontLevelId" clearable placeholder="请选择" :disabled="checkSubColumn('frontLevelId')">
                <el-option v-for="item in frontLevelIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item prop="icon" label="图标">
            <single-upload v-model="formData.icon" :disabled="checkSubColumn('icon')"></single-upload>
          </el-form-item>
          <el-form-item prop="iconRank" label="图标顺序">
            <el-input type="number" v-model="formData.iconRank" :disabled="checkSubColumn('iconRank')"></el-input>
          </el-form-item>
          <el-form-item prop="aloneFlag" label="是否独占">
            <el-switch v-model="formData.aloneFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="checkSubColumn('aloneFlag')"></el-switch>
          </el-form-item>
          <el-form-item prop="autoPlay" label="自动触发">
            <el-switch v-model="formData.autoPlay" active-color="#13ce66" inactive-color="#ff4949" :disabled="checkSubColumn('autoPlay')"></el-switch>
          </el-form-item>
          <el-form-item prop="autoDisplay" label="自动显示">
            <el-switch v-model="formData.autoDisplay" active-color="#13ce66" inactive-color="#ff4949" :disabled="checkSubColumn('autoDisplay')"></el-switch>
          </el-form-item>
          <el-form-item prop="showLevel" label="显示层级">
            <el-input type="number" v-model="formData.showLevel" :disabled="checkSubColumn('showLevel')"></el-input>
          </el-form-item>
          <el-form-item prop="templateId" label="上级模板">
            <template>
              <el-select v-model="formData.templateId" clearable placeholder="请选择" :disabled="checkSubColumn('templateId')">
                <el-option v-for="item in templateIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-form-item>

          <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>
      </div>
    </el-main>
    <el-aside width="640px" v-if="landmarkId">
      <el-card style="height:660px;">
        <drug-area :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 { mapState } from 'vuex'
import formValidator from '../formValidator'
import drugArea from '../components/DrugArea'

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: '/aimPlaceInfo/getOne',
        data: {
          id: this.$route.query.id
        }
      }).then(res => {
        if (res.success) {


          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.aloneFlag = this.formData.aloneFlag == 'Y' ? true : false;
          this.formData.autoDisplay = this.formData.autoDisplay == 'Y' ? true : false;
          this.formData.autoPlay = this.formData.autoPlay == '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: '/landMark/all'
    }).then(res => {
      if (res.success) {

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



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

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



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

        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.templateIdOptions.push({ label: item.templateName, 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) });
          })
        }
      }
    });



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

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



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

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



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

        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.templateAimIdOptions.push({ label: item.aimName, value: String(item.id) });
          })
        }
      }
    });
  },
  data() {
    return {
      saving: false,
      formData: {},
      rules: {
        ownedLandMarkId: [
          { required: true, message: '所属地标ID', trigger: 'blur' },
        ],
        name:
          [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
      },
      ownedLandMarkIdOptions: [],
      frontLevelIdOptions: [],
      templateIdOptions: [],
      areaIdOptions: [],
      thingIdOptions: [],
      aimGroupIdOptions: [],
      templateAimIdOptions: [],
      subColumn: '',
      subValue: '',
      subColumnList: [],
      areaWidth: 600,
      areaHeight: 600,
    }
  },
  computed: {
    ...mapState(['totalHeight']),
    mapPointInfo() {
      return {
        x: this.formData.posX,
        y: this.formData.posY,
        index: this.formData.mapIndex
      }
    },
    landmarkId(){
      return Number(this.formData.ownedLandMarkId)
    },
    areaId(){
      return Number(this.formData.areaId)
    }
  },
  methods: {
    choosePoint(jsonp) {
      this.formData.posX = jsonp.x;
      this.formData.posY = jsonp.y;
      this.formData.mapIndex = jsonp.index
    },
    mapAddition() {
      // if (this.areaWidth < 900) {
        this.areaWidth += 500
        this.areaHeight += 500
      // }

    },
    subtraction() {
      if (this.areaWidth > 600) {
        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.aloneFlag = this.formData.aloneFlag ? 'Y' : 'N';
      data.autoDisplay = this.formData.autoDisplay ? 'Y' : 'N';
      data.autoPlay = this.formData.autoPlay ? 'Y' : 'N';

      this.$http.post({
        url: this.formData.id ? '/aimPlaceInfo/update' : '/aimPlaceInfo/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: '/aimPlaceInfo/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;
    },
  },
  components: {
    drugArea
  }
}
</script>
<style lang="less" scoped>
</style>
