<template>
    <Container>
        <Table
            v-if="merchantId"
            ref="table"
            :queryApi="listGroupGoods"
            :labelWidth="'70px'"
        >
            <template #search>
                <CategoryCascader label="服务类型" prop="cateId" />
                <Input label="服务主题" prop="name" :maxlength="30" />
                <!-- <Input label="服务编号" prop="goodsIndex"/> -->
                <DictSelect
                    label="状态"
                    prop="isSale"
                    dictType="goods_status"
                />
            </template>
            <template #operations>
                <el-button
                    @click="handleAdd"
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    >创建服务</el-button
                >
            </template>
            <template #default>
                <!-- <Column type="index" label="序号"/> -->
                <Column label="服务编号" prop="goodsIndex" />
                <Column label="服务主题" prop="name" />
                <Column label="服务类型" prop="categoryName" />
                <Column
                    label="规格"
                    prop="goodsSpecificationList"
                    :min-width="100"
                    ><template #default="{ row }"
                        ><div
                            style="color: blue"
                            @click="() => handleGoodsSpecification(row)"
                        >
                            {{ (row.goodsSpecificationList || []).length }}种
                        </div></template
                    ></Column
                >
                <Column label="有效期" prop="expirationDateValue" :min-width="100">
                    <template #default="scope" >
                        {{scope.row.expirationDateValue > 0 ? `${scope.row.expirationDateValue}天`: '不限制'}}
                    </template>
                </Column>
                <DateColumn label="创建时间" prop="createTime" />
                <DictColumn
                    label="状态"
                    prop="isSale"
                    dictType="goods_status"
                />
                <Column label="操作">
                    <template #default="{ row }">
                        <el-button
                            type="text"
                            @click="() => handleDetail(row)"
                            icon="el-icon-view"
                            >查看</el-button
                        >
                        <el-button
                            type="text"
                            @click="() => handleModify(row)"
                            icon="el-icon-edit"
                            >编辑</el-button
                        >
                        <el-button
                            v-if="row.isSale === 0"
                            type="text"
                            @click="() => onShelfGroup(row)"
                            icon="el-icon-top"
                            >上架</el-button
                        >
                        <el-button
                            v-if="row.isSale === 1"
                            type="text"
                            @click="() => offShelf(row)"
                            icon="el-icon-bottom"
                            >下架</el-button
                        >
                        <el-button
                            type="text"
                            @click="() => remove(row)"
                            icon="el-icon-delete"
                            >删除</el-button
                        >
                    </template>
                </Column>

                <!-- 团购服务规格信息弹框 -->
                <el-dialog
                    :title="title"
                    :visible.sync="open"
                    append-to-body
                >
                <el-row :gutter="10">
                    <el-col v-for="item in goodsSpecifications" :key="item.id" :span="8" style="margin-bottom: 10px">
                        <el-card>
                            <p>
                                <span style="margin-right: 35px; font-size: 22px; font-weight: bold;">{{item.currentPrice}}元</span>
                                <s style="font-size: 16px;">{{item.scribingPrice}}元</s>
                            </p>
                            <p>
                                <span style="margin-right: 20px; font-size: 13px;">{{item.specificationDesc}}</span>
                                <span>{{item.times}}次</span>
                            </p>
                        </el-card>
                    </el-col>
                        
                </el-row>
                </el-dialog>
            </template>
        </Table>
        <el-alert
            v-else
            title="当前用户不存在商品信息"
            type="error"
            :closable="false"
            center
        />
    </Container>
</template>

<script>
import CategoryCascader from "./components/CategoryCascader.vue";
import { mapGetters } from "vuex";
import {
    listGroupGoods,
    remove,
    onShelfGroup,
    offShelf,
} from "@/api/merchant/merchantService";
import {
    listByGoodsId
} from "@/api/merchant/goodsSpecification";

export default {
    name: "MerchantService",
    components: { CategoryCascader },
    data() {
        return {
            open: false,
            // 弹出层标题
            title: "",
            // 服务规格列表
            goodsSpecifications:[]
        };
    },
    computed: {
        ...mapGetters(["merchantId"]),
        dayContent() {
            return `天`;
        },
    },
    methods: {
        listGroupGoods,
        onShelfGroup,
        offShelf,
        // 创建服务
        handleAdd() {
            this.$router.push("/merchant/groupService/create");
        },
        // 编辑服务
        handleModify({ goodsId }) {
            this.$router.push(
                "/merchant/groupService/modify?goodsId=" + goodsId
            );
        },
        // 查看服务详情
        handleDetail({ goodsId }) {
            this.$router.push(
                "/merchant/groupService/detail?goodsId=" + goodsId
            );
        },

        // 删除服务
        async remove({ name, goodsId }) {
            await this.$modal.confirm(
                '是否确认删除服务主题为"' + name + '"的数据项？'
            );
            const { code } = await remove(goodsId);
            if (code === 200) {
                this.$message.success("删除成功");
                this.$refs.table.getList();
            }
        },
        // 上架团购服务
        async onShelfGroup({ name, goodsId }) {
            await this.$modal.confirm(
                "是否确认上架服务主题为【" + name + "】的数据项？"
            );
            let data = {
                goodsId,
            };
            const { code } = await onShelfGroup(data);
            if (code === 200) {
                this.$message.success("上架成功");
                this.$refs.table.getList();
            }
        },
        // 下架团购服务
        async offShelf({ name, goodsId }) {
            await this.$modal.confirm(
                "是否确认下架服务主题为【" + name + "】的数据项？"
            );
            const { code } = await offShelf(goodsId);
            if (code === 200) {
                this.$message.success("下架成功");
                this.$refs.table.getList();
            }
        },

        // 查看服务规格信息
        handleGoodsSpecification(row) {
            this.open = true;
            this.title = "规格";
            let param = {
                goodsId: row.goodsId,
            };
            listByGoodsId(param).then((res) => {
                this.goodsSpecifications = res.data;
            });
        },
    },
};
</script>

