<template>
  <div class="linkage">
    <!-- <el-col :span="24" class="cityParent">
      <el-form-item label="所在城市" prop="province">
        <el-col :span="24">
          <el-select :style="{width: widthselect + 'px'}"
           v-model="selectProv"
           placeholder="请选择所在省/直辖市"
           v-on:change="getProv($event)">
            <el-option
              v-for="item in provs"
              :label="item.text"
              :value="item.text"
              :key="item.index">
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item prop="city" class="cityChild"
        :style="{left: labelW ? (widthselect + labelW + 6 + 'px'):(widthselect + 6 + 'px')}">
        <el-select :style="{width: widthselect + 'px', marginLeft: labelW ? (-labelW +'px'): 0}"
           v-model="selectCity"
           placeholder="请选择所在城市"
           v-on:change="getCity($event)">
          <el-option
            v-for="item in citys"
            :label="item.text"
            :value="item.text"
            :key="item.index">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col> -->
    <el-row>
      <el-col :span="12">
        <el-select
          v-model="sheng"
          @change="choseProvince"
          placeholder="省/直辖市">
          <el-option
            v-for="item in province"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-select
          v-model="shi"
          @change="choseCity"
          placeholder="所在城市">
          <el-option
            v-for="item in shi1"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <!-- <el-col :span="8">
        <el-select
          v-model="qu"
          @change="choseBlock"
          placeholder="区(县)">
          <el-option
            v-for="item in qu1"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col> -->
    </el-row>
  </div>
</template>
<script>
import queryDict from '@/utils/queryDict'
export default {
  props: ['addrCode'],
  data() {
    return {
      firstFlag: false,
      province: [],
      sheng: '',
      shi: '',
      shi1: [],
      qu: '',
      qu1: [],
      city: '',
      block: ''
    }
  },
  watch: {
    addrCode: function() {
      this.initpsq()
    }
  },
  methods: {
    getCityData: function() {
      var that = this
      queryDict.applyDict('XZQH', function(dictData) {
        if (dictData) {
          var data = dictData.sort((obj1, obj2) => {
            return obj1.code - obj2.code
          })
          that.province = {}
          data.map(item => {
            if (item.code.match(/0000$/)) {
              that.province[item.code] = { id: item.code, value: item.caption, children: {}}
            } else if (item.code.match(/00$/)) {
              var p = that.province[item.code.slice(0, 2) + '0000']
              p.children[item.code] = { id: item.code, value: item.caption, children: {}}
              if (!p.defaultChild) {
                p.defaultChild = p.children[item.code]
              }
            } else {
              var pp = that.province[item.code.slice(0, 2) + '0000'].children[item.code.slice(0, 4) + '00']
              pp.children[item.code] = { id: item.code, value: item.caption }
              if (!pp.defaultChild) {
                pp.defaultChild = pp.children[item.code]
              }
            }
          })
        } else {
          console.log(dictData.status)
        }
      })
    },
    choseProvince: function(e) {
      var p = this.province[e]
      this.shi1 = p.children
      this.shi = p.defaultChild.value
      this.qu1 = p.defaultChild.children
      this.qu = p.defaultChild.defaultChild.value
      this.E = p.defaultChild.defaultChild.id
      this.sheng = p.value
      this.$emit('paren', this.E)
    },
    choseCity: function(e) {
      var p = this.province[e.slice(0, 2) + '0000'].children[e]
      this.shi = p.value
      this.qu1 = p.children
      this.qu = p.defaultChild.value
      this.E = p.defaultChild.id
      this.$emit('paren', this.E)
    },
    choseBlock: function(e) {
      this.qu = this.province[e.slice(0, 2) + '0000'].children[e.slice(0, 4) + '00'].children[e].value
      this.E = e
      this.$emit('paren', this.E)
    },
    initpsq: function() {
      if (!this.addrCode) {
        this.sheng = ''
        this.shi = ''
        this.qu = ''
        return
      }
      const s = this.addrCode.substring(0, 2) + '0000'
      const si = this.addrCode.substring(0, 4) + '00'
      const x = this.addrCode
      var p = this.province[s]
      this.sheng = p.value
      this.shi = p.children[si].value
      this.qu = p.children[si].children[x].value
    }
  },
  created: function() {
    this.getCityData()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
