<template>
    <!-- 矩阵单选 -->
    <div>
        <basic-edit hide-placeholder></basic-edit>
        <option-edit title="题目" prop="value"></option-edit>
        <option-edit radio unwatch @init="watch"></option-edit>
        <verify-edit></verify-edit>
    </div>
</template>

<script>
export default {
    name: 'FormRadioMatrix',
    components: {
        BasicEdit: () => import('@/common/formDesign/components/formEdit/components/BasicEdit'),
        OptionEdit: () => import('@/common/formDesign/components/formEdit/components/OptionEdit'),
        VerifyEdit: () => import('@/common/formDesign/components/formEdit/components/VerifyEdit')
    },
    data () {
        return {
            formItem: this.$store.state.form.formItem
        }
    },
    created () {
        this.init()
    },
    methods: {
        // 初始化
        init () {
            if (!this.formItem.value) {
                this.$set(this.formItem, 'value', [
                    { name: '题目 1', value: '' },
                    { name: '题目 2', value: '' },
                    { name: '题目 3', value: '' }
                ])
            }
        },
        // 监听 checked 同步 value
        watch () {
            this.$watch('formItem.option.checked', function (value) {
                this.formItem.value.forEach(item => {
                    item.value = value
                })
            })
        }
    }
}
</script>

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