<template>
    <div style="width: 100%;">
        <el-input v-model="selectName" :readonly="readonly" :placeholder="placeholder">
            <el-button slot="append" icon="el-icon-search" @click="openUserSelect"></el-button>
        </el-input>

        <GoodsSelect ref="userSelectRef" :multiple="multiple" :data="selectData" @confirmCallBack="userSelectCallBack">
        </GoodsSelect>
    </div>
</template>

<script>
import GoodsSelect from './index.vue'
import { detailData } from '@/api/pointsMall';
export default {
    data() {
        return {
            selectName: '',
            selectData: ''
        }
    },
    components: {
        GoodsSelect
    },
    props: {
        multiple: {
            type: Boolean,
            default: false
        },
        placeholder: {
            value: String,
            default: '请选择'
        },
        value: {
            value: [String, Number],
            default: ''
        },
        readonly: {
            type: Boolean,
            default: true
        },
    },
    watch: {
        value: {
            handler: function (val, oVal) {
                if (val) {
                    this.selectData = val;
                    this.handleGoodsChange(val)
                }
            }
        },
        deep: true,
        immediate: true
    },


    methods: {
        openUserSelect() {
            this.$refs.userSelectRef.openModal(this.selectData)
        },
        userSelectCallBack(data) {
            if (data.length === 0) {
                this.selectName = undefined
                this.selectData = ''
            } else {
                this.selectName = data.map((item) => item.name).join(',');
                this.selectData = data.map((item) => item.code).join(',');
            }
            this.$emit('update:value', this.selectData);
            this.$emit('getValue', this.selectData, this.selectName);
        },
        handleGoodsChange(val) {
            detailData(val).then(res => {
                if (val) {
                    this.selectName = res.data.name;
                }
            })
        },

    }
}
</script>