<template>
    <!-- 地址 -->
    <div>
        <basic-edit></basic-edit>
        <div>
            <div class="title">默认值：</div>
            <el-cascader
                v-for="(item, index) in list"
                :key="index"
                :placeholder="typeList[index].name.replace('-详细地址', '')"
                :options="item"
                :props="{ label: 'name', value: 'code', expandTrigger: 'hover' }"
                clearable
                separator=" "
                v-model="formItem.address.value"
                @change="change(index)"
                ref="cascader"
                v-show="formItem.address.type - 1 === index"
            ></el-cascader>
            <el-input
                type="textarea"
                placeholder="详细地址"
                resize="none"
                v-model="formItem.value2"
                v-if="formItem.address.type === 1"
            ></el-input>
        </div>
        <div v-if="formItem.address.type === 1">
            <div class="title">详细地址提示文字：</div>
            <el-input v-model="formItem.placeholder2"></el-input>
        </div>
        <type-edit
            title="地址类型"
            :list="typeList"
            v-model="formItem.address.type"
            @change="clear"
        ></type-edit>
        <verify-edit></verify-edit>
    </div>
</template>

<script>
export default {
    name: 'FormAddress',
    components: {
        BasicEdit: () => import('@/common/formDesign/components/formEdit/components/BasicEdit'),
        TypeEdit: () => import('@/common/formDesign/components/formEdit/components/TypeEdit'),
        VerifyEdit: () => import('@/common/formDesign/components/formEdit/components/VerifyEdit')
    },
    data () {
        return {
            formItem: this.$store.state.form.formItem,
            list: [],
            typeList: [
                { name: '省-市-区-详细地址', value: 1 },
                { name: '省-市-区', value: 2 },
                { name: '省-市', value: 3 },
                { name: '省', value: 4 }
            ]
        }
    },
    created () {
        this.init()
        this.initData()
    },
    methods: {
        // 初始化
        init () {
            if (!this.formItem.verify) {
                this.$set(this.formItem, 'value', '')
                this.$set(this.formItem, 'address', {
                    value: [],
                    type: 1
                })
            }
        },
        // 获取省市区
        initData () {
            if (sessionStorage.formDesignAddressList) {
                // 因数据量较大，直接赋值会卡顿，所以改异步
                setTimeout(() => {
                    this.list = JSON.parse(sessionStorage.formDesignAddressList)
                })
            } else {
                const getPCA = this.$api.commonApi.getPCA().then(res => {
                    this.$set(this.list, 0, res.data)
                    this.$set(this.list, 1, res.data)
                })
                const getPC = this.$api.commonApi.getPC().then(res => {
                    this.$set(this.list, 2, res.data)
                })
                const getP = this.$api.commonApi.getP().then(res => {
                    this.$set(this.list, 3, res.data)
                })
                Promise.all([getPCA, getPC, getP]).then(() => {
                    sessionStorage.formDesignAddressList = JSON.stringify(this.list)
                })
            }
        },
        // 默认值同步
        change (index) {
            setTimeout(() => {
                this.formItem.value = this.$refs.cascader[index].$data.inputValue
            })
        },
        // 清除默认值
        clear () {
            this.formItem.value = ''
            this.formItem.address.value = []
        }
    }
}
</script>

<style lang="less" scoped>
.el-cascader {
    width: 100%;
}
.el-textarea {
    display: block;
    margin-top: 10px;
}
</style>
