<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"
            />
            <cell class="lbt">
                {{ideaContent}}
            </cell>
            <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"
            />

            <el-form-item label="规格">
                <el-row
                    v-for="(item, index) in form.goodsSpecificationList"
                    :key="item.goodsSpecificationId"
                >
                    <label class="goods-specification-label" style="margin-right: 5px;">描述</label>
                    <el-input
                        class="goods-specification-input"
                        v-model="item.specificationDesc"
                        size="small"
                        style="width: 120px"
                        maxlength="50"
                    />

                    <label class="goods-specification-label">次数</label>
                    <el-input-number
                        class="goods-specification-input"
                        v-model="item.times"
                        size="small"
                        style="width: 120px"
                        maxlength="7"
                        :min="1"
                        :max="999"
                    />

                    <label class="goods-specification-label">现价</label>
                    <el-input
                        class="goods-specification-input2"
                        v-model="item.currentPrice"
                        size="small"
                        style="width: 120px"
                        maxlength="7"
                        min="0.01"
                        oninput="value=value.replace(/[^0-9.]/g,'') "
                    /><span class="goods-specification-span">元</span>

                    <label class="specification-label">划线价</label>
                    <el-input
                        class="goods-specification-input2"
                        v-model="item.scribingPrice"
                        size="small"
                        style="width: 120px"
                        maxlength="7"
                        :min="0.01"
                        oninput="value=value.replace(/[^0-9.]/g,'')"
                    /><span class="goods-specification-span">元</span>
                    <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-plus"
                        @click="add"
                        plain
                        >增加</el-button
                    >
                    <el-button
                        v-if="
                            form.goodsSpecificationList.length > 1 &&
                            index > 0
                        "
                        type="danger"
                        size="mini"
                        icon="el-icon-minus"
                        @click="del(index)"
                        plain
                        >删除</el-button
                    >
                </el-row>
            </el-form-item>

            <Radio
                class="expiration-date"
                label="有效期"
                :data="radioList"
                prop="expirationDate"
            />
            <InputNumber v-if="form.expirationDate === '6'"
                class="expiration-date-value"
                prop="expirationDateValue"
                :max="99999"
                :min="1"
                :label-width="'0px'"
                required
            /><span v-if="form.expirationDate === '6'" class="expiration-date-value-span">天</span>

            <InputNumber
                label="限购数量"
                :max="999"
                :precision="0"
                prop="maxNum"
                :suffix="remarkContent"
            />
        </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 { saveGroupGoods, getGroupGoodsDetail } from "@/api/merchant/merchantService";
import { mapGetters } from 'vuex'
import Cell from '../../../../components/element/form/items/Cell.vue';

export default {
    components: { CategoryCascader, ServerUserSelector, Cell },
    props: {
        goodsId: {
            type: String,
        },
        isDetail: {
            type: Boolean,
            default: false,
        },
        flag:{
            type:Boolean,
            default:false,
        }
    },
    data() {
        return {
            isShowVideo:true,
            isShowImages:true,
            text:"",
            form: {
                expirationDate: "1",
                images: "",
                video:"",
                serviceDesc: "",
                priceDesc: "",
                // 规格
                goodsSpecificationList: [
                    {
                        specificationDesc: "",
                        times: 1,
                        currentPrice: "",
                        scribingPrice: "",
                        merchantId: "",
                    },
                ],
            },

            radioList: [
                { label: "不限制", value: "1" },
                { label: "30天", value: "2" },
                { label: "60天", value: "3" },
                { label: "90天", value: "4" },
                { label: "365天", value: "5" },
                { label: "自定义", value: "6" },
            ],
            saving: false,
        };
    },
    computed: {
        ...mapGetters(['merchantId']),
        ideaContent(){
            return '建议尺寸750*600px，最多9张';
        },
        coinRemark() {
            return "设置顾客下单，服务完成后点评此服务奖励的优金豆数量，请不要高于商品营业额的20%，100个优金豆相当于1元人民币。";
        },
        remarkContent() {
            return `注：不输入数字即视为不限购买份数。`;
        },
    },
    created() {
        this.getDetail();
    },
    watch: {
        goodsId() {
            this.getDetail();
        },
    },
    methods: {
        async handleSave() {
            // 校验必填字段是否填写
            try {
                await this.$refs.form.validate();
            } catch (error) {
                return
            }
            // 校验其他信息
            if (this.form.expirationDate && this.form.expirationDate === '1') {
                // 不限制
                this.form.expirationDateValue = "-99"
            } else if (this.form.expirationDate && this.form.expirationDate === '2') {
                // 30天
                this.form.expirationDateValue = 30
            } else if (this.form.expirationDate && this.form.expirationDate === '3') {
                // 60天
                this.form.expirationDateValue = 60
            } else if (this.form.expirationDate && this.form.expirationDate === '4') {
                // 90天
                this.form.expirationDateValue = 90
            }else if (this.form.expirationDate && this.form.expirationDate === '5') {
                // 365天
                this.form.expirationDateValue = 365
            }
            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 (var i = 0; i < this.form.goodsSpecificationList.length; i++) {
                 if (!this.form.goodsSpecificationList[i].specificationDesc || this.form.goodsSpecificationList[i].specificationDesc.length > 50) {
                    this.$message.warning("规格描述不能为空，且长度不得超过50");
                    return;
                }
                if (!this.form.goodsSpecificationList[i].times) {
                    this.$message.warning("规格次数不能为空，且必须大于0");
                    return;
                }
                if (!this.form.goodsSpecificationList[i].currentPrice || this.form.goodsSpecificationList[i].currentPrice < 0.01) {
                    this.$message.warning("规格现价不能为空，且必须大于或等于0.01");
                    return;
                }
                if (this.form.goodsSpecificationList[i].currentPrice && this.form.goodsSpecificationList[i].currentPrice < 0.01) {
                    this.$message.warning("规格现价不为空时必须大于或等于0.01");
                    return;
                }
                  if (!this.form.goodsSpecificationList[i].scribingPrice || this.form.goodsSpecificationList[i].scribingPrice < 0.01) {
                    this.$message.warning("规格划线价格不能为空，且必须大于或等于0.01");
                    return;
                }
                if (this.form.goodsSpecificationList[i].scribingPrice && this.form.goodsSpecificationList[i].scribingPrice < 0.01) {
                    this.$message.warning("规格划线价格不为空时必须大于或等于0.01");
                    return;
                }
                if (this.form.maxNum && this.form.maxNum < 1) {
                    this.$message.warning("限购数量不为空时必须大于或等于1");
                    return;
                }
                if (!this.merchantId) {
                    this.$message.warning("商家id不能为空");
                    return;
                } else {
                    this.form.goodsSpecificationList[i].merchantId = this.merchantId;
                }
            }

            this.saving = true;
            try {
                await saveGroupGoods(this.form);
                this.$message.success("保存成功");
                this.$router.go(-1);
            } finally {
                this.saving = false;
            }
        },
        async getDetail() {
            if (!this.goodsId) {
                return;
            }
            const { data } = await getGroupGoodsDetail(this.goodsId);
            debugger
            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;
        },

        // 新增规格
        add() {
            let field = {
                specificationDesc: "",
                times: 1,
                currentPrice: "",
                scribingPrice: "",
            };
            this.form.goodsSpecificationList.push(field);
        },
        // 移除规格
        del(index) {
            if (this.form.goodsSpecificationList.length == 1) {
                this.$modal.msgError("至少需要一个规格");
                return;
            }
            this.form.goodsSpecificationList.splice(index, 1);
        },
    },
};
</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;
}
.expiration-date {
    width: 710px;
    display: inline-block;
}

.expiration-date-value {
    width: 105px;
    display: inline-block;
}

.expiration-date-value .el-input{
     width: 105px !important;
}

.expiration-date-value-span {
    color: #606266;
    line-height: 1;
    font-size: 14px;
    margin-left: 5px;
}

.goods-specification-input {
    margin-right: 20px;
}

.goods-specification-input2 {
    margin-right: 10px;
}

.goods-specification-span {
    margin-right: 20px;
    color: #606266;
    font-weight: normal;
}

label.goods-specification-label:before {
    content: "* ";
    color: red;
    margin-bottom: 5px;

}
label.goods-specification-label {
    margin-right: 5px;
    color: #606266;
    font-weight: normal;
}
label.specification-label {
    margin-right: 5px;
    color: #606266;
    font-weight: normal;
}
.lbt{
    color: #999999;
}
</style>
