<template>
    <div class="oSelect controller" :class="[preview ? '' : 'o-unit']" v-if="widget.type == 'select'">
        <van-field
            :name="widget.model"
            v-model="dataModel"
            :label="widget.name || '文本框'"
            :required="fileCheck ? false : options.required || false"
            :disabled="options.disabled || false"
            clearable
            readonly
            clickable
            :placeholder="options.placeholder || '请输入'"
            :rules="rule"
            clear-trigger="always"
            @click="onClick"
            v-if="!preview"
        >
            <template #right-icon>
                <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
            </template>
        </van-field>

        <van-cell class="preview" :title="widget.name || '文本框'" :value="dataModel" v-else></van-cell>

        <van-popup v-model="showSelect" position="bottom" round style="height: 45%">
            <van-cell title=" " class="select-popup-header">
                <template #icon>
                    <van-icon name="arrow-down" size="22px" @click="showSelect = false" />
                </template>
                <span v-if="multiple" type="info" class="btnSure" style="padding: 0 .18rem;" @click="onPopupSubmit">确定</span>
            </van-cell>
            <van-checkbox-group v-if="multiple" class="select-list" v-model="selectValue">
                <van-checkbox class="select-item" v-for="(item, index) in columns" :key="index" :name="item">{{ item }}</van-checkbox>
            </van-checkbox-group>
            <van-radio-group v-model="radio" class="select-list" v-else>
                <van-radio class="select-item" v-for="(item, index) in columns" @click="onRadio" :key="index" :name="item">{{ item }}</van-radio>
            </van-radio-group>
        </van-popup>
    </div>
</template>
<script>

export default {
    name: 'oSelect',
    props: ['widget', 'preview', 'value', 'fileCheck'],
    data() {
        return {
            dataModel: this.widget.options?.defaultValue || null,
            showSelect: false,
            multiple: false, // 是否可以多选
            columns: [],
            selectValue: [], // 多选存值
            radio: null, // 单选的值
        }
    },
    mounted() {
        // 初始化参数
        this.options?.options?.forEach(item => {
            this.columns.push(item.value)
        })
        // 是否多选
        this.multiple = this.options?.multiple || false
        if(this.value) {
            const widget = this.widget
            // console.log(this.value, widget, 'select')
            const model = widget.originModel || widget.model
            for(let v in this.value) {
                if(v == model) {
                    this.dataModel = this.value[v]
                }
            }
        }
    },
    methods: {
        onClick() {
            this.showSelect = true
        },
        onPopupSubmit() {
            this.dataModel = this.selectValue.join(',')
            this.showSelect = false
            let relationArray = []
            this.options?.options?.forEach(item => {
                if(this.selectValue.includes(item.value)) {
                    let tempRelation = item.relationOptions || []
                    relationArray.push(...tempRelation)
                }
            })
            let uniqueArr = [...new Set(relationArray)]
            if(uniqueArr.length > 0) {
                this.$emit('relationFormChange', uniqueArr)
            }
        },
        onRadio() {
            this.dataModel = this.radio
            this.showSelect = false
            let relationArray = []
            this.options?.options?.forEach(item => {
                if(this.radio == item.value) {
                    let tempRelation = item.relationOptions || []
                    relationArray.push(...tempRelation)
                }
            })
            if(relationArray.length > 0) {
                this.$emit('relationFormChange', relationArray)
            }
        }
    },
    computed: {
        options() {
            return this.widget.options || {}
        },
        rule() {
            let rules = this.widget.rules || []
            if(rules && rules.length > 0) {
                rules.forEach(item => {
                    if(item.pattern) {
                        item.pattern = eval(item.pattern)
                    }
                    // 判断是否上传文件
                    if(this.fileCheck) {
                        item.required = false
                    }
                });
            }
            return rules
        }
    },
    watch: {
        // dataModel: {
        //     deep: true,
        //     handler(newValue) {
        //         if (newValue !== undefined && newValue !== null) {
        //         }
        //     }
        // },
    }
}
</script>

<style lang='less' scoped>
@import url('./controlCommon.less');
.select-popup-header {
    align-items: center;
    position: fixed;
    background: #fff;
    z-index: 99;
    border-radius: 16px 16px 0 0;
}
.select-list {
    padding-top: 60px;
    padding-bottom: .2rem;
    .select-item {
        padding: 12px 16px;
    }
}
.btnSure {
    padding: 0 18px;
    background-color: #01C1B5;
    font-size: 12px;
    height: 32px;
    border-radius: 32px;
    line-height: 32px;
    display: inline-block;
    color: #fff;
}
</style>