<template>
  <el-cascader :options="options" :props="props" clearable v-bind="$attrs" v-on="$listeners"></el-cascader>
</template>

<script>
import chinaAreaData from 'china-area-data'

const AreaTreeData = listToTree(codeToList('86', chinaAreaData), chinaAreaData)

function listToTree(list, data) {
  return list.map(item => {
    const items = codeToList(item.code, data)
    if (items.length) {
      item.children = listToTree(items, data)
    }
    return item
  })
}
function codeToList(code, data) {
  const results = []
  const item = data[code]
  for (const code in item) {
    results.push({ code, name: item[code] })
  }
  return results
}

export default {
  props: {
    props: {
      type: Object,
      default() {
        return { label: 'name', value: 'name', expandTrigger: 'hover' }
      }
    }
  },
  data() {
    return {
      options: AreaTreeData
    }
  }
}
</script>
