<template>
  <div v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="12">
        <div style="height:50vh;overflow:auto;padding:0 10px">
          <el-form :model="formData" :rules="rules" ref="form" label-width="100px" label-position="right" size="small" style="max-width: 500px;">
            <el-form-item prop="vuforiaImageGroupId" label="所属图集ID">
              <template>
                <el-select v-model="formData.vuforiaImageGroupId" clearable placeholder="请选择" :disabled="'vuforiaImageGroupId'==subColumn">
                  <el-option v-for="item in vuforiaImageGroupIdOptions" :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="'name'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="vuforiaImageTypeId" label="识别图类型ID">
              <template>
                <el-select v-model="formData.vuforiaImageTypeId" clearable placeholder="请选择" :disabled="'vuforiaImageTypeId'==subColumn">
                  <el-option v-for="item in vuforiaImageTypeIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item prop="areaMarking" label="区域标记编号">
              <el-input v-model="formData.areaMarking" :disabled="'areaMarking'==subColumn"></el-input>
            </el-form-item>
            <!-- <el-form-item prop="landMarkId" label="所属地标ID">
                    <template>
                        <el-select v-model="formData.landMarkId" clearable placeholder="请选择" :disabled="'landMarkId'==subColumn">
                            <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="vuforiaImage" label="识别图">
              <single-upload v-model="formData.vuforiaImage" :disabled="'vuforiaImage'==subColumn"></single-upload>
            </el-form-item>
            <el-form-item prop="vuforiaImage" label="识别图URL">
              <el-input v-model="formData.vuforiaImage" :disabled="'vuforiaImage'==subColumn"></el-input>
            </el-form-item>

            <el-form-item prop="arContentGroupId" label="AR内容组ID">
              <el-input v-model="formData.arContentGroupId" :disabled="'arContentGroupId'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="posX" label="坐标X">
              <el-input v-model="formData.posX" :disabled="'posX'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="posY" label="坐标Y">
              <el-input v-model="formData.posY" :disabled="'posY'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="posZ" label="坐标Z">
              <el-input v-model="formData.posZ" :disabled="'posZ'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="angle" label="角度">
              <el-input v-model="formData.angle" :disabled="'angle'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="remark1" label="备注1">
              <el-input v-model="formData.remark1" :disabled="'remark1'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="remark2" label="备注2">
              <el-input v-model="formData.remark2" :disabled="'remark2'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="remark3" label="备注3">
              <el-input v-model="formData.remark3" :disabled="'remark3'==subColumn"></el-input>
            </el-form-item>

            <el-form-item prop="targetId" label="targetId">
              <el-input v-model="formData.targetId"></el-input>
            </el-form-item>

            <el-form-item prop="mapIndex" label="index">
              <el-input v-model="formData.mapIndex" disabled></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12" v-if="formData.landMarkId">
        <el-card style="height:50vh">
          <drug-area ref="drugAreaContent" :hasRange="true" :doorFlag="false" :isAreaShowPoint="false" :areaWidth="areaWidth" :areaHeight="areaHeight" :landmarkId="landmarkId" :areaId="areaId" :mapPointInfo="mapPointInfo" @mapAddition="mapAddition" @subtraction="subtraction" @choosePoint="choosePoint"></drug-area>
        </el-card>
      </el-col>
    </el-row>

    <el-row type="flex" justify="end" style="marginn-top:20px;padding-top:20px">
      <el-button size="mini" @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
      <el-button size="mini" @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
      <el-button size="mini" @click="cancel">取消</el-button>
    </el-row>
  </div>
</template>
<script>
import formValidator from '../formValidator'
import drugArea from '../components/DrugArea'
export default {
  props: {
    formData: {
      type: Object,
      default: () => {
        return {
          vuforiaImageGroupId: 0,
          posX: '',
          posY: '',
          mapIndex: ''
        }
      }
    }
  },
  created() {
    if (this.$route.query.column) {
      this.subColumn = this.$route.query.column.split(',')[1];
      this.subValue = this.$route.query.column.split(',')[0];
    }

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


    //             this.formData = res.data;

    //             if (this.$route.query.column) {
    //                 this.formData[this.subColumn] = this.subValue;
    //             }
    //         }
    //     })
    // } else {
    //     if (this.$route.query.column) {
    //         this.formData[this.subColumn] = this.subValue;
    //     }
    // }




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

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



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

        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.vuforiaImageTypeIdOptions.push({ label: item.typeName, 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: item.id });
    //             })
    //         }
    //     }
    // });
  },
  data() {
    return {
      saving: false,
      rules: {
        vuforiaImageGroupId:
          [
            { required: true, message: '选择 所属图集ID', trigger: 'blur' },
          ],
        name:
          [
            { required: true, message: '请输入 识别图名称', trigger: 'blur' },
          ],
        vuforiaImage:
          [
            { required: true, message: '请上传 识别图', trigger: 'blur' },
          ],
      },
      vuforiaImageGroupIdOptions: [],
      vuforiaImageTypeIdOptions: [],
      landMarkIdOptions: [],
      subColumn: '',
      subValue: '',
      loading: false,
      areaWidth: 1000,
      areaHeight: 1000,
    }
  },
  computed: {
    mapPointInfo() {
      return {
        x: this.formData.posX || '',
        y: this.formData.posY || '',
        index: this.formData.mapIndex || "",
        angle:this.formData.angle||''
      }
    },
    landmarkId() {
      return Number(this.formData.landMarkId) || 0
    },
    areaId() {
      return 0
    },
  },
  methods: {
    choosePoint(jsonp) {
      this.formData.posX = jsonp.x;
      this.formData.posY = 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
      }
    },
    cancel() {
      this.$emit('hide')
    },
    onSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          return false;
        }
      });
    },
    submit() {
      var data = JSON.parse(JSON.stringify(this.formData));
      if (data.posX && data.posY && Number(data.posX) < Number(this.$refs.drugAreaContent.width) && Number(data.posY) < Number(this.$refs.drugAreaContent.height)) {
        data.mapIndex = Number(data.posX) * Number(this.$refs.drugAreaContent.width) + Number(data.posY)
      }
      this.$http.post({
        url: this.formData.id ? '/vuforiaImageInfo/update' : '/vuforiaImageInfo/save',
        data: data
      }).then(res => {
        if (res.success) {
          this.$message.success('成功');
          this.$emit('hide')
          this.$emit('update')
        } else {
          this.$message.warning('失败')
        }
      });
    },
    onDelete() {
      this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
        this.loading = true
        return this.$http.post({
          url: '/vuforiaImageInfo/del',
          data: { id: this.formData.id }
        })
      }).then(res => {
        this.loading = false
        if (res.success) {
          this.$message.success('删除成功');
          this.$emit('hide')
          this.$emit('update')
        } else {
          this.$message.error(res.error);
        }

      }).catch(action => {
        if (action === 'cancel') {
          this.$message.info('删除取消');
        } else {
          this.$message.error('删除失败');
        }
      })
    },
  },
  components: {
    drugArea
  }
}
</script>
<style lang="less" scoped>
</style>
