<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="80px"
        >
            <el-form-item label="发布日期">
                <el-date-picker
                    v-model="searchDate"
                    type="daterange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    size="small"
                    style="width: 260px"
                    :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="服务类型">
                <el-cascader
                    v-model="queryParams.categoryId"
                    :options="categoryList"
                    :props="optionProps"
                    size="small"
                    clearable
                ></el-cascader>
            </el-form-item>

            <el-form-item label="任务标题" prop="goodsName">
                <el-input
                    v-model="queryParams.name"
                    placeholder="请输入服务主题"
                    maxlength="30"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="需求状态">
                <el-select
                    v-model="queryParams.publishState"
                    placeholder="请选择"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                >
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待预约" value="001"></el-option>
                    <el-option label="已预约" value="002"></el-option>
                    <el-option label="已完成" value="003"></el-option>
                    <el-option label="已下架" value="004"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="handleQuery"
                    plain
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="small"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="pageList" border stripe>
            <el-table-column
                label="任务ID"
                align="center"
                prop="publishId"
                width="120"
            />
            <el-table-column
                label="任务标题"
                align="center"
                prop="name"
                width="250"
                show-overflow-tooltip
            />
            <el-table-column
                label="服务类型"
                align="center"
                prop="categoryName"
                width="200"
            >
                <template slot-scope="scope">
                    <span>{{ parseCategory(scope.row) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="地址"
                align="center"
                prop="publishAddress"
                width="260"
            >
                <template slot-scope="scope">
                    <span>{{ parseAddress(scope.row.publishAddress) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="留言人数"
                align="center"
                prop="quoteCount"
                width="100"
            />

            <el-table-column
                label="发布时间"
                align="center"
                prop="createTime"
                width="160"
            >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="businessState">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.publishState == '001'" type="info"
                        >待预约</el-tag
                    >
                    <el-tag
                        v-if="scope.row.publishState == '002'"
                        type="success"
                        >已预约</el-tag
                    >
                    <el-tag
                        v-if="scope.row.publishState == '003'"
                        type="success"
                        >已完成</el-tag
                    >
                    <el-tag v-if="scope.row.publishState == '004'" type="info"
                        >已下架</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="220"
                fixed="right"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        icon="el-icon-view"
                        @click="getPublishDetail(scope.row.publishId)"
                        v-hasPermi="['shop:audit:detail']"
                        >查看详情
                    </el-button>
                    <el-button
                        type="text"
                        icon="el-icon-bottom"
                        @click="takeOff(scope.row)"
                        v-hasPermi="['shop:audit:audit']"
                        v-if="scope.row.publishState == '001'"
                        >下架
                    </el-button>
                    <el-button
                        type="text"
                        icon="el-icon-top"
                        @click="takeOn(scope.row)"
                        v-hasPermi="['shop:audit:audit']"
                        v-if="scope.row.publishState == '004'"
                        >上架
                    </el-button>
                    <el-button
                        type="text"
                        icon="el-icon-delete"
                        @click="deletePublish(scope.row)"
                        v-hasPermi="['shop:audit:audit']"
                        >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加下架原因信息对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="500px"
            append-to-body
        >
            <el-form
                ref="form"
                :model="form"
                label-width="120px"
                style="height: 100px"
            >
                <el-input
                    type="textarea"
                    :rows="4"
                    v-model="form.closeReason"
                    placeholder="请输入下架的原因"
                />
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listPublish,
    deletePublish,
    takeOffPublish,
    takeOnPublish,
} from "@/api/publish/adminPublish";
import { categoryTree } from "@/api/basic/category";

export default {
    name: "adminMerchant",
    data() {
        return {
            showSearch: true,
            loading: true,
            total: 0,
            pageList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: "",
                publishState: "",
                categoryId: [],
                merchantId: "",
                beginTime: "",
                endTime: "",
            },
            form: {},
            // 弹出层标题
            title: "",
            open: false,
            searchDate: "",
            categoryList: [],
            optionProps: {
                value: "categoryId",
                label: "categoryName",
                children: "childrenCategory",
            },
        };
    },
    created() {
        this.getList();
        this.categoryTree();
    },
    methods: {
        categoryTree() {
            categoryTree()
                .then((res) => {
                    if (res.code == 200) {
                        this.categoryList = res.data;
                    } else {
                        this.$message.error("获取分类列表失败");
                    }
                    console.log(res);
                })
                .catch((err) => {
                    this.$message.error("获取分类列表失败");
                    console.log(err);
                });
        },

        /** 查询待审核列表 */
        getList() {
            this.loading = true;
            if (this.searchDate == null) {
                this.searchDate = "";
            }
            const [searchBegin, searchEnd] = this.searchDate;
            let sBegin = searchBegin;
            let sEnd = searchEnd;
            if (typeof searchBegin == "undefined") {
                sBegin = "";
            }
            if (typeof searchEnd == "undefined") {
                sEnd = "";
            }
            // 级联选择器绑定的参数queryParams.categoryId是一个数组，需要将最后一个层级分类的id 重新赋值给查询参数categoryId
            if (this.queryParams.categoryId) {
                this.queryParams.categoryId = this.queryParams.categoryId[this.queryParams.categoryId.length - 1];
            }
            this.queryParams.beginTime = sBegin;
            this.queryParams.endTime = sEnd;
            this.queryParams.merchantId = 25;
            listPublish(this.queryParams)
                .then((response) => {
                    console.log(response);
                    this.pageList = response.rows;
                    this.total = parseInt(response.total);
                })
                .catch((err) => {
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        // 表单重置
        reset() {
            this.form = {
                merchantId: null,
                examineReason: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.searchDate = [];
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                name: "",
                publishState: "",
                categoryId: [],
                merchantId: "",
                beginTime: "",
                endTime: "",
            };
            this.handleQuery();
        },

        // 查询需求详情信息
        getPublishDetail(publishId) {
            this.$router.push({
                path: "/adminPublish/adminPublishDetail",
                query: {
                    publishId: publishId,
                },
            });
        },

        deletePublish(row) {
            const publishId = row.publishId;
            const name = row.name == null ? "" : row.name;
            this.$confirm(
                '确认删除任务: <span style="font-weight: bold">' +
                    name +
                    "</span> 吗?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                    type: "warning",
                }
            )
                .then(() => {
                    deletePublish(publishId)
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message.success("删除成功");
                                this.getList();
                            } else {
                                this.$message.error("删除失败");
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                            this.$message.error("操作失败");
                        });
                })
                .catch(() => {});
        },

        takeOff(row) {
            const publishId = row.publishId;
            const name = row.name == null ? "" : row.name;
            this.$confirm(
                '确认下架任务: <span style="font-weight: bold">' +
                    name +
                    "</span> 吗?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                    type: "warning",
                }
            )
                .then(() => {
                    takeOffPublish(publishId)
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message.success("下架成功！");
                                this.getList();
                            } else {
                                this.$message.error("下架失败！");
                            }
                        })
                        .catch((err) => {
                            this.$message.error("操作失败！");
                        });
                })
                .catch(() => {});
        },

        takeOn(row) {
            const publishId = row.publishId;
            const name = row.name == null ? "" : row.name;
            this.$confirm(
                '确认上架任务: <span style="font-weight: bold">' +
                    name +
                    "</span> 吗?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                    type: "warning",
                }
            )
                .then(() => {
                    takeOnPublish(publishId)
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message.success("上架成功！");
                                this.getList();
                            } else {
                                this.$message.error("上架失败！");
                            }
                        })
                        .catch((err) => {
                            this.$message.error("操作失败！");
                        });
                })
                .catch(() => {});
        },
        parseAddress(address) {
            if (address == null) {
                return "--";
            }
            return address.address + "-" + address.detailed;
        },

        parseCategory(row) {
            if (row.parentCategoryName == null) {
                return row.categoryName;
            }
            return row.parentCategoryName + " - " + row.categoryName;
        },

        /** 提交按钮 */
        submitForm() {
            if (this.form.closeReason == null) {
                this.$message.error("下架原因不可为空");
                return;
            }
            if (this.form.merchantId != null) {
                takeOff(this.form)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$message.success("下架成功");
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.open = false;
                        this.getList();
                        console.log(res);
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message.error("操作失败");
                    });
            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
    },
};
</script>

<style></style>
