<template>
    <div class="app-container" v-if="roles[0] ==='merchant'">
        <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.status"
                    placeholder="请选择"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                >
                    <el-option label="全部" value=""></el-option>
                    <el-option label="已报价" value="1"></el-option>
                    <el-option label="未报价" value="0"></el-option>
                    <el-option label="被选中" value="2"></el-option>
                    <el-option label="被抢单" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                      type="primary"
                        icon="el-icon-search"
                        size="mini"
                    @click="handleQuery"
                    >搜索
                </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.status == 1" type="success"
                        >已报价</el-tag
                    >
                    <el-tag v-if="scope.row.status == 0" type="info"
                        >未报价</el-tag
                    >
                    <el-tag v-if="scope.row.status == 2" type="success"
                        >被选中</el-tag
                    >
                    <el-tag v-if="scope.row.status == 3" type="info"
                        >被抢单</el-tag
                    >
                    <el-tag v-if="scope.row.status == 4" 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)"
                        v-hasPermi="['system:publish:query']"
                        >查看详情
                    </el-button>
                    <el-button
                        v-if="scope.row.status === 0"
                        type="text"
                        icon="el-icon-upload2"
                        @click="quote(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"
        />
    <p style=" font-weight: 700;font-style: normal;">任务流程：</p>
    <div style="letter-spacing: normal;color: #333333;  line-height: normal; font-size: 14px; text-align: left;margin-top:1px;">
        <span>顾客发布服务需求 ---> 服务人员或商家报价接单 --> 顾客根据报价选</span>
    </div>
    <dev style="letter-spacing: normal;color: #333333;  line-height: normal; font-size: 14px; text-align: left;margin-top:1px;">
        <span>择【预约】哪个服务人员，下单 --> 服务人员上门服务 --> 完成任务</span>
    </dev>
        <!-- 添加下架原因信息对话框 -->
        <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="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"
                        maxlength="500"
                        show-word-limit
                        placeholder="请输入内容"
                        v-model="quoteParams.quoteDesc"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="单价" prop="singlePrice">
                    <el-input-number
                        placeholder="请输入单价"
                        v-model="quoteParams.singlePrice"
                        :controls="false"
                        :min="0"
                        :max="99999999.99"
                        :precision="2"
                        @blur="countTotalPrice()"
                    >
                        <template slot="append">元</template>
                    </el-input-number>
                </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.dictLabel"
                        :value="item.dictSort"
                        :key="item.dictSort"
                    ></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, index) in timeList"
                            :label="item + '小时'"
                            :value="item"
                            :key="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数量" prop="quoteCounts">
                    <el-input-number
                        placeholder="请输入数量"
                        v-model="quoteParams.quoteCounts"
                        :controls="false"
                        :min="0"
                        :max="99999"
                        :precision="0"
                        @blur="countTotalPrice()"
                    >
                    </el-input-number>
                </el-form-item>
                <el-form-item label="服务人员" prop="serverUserId">
                    <el-select
                        placeholder="请选择服务人员"
                        v-model="quoteParams.serverUserId"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="(item, index) 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">{{
                        (isNaN(quoteParams.quoteCounts) ? 0 : quoteParams.quoteCounts) * (isNaN(quoteParams.singlePrice) ? 0 : quoteParams.singlePrice)
                    }}</span
                    >元 /
                    <span style="color: #ff0000">{{
                        (isNaN(quoteParams.quoteCounts) ? 0 : quoteParams.quoteCounts) * (isNaN(quoteParams.singleTime) ? 0 : quoteParams.singleTime)
                    }}</span
                    >小时
                </div>
                <el-form-item>
                    <el-button type="primary" @click="saveQuote()">保存</el-button>
                    <el-button @click="qteCancel()">取消</el-button>
                </el-form-item>
            </el-form>
        </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;
                                    word-wrap: break-word
                                "
                            >
                                {{ 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"
                                v-if="item.merchantId == merchantId"
                            >
                                <el-button
                                    style="float: right; margin: 0 2px"
                                    size="mini"
                                    @click="delQuote(item.quoteId)"
                                    v-if="publishInfo.publishState === '001'"
                                    >删除</el-button
                                >
                                <el-button
                                    style="float: right; margin: 0 2px"
                                    size="mini"
                                    @click="addReply(item)"
                                    v-if="publishInfo.publishState === '001'"
                                    >留言</el-button
                                >
                                <el-button
                                    style="float: right; margin: 0 2px"
                                    size="mini"
                                    type="primary"
                                    @click="editQuote(item)"
                                    v-if="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
                                            "
                                            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"
                        maxlength="500"
                        show-word-limit
                        placeholder="请输入内容"
                        v-model="quoteParams.quoteDesc"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="单价" prop="singlePrice">
                    <el-input-number
						placeholder="请输入单价"
                        v-model="quoteParams.singlePrice"
                        :controls="false"
                        :min="0"
                        :max="99999999.99"
                        :precision="2"
                        @blur="countTotalPrice()"
                    >
                        <template slot="append">元</template>
                    </el-input-number>
                </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.dictLabel"
                            :value="item.dictSort"
                            :key="item.dictSort"
                        ></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-number
                        placeholder="请输入数量"
                        v-model.trim="quoteParams.quoteCounts"
                        :controls="false"
                        :min="0"
                        :max="99999"
                        :precision="0"
                        @blur="countTotalPrice()"
                    >
                    </el-input-number>
                </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">{{
                        (isNaN(quoteParams.quoteCounts) ? 0 : quoteParams.quoteCounts) * (isNaN(quoteParams.singlePrice) ? 0 : quoteParams.singlePrice)
                    }}</span
                    >元 /
                    <span style="color: #ff0000">{{
                        (isNaN(quoteParams.quoteCounts) ? 0 : quoteParams.quoteCounts) * (isNaN(quoteParams.singleTime) ? 0 : 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>
    <el-alert v-else title="当前用户不存在任务列表信息" type="error" :closable="false" center/>
    


</template>

<script>
import { listPublish,addReply,delPublishReply,listQuote } from "@/api/publish/publish";
import { categoryTree } from "@/api/basic/category";
import { listDownSelectUser } from "@/api/system/ServiceUserService";
import { getInfo } from "@/api/login";
import { listCode } from "@/api/system/dict/code";
import { getDicts } from "@/api/system/dict/data";
import { addQuote, updateQuote, delQuote } from "@/api/publish/quote";
import { detail } from "@/api/merchant/merchant";
import { mapGetters } from "vuex";
import { getPublishDetail } from "@/api/publish/adminPublish";

export default {
    data() {
        return {
            listOpen:false,
             // 角色
            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],
            showSearch: true,
            loading: true,
            pageList: [],
            merchantId: "",
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: "",
                status: "",
                categoryId: [],
                beginTime: "",
                endTime: "",
                merchantLatitude: null,
                merchantLongitude: null,
                publishId:''
            },
            otherUnitFlag: false,
            replyParams: {
                quoteId: null, //quoteId
                memberId: null, //memberId
                replyDesc: null, //回复内容
                reReplyId: null, //回复回复ID
                serverUserId: null,
            },
           
            flag: true,
            merchantId: "",
            total: 0,
            disabled: false,
            form: {},
            // 弹出层标题
            title: "",
            open: false,
            searchDate: "",
            categoryList: [],
            optionProps: {
                value: "categoryId",
                label: "categoryName",
                children: "childrenCategory",
            },
            //报价参数
            quoteParams: {
                
                quoteDesc: null,
                quoteUnit: null,
                otherUnit: null,
                serverUserId: null,
                merchantId: null,
                quoteCounts: undefined,
                singlePrice: undefined,
                singleTime: 0.5,
                totalPrice: null,
                totalTime: null,
                status: 0,
                publishId: null,
                quoteId: null,
            },
            
            //报价服务人员选项
            serverUserOption: [],
            //单价选项
            unitsOption: [],
            //报价 表单校验
            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,
            },
        };
    },
    created() {
        this.getList();
        this.categoryTree();
    },
    mounted() {
        this.listUser();
        this.listUnit();
        //  this.getPublishDetail();
        // this.queryParams.publishId = this.$route.query.publishId;
        // this.getQuoteList();
    },
    computed: {
        ...mapGetters(["roles"]),
    },
    methods: {
         // 查询需求详情信息
        getPublishDetail() {
            getPublishDetail(this.$route.query.publishId).then((res) => {
                this.publishInfo = res.data;
                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.publishId=this.publishInfo.publishId
            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.publishInfo.publishId);
                // this.listPublishReplyQuery();
            });
        },

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

        listPublishReplyQuery() {
            listPublishReply().then((res) => {
                this.replyList = res.rows;
            });
        },
    

        firstQuote() {
            let param = {
                merchantId: this.merchantId,
            };
            listDownSelectUser(param).then((res) => {
                this.quoteServerUserOption = res.rows;
                this.quoteOpen = true;

            });
        },

        // 点击【编辑】按钮编辑报价信息
        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].dictSort &&
                    item.quoteUnit !== 999
                ) {
                    this.quoteParams.quoteUnit = this.unitsOption[j].dictSort;
                } else if (
                    this.unitsOption[j].dictSort == 999 &&
                    item.quoteUnit == 999
                ) {
                    this.quoteParams.quoteUnit = this.unitsOption[j].dictSort;
                    this.quoteParams.otherUnit = item.otherUnit;
                    this.otherUnitFlag = true;
                }
            }
        },

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



        // // 报价对话框计算总价
        // countTotalPrice() {
        //     if (
        //         this.quoteParams.singlePrice &&
        //         this.quoteParams.singlePrice < 0.01
        //     ) {
        //         return this.$modal.msgError("单价不能小于0.01");
        //     }
        //     if (
        //         this.quoteParams.singlePrice &&
        //         this.quoteParams.quoteCounts
        //     ) {
        //         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.quoteDesc && this.quoteParams.quoteDesc.length > 500) {
                return this.$modal.msgError("报价描述字数不得超过500")
            }
            if (this.quoteParams.otherUnit && this.quoteParams.otherUnit.length > 10) {
                return this.$modal.msgError("其他单位长度不得超过10")
            }
             
            // 编辑后选择的不是其他单位时,将之前的其他单位值清空
            if (this.quoteParams.quoteId !== null
                && this.quoteParams.quoteUnit !==  999
                && this.quoteParams.otherUnit
                && this.quoteParams.otherUnit.length > 0) {
                this.quoteParams.otherUnit = "";
            }
            this.quoteParams.publishId = this.publishInfo.publishId

            if (this.quoteParams.quoteId !== null) {
                // 编辑报价
                updateQuote(this.quoteParams).then((res) => {
                    if (res.code === 200) {
                        // 关闭报价框
                        this.quoteOpen = false;
                        // 刷新报价列表
                        this.getQuoteList(this.publishInfo.publishId);
                        // 刷新详情
                        this.getPublishDetail(this.publishInfo);
                        this.getList
                    }
                });
            } else {
                // 添加报价
                addQuote(this.quoteParams).then((res) => {
                    if (res.code === 200) {
                        // 关闭报价框
                        this.quoteOpen = false;
                        // 刷新报价列表
                        this.getQuoteList(this.publishInfo.publishId);
                        // 刷新详情
                        this.getPublishDetail(this.publishInfo);
                        this.getList()
                    }
                });
            }
        },

        // 点击【报价】按钮
        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) => {
                if (r.roles[0] === "merchant") {
                    if (r.merchant.merchantId !== null) {
                        this.merchantId = r.merchant.merchantId;
                    }
                    this.userRole = r.roles[0]
                }
                let param = {
                    merchantId: this.merchantId,
                };
                //报价列表服务人员信息
                listDownSelectUser(param).then((res) => {
                    this.serverUserOption = res.rows;
                    console.log(
                        "serverUserOption--------------",
                        this.serverUserOption
                    );
                });
            });
        },

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

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


        // 报价参数重置
        resetQuoteParams() {
            this.quoteParams = {
                quoteDesc: null,
                quoteUnit: null,
                otherUnit: null,
                serverUserId: null,
                merchantId: null,
                quoteCounts: undefined,
                singlePrice: undefined,
                singleTime: 0.5,
                totalPrice: 0,
                totalTime: 0,
                status: 0,
                publishId: null,
                quoteId: null,
            };
            // 清空表单
            if (this.$refs.quoteForm) {
                this.$refs.quoteForm.clearValidate()
            }
        },
        //报价对话框计算总价
        countTotalPrice() {
            if (
                this.quoteParams.singlePrice &&
                this.quoteParams.singlePrice < 0.01
            ) {
                return this.$modal.msgError("单价不能小于0.01");
            }
            if (
                this.quoteParams.singlePrice
                &&
                this.quoteParams.quoteCounts
            ) {
                console.log(1);
                this.queryParams.totalPrice =
                    this.quoteParams.singlePrice * this.quoteParams.quoteCounts;
            }
        },
        justifyOther(value) {
            console.log(value);
            if (value == 999) {
                this.otherUnitFlag = true;
            } else {
                this.otherUnitFlag = false;
            }
        },
        // 保存报价
        saveQuote() {
            this.quoteParams.merchantId = this.merchantId;
            this.quoteParams.totalPrice =
                this.quoteParams.singlePrice * this.quoteParams.quoteCounts;
            this.quoteParams.totalTime =
                this.quoteParams.singleTime * this.quoteParams.quoteCounts;
            // 校验参数
            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.quoteDesc && this.quoteParams.quoteDesc.length > 500) {
                return this.$modal.msgError("报价描述字数不得超过500")
            }
            if (this.quoteParams.otherUnit && this.quoteParams.otherUnit.length > 10) {
                return this.$modal.msgError("其他单位长度不得超过10")
            }

            addQuote(this.quoteParams).then((res) => {
                if (res.code === 200) {
                    // 关闭报价框
                    this.quoteOpen = false;
                    // 刷新列表
                    this.getList();
                }
            });
        },

        // // 取消报价
        // qteCancel() {
        //     // 关闭报价框
        //     this.quoteOpen = false;
        //     // 重置报价参数
        //     this.resetQuoteParams();
        // },

        

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

            //查询报检单位集合
            let param = "goods_unit";
             getDicts(param).then((res) => {
                 if(res.code==200){
                    this.unitsOption = res.data;
                 }
            });
        },
        quote(row) {
            this.resetQuoteParams();

            this.quoteParams.publishId = row.publishId;

            for (let i in this.serverUserOption) {
                if (row.serverUserId == this.serverUserOption[i].serverId) {
                    this.quoteParams.serverUserId =
                        this.serverUserOption[i].serverId;
                }
            }
            for (let j in this.unitsOption) {
                if (
                    row.quoteUnit == this.unitsOption[j].dictSort &&
                    row.quoteUnit !== 999
                ) {
                    this.quoteParams.quoteUnit = this.unitsOption[j].dictSort;
                } else if (
                    this.unitsOption[j].dictSort == 999 &&
                    row.quoteUnit == 999
                ) {
                    this.quoteParams.quoteUnit = this.unitsOption[j].dictSort;
                    this.quoteParams.otherUnit = row.otherUnit;
                    this.otherUnitFlag = true;
                }
            }
            this.quoteOpen = true;
        },
        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") {
                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]
            }
            this.queryParams.beginTime = sBegin;
            this.queryParams.endTime = sEnd;
            // 级联选择器绑定的参数queryParams.categoryId是一个数组，需要将最后一个层级分类的id 重新赋值给查询参数categoryId
            if (this.queryParams.categoryId && this.queryParams.categoryId.length > 1) {
                this.queryParams.categoryId =
                    this.queryParams.categoryId[
                        this.queryParams.categoryId.length - 1
                    ];
            }
            getInfo().then((r) => {
                if (r.roles[0] == "merchant") {
                    if (r.merchant.merchantId != null) {
                        this.queryParams.merchantId = r.merchant.merchantId;
                        detail(this.queryParams.merchantId).then((res) => {
                            //获取商家经纬度
                            this.queryParams.merchantLatitude =
                                res.data.latitude;
                            this.queryParams.merchantLongitude =
                                res.data.longitude;
                            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;
                                });
                        });
                    }
                } else {
                    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: "",
                status: "",
                categoryId: [],
                merchantId: "",
                beginTime: "",
                endTime: "",
            };
            this.handleQuery();
        },

        // 查询需求详情信息
        getPublishDetail(row) {
            // this.$router.push({
            //     path: "/publish/publishDetails",
            //     query: {
            //         publishId: publishId,
            //     },
            // });
            const publishId = row.publishId
            getPublishDetail(publishId).then((response) => {
                this.publishInfo=response.data
                this.getQuoteList(this.publishInfo.publishId),
                this.listUser();
                this.listUnit();
                this.listOpen=true
            })
        },

        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>
