<template>
  <div>
    <el-tabs :value="tabVal" type="border-card">
      <el-tab-pane label="地标信息" name="1">
        <div :style="{height:totalHeight-120+'px'}" style="overflow:auto">
          <el-form :model="formData" :rules="rules" ref="form" label-width="120px" label-position="right" size="small" style="max-width: 550px;">
            <el-form-item prop="mapName" label="地标名称">
              <el-input v-model="formData.mapName" :disabled="'mapName'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="ownedCityId" label="所属城市Id">
              <template>
                <el-select v-model="formData.ownedCityId" clearable filterable  placeholder="请选择" :disabled="'ownedCityId'==subColumn">
                  <el-option v-for="item in ownedCityIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item prop="defaultMode" label="AR属性">
              <template>
                <el-select v-model="formData.defaultMode" clearable placeholder="请选择" :disabled="'defaultMode'==subColumn">
                  <el-option v-for="item in defaultModeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item prop="typeId" label="地标类型">
              <template>
                <el-select v-model="formData.typeId" clearable placeholder="请选择" :disabled="'typeId'==subColumn">
                  <el-option v-for="item in typeIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item prop="markDescribe" :label="isScenicSpot?'景点简介':'地标简介'">
              <el-input type="textarea" v-model="formData.markDescribe" :disabled="'markDescribe'==subColumn"></el-input>
            </el-form-item>

            <el-form-item prop="logeSprite" label="地点Loge图">
              <single-upload v-model="formData.logeSprite" :disabled="'logeSprite'==subColumn"></single-upload>
            </el-form-item>

            <el-form-item prop="openDescribe" :label="isScenicSpot?'开放时间':'营业/开放情况'">
              <el-input v-model="formData.openDescribe" :disabled="'openDescribe'==subColumn"></el-input>
            </el-form-item>

            <el-form-item prop="keyword" label="关键词">
              <template>
                <div v-for="(item,index) in formData.keyword" style="margin-bottom:10px">
                  <el-input v-model="formData.keyword[index]" style="width:180px"></el-input>
                  <el-button @click="onDeleteKeyword(index)" type="danger">删除</el-button>
                </div>
                <el-button @click="addKeyword" type="primary">添加</el-button>
              </template>
            </el-form-item>

            <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="adImage" label="闪屏">
              <single-upload v-model="formData.adImage" :disabled="'adImage'==subColumn"></single-upload>
            </el-form-item>

            <el-form-item prop="showInPanel" label="是否显示">
              <el-input v-model="formData.showInPanel" :disabled="'showInPanel'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="mapSprite" label="平面图">
              <single-upload v-model="formData.mapSprite" :disabled="'mapSprite'==subColumn"></single-upload>
            </el-form-item>

            <el-form-item prop="anchorImageGroupName" label="识别图组名称">
              <el-input v-model="formData.anchorImageGroupName" :disabled="'anchorImageGroupName'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="vuforiaDataName" label="识别图集名称">
              <template>
                <el-select v-model="formData.vuforiaImageGroupId" filterable   clearable placeholder="请选择" @change="changeVuforiaImageGroup">
                  <el-option v-for="(item,index) in vuforiaImageGroupList" :key="item.id" :label="item.vuforiaDataName" :value="item.id"></el-option>
                </el-select>
              </template>
            </el-form-item>

            <el-form-item prop="vuforiaImageGroupId" label="识别图集ID">
              <el-input v-model="formData.vuforiaImageGroupId" disabled style="width:70px"></el-input>
            </el-form-item>

            <el-button type="text" @click="showMore=!showMore">高级设置</el-button>

            <template v-if="showMore">
              <template v-if="isScenicSpot">
                <el-form-item prop="markLevel" label="景点级别">
                  <el-input v-model="formData.markLevel"></el-input>
                </el-form-item>
                <el-form-item prop="markPrice" label="门票价格">
                  <el-input v-model="formData.markPrice"></el-input>
                </el-form-item>
                <el-form-item prop="busRoute" label="公交路线">
                  <el-input v-model="formData.busRoute"></el-input>
                </el-form-item>
              </template>

              <el-form-item prop="logeSprite" label="地点Loge图URL">
                <el-input v-model="formData.logeSprite" :disabled="'logeSprite'==subColumn"></el-input>
              </el-form-item>

              <el-form-item prop="adImage" label="闪屏URL">
                <el-input v-model="formData.adImage" :disabled="'adImage'==subColumn"></el-input>
              </el-form-item>

              <el-form-item prop="mapSprite" label="平面图URL">
                <el-input v-model="formData.mapSprite" :disabled="'mapSprite'==subColumn"></el-input>
              </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>
              <el-form-item prop="mapInfo" label="地图信息">
                <el-input type="textarea" v-model="formData.mapInfo" :disabled="'mapInfo'==subColumn"></el-input>
              </el-form-item>
              <el-form-item prop="mapWidth" label="地图宽">
                <el-input v-model="formData.mapWidth" :disabled="'mapWidth'==subColumn"></el-input>
              </el-form-item>
              <el-form-item prop="mapHeight" label="地图高">
                <el-input v-model="formData.mapHeight" :disabled="'mapHeight'==subColumn"></el-input>
              </el-form-item>
              <el-form-item prop="mapRate" label="比率">
                <el-input v-model="formData.mapRate" :disabled="'mapRate'==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="areaMapInfo" label="区域地图信息">
                <el-input type="textarea" v-model="formData.areaMapInfo"></el-input>
              </el-form-item>
              <el-form-item prop="frontLevelId" label="上级地标ID">
                <template>
                  <el-select v-model="formData.frontLevelId" clearable  filterable  placeholder="请选择" :disabled="'frontLevelId'==subColumn">
                    <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="mapAngle" label="地图角度">
                <el-input v-model="formData.mapAngle"></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>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="目标点内容" name="2" v-if="this.$route.query.id">

                <el-container>
                    <el-aside width="50%">
                        <AimPlaceContents :MapWidth="formData.mapWidth" ref="PlaceContents" @updatePoint='updatePoint'></AimPlaceContents>
                    </el-aside>
                    <el-main>
                        <Map-info :Mapstyle="'Content'" ref='mapInfo' @addPoint='addContents' @editPoint='editContents'></Map-info>
                    </el-main>
                </el-container>

            </el-tab-pane>
            <el-tab-pane label="目标点位置" name="3" v-if="this.$route.query.id">

                <el-container>
                    <el-aside width="50%">
                        <AimPlacePositions :MapWidth="formData.mapWidth" ref="PlacePositions" @updatePoint='updatePoint2'></AimPlacePositions>
                    </el-aside>
                    <el-main>
                        <Map-info :Mapstyle="'Position'" ref='mapInfo2' @addPoint='addPositions' @editPoint='editPositions'></Map-info>
                    </el-main>
                </el-container>
      </el-tab-pane>-->
      <el-tab-pane label="识别图" name="4" v-if="this.$route.query.id">
        <VuforiaImageInfos></VuforiaImageInfos>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import formValidator from '../formValidator';
import CoordinateSelect from '../components/CoordinateSelect';
import AimPlaceContents from '../components/AimPlaceContents';
import AimPlacePositions from '../components/AimPlacePositions';
import VuforiaImageInfos from '../components/VuforiaImageInfos';
import MapInfo from '../components/MapInfo';
import { mapState } from 'vuex'
export default {
  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: '/landMark/getOne',
        data: {
          id: this.$route.query.id
        }
      }).then(res => {
        if (res.success) {

          if (!res.data.latitude) {
            res.data.latitude = this.formData.latitude;
          }
          if (!res.data.longitude) {
            res.data.longitude = this.formData.longitude;
          }

          if (res.data.keyword) {
            res.data.keyword = res.data.keyword.split(',')
          } else {
            res.data.keyword = [];
          }

          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: '/landmarkType/all',
      data: {
        typeFlag: '1'
      }
    }).then(res => {
      if (res.success) {

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

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

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

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



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

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

      saving: false,
      formData: {
        latitude: 32.05838,
        longitude: 118.79647,
        typeId: '',
        keyword: [],
        mapAngle: 0,
        defaultMode: 1,
      },
      rules: {
      },
      ownedCityIdOptions: [],
      frontLevelIdOptions: [
        {
          value: 0,
          label: '无上级地标'
        }
      ],
      typeIdOptions: [],
      subColumn: '',
      subValue: '',
      mapDialogVisible: false,
      tabVal: "1",
      showMore: false,

      defaultModeOptions: [{
        value: 1,
        label: 'ARkit/core'
      }, {
        value: 2,
        label: '陀螺仪'
      }, {
        value: 3,
        label: 'LBS'
      }],
      vuforiaImageGroupList: [],

    }
  },
  computed: {
    ...mapState(['totalHeight']),
    isScenicSpot() {
      //是否景区
      if (this.formData.typeId == 18 || this.formData.typeId == 36 || this.formData.typeId == 20) {
        return true;
      }
      else {
        return false;
      }
    }
  },
  methods: {
    changeVuforiaImageGroup(id) {
      this.vuforiaImageGroupList.forEach(item => {
        if (item.id == id) {
          this.formData.vuforiaDataName = item.vuforiaName
        }
      })
    },
    updatePoint2() {
      this.$refs.mapInfo2.getPoint()
    },
    editPositions(jsonp) {
      this.$refs.PlacePositions.editRow(jsonp)
    },
    addPositions(jsonp) {
      this.$refs.PlacePositions.addEdit(jsonp)
    },
    updatePoint() {
      this.$refs.mapInfo.getPoint()
    },
    editContents(jsonp) {
      this.$refs.PlaceContents.editRow(jsonp)
    },
    addContents(jsonp) {
      this.$refs.PlaceContents.addEdit(jsonp)
    },
    onSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          return false;
        }
      });
    },
    submit() {
      var data = JSON.parse(JSON.stringify(this.formData));
      data.keyword = data.keyword.join();

      this.$http.post({
        url: this.formData.id ? '/landMark/update' : '/landMark/save',
        data: data
      }).then(res => {
        if (res.success) {
          this.$message.success('成功');
          if (!this.formData.id) {
            this.$router.replace({
              name: '',
              query: {
                id: res.data
              }
            });
          }

        } else {
          this.$message.warning('失败')
        }
      });
    },
    onDelete() {
      this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
        return this.$http.post({
          url: '/landMark/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('删除失败');
        }
      })
    },
    coordinateSelected(data) {
      //this.formData.address = data.formattedAddress;
      this.formData.latitude = data.lnglat.lat;
      this.formData.longitude = data.lnglat.lng;
    },
    onDeleteKeyword(index) {
      console.log("111")
      this.formData.keyword.splice(index, 1)
    },
    addKeyword() {
      this.formData.keyword.push('')
      console.log("222")
    },
  },
  components: {
    CoordinateSelect, AimPlaceContents, AimPlacePositions, VuforiaImageInfos, MapInfo
  }
}
</script>
<style lang="less" scoped>
</style>
