<template>
    <el-row class="" :gutter="10">
        <el-col :span="10">
            <el-card>
                <div slot="header" class="header">
                    <el-input v-model="queryParams.searchKey" :placeholder="$t('用户名/手机/邮箱')" style="width:200px" />
                    <!-- <dict-selector :type="DICT_TYPE.USER_TYPE" v-model="queryParams.customerType" style="width:100px" /> -->
                    <el-button type="primary" @click="reLoad">{{$t('搜索')}}</el-button>
                </div>
                <div class="list">
                    <template  v-for="item in list" >
                        <div :key="item.customerContactsId" class="item" v-if="selectedIds.indexOf(item.customerContactsId) < 0">
                            <el-link class="el-icon-plus" @click="choose(item)" />
                            {{item.customerName}} - {{item.contactsName}} （{{item.areaCode}} {{item.phoneNew}}）
                        </div>
                    </template>
                </div>
            </el-card>
        </el-col>
        <el-col :span="10">
            <el-card>
                <div slot="header" class="header">
                    {{$t('已选客户')}}
                </div>
                <div class="list">
                    <div class="item" v-for="item in choosedList" :key="item.customerContactsId">
                        <el-link class="el-icon-delete" @click="remove(item)" />
                        {{item.customerName}} - {{item.contactsName}} （{{item.areaCode}} {{item.phoneNew}}）
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>
<script>
import {getCustomerContactsSelect, getCustomerContacts} from '@/api/ecw/customerContacts'
export default {
    props:{
        value: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data(){
        return {
            list:[],
            queryParams:{
                page: 1,
                pageSize: 500,
                searchKey: null,
                // level: null
            },
            choosedList:[]
        }
    },
    computed:{
        selectedIds(){
            let arr = []
            this.choosedList.forEach(item => {
                arr.push(item.customerContactsId)
            })
            return arr
        }
    },
    watch:{
        selectedIds(val){
            this.$emit('input', val)
        },
        value(val){
            if(Array.from(new Set(val)).sort().join(',') != Array.from(new Set(this.selectedIds)).sort().join(',')){
                this.getChoosedList()
            }
        }
    },
    created(){
        if(this.value && this.value.length){
            this.getChoosedList()
        }
        this.reLoad()
    },
    methods:{
        getChoosedList(){
            if(!this.value || !this.value.length){
                return
            }
            getCustomerContactsSelect({ids: this.value.join(',')})
                .then(res => {
                    this.$set(this, 'choosedList', res.data.list)
                })
        },
        reLoad(){
            this.queryParams.page = 1
            this.list = []
            this.getList()
        },
        getList(){
            getCustomerContactsSelect(this.queryParams).then(res => {
                this.list = res.data.list
            })
        },
        choose(item){
            this.choosedList.push(item)
        },
        remove(item){
            this.choosedList.forEach((choosed,index) => {
                if(choosed.customerContactsId == item.customerContactsId) this.choosedList.splice(index,1)
            })
        }
    }
}
</script>
<style scoped lang="scss">
.header{
    >div{
        margin-right: 5px;
    }
}
.list{
    height: 200px;
    border: 1px solid #ccc;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px;
}
</style>