<template>
  <el-container>
    <el-main>
      <div :style="{height:totalHeight-80+'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="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="thingName" label="事物名称">
            <el-input v-model="formData.thingName" :disabled="checkSubColumn('thingName')"></el-input>
          </el-form-item>
          <el-form-item prop="thingType" label="事物类型">
            <template>
              <el-select v-model="formData.thingType" clearable placeholder="请选择" :disabled="checkSubColumn('thingType')">
                <el-option v-for="item in thingTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item prop="rankLevel" label="优先级">
            <el-input type="number" v-model="formData.rankLevel" :disabled="checkSubColumn('rankLevel')"></el-input>
          </el-form-item>
          <el-form-item prop="allowNavigate" label="允许导航">
            <el-switch v-model="formData.allowNavigate" active-color="#13ce66" inactive-color="#ff4949" :disabled="checkSubColumn('allowNavigate')"></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>
          <el-form-item prop="icon" label="ICON">
            <single-upload v-model="formData.icon" :disabled="checkSubColumn('icon')"></single-upload>图片格式为png,分辨率64*64
          </el-form-item>
          <el-form-item prop="icon" label="ICON">
            <el-input v-model="formData.icon" :disabled="checkSubColumn('icon')"></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 prop="textIntroduction" label="介绍正文">
            <el-input type="textarea" v-model="formData.textIntroduction" :disabled="checkSubColumn('textIntroduction')"></el-input>
          </el-form-item>

          <el-form-item prop="image" label="图片">
            <single-upload v-model="formData.image" :disabled="checkSubColumn('image')"></single-upload>图片格式为png,分辨率256*256
          </el-form-item>
          <el-form-item prop="image" label="图片">
            <el-input v-model="formData.image" :disabled="checkSubColumn('image')"></el-input>
          </el-form-item>

          <el-form-item prop="showDistance" label="显示距离">
            <el-input type="number" v-model="formData.showDistance" :disabled="checkSubColumn('showDistance')"></el-input>M(最近距离1~2m内)
          </el-form-item>
          <el-form-item prop="templateId" label="点标组">
            <template v-if="formData.id">
              <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 prop="frontLevelId" label="上级ID">
            <el-input v-model="formData.frontLevelId" :disabled="checkSubColumn('frontLevelId')"></el-input>
          </el-form-item>

          <el-form-item prop="mapX" label="X">
            <el-input v-model="formData.mapX" disabled></el-input>
          </el-form-item>
          <el-form-item prop="mapY" label="Y">
            <el-input v-model="formData.mapY" disabled></el-input>
          </el-form-item>
          <el-form-item prop="orientation" label="方向">
            <el-input v-model="formData.orientation"></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-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 jsonp = {}

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

      // if (jsonp.landmarkId) {
      //   this.landmarkId = parseInt(jsonp.landmarkId)
      // }

      // if (jsonp.areaId) {
      //   this.areaId = parseInt(jsonp.areaId)
      // }

    }

    if (this.$route.query.id) {
      this.$http.get({
        url: '/thingInfo/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 = ''
          }


          this.formData = res.data;



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


          this.formData.allowNavigate = this.formData.allowNavigate == 'Y' ? true : false;

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

          }

        }
      })
    } 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.landmarkIdOptions.push({ label: item.mapName, value: String(item.id) });
          })
        }
      }
    });



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

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



    this.$http.get({
      url: '/aimGroupInfo/all' + (this.$route.query.id ? '?thingId=' + this.$route.query.id : '')
    }).then(res => {
      if (res.success) {

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



    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: '/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: {
        keyword: [],
        mapX: '',
        mapY: '',
        mapIndex: '',
      },
      rules: {
      },
      landmarkIdOptions: [],
      thingTypeOptions: [],
      templateIdOptions: [],
      cityIdOptions: [],
      areaIdOptions: [],
      subColumn: '',
      subValue: '',
      subColumnList: [],
      areaWidth: 600,
      areaHeight: 600,
      // areaId: 0,
      // landmarkId: 0,

    }
  },
  computed: {
    ...mapState(['totalHeight']),
    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
    }
  },
  methods: {
    choosePoint(jsonp) {
      console.log(jsonp)
      this.formData.mapX = jsonp.x;
      this.formData.mapY = jsonp.y;
      this.formData.mapIndex = jsonp.index
    },
    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();
      data.allowNavigate = this.formData.allowNavigate ? 'Y' : 'N';
      this.$http.post({
        url: this.formData.id ? '/thingInfo/update' : '/thingInfo/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: '/thingInfo/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;
    },
    onDeleteKeyword(index) {
      console.log("111")
      this.formData.keyword.splice(index, 1)
    },
    addKeyword() {
      this.formData.keyword.push('')
      console.log("222")
    },
    mapAddition() {
      // if (this.areaWidth < 900) {
        this.areaWidth += 500
        this.areaHeight += 500
      // }

    },
    subtraction() {
      if (this.areaWidth > 600) {
        this.areaWidth -= 500
        this.areaHeight -= 500
      }
    }
  },
  components: {
    drugArea
  }
}
</script>
<style lang="less" scoped>
</style>
