<template>
    <!-- 地址 -->
    <group gutter="0">
        <popup-picker
            show-name
            :placeholder="listItem.placeholder"
            v-model="region"
            :columns="columns[listItem.address.type]"
            :data="list"
            @on-change="change"
            ref="picker"
            class="form-item"
            :info.prop="info(listItem.title, { value: formItem.value.region, hide: formItem.hide }, subform.uuid && subform.title)"
        >
            <template slot="title">
                <div class="label">
                    <i :class="{ required: listItem.verify.required }"></i>
                    <span class="item-title" @click.stop.prevent>{{ listItem.nth }}{{ listItem.title }}</span>
                    <i class="tips" data-field="region"></i>
                </div>
            </template>
        </popup-picker>
        <x-textarea
            class="address-detail form-item"
            v-model="formItem.value.detail"
            :placeholder="listItem.placeholder2"
            :rows="3"
            :info.prop="info('详细地址', { value: formItem.value.detail, hide: formItem.hide }, subform.uuid && subform.title)"
            @on-change="clearValidate"
            @on-blur="verify().catch(() => {})"
            v-if="listItem.address.type === 1"
        >
            <i slot="label" class="tips" data-field="detail"></i>
        </x-textarea>
    </group>
</template>

<script>
import common from '@/common/formRender/mixin/common.js'
import { Group, PopupPicker, XTextarea } from 'vux'
export default {
    name: 'FormAddress',
    mixins: [common],
    components: { Group, PopupPicker, XTextarea },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) },
        subform: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            list: [],
            region: this.listItem.address.value,
            columns: { 1: 3, 2: 3, 3: 2, 4: 1 } // 弹窗列数，1 2 省市区 3 列，3 省市 2 列，4 省 1 列
        }
    },
    created () {
        this.init()
        this.verifyInit()
    },
    methods: {
        // 获取省市区（1 2 省市区，3 省市，4 省）
        init () {
            const call = res => {
                // 转一维数组: name, value: code, parent(子)
                const dataList = []
                const loop = (list, parent = '') => {
                    list.forEach(item => {
                        dataList.push({ name: item.name, value: item.code, parent })
                        if (item.children) loop(item.children, item.code)
                    })
                }
                loop(res.data)
                this.list = dataList
            }
            if (this.listItem.address.type <= 2) this.$api.commonApi.getPCA().then(call)
            else if (this.listItem.address.type === 3) this.$api.commonApi.getPC().then(call)
            else this.$api.commonApi.getP().then(call)
        },
        // 同步 value
        change () {
            this.formItem.value.region = this.$refs.picker.getNameValues()
            this.clearValidate()
        },
        // 获取校验规则
        rules (item, type) {
            const rules = []
            if (item.verify.required) rules.push(this.required(!type ? item.title : '详细地址')) // mixin
            return rules
        },
        // 校验初始化
        verifyInit () {
            const rule = { region: this.rules(this.listItem) }
            if (this.listItem.address.type === 1) rule.detail = this.rules(this.listItem, 'detail')
            this.validator = new this.Schema(rule)
        },
        // 校验
        verify () {
            return this.validate(this.formItem.value)
        }
    }
}
</script>

<style lang="less" scoped>
.el-cascader {
    display: block;
}
</style>
