<template>
    <div>
        <Form ref="form" class="merchant-service-form" v-model="form" :inline="false" :labelWidth="'200px'" :disabled="isDetail">
            <Input label="服务主题" prop="name" required :maxlength="30"/>
            <Input label="服务编号" prop="goodsIndex" required :maxlength="40" v-if="isDetail"/>
            <CategoryCascader label="服务类型" prop="cateId" required/>
            <Images
                label="轮播图"
                prop="images"
                :limit="8"
                :disabled="isDetail"
                :CutFlag="true"
                v-if="isShowImages"
            />
            <Videos
                :label="text"
                prop="video"
                :limit="1"
                :disabled="isDetail"
                v-if="isShowVideo"
            />
            <p class="t"> 
            <cell class="idea">{{ideaContent}}</cell>
            </p>
            <Editor label="服务内容" prop="serviceDesc" required :disabled="isDetail"/>
            <Editor label="费用说明" prop="priceDesc" required :disabled="isDetail"/>
            <InputNumber class="coin" label="优金豆（个）" prop="coin" :max="99999" required :suffix="coinRemark"/>
            <DictSelect ref="goodsUnit" label="报价单位" prop="goodsUnit" dictType="goods_unit" :placeholder="goodsUnitPlaceholder" emptyLabel="请选择" required/>
            <Input class="other-unit" v-if="isOtherUnit" label="其他单位" placeholder="其他单位，如: 平方米" prop="otherUnit" :maxlength="6" required/>
            <span v-if="isOtherUnit" class="suffix">选择价格后面的单位，例如: <u>平方米</u></span>
            <InputNumber :disabled="isHourUnit" label="大概服务时长（小时）" :max="999.9" :precision="1" prop="singleTime" required/>
            <Cell>{{remarkContent}}</Cell>
            <ServerUserSelector label="选择服务人员" prop="serverUserList" :priceLabel="priceLabel" :disabled="isDetail" required/>
        </Form>
        <div style="width: 100%; text-align:center">
            <el-button @click="$router.go(-1)">返回</el-button>
            <el-button type="primary" v-show="!isDetail" @click="handleSave" :loading="saving">保存</el-button>
        </div>
    </div>
</template>

<script>
import CategoryCascader from './CategoryCascader.vue'
import ServerUserSelector from './ServerUserSelector.vue'
import {save, detail} from '@/api/merchant/merchantService'
import Cell from '../../../../components/element/form/items/Cell.vue'

export default {
    components: {CategoryCascader, ServerUserSelector},
    
    // Cellprops: {
     props: {
        goodsId: {
            type: String,
        },
        isDetail: {
            type: Boolean,
            default: false,
        },
        flag:{
            type:Boolean,
            default:false,
        }
    },
    data(){
        return {
            isShowVideo:true,
            isShowImages:true,
            text:"",
            form: {
                serverUserList: [],
                images: "",
                video:"",
                serviceDesc: "",
                priceDesc: "", 
                
            },
            saving: false
        }
    },
    computed: {
        ideaContent(){
            return '建议尺寸750*600px，最多9张'
        },
        coinRemark(){
            return '设置顾客下单，服务完成后点评此服务奖励的优金豆数量，请不要高于商品营业额的20%，100个优金豆相当于1元人民币。'
        },
        goodsUnitPlaceholder(){
            return '选择价格后面的单位，例如：200元 / 50平方米'
        },
        remarkContent(){
            return `注：请填写服务完成每个单位项目的大概时长，例如：此项目为擦玻璃 50元/50平方米，
                填写大概时长0.5小时，如果顾客下单数量x2，即100平方米，系统会自动计算大概时长1小时。
                此时长只作为判断一个服务人员在某个时间段内是否有服务中的订单，是否允许预约。`
        },
        isOtherUnit(){
            return this.form.goodsUnit === '999'
        },
        isHourUnit(){
            const isHour = this.form.goodsUnit === '1'
            if (isHour) {
                this.form.singleTime = 1
            }
            return isHour
        },
        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: {
        async handleSave(){
            // 校验必填字段是否填写  
            try {
                await this.$refs.form.validate();
            } catch (error) {
                return
            }
            // 校验其他信息
            const name = this.form.name;
            if (name && name.length > 30) {
                return this.$modal.msgError("服务主题长度不得超过30")
            }
            const images = this.form.images;
            const video = this.form.video;
            if ((!images&&!video) || ((images && images.length === 0)&&(video && video.length === 0))) {
                return this.$modal.msgError("轮播图不能为空");
            }
            for (const {goodsServerPrice} of this.form.serverUserList) {
                if (!goodsServerPrice) {
                    this.$message.warning('服务人员单价不能为空，且必须大于0')
                    return
                }
            }

            this.saving = true
            try{
                await save(this.form)
                this.$message.success('保存成功')
                this.$router.go(-1)
            } finally {
                this.saving = false
            }
        },
        async getDetail(){
            if (!this.goodsId) {
                return
            }
            const {data} = await detail(this.goodsId)
            console.log(this.flag)
            if(this.flag){
                if(data.video==""||data.video==null){
                this.isShowVideo = false
                }else{
                    this.isShowVideo = true
                }
                if(data.images==""||data.images==null){
                    this.isShowImages = false
                    this.text="轮播图"
                }else{
                    this.isShowImages = true
                }
            }
           
            this.form = data
        }
    }
};
</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,
.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;
}

.merchant-service-form.el-form--inline .coin{
    width: 500;
}

.suffix{
    font-size: 14px;
    color: #FF6600;
    line-height: 20px;
    padding-left: 20px;
}
.other-unit{
    width: 500px;
    display: inline-block;
}

.idea{
    color: #999999;
   
}
</style>
