<template>
  <el-form-item :label="label" :rules="requireRule(required, label)" :prop="prop">
        <DialogForm :btnName="label" :title="label" :onSubmit="handleSubmit" :disabled="disabled">
            <Table :queryApi="serverUserList" :queryParams="{merchantId}">
                <template #search>
                    <Input label="姓名" prop="realName" />
                </template>
                <template #default>
                    <Column type="selection" :selectable="checkSelectable"/>
                    <Column label="姓名" prop="realName" />
                    <Column label="手机号" prop="phone" />
                    <DictColumn label="级别" prop="serverLevel" dictType="007" />
                    <Column label="工龄" prop="serverAge" />
                </template>
            </Table>
        </DialogForm>
        
            <Table :data="$parent.model[prop]">
                <template #default>
                    <Column label="姓名" prop="realName" />
                    <Column label="配图(如个人工作照)" prop="serverImgUrl" >
                        <template slot-scope="scope">
                            <Form v-model="scope.row">
                                <Images prop="serverImgUrl" :limit="1" class="server-img"/>
                            </Form>
                        </template>
                    </Column>
                    <Column label="手机号" prop="phone" />
                    <DictColumn label="级别" prop="serverLevel" dictType="007"/>
                    <InputNumberColumn :label="priceLabel" prop="goodsServerPrice" :max="99999999.99" :precision="2"/>
                    <Column label="操作">
                        <template #default="{row}">
                            <el-button type="text" @click="() => remove(row)">删除</el-button>
                        </template>
                    </Column>
                </template>
            </Table>
  </el-form-item>
</template>

<script>
import mixin from '@/components/element/form/items/mixin'
import {serverUserList} from '@/api/merchant/merchantService'
import {clone, includes} from 'lodash'
import { mapGetters } from 'vuex'
/**
 * 服务人员选择
 */
export default {
    mixins: [mixin],
    props: {
        priceLabel: {
            type: String
        },
    },
    computed:{
        ...mapGetters(['merchantId'])
    },
    methods: {
        serverUserList,
        checkSelectable(row){
            const selected = this.$parent.model[this.prop].map(({serverId}) => serverId)
            return !includes(selected, row.serverId)
        },
        handleSubmit({selections}){
            this.$parent.model[this.prop].push(...clone(selections))
            this.$parent.validateField(this.prop)
        },
        remove({serverId}){
            this.$parent.model[this.prop] = this.$parent.model[this.prop].filter(server => server.serverId !== serverId)
            this.$parent.validateField(this.prop)
        }
    }
}
</script>

<style>
.server-img{
    height:100px;
    margin: 0 !important;
}
.server-img .el-upload--picture-card{
    width: 100px;
    height:100px;
    line-height: 100px;
}
</style>
