<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="primary"
                        >待预约</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="getDetail(scope.row)"
                        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>

        <el-dialog
            title="任务详情"
            :visible.sync="listOpen"
            width="950px"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
        >
        <div>
        <h3 style="margin-left: 15px">{{ publishInfo.name }}</h3>
        <el-card shadow="hover" style="width: 95%; margin-left: 20px">
            <div slot="header" class="clearfix">
                <el-row>
                    <el-col :span="24" style="color: #111111">
                        服务类型：
                        <span v-if="publishInfo.parentCategoryName != null">
                            {{ publishInfo.parentCategoryName }}-
                        </span>
                        {{ publishInfo.categoryName }}
                    </el-col>
                    <el-col :span="12" style="color: #111111; margin-top: 5px">
                        <i class="el-icon-location-outline"></i>
                        {{
                            publishInfo.publishAddress == null
                                ? ""
                                : publishInfo.publishAddress.address + publishInfo.publishAddress.detailed
                        }}
                    </el-col>
                    <el-col :span="6" style="color: #222222">
                        {{ publishInfo.createTime | dateFormat('YYYY-MM-DD HH:mm') }}
                    </el-col>
                    <el-col :span="6">
                        有<span style="color: #fc6035">{{
                            publishInfo.quoteCount
                        }}</span
                        >人报价
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-row>
                    <el-col
                        :span="24"
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            color: #111111;
                            margin-bottom: 30px;
                        "
                    >
                        {{ publishInfo.publishDesc }}
                    </el-col>
                    <el-col :span="24" style="margin-top: 10px">
                        <div class="out">
                            <div>
                                <video
                                    controls
                                    v-for="(
                                        item, index
                                    ) in publishInfo.publishImageList"
                                    :key="index"
                                    v-if="item.type == '002'"
                                    width="240"
                                    height="240"
                                    style="margin: 10px"
                                >
                                    <source :src="item.url" type="video/mp4" />
                                </video>
                                <el-image
                                    :src="item.url"
                                    style="
                                        width: 240px;
                                        height: 240px;
                                        margin: 10px;
                                    "
                                    v-for="(
                                        item, index
                                    ) in publishInfo.publishImageList"
                                    :key="index"
                                    :preview-src-list="publishImageList"
                                    v-if="item.type == '001'"
                                >
                                </el-image>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col
                        :span="24"
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            color: #111111;
                            margin-bottom: 30px;
                        "
                    >
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <div style="padding: 20px 30px">
            <el-row>
                <el-col :span="12">
                    <div
                        style="
                            font-size: 20px;
                            font-weight: bold;
                            color: #111111;
                            line-height: 40px;
                        "
                    >
                        服务人员报价
                    </div>
                </el-col>
                <el-col :span="2" :offset="10" v-if="publishInfo.status == 0">
                    <el-button
                        v-if="this.userRole === 'merchant'"
                        type="primary"
                        size="normal"
                        @click="clickQuote()"
                        >报价</el-button
                    >
                </el-col>
            </el-row>
        </div>
        <div
            v-if="publishQuoteList != null && publishQuoteList.length > 0"
            style="margin: 5px 20px 30px 20px"
        >
            <el-card
                v-for="item in publishQuoteList"
                :key="item.quoteId"
                style="margin-bottom: 10px"
            >
                <div slot="header" class="clearfix">
                    <el-row>
                        <el-image
                            style="
                                width: 80px;
                                height: 80px;
                                border-radius: 80px;
                                float: left;
                                margin-right: 10px;
                            "
                            fit="cover"
                            :src="item.serverUser.avatar"
                        >
                            <div slot="error">
                                <img
                                    src="../../assets/images/def-header.png"
                                    alt=""
                                    style="
                                        width: 80px;
                                        height: 80px;
                                        border-radius: 80px;
                                        float: left;
                                        margin-right: 10px;
                                    "
                                />
                            </div>
                        </el-image>

                        <div class="fontFamily quote-left-container">
                            <el-row>
                                <el-col
                                    :span="6"
                                    style="
                                        font-size: 15px;
                                        font-weight: bold;
                                        color: #111111;
                                        margin-bottom: 3px;
                                    "
                                >
                                    {{ item.serverUser.realName }}
                                    <span
                                        style="
                                            font-size: 16px;
                                            color: #d99864;
                                            padding-left: 0px;
                                            margin-left: 10px;
                                        "
                                    >
                                        {{ item.serverUser.serverLevelName }}
                                    </span>
                                </el-col>

                                <el-col
                                    :span="6"
                                    :offset="12"
                                    style="
                                        font-weight: 400;
                                        color: #999999;
                                        text-align: right;
                                    "
                                >
                                    {{ item.createTime | dateFormat('YYYY-MM-DD HH:mm') }}
                                </el-col>
                                <br />

                                <el-col :span="24">
                                    <span
                                        class="server-age"
                                        style="margin-bottom: 3px"
                                        >{{
                                            item.serverUser.serverAge
                                        }}年工龄</span
                                    >
                                </el-col>
                                <br />
                                <el-col
                                    :span="8"
                                    style="
                                        font-weight: 400;
                                        color: #111111;
                                        margin: 4px 0;
                                        font-size: 14px;
                                    "
                                >
                                    综合评分:
                                    {{
                                        item.serverUser.score === null ? 0 : item.serverUser.score
                                    }}
                                    <span
                                        style="
                                            background: #ffffff;
                                            font-weight: 400;
                                            color: #111111;
                                            margin-left: 20px;
                                        "
                                    >
                                        好评率:
                                        {{
                                            item.serverUser.rate === null ? 0 : item.serverUser.rate
                                        }}%
                                    </span>
                                </el-col>

                                <el-col
                                    style="
                                        font-size: 14px;
                                        font-weight: 400;
                                        color: #999999;
                                    "
                                    v-if="item.merchant.merchantType === 0"
                                >
                                    {{ item.serverUser.merchantName }}
                                </el-col>
                            </el-row>
                        </div>
                    </el-row>
                </div>
                <div>
                    <div>
                        <div
                            style="
                                width: 100%;
                                background-color: #f7f8f9;
                                border-radius: 10px;
                            "
                        >
                            <div
                                style="
                                    font-size: 15px;
                                    font-weight: 400;
                                    color: #111111;
                                    padding: 12px;
                                "
                            >
                                {{ item.quoteDesc }}
                            </div>
                        </div>
                        <el-row style="margin: 10px">
                            <el-col :span="6">
                                <span
                                    style="
                                        border-radius: 8px;
                                        font-size: 15px;
                                        width: 64px;
                                        height: 40px;
                                        line-height: 40px;
                                    "
                                    >报价：</span
                                >
                                <span style="color: #ff0000">{{
                                    item.totalPrice
                                }}</span
                                >元
                            </el-col>
                            <el-col
                                :span="6"
                                :offset="12"
                            >
                                <el-button
                                    style="float: right; margin: 0 2px;"
                                    size="mini"
                                    type="danger"
                                    @click="delQuote(item.quoteId)"
                                    v-if="(item.merchantId === merchantId || userRole === 'operation') && (publishInfo.publishState === '001')"
                                    >删除</el-button
                                >
                                <el-button
                                    style="float: right; margin: 0 2px"
                                    size="mini"
                                    @click="addReply(item)"
                                    v-if="item.merchantId === merchantId && publishInfo.publishState === '001'"
                                    >留言</el-button
                                >
                                <el-button
                                    style="float: right; margin: 0 2px"
                                    size="mini"
                                    type="primary"
                                    @click="editQuote(item)"
                                    v-if="item.merchantId === merchantId && publishInfo.publishState === '001'"
                                    >编辑</el-button
                                >
                            </el-col>
                        </el-row>
                    </div>
                    <el-divider></el-divider>
                    <div
                        v-for="(re, index1) in item.quoteReplyVoList"
                        style="margin-left: 50px"
                        v-show="flag"
                        :key="index1"
                    >
                        <el-row
                            v-if="
                                re.serverUserId === item.serverUserId &&
                                re.quoteId === item.quoteId
                            "
                        >
                            <el-image
                                style="
                                    width: 40px;
                                    height: 40px;
                                    border-radius: 40px;
                                    margin-top: 10px;
                                    float: left;
                                    margin-right: 10px;
                                "
                                fit="cover"
                                :src="re.avatar"
                                v-if="re.replyType == '0'"
                            >
                              <div slot="error">
                                <img
                                    src="../../assets/images/avatar_icon.png"
                                  alt=""
                                  style="
                                        width: 40px;
                                        height: 40px;
                                        border-radius: 40px;
                                        float: left;
                                        margin-right: 10px;
                                    "
                                />
                              </div>
                            </el-image>
                            <el-image
                                style="
                                    width: 40px;
                                    height: 40px;
                                    border-radius: 40px;
                                    margin-top: 10px;
                                    float: left;
                                    margin-right: 10px;
                                "
                                fit="cover"
                                :src="re.serverAvatar"
                                v-if="re.replyType === '1'"
                            >
                              <div slot="error">
                                <img
                                src="../../assets/images/def-header.png"
                                  alt=""
                                  style="
                                        width: 40px;
                                        height: 40px;
                                        border-radius: 40px;
                                        float: left;
                                        margin-right: 10px;
                                    "
                                />
                              </div>
                            </el-image>
                            <el-col
                                :span="23"
                                class="quote-reply-left-container"
                            >
                                <el-row
                                    style="
                                        margin-bottom: 10px;
                                        margin-top: 10px;
                                    "
                                >
                                    <el-col
                                        :span="6"
                                        v-if="re.replyType === '0'"
                                    >
                                        <span
                                            style="
                                                font-size: 15px;
                                                color: #111111;
                                            "
                                            >{{ re.name }}</span
                                        >
                                        <span
                                            style="
                                                font-size: 15px;
                                                color: #999999;
                                                margin: 0 8px;
                                            "
                                            v-if="re.serverName"
                                            >回复</span
                                        >
                                        <span
                                            style="
                                                font-size: 15px;
                                                color: #111111;
                                            "
                                            >{{ re.serverName }}</span
                                        >：
                                    </el-col>
                                    <el-col
                                        :span="6"
                                        v-if="re.replyType === '1'"
                                    >
                                        <span
                                            style="
                                                font-size: 15px;
                                                color: #111111;
                                            "
                                            >{{ re.serverName }}</span
                                        >
                                        <span
                                            style="
                                                font-size: 15px;
                                                color: #999999;
                                                margin: 0 8px;
                                            "
                                            v-if="re.name"
                                            >回复
                                        </span>
                                        <span
                                            style="
                                                font-size: 15px;
                                                color: #111111;
                                            "
                                            >{{ re.name }}</span
                                        >：
                                    </el-col>
                                    <el-col
                                        :span="6"
                                        :offset="12"
                                        style="
                                            font-size: 15px;
                                            color: #999999;
                                            text-align: right;
                                        "
                                    >
                                        {{ re.createTime | dateFormat('YYYY-MM-DD HH:mm') }}
                                    </el-col>
                                    <br />
                                    <el-col style="margin-top: 2px">
                                        <span
                                            style="
                                                font-size: 15px;
                                                color: #111111;
                                            "
                                            >{{ re.replyDesc }}</span
                                        >
                                        <el-button
                                            v-if="
                                                (re.replyType === '1' &&
                                                item.merchantId === merchantId) || (userRole === 'operation')
                                            "
                                            size="mini"
                                            style="float: right"
                                            type="danger"
                                            @click="deleteReply(re)"
                                            >删除</el-button
                                        >
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-card>
            <pagination
                style="margin: 10px"
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                :page-sizes="[1, 5, 10, 20]"
                @pagination="getQuoteList"
            />
        </div>
        <div v-else>
            <div
                style="
                    text-align: center;
                    font-size: 30px;
                    color: #666666;
                    padding: 20px;
                "
            >
                暂无报价
            </div>
        </div>

        <!-- 报价对话框 -->
        <el-dialog
            title="我要报价"
            :visible.sync="quoteOpen"
            width="500px"
            append-to-body
        >
            <el-form
                ref="quoteForm"
                :model="quoteParams"
                label-width="120px"
                :rules="quoteRules"
            >
                <el-form-item label="报价描述">
                    <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        v-model="quoteParams.quoteDesc"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="单价" prop="singlePrice">
                    <el-input
						placeholder="请输入单价"
                        v-model="quoteParams.singlePrice"
                        @blur="countTotalPrice()"
                    >
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="单位" prop="quoteUnit">
                    <el-select
						placeholder="请选择单位"
                        v-model="quoteParams.quoteUnit"
                        @change="justifyOther"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in unitsOption"
                            :label="item.decodeValue"
                            :value="item.decodeId"
                            :key="item.dictValue"
                        ></el-option>
                    </el-select>
                    <el-input
                        v-if="otherUnitFlag"
                        v-model="quoteParams.otherUnit"
                        style="margin-top: 20px"
                        placeholder="其他单位:如“平方米”"
                    ></el-input>
                </el-form-item>
                <el-form-item label="单位时长" prop="singleTime">
                    <el-select
                        v-model="quoteParams.singleTime"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in timeList"
                            :label="item + '小时'"
                            :value="item"
                            :key="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数量" prop="quoteCounts">
                    <el-input
                        placeholder="请输入数量"
                        v-model.trim="quoteParams.quoteCounts"
                        oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                        @blur="countTotalPrice()"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="服务人员" prop="serverUserId">
                    <el-select
						placeholder="请选择服务人员"
                        v-model="quoteParams.serverUserId"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in serverUserOption"
                            :label="item.realName"
                            :value="item.serverId"
                            :key="item.serverId"
                        ></el-option>
                    </el-select>
					<span style="color: red">注:如被选中则由此人来服务。</span>
                </el-form-item>
                <div style="float: right; margin-left: 0px">
                    总计：<span style="color: #ff0000">{{
                        quoteParams.quoteCounts * quoteParams.singlePrice
                    }}</span
                    >元 /
                    <span style="color: #ff0000">{{
                        quoteParams.quoteCounts * quoteParams.singleTime
                    }}</span
                    >小时
                </div>
                <el-form-item style="">
                    <el-button type="primary" @click="save()">保存</el-button>
                    <el-button @click="qteCancel()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 留言对话框 -->
        <el-dialog title="留言" :visible.sync="replyOpen">
            <el-form
                ref="replyForm"
                :model="replyParams"
                label-width="120px"
                style="height: 100px"
                :rules="quoteRules"
            >
                <el-form-item label="留言内容" prop="replyDesc">
                    <el-input
                        type="textarea"
                        rows="2"
                        v-model="replyParams.replyDesc"
                        maxlength="100"
                        show-word-limit
                        style="margin-bottom: 15px;"
                    ></el-input>
                    <el-button size="small" @click="add()" type="primary"
                        >保存</el-button
                    >
                    <el-button size="small" @click="replyCancel()"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

        </el-dialog>

    </div>
</template>

<script>
import {
    listPublish,
    deletePublish,
    takeOffPublish,
    takeOnPublish,
} from "@/api/publish/adminPublish";
import { categoryTree } from "@/api/basic/category";
import { 
    addReply, 
    delPublishReply,
    listQuote,
} from "@/api/publish/publish";
import { addQuote, updateQuote, delQuote } from "@/api/publish/quote";
import { getPublishDetail } from "@/api/publish/adminPublish";
import { getInfo } from "@/api/login";
import { listCode } from "@/api/system/dict/code";
import { listDownSelectUser } from "@/api/system/ServiceUserService";



export default {
    // name: "adminMerchant",
    data() {
        return {
            listOpen:false,
            showSearch: true,
            loading: true,
            total: 0,
            pageList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: "",
                publishState: "",
                categoryId: [],
                merchantId: "",
                categoryName:'',
                parentCategoryName:'',
                beginTime: "",
                endTime: "",
                publishId:null
            },
            form: {},
             // 角色
            userRole: "",
            // 需求详情
            publishInfo: {},
            publishImageList: [],
            publishQuoteList: [],
            // 回复列表
            replyList: [],
            // 留言对话框
            replyOpen: false,
            // 编辑对话框
            quoteOpen: false,
            timeList: [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6],
            // 报价参数
            quoteParams: {
                pageNum: 1,
                pageSize: 10,
                quoteDesc: null,
                quoteUnit: null,
                otherUnit: null,
                serverUserId: null,
               
                quoteCounts: null,
                singlePrice: null,
                singleTime: 0.5,
                totalPrice: null,
                totalTime: null,
                status: 0,
                publishId: null,
                quoteId: null,
            },
            //报价服务人员选项
            serverUserOption: [],
            //单价选项
            unitsOption: [],
            otherUnitFlag: false,
            //报价 表单校验
            quoteRules: {
                singlePrice: [
                    {
                        required: true,
                        message: "单价不能为空",
                        trigger: "blur",
                    },
                ],
                otherUnit: [
                    {
                        required: true,
                        message: "单位不能为空",
                        trigger: "blur",
                    },
                ],
                quoteCounts: [
                    {
                        required: true,
                        message: "数量不能为空",
                        trigger: "blur",

                    },
                ],
                quoteUnit: [
                    {
                        required: true,
                        message: "单位不能为空",
                        trigger: "blur",
                    },
                ],
                serverUserId: [
                    {
                        required: true,
                        message: "服务人员不能为空",
                        trigger: "blur",
                    },
                ],
            },
            replyParams: {
                quoteId: null, //quoteId
                memberId: null, //memberId
                replyDesc: null, //回复内容
                reReplyId: null, //回复回复ID
                serverUserId: null,
            },
            flag: true,
            // merchantId: "",
            pageList: [],
            total: 0,
            disabled: false,
            // 弹出层标题
            title: "",
            open: false,
            searchDate: [],
            categoryList: [],
            optionProps: {
                value: "categoryId",
                label: "categoryName",
                children: "childrenCategory",
            },
        };
    },



    created() {

        console.log(this.optionProps)
        this.categoryTree();

        console.log("缓存数据：",this.$route.query)
         if (this.$route.query.pageNum) {
            console.log(this.queryParams.pageNum)
            this.queryParams.pageNum = parseInt(this.$route.query.pageNum)
            console.log(this.queryParams.pageNum)
         }



        // if (this.$route.query.categoryId) {

        // }

        if (this.$route.query.publishState) {
            this.queryParams.publishState = this.$route.query.publishState
        }



        if (this.$route.query) {
            if(this.$route.query.beginTime){
                this.searchDate[0] = this.$route.query.beginTime
                this.searchDate[1] = this.$route.query.endTime

            console.log("-------",this.searchDate)
            }

        }
    },

        mounted() {
        // this.listPublishReplyQuery();
        // this.listUser();
        // this.listUnit();
        // this.getPublishDetail();
        // this.queryParams.publishId = this.form.publishId;
        // this.getQuoteList();
    },

    methods: {
          // 查询需求详情信息
        getPublishDetail() {
            getPublishDetail(this.$route.query.publishId).then((res) => {
                this.publishInfo = res.data;
                console.log(" this.publishInfo>>>>>", this.publishInfo)
                this.publishImageList = []
                if (res.data.publishImageList != null && res.data.publishImageList.length > 0) {
                  for(let i = 0; i < res.data.publishImageList.length; i ++) {
                    if (res.data.publishImageList[i].type == '001') {
                      this.publishImageList.push(res.data.publishImageList[i].url)
                    }
                  }
                }
            });
        },

         // 点击【留言】按钮添加回复
        addReply(row) {
            this.replyParams.quoteId = row.quoteId;
            this.replyParams.memberId = this.publishInfo.memberId;
            this.replyParams.serverUserId = row.serverUserId;
            this.replyOpen = true;
        },

            // 添加留言
        add() {
            addReply(this.replyParams).then((res) => {
                this.replyParams.replyDesc = null;
                // 关闭留言框
                this.replyOpen = false;
                // 刷新报价列表
                this.getQuoteList();
                // this.listPublishReplyQuery();
            });
        },

           // 取消回复，关闭留言回复框
        replyCancel() {
            this.replyParams.replyDesc = null;
            // 关闭留言框
            this.replyOpen = false;
            // 刷新报价列表
            this.getQuoteList();
        },

         justifyOther(value) {
            //   console.log(value);
            if (value == "099") {
                this.otherUnitFlag = true;
            } else {
                this.otherUnitFlag = false;
            }
        },

        // 点击【编辑】按钮编辑报价信息
        editQuote(item) {
            // 打开报价框
            this.disabled = true;
            this.quoteOpen = true;
            // 组装参数
            this.quoteParams.merchantId = item.merchantId;
            this.quoteParams.publishId = this.publishInfo.publishId;
            this.quoteParams.quoteId = item.quoteId;
            this.quoteParams.singlePrice = item.singlePrice;
            this.quoteParams.quoteDesc = item.quoteDesc;
            this.quoteParams.quoteCounts = item.quoteCounts;

            for (let i in this.serverUserOption) {
                if (item.serverUserId == this.serverUserOption[i].serverId) {
                    this.quoteParams.serverUserId =
                        this.serverUserOption[i].serverId;
                }
            }
            for (let j in this.unitsOption) {
                if (
                    item.quoteUnit == this.unitsOption[j].decodeId &&
                    item.quoteUnit !== "099"
                ) {
                    this.quoteParams.quoteUnit = this.unitsOption[j].decodeId;
                } else if (
                    this.unitsOption[j].decodeId == "099" &&
                    item.quoteUnit == "099"
                ) {
                    this.quoteParams.quoteUnit = this.unitsOption[j].decodeId;
                    this.quoteParams.otherUnit = item.otherUnit;
                    this.otherUnitFlag = true;
                }
            }
        },

        // 删除报价
        delQuote(quoteId) {
            this.$modal
                .confirm("是否确认删除此条报价？")
                .then(function () {
                    return delQuote(quoteId);
                })
                .then(() => {
                    this.$modal.msgSuccess("删除成功");
                    // 刷新详情信息
                    this.getPublishDetail();
                    // 刷新报价列表
                    this.getQuoteList();
                })
                .catch(() => {});
        },

         // 报价参数重置
        resetQuoteParams() {
            this.quoteParams = {
                quoteDesc: null,
                quoteUnit: null,
                otherUnit: null,
                serverUserId: null,
                merchantId: null,
                quoteCounts: null,
                singlePrice: null,
                singleTime: 0.5,
                totalPrice: 0,
                totalTime: 0,
                status: 0,
                publishId: null,
                quoteId: null,
            };
        },

         // 报价对话框计算总价
        countTotalPrice() {
            if (
                this.quoteParams.singlePrice !== null &&
                this.quoteParams.singlePrice < 0.01
            ) {
                return this.$modal.msgError("单价不能小于0.01");
            }
            if (
                this.quoteParams.singlePrice !== null &&
                this.quoteParams.quoteCounts !== null
            ) {
                this.queryParams.totalPrice =
                    this.quoteParams.singlePrice * this.quoteParams.quoteCounts;
            }
        },

         // 点击报价框里【保存】按钮
        save() {
            // 校验参数
            if (!this.quoteParams.singlePrice) {
                return this.$modal.msgError("请输入单价");
            }
            if (!this.quoteParams.quoteUnit) {
                return this.$modal.msgError("请选择单位");
            }
            if (!this.quoteParams.quoteCounts) {
                return this.$modal.msgError("请输入数量");
            }
            if (!this.quoteParams.serverUserId) {
                return this.$modal.msgError("请选择服务人员");
            }
            if (this.quoteParams.quoteId !== null) {
                console.log("编辑报价>>>>>quoteId=", this.quoteParams.quoteId);
                // 编辑报价
                updateQuote(this.quoteParams).then((res) => {
                    if (res.code === 200) {
                        // 关闭报价框
                        this.quoteOpen = false;
                        // 刷新报价列表
                        this.getQuoteList();
                        // 刷新详情
                        this.getPublishDetail();
                    }
                });
            } else {
                console.log("添加报价>>>>>quoteId=", this.quoteParams.quoteId);
                // 添加报价
                addQuote(this.quoteParams).then((res) => {
                    if (res.code === 200) {
                        // 关闭报价框
                        this.quoteOpen = false;
                        // 刷新报价列表
                        this.getQuoteList();
                        // 刷新详情
                        this.getPublishDetail();
                    }
                });
            }
        },

        // 点击【报价】按钮
        clickQuote() {
            // 打开报价框
            this.quoteOpen = true;
            // 组装报价参数
            this.quoteParams.publishId = this.$route.query.publishId;
            this.quoteParams.merchantId = this.merchantId;
            this.quoteParams.totalPrice =
                this.quoteParams.singlePrice * this.quoteParams.quoteCounts;
            this.quoteParams.totalTime =
                this.quoteParams.singleTime * this.quoteParams.quoteCounts;
            // 查询服务人员下拉选
            let param = {
                merchantId: this.merchantId,
            };
            listDownSelectUser(param).then((res) => {
                this.quoteServerUserOption = res.rows;
            });
        },

        // 取消报价，关闭报价弹框
        qteCancel() {
            // 关闭报价框
            this.quoteOpen = false;
            // 重置报价参数
            this.resetQuoteParams();
            // 刷新报价列表
            this.getQuoteList();
        },

        // 加载服务人员下拉选列表
        listUser() {
            getInfo().then((r) => {
                this.userRole = r.roles[0];
                if (r.roles[0] === "merchant") {
                    if (r.merchant.merchantId !== null) {
                        this.merchantId = r.merchant.merchantId;
                    }
                }
                let param = {
                    merchantId: this.merchantId,
                };
                //报价列表服务人员信息
                listDownSelectUser(param).then((res) => {
                    this.serverUserOption = res.rows;
                });
            });
        },

        // 加载报价单位
        listUnit() {
            let param = {
                codeValue: "报价单位",
            };
            listCode(param).then((res) => {
                this.unitsOption = res.rows;
            });
        },

        // 商家删除留言
        deleteReply(row) {
            console.log(row);
            this.$modal
                .confirm("是否确认删除此条评论？")
                .then(function () {
                    return delPublishReply(row.replyId);
                })
                .then(() => {
                    // this.listPublishReplyQuery();
                    // 刷新报价信息列表
                    this.getQuoteList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => {});
        },

        // 报价列表
        getQuoteList() {
            this.queryParams.publishId = this.form.publishId;
            listQuote(this.queryParams).then((res) => {
                this.publishQuoteList = res.rows;
                this.total = res.rows.length;
                console.log("listQuote--------------", this.publishQuoteList);
            });
        },

        categoryTree() {
            categoryTree()
                .then((res) => {
                    if (res.code == 200) {
                        this.categoryList = res.data;

                    if (this.$route.query.categoryId) {
                    //             this.queryParams.categoryId= [36,37]

                        for(var i=0 ;i<this.categoryList.length;i++){
                            for(var t=0 ;t<this.categoryList[i].childrenCategory.length;t++){
                                if(this.categoryList[i].childrenCategory[t].categoryId == this.$route.query.categoryId){
                                    console.log("=======")
                                    console.log(this.categoryList[i].childrenCategory[t])

                                    this.queryParams.categoryId= [this.categoryList[i].categoryId,this.categoryList[i].childrenCategory[t].categoryId]
                                    console.log(this.queryParams.categoryId)
                                    // this.categoryId[0]=this.$route.query.categoryList[i].categoryId
                                    // this.categoryId[1]=this.$route.query.categoryList[i].childrenCategory[t].categoryId
                                }
                            }
                     }
                    }
                     this.getList();
                    } else {
                        this.$message.error("获取分类列表失败");
                    }
                    console.log(res);
                })
                .catch((err) => {
                    this.$message.error("获取分类列表失败");
                    console.log(err);
                });
        },



        /** 查询待审核列表 */
        getList() {

            var form =this.queryParams
            //判断缓存中数据
            if(this.$route.query.categoryId){
                this.form.categoryId = this.$route.query.categoryId
            }
            console.log(this.$route.query.categoryId)
             this.$store.state.tagsView.visitedViews.forEach(element => {
                if (this.$route.path === element.path) {
                    element.query = this.queryParams
                }
            });
            this.loading = true;
            const [searchBegin, searchEnd] = this.searchDate;
            let sBegin = searchBegin;
            let sEnd = searchEnd;
            if (typeof searchBegin == "undefined") {
                var start = new Date()
                start.setTime(start.getTime()-3600 * 1000 * 24 * 30)
                this.searchDate = [start,new Date()]
                sBegin = this.timeStamp2String(start)
            }

            if (typeof searchEnd == "undefined") {
                sEnd = this.timeStamp2String(new Date())
                this.searchDate=[sBegin,sEnd]
            }

            // 级联选择器绑定的参数queryParams.categoryId是一个数组，需要将最后一个层级分类的id 重新赋值给查询参数categoryId
            if (
                    form.categoryId &&
                    form.categoryId.length > 1
                ) {
                    form.categoryId =
                        form.categoryId[
                            form.categoryId.length - 1
                        ];
                }
            form.beginTime = sBegin;
            form.endTime = sEnd;
            console.log(form.beginTime)
            console.log(form.endTime)
            form.merchantId = 25;
            listPublish(form)
                .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() {
            // var start = new Date()
            //     start.setTime(start.getTime()-3600 * 1000 * 24 * 30)
            //     this.searchDate = [start,new Date()]
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {

            this.searchDate = [];
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                name: "",
                publishState: "",
                categoryId: [],
                merchantId: "",
                beginTime: "",
                endTime: "",
            };
            this.handleQuery();
        },

        // 查询需求详情信息
        getDetail(row) {
            // this.$router.push({
            //     path: "/adminPublish/adminPublishDetail",
            //     query: {
            //         publishId: publishId,
            //     },
            // });
            console.log(row)
            const publishId = row.publishId
            getPublishDetail(publishId).then((response) => {
                console.log("------------")
                console.log(response)
                this.publishInfo = response.data
                //  this.listUser();
                // this.listUnit();
                // this.getPublishDetail();
                // this.queryParams.publishId = this.form.publishId;
                // this.getQuoteList();
                this.listOpen=true
            })
        },

        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();
        },
         timeStamp2String(datetime){

            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
            var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
        }
    },
};
</script>

<style scoped="scoped">
.out {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.in {
    height: 25%;
    width: 25%;
    box-sizing: border-box;
    margin-left: 5px;
}
.fontFamily {
    font-family: "微软雅黑";
}
.server-age {
    background: linear-gradient(
        269deg,
        rgb(231, 194, 161) 0%,
        rgb(231, 194, 161) 0%,
        rgb(244, 235, 225) 100%,
        rgb(244, 235, 225) 100%
    );
    padding: 3px 5px;
    font-size: 11px;
    font-weight: 500;
    color: rgb(136, 92, 75);
    border-radius: 4px;
}
.quote-left-container {
    width: -webkit-calc(100% - 130px);
    width: -moz-calc(100% - 130px);
    width: calc(100% - 130px);
    float: left;
}

.quote-reply-left-container {
    width: -webkit-calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: calc(100% - 90px);
}
</style>

