<template>
  <div>
    <el-steps :active="formData.addStep" finish-status="success" simple>
      <el-step title="建立地标"></el-step>
      <el-step title="位置和显示"></el-step>
      <el-step title="基本内容"></el-step>
      <el-step title="识别图"></el-step>
      <el-step title="备注"></el-step>
    </el-steps>

    <el-form v-if="formData.addStep==0" ref="form" :model="formData" :rules="rules" label-width="80px">
      <el-row type="flex" justify="center" style="margin-top:50px">
        <el-col :lg="6" :sm="12" :xs="24">
          <el-card style="padding:20px">
            <el-form-item label="地标名称" prop="mapName">
              <el-input v-model="formData.mapName"></el-input>
            </el-form-item>
            <el-form-item label="所属城市" prop="ownedCityId">
              <el-select v-model="formData.ownedCityId" clearable  filterable  placeholder="请选择">
                <el-option v-for="item in ownedCityIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="AR属性" prop="defaultMode">
              <el-select v-model="formData.defaultMode" clearable placeholder="请选择">
                <el-option v-for="item in defaultModeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地标类型" prop="typeId">
              <el-select v-model="formData.typeId" clearable placeholder="请选择">
                <el-option v-for="item in typeIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label>
              <el-button type="primary" :loading="isLoading" @click="saveForm">下一步</el-button>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>

    <el-form v-else-if="formData.addStep==1" ref="form2" :model="formData" :rules="rules2" label-width="80px">
      <el-row type="flex" justify="center" style="margin-top:50px">
        <el-col :lg="mapDialogVisible?12:10" :sm="mapDialogVisible?18:12" :xs="24">
          <el-card style="padding:20px">
            <el-form-item :label="isScenicSpot?'景区位置':'商场位置'" prop="longitude">
              <el-button type="text" @click="mapDialogVisible = !mapDialogVisible">{{mapDialogVisible?'点击关闭地图':'点击打开地图选择地址'}}</el-button>
              <div v-if="formData.longitude" style="line-height:24px">已选择: {{formData.longitude}} , {{formData.latitude}}</div>
              <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"></single-upload>
              <div style="color:#ccc;font-size:13px">闪屏图片可不上传，若传则尺寸为1920*1080，jpg/png，2M以内</div>
            </el-form-item>
            <el-form-item prop="showInPanel" label="是否显示">
              <el-switch v-model="formData.showInPanel"></el-switch>
            </el-form-item>
            <el-form-item prop="mapSprite" label="平面图">
              <single-upload v-model="formData.mapSprite"></single-upload>
            </el-form-item>

            <el-form-item label>
              <el-button type="primary" :loading="isLoading" @click="updateForm">下一步</el-button>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>

    <el-form v-else-if="formData.addStep==2" ref="form3" :model="formData" :rules="rules3" label-width="80px">
      <el-row type="flex" justify="center" style="margin-top:50px">
        <el-col :lg="9" :sm="16" :xs="24">
          <el-card style="padding:20px">
            <el-form-item prop="markDescribe" :label="isScenicSpot?'景区简介':'商场简介'">
              <el-input type="textarea" v-model="formData.markDescribe"></el-input>
            </el-form-item>
            <el-form-item prop="logeSprite" label="logo">
              <single-upload v-model="formData.logeSprite"></single-upload>

              <div style="color:#ccc;font-size:13px">256*256png/jpg不超过500K</div>
            </el-form-item>
            <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="openDescribe" :label="isScenicSpot?'开放时间':'营业情况'">
              <el-input v-model="formData.openDescribe"></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" maxlength="5"></el-input>
                  <el-button @click="onDeleteKeyword(index)" type="danger">删除</el-button>
                </div>
                <el-button @click="addKeyword" type="primary" v-if="formData.keyword.length<10">添加</el-button>
              </template>
            </el-form-item>

            <el-form-item label>
              <el-button type="primary" :loading="isLoading" @click="updateForm">下一步</el-button>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>

    <el-form v-else-if="formData.addStep==3" ref="form4" :model="formData" :rules="rules4" label-width="120px">
      <el-row type="flex" justify="center" style="margin-top:50px">
        <el-col :lg="8" :sm="12" :xs="24">
          <el-card style="padding:20px">
            <el-form-item prop="anchorImageGroupName" label="识别图组名称">
              <el-input v-model="formData.anchorImageGroupName" placeholder="请向运营人员索要"></el-input>
            </el-form-item>

            <el-form-item prop="vuforiaDataName" label="识别图集名称">
              <template>
                <el-select v-model="formData.vuforiaImageGroupId" clearable filterable  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" style="width:70px" disabled></el-input>
            </el-form-item>

            <el-form-item prop="frontLevelId" label="上级地标">
              <template>
                <el-select v-model="formData.frontLevelId" clearable filterable  placeholder="请选择">
                  <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 label>
              <el-button type="primary" :loading="isLoading" @click="updateForm">下一步</el-button>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>

    <el-form v-else-if="formData.addStep==4" ref="form5" :model="formData" :rules="rules5" label-width="80px">
      <el-row type="flex" justify="center" style="margin-top:50px">
        <el-col :lg="10" :sm="12" :xs="24">
          <el-card style="padding:20px">
            <el-form-item prop="remark1" label="备注1">
              <el-input v-model="formData.remark1"></el-input>
            </el-form-item>
            <el-form-item prop="remark2" label="备注2">
              <el-input v-model="formData.remark2"></el-input>
            </el-form-item>
            <el-form-item prop="remark3" label="备注3">
              <el-input v-model="formData.remark3"></el-input>
            </el-form-item>
            <el-form-item label>
              <el-button type="primary" :loading="isLoading" @click="updateForm">完成</el-button>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import CoordinateSelect from '../components/CoordinateSelect';
export default {
  created() {
    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 });
          })
        }
      }
    });

    if (this.$route.query.id) {
      this.getInfo(this.$route.query.id);
    }

    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) });
          })
        }
      }
    });

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



  },
  data() {
    return {
      nowStep: 0,
      formData: {
        defaultMode: 1,
        addStep: 0,
        longitude: '',
        latitude: '',
        showInPanel: true,
        keyword: [],
      },
      typeIdOptions: [],
      frontLevelIdOptions: [],
      vuforiaImageGroupList: [],
      defaultModeOptions: [{
        value: 1,
        label: 'ARkit/core'
      }, {
        value: 2,
        label: '陀螺仪'
      }, {
        value: 3,
        label: 'LBS'
      }],
      ownedCityIdOptions: [],
      rules: {
        mapName: [
          { required: true, message: '请输入地标名称', trigger: 'blur' },
        ],
        ownedCityId: [
          { required: true, message: '请选择所属城市', trigger: 'blur' },
        ],
        defaultMode: [
          { required: true, message: '请选择AR属性', trigger: 'blur' },
        ],
        typeId: [
          { required: true, message: '请选择地标类型', trigger: 'blur' },
        ],

      },
      rules2: {
        longitude: [
          { required: true, message: '请选择商场位置', trigger: 'blur' },
        ],
        mapSprite: [
          { required: true, message: '请添加平面图图片', trigger: 'blur' },
        ],
      },
      rules3: {
        logeSprite: [
          { required: true, message: '请添加logo图片', trigger: 'blur' },
        ],
      },
      rules4: {
        anchorImageGroupName: [
          { required: true, message: '请输入识别图组名称', trigger: 'blur' },
        ],
        vuforiaDataName: [
          { required: true, message: '选择识别图集名称', trigger: 'blur' },
        ],
        frontLevelId: [
          { required: true, message: '请选择上级地标', trigger: 'blur' },
        ]
      },
      rules5: {},
      isLoading: false,
      mapDialogVisible: false,
      chooseVuforiaImageGroup: {}
    }
  },
  computed: {
    isScenicSpot() {
      //是否景区
      if (this.formData.typeId == 18 || this.formData.typeId == 36 || this.formData.typeId == 20) {
        return true;
      }
      else {
        return false;
      }
    }
  },
  methods: {
    onDeleteKeyword(index) {
      console.log("111")
      this.formData.keyword.splice(index, 1)
    },
    addKeyword() {
      this.formData.keyword.push('')
      console.log("222")
    },
    coordinateSelected(data) {
      //this.formData.address = data.formattedAddress;
      this.formData.latitude = data.lnglat.lat;
      this.formData.longitude = data.lnglat.lng;
    },
    getInfo(id) {
      this.$http.get({
        url: '/landMark/getOne',
        data: {
          id: id
        }
      }).then(res => {
        if (!res.data.longitude) {
          res.data.longitude = ''
        }
        if (!res.data.latitude) {
          res.data.latitude = ''
        }

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

      });
    },
    saveForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          var data = JSON.parse(JSON.stringify(this.formData));
          data.addStep = 1;
          data.showInPanel = (data.showInPanel ? 1 : 0);
          data.keyword = data.keyword.join();
          this.isLoading = true;
          this.$http.post({
            url: '/landMark/save',
            data: data
          }).then(res => {
            this.isLoading = false;
            if (res.success) {
              this.getInfo(res.data);
            } else {
              this.$message.warning('失败');
            }
          });
        } else {
          return false;
        }
      })
    },
    updateForm() {
      var formName = 'form' + (this.formData.addStep + 1);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var data = JSON.parse(JSON.stringify(this.formData));
          data.addStep++;
          data.showInPanel = (data.showInPanel ? 1 : 0);
          data.keyword = data.keyword.join();
          this.isLoading = true;
          this.$http.post({
            url: '/landMark/update',
            data: data
          }).then(res => {
            this.isLoading = false;
            if (res.success) {
              if (data.addStep == 5) {
                this.$message.success('创建成功');
                this.$router.go(-1);
              }
              else {
                this.getInfo(data.id);
              }

            } else {
              this.$message.warning('失败');
            }
          });
        } else {
          return false;
        }
      })
    },
    changeVuforiaImageGroup(id) {
      this.vuforiaImageGroupList.forEach(item => {
        if (item.id == id) {
          this.formData.vuforiaDataName = item.vuforiaName
        }
      })
    }
  },
  components: {
    CoordinateSelect
  }
}
</script>
<style lang="less" scoped>
</style>
