<template>
    <el-component-cascader
            size="large"
            v-if="showProvince"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange">
    </el-component-cascader>
    <el-component-cascader
            size="large"
            v-else
            :options="optionsPro"
            v-model="selectedOptions"
            @change="handleChange">
    </el-component-cascader>
</template>

<script>
    import { provinceAndCityData,regionData,CodeToText } from 'element-china-area-data'
    import ElComponentCascader from "@/lib/components/Select/src/cascader";
    export default {
        name: "sh-city-select",
        components: {ElComponentCascader},
        props:{
            showProvince: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                options: provinceAndCityData,
                optionsPro: regionData,
                selectedOptions: []
            }
        },
        methods: {
            handleChange (value) {
                let data = null
                if(this.showProvince) {
                    data = CodeToText[value[0]]+ '/'+ CodeToText[value[1]]
                } else {
                    data = CodeToText[value[0]]+ '/'+ CodeToText[value[1]]+'/'+ CodeToText[value[2]]
                }
                this.$emit('cityChange', data)
            }
        }
    }
</script>

<style scoped>
</style>
