<template>
    <Form ref="form" class="merchant-service-form" v-model="form" :inline="false" :labelWidth="'200px'" :disabled="disabled">
        <Input label="服务主题" prop="name" required :maxlength="30"/>
        <CategoryCascader label="服务类型" prop="cateId" required/>
        <Images label="轮播图" prop="images" required :limit="9"/>
        <Editor label="服务内容" prop="serviceDesc" required/>
        <Editor label="费用说明" prop="priceDesc" required/>
        <InputNumber label="优金豆（个）" prop="coin" :max="99999"  :placeholder="coinPlaceholder" required/>
        <DictSelect ref="goodsUnit" label="报价单位" prop="goodsUnit" dictType="goods_unit" :placeholder="goodsUnitPlaceholder" emptyLabel="请选择" required/>
        <Input v-if="isOtherUnit" label="其他单位" prop="otherUnit" :maxlength="10" required/>
        <InputNumber label="大概服务时长（小时）" :max="999.9" :precision="1" prop="singleTime" required/>
        <Cell>{{remarkContent}}</Cell>
        <Cell label="选择服务人员" prop="serverUserList" required>
            <DialogForm btnName="选择人员" title="选择服务人员" :onSubmit="handleSubmit">
                <Table :queryApi="serverUserList">
                    <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>
        </Cell>
        <TableInfo prop="serverUserList">
            <template #default>
                <Column label="姓名" prop="realName" />
                <Column label="手机号" prop="phone" />
                <DictColumn label="级别" prop="serverLevel" dictType="007"/>
                <InputNumberColumn :label="priceLabel" prop="goodsServerPrice" :max="99999999.99" :precision="2"/>
            </template>
        </TableInfo>
        
        
        <el-form-item style="width: 100%; text-align:center">
            <el-button @click="$router.go(-1)">返回</el-button>
            <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
        </el-form-item>
    </Form>
</template>

<script>
import CategoryCascader from './CategoryCascader.vue'
import {save, detail, serverUserList} from '@/api/merchant/merchantService'
import {clone, includes} from 'lodash'

export default {
    name: "MerchantServiceForm",
    components: {CategoryCascader},
    props: {
        goodsId: {
            type: String
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            form: {
                serverUserList: []
            },
            saving: false
        }
    },
    computed: {
        coinPlaceholder(){
            return '设置顾客下单，服务完成后点评此服务奖励的优金豆数量，请不要高于商品营业额的20%。100个优金豆相当于1元人民币'
        },
        goodsUnitPlaceholder(){
            return '选择价格后面的单位，例如：200元 / 50平方米'
        },
        remarkContent(){
            return `注：请填写服务完成每个单位项目的大概时长，例如：此项目为擦玻璃 50元/50平方米，
                填写大概时长0.5小时，如果顾客下单数量x2，即100平方米，系统会自动计算大概时长1小时。
                此时长只作为判断一个服务人员在某个时间段内是否有服务中的订单，是否允许预约。`
        },
        isOtherUnit(){
            return this.form.goodsUnit === '999'
        },
        priceLabel(){
            const {goodsUnit, otherUnit} = this.form
            if (!goodsUnit || goodsUnit.trim() === '' || 
                (this.isOtherUnit && (!otherUnit || otherUnit.trim() === ''))) {
                return '单价（ 元 / 待选择 ）'
            }
            return `单价（ 元 / ${this.isOtherUnit? otherUnit: this.$refs.goodsUnit?.selectedLabel || '待选择'} ）`
        }
    },
    created(){
        this.getDetail()
    },
    watch:{
        goodsId(){
            this.getDetail()
        }
    },
    methods: {
        serverUserList,
        async handleSave(){
            console.log(this.$refs.form);
            await this.$refs.form.validate()
            this.saving = true
            try{
                const {code} = await save(this.form)
                if(code===200){
                    this.$message.success('保存成功')
                    this.$router.go(-1)
                }
            } finally {
                this.saving = false
            }
        },
        async getDetail(){
            if (!this.goodsId) {
                return
            }
            const {data} = await detail(this.goodsId)
            this.form = data
        },
        checkSelectable(row){
            const selected = this.form.serverUserList.map(({serverId}) => serverId)
            return !includes(selected, row.serverId)
        },
        async handleSubmit({selections}){
            this.form.serverUserList.push(...clone(selections))
        }
        
    }
};
</script>

<style>

.merchant-service-form.el-form--inline .el-form-item {
  width: calc(50% - 10px);
}
.merchant-service-form>.el-form-item>.el-form-item__content>.el-input,
.merchant-service-form>.el-form-item>.el-form-item__content>.el-input-number>.el-input,
.merchant-service-form>.el-form-item>.el-form-item__content>.el-select>.el-input,
.merchant-service-form>.el-form-item>.el-form-item__content>.el-cascader>.el-input {
  width: 300px;
}
</style>