<template>
  <div class="area">
    <div>
      <!-- <span class="imp">1. 二级联动（不带“全部”选项）</span> -->
      <el-cascader
        v-model="selectedOptions1"
        :options="provinceAndCityData"
        size="small"
        filterable
        clearable
        @change="handleChange"
        style="width:100%"
        />
    </div>
    <!--
    <div class="bind">
      <div>绑定值：{{ selectedOptions1 }}</div>
      <div>区域码转汉字：{{ CodeToText[selectedOptions1[0]] }},{{ CodeToText[selectedOptions1[1]] }}</div>
      <div>汉字转区域码：{{ convertTextToCode(CodeToText[selectedOptions1[0]], CodeToText[selectedOptions1[1]]) }}</div>
    </div>
     -->
  </div>
</template>

<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from './app.js'

export default {
  data() {
    return {
      CodeToText,
      TextToCode,
      BeiJing: CodeToText['110000'],
      provinceAndCityData,
      provinceAndCityDataPlus,
      regionData,
      regionDataPlus,
      selectedOptions1: ['110000', '110000'],
      selectedOptions2: ['120000', '120100', '120101'],
      selectedOptions3: ['130000', ''],
      selectedOptions4: ['120000', '120100', '']
    }
  },
  mounted() {
    /* console.log(this.TextToCode['北京市'].code)
    console.log(this.TextToCode['北京市']['市辖区'].code)
    console.log(this.TextToCode['北京市']['市辖区']['朝阳区'].code) */
  },
  methods: {
    handleChange(value) {
      /* console.log(value) */
      // 父组件 回调传参
      this.$emit('cityChange', value)
    },
    convertTextToCode(provinceText, cityText, regionText) {
      let code = ''
      if (provinceText && this.TextToCode[provinceText]) {
        const province = this.TextToCode[provinceText]
        code += province.code + ', '
        if (cityText && province[cityText]) {
          const city = province[cityText]
          code += city.code + ', '
          if (regionText && city[regionText]) {
            code += city[regionText].code
          }
        }
      }
      return code
    }
  }
}
</script>

<style>
.long {
  width: 250px;
}
.area {
  padding-top: 0px;
  margin: 0 auto;
  min-width: 200px;
}
.three {
  margin-top: 100px;
}
.bind {
  margin-top: 20px;
  line-height: 40px;
  text-indent: 15px;
}
.imp {
  color: #409eff;
}
</style>
