<!--
  @description: 地区三级联动组件
  @Modifier：haoFx
  @routerPath:
  @date：  2019/11/18-16:36
-->
<template>
  <el-cascader
    ref="refHandle"
    v-model="location"
    :options="regionData"
    filterable
    :props="{ checkStrictly: isCheckStrictly,expandTrigger: 'hover' }"
    style="width:100%;"
    popper-class="checkStrictly"
    @change="addressChange"
  />
</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
/* 公用方法*/
import { cloneObject } from '@assets/js/utils'// 常用方法
export default {
  name: 'Cascader',
  props: {
    // 省市区选择城市级别 0 三级都可选 1 最多只能选择省 2最多只能选择市
    regionLevel: {
      type: Number,
      default: 0
    },
    regionText: {
      type: String,
      default: ''
    },
    // 是否可任意选择一级选项(是否严格的遵守父子节点不互相关联) true可任意选择一级选项
    isCheckStrictly: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      location: [],
      projectAreaName: '',
      regionData: cloneObject(regionData) // 省市区组件
    }
  },
  watch: {
    regionText() {
      if (this.regionText) {
        this.regionTextToCode()
      }
    }
  },
  created() {
    this.initData(1, this.regionData)// 初始化选择列表
    if (this.regionText) {
      this.regionTextToCode()
    }
  },
  methods: {
    // 回显区域
    regionTextToCode() {
      const location = this.regionText.split(',')
      const len = location.length
      if (len === 1) {
        this.location = [TextToCode[location[0]].code]
      } else if (len === 2) {
        this.location = [TextToCode[location[0]].code, TextToCode[location[0]][location[1]].code]
      } else {
        this.location = [TextToCode[location[0]].code, TextToCode[location[0]][location[1]].code, TextToCode[location[0]][location[1]][location[2]].code]
      }
      this.$emit('regionData', this.regionText, this.location)
    },
    /*
      * 初始化选择列表-设置只能选择的城市级别
      * @level 城市级别
      * @arr 城市数组
    */
    initData(level, arr) {
      arr.forEach(item => {
        if (this.regionLevel === level) {
          delete item.children
        } else if (item.children && item.children.length > 0) {
          // 第三级节点时
          if (level === 2) {
          // 删除掉三级联动里面带市辖区的数据
            // this.deleteCityRegionData(item)
          }
          if (item.children) {
            this.initData(level + 1, item.children)
          }
        }
      })
    },
    // 删除掉三级联动里面带市辖区的数据
    deleteCityRegionData(item) {
      if (item.children[0].label === '市辖区') {
        if (item.children.length === 1) {
          if (item.children[0].children) {
            item.children = item.children[0].children
          } else {
            delete item.children
          }
        } else {
          delete item.children[0]
        }
      }
    },
    // 所在区域三级联动
    addressChange(arr) {
      const len = arr.length
      if (len) {
        this.$refs.refHandle.dropDownVisible = false // 监听值发生变化就关闭它
      }
      const codeToTextArr = []
      for (let i = 0; i < len; i++) {
        codeToTextArr.push(CodeToText[arr[i]])
      }
      this.projectAreaName = codeToTextArr.join()
      this.$emit('regionData', this.projectAreaName, this.location)
    }
  }
}
</script>

<style scoped>

</style>
