<template>
    <!-- 下拉单选 -->
    <popup-picker
        :display-format="() => formItem.value"
        :placeholder="listItem.placeholder"
        v-model="checked"
        :columns="1"
        :data="listItem.option.list"
        @on-change="change"
    >
        <template slot="title">
            <slot></slot>
        </template>
    </popup-picker>
</template>

<script>
import common from '@/common/formRender/mixin/common.js'
import { PopupPicker } from 'vux'
export default {
    name: 'FormRadio',
    mixins: [common],
    components: { PopupPicker },
    props: {
        subform: { type: Object, default: () => ({}) },
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        const { checked } = this.listItem.option
        return {
            checked: checked ? [checked] : []
        }
    },
    created () {
        this.verifyInit()
    },
    methods: {
        // 切换选项同步 value，并改变关联项的隐藏
        change (checked) {
            checked = checked[0] - 0
            this.formItem.value = this.listItem.option.list.find(item => item.value === checked).name
            this.radioHide(this.subform, this.listItem.option.list, checked) // mixin
            this.clearValidate()
        },
        // 校验初始化
        verifyInit () {
            const rules = []
            const { required } = this.listItem.verify
            if (required) rules.push(this.required(this.listItem.title))
            if (rules.length) this.validator = new this.Schema({ value: rules })
        },
        // 校验
        verify () {
            return this.validate({ value: this.formItem.value })
        }
    }
}
</script>

<style lang="less" scoped>
</style>
