<template>
  <div :style="menuHeight">
    <el-form ref="form" :model="mapCity" label-width="120px">
      <el-form-item :label="$t('view.country')">
        <el-select
          v-model="mapCity.country"
          :placeholder="$t('placeholder.select')"
        >
          <el-option :label="$t('placeholder.select')" value></el-option>
          <el-option :label="$t('view.china')" value="中国"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('view.provinces')">
        <el-select
          v-model="mapCity.provice"
          :placeholder="$t('placeholder.select')"
          v-if="mapCity.country === ''"
        >
          <el-option :label="$t('placeholder.select')" value></el-option>
        </el-select>
        <el-cascader
          :options="cityOptions"
          v-model="mapCity.address"
          @change="changeProvince"
          v-else
        ></el-cascader>
      </el-form-item>
      <el-form-item :label="$t('view.generate_route')">
        <el-select
          v-model="mapCity.isRoute"
          :placeholder="$t('placeholder.select')"
        >
          <el-option :label="$t('view.yes')" :value="true"></el-option>
          <el-option :label="$t('view.no')" :value="false"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import cityOptions from '@/assets/js/cityData'
export default {
  name: 'ViewCity',
  data() {
    return {
      menuHeight: 0,
      //默认加载城市
      mapCity: {
        country: '', // 国家
        address: [], //联动地址数组
        province: '', // 省
        city: '', // 区
        town: '', // 县
        isRoute: true, // 是否生成路线
      },
      // 联动数据
      cityOptions: cityOptions,
    }
  },
  props:{
    viewId: String,
    viewModuleDataObj: Object
  },
  methods: {
    // 默认加载城市
    changeProvince(item) {
      if (item.length === 2) {
        this.mapCity.province = item[0]
        this.mapCity.city = item[1]
      } else if (item.length === 3) {
        this.mapCity.province = item[0]
        this.mapCity.city = item[1]
        this.mapCity.town = item[2]
      }
      this.$emit("mapCityObj",this.mapCity);
    },

    save(){
      return this.mapCity
    }
  },
  mounted(){
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //60 头部， 32 面包屑， 20 父组件外边距,41 标签页，50 内部按钮
    this.menuHeight = clientHeight - 60 - 32 - 41 - 50 - 20 - 16;
    //根据视图数据渲染默认加载城市页签
    let data = this.viewModuleDataObj;
    this.mapCity.country = data.country ? data.country : ""; // 国家
    this.mapCity.province = data.province ? data.province : ""; // 省
    this.mapCity.city = data.city ? data.city : ""; // 区
    this.mapCity.town = data.town ? data.town : ""; // 县
    this.mapCity.isRoute = data.isRoute; // 是否生成路线

    // 拼接为联动地址
    if (this.mapCity.town === "" && this.mapCity.city !== "") {
      this.mapCity.address = [this.mapCity.province, this.mapCity.city];
    } else if (this.mapCity.town !== "") {
      this.mapCity.address = [this.mapCity.province, this.mapCity.city, this.mapCity.town];
    } else {
      this.mapCity.address = [];
    }
    this.$emit("mapCityObj",this.mapCity);
  },
}
</script>
<style lang='less' scoped>
</style>