<template>
    <view>
        <!-- components/multipleSelect.wxml -->
        <!-- 多选插件 -->
        <mp-half-screen-dialog extClass="multipleBox" :closabled="false" :show="dialogVisible" :maskClosable="true" @close="sure">
            <view class="title" slot="title">
                <view class="funBtn" @tap.stop.prevent="closeDialog">
                    <mp-icon icon="close" color="#3d5afe" :size="20"></mp-icon>
                </view>
                <view>{{ title }}</view>
                <view class="funBtn" @tap.stop.prevent="sure">
                    <mp-icon icon="done" color="#3d5afe" :size="20"></mp-icon>
                </view>
            </view>
            <view class="address" slot="desc">
                <view class="address_item" :data-index="key" @tap.stop.prevent="changeZT" v-for="(item, key) in array" :key="key">
                    <text>{{ item[label] }}</text>

                    <icon v-if="!item.check" class="icon-small" type="circle" size="18"></icon>

                    <icon v-if="item.check" class="icon-small" type="success" size="18"></icon>
                </view>
            </view>
        </mp-half-screen-dialog>
    </view>
</template>

<script>
// components/multipleSelect.js
export default {
    components: {},
    data() {
        return {
            array: []
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        /* 
    标题（非必填）
  */
        title: {
            type: String,
            default: ''
        },
        label: {
            type: String,
            default: 'label'
        },
        value: {
            type: String,
            default: 'value'
        },

        /* 
    已选中的项，用于回显使用
  */
        checkList: {
            type: String,
            default: ''
        },
        dialogVisible: {
            type: Boolean,
            default: false
        },
        multipleArray: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        dialogVisible: {
            handler: function () {
                if (this.dialogVisible) {
                    let data = JSON.parse(JSON.stringify(this.multipleArray));
                    const checkArr = this.checkList.split(',');
                    data.forEach((item) => {
                        const bool = checkArr.some((i) => i === item[this.value]);

                        if (bool) {
                            item.check = true;
                        } else {
                            item.check = false;
                        }
                    });
                    this.setData({
                        array: data
                    });
                }
            },

            immediate: true,
            deep: true
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        changeZT(e) {
            const { index } = e.currentTarget.dataset;
            this.array[index].check = !this.array[index].check;
        },

        closeDialog() {
            this.$emit('close');
        },

        sure() {
            let arr = this.array.filter((item) => item.check);
            this.$emit('sure', {
                detail: arr.map((item) => item[this.value]) || []
            });
        }
    }
};
</script>
<style>
@import './multipleSelect.css';
</style>
