<template>
    <div class="app-container">

        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.ticketNo" clearable class="filter-item" style="width: 200px;" placeholder="请输入工单编号" />
            <el-input v-model="listQuery.orderId" clearable class="filter-item" style="width: 200px;" placeholder="请输入订单编号" />
            <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;" placeholder="请输入客户手机号码" />
            <el-select v-model="listQuery.ticketType" clearable style="width: 200px" class="filter-item" placeholder="请选择工单类型">
                <el-option label="咨询" value="0" />
                <el-option label="投诉" value="1" />
            </el-select>
            <el-select v-model="listQuery.status" clearable style="width: 200px" class="filter-item" placeholder="请选择状态">
                <el-option label="新建" value="0" />
                <el-option label="处理中" value="1" />
                <el-option label="完成" value="2" />
                <!-- <el-option label="作废" value="3" /> -->
            </el-select>
            <el-select v-model="listQuery.subStatus" clearable style="width: 200px" class="filter-item" placeholder="请选择子状态">
                <el-option label="待处理" value="101" />
                <el-option label="流转" value="102" />
                <el-option label="驳回" value="103" />
                <el-option label="重新打开" value="104" />
                <el-option label="完成" value="201" />
            </el-select>
            <el-input v-model="listQuery.updateUser" clearable class="filter-item" style="width: 200px;" placeholder="请输入最后处理人" />
            <el-button v-permission="['GET /admin/ticket/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
        </div>

        <el-tabs v-model="listQuery.tab" @tab-click="handleClick">
            <el-tab-pane label="我的待处理工单" name="5" />
            <el-tab-pane label="我的所有工单" name="1" />
            <el-tab-pane label="超24小时未完结工单" name="2" />
            <el-tab-pane label="超48小时未完结工单" name="3" />
            <el-tab-pane label="已办结工单" name="4" />
        </el-tabs>

        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" fit highlight-current-row>
            <el-table-column width="130px" align="center" label="工单编号" prop="ticketSn"  />
            <el-table-column  align="center" label="工单标题" prop="ticketTitle" />
            <el-table-column align="center" label="创建时间" prop="createTime" />
            <!-- <el-table-column width="80px" align="center" label="工单类型" prop="ticketType">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.ticketType==0 ? 'success' : 'warning'">{{ scope.row.ticketType==0?'咨询':'投诉' }}</el-tag>
                </template>
            </el-table-column> -->

            <el-table-column width="80px" align="center" label="工单等级" prop="ticketLevel">
                <template slot-scope="scope">
                    <el-tag :type="typeTag[scope.row.ticketLevel]">{{ levelMap[scope.row.ticketLevel] }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column width="100px" align="center" label="状态" prop="status">
                <template slot-scope="scope">
                    <el-tag :type="typeTag[scope.row.status]">{{ statusDesc[scope.row.status] }}<span>-></span>{{ substatusDesc[scope.row.substatus] }}</el-tag>
                </template>
            </el-table-column>

            <!-- <el-table-column align="center" label="子状态" prop="substatus">
                <template slot-scope="scope">
                    <el-tag :type="typeTag[scope.row.substatus]">{{ substatusDesc[scope.row.substatus] }}</el-tag>
                </template>
            </el-table-column> -->

            <el-table-column align="center" label="处理结果" prop="result">
                <template slot-scope="scope">
                    <el-tag type="success" v-show="scope.row.result!=null"> {{tickerResult [scope.row.result] }} </el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="归属技能组" prop="skillGroupName" />
            <el-table-column width="120px" align="center" label="处理时长" prop="handleTime" >
                <template slot-scope="scope">
                    {{fotmatDuration(scope.row.handleTime)}}
                </template>
            </el-table-column>
            <el-table-column width="100px" align="center" label="最后处理人" prop="updateUserName" />
            <el-table-column align="center" label="最后处理时间" prop="updateTime" />

            <el-table-column align="left" label="操作"   class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!-- <el-button type="primary" size="mini" @click="cancelTicket(scope.row)" v-if="scope.row.substatus==102">
                        <span v-if="scope.row.handler==loginUserId">撤销</span>
                        <span v-if="scope.row.handler!=loginUserId">驳回</span>
                    </el-button>
                    <el-button type="primary" size="mini" @click="wcgdVisible=true;tempRow=scope.row" v-if="scope.row.status!=2">完成</el-button>
                    <el-button type="primary" size="mini" @click="cxfpVisible=true;tempRow=scope.row" v-if="scope.row.status==1">流转</el-button>
                    <el-button type="primary" size="mini" @click="tjbzVisible=true;tempRow=scope.row">备注</el-button>
                    <el-button type="danger" size="small" @click="reopenVisible=true;tempRow=scope.row" v-if="scope.row.status==2">重新打开</el-button> -->
                    <el-button type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>

                    <!-- <el-button v-permission="['POST /admin/ticket/detail']" type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>
          <el-button v-permission="['POST /admin/ticket/memo']" type="success" size="mini" @click="handleAddMemo(scope.row)">添加备注</el-button>
          <el-button v-if="scope.row.substatus === 101" v-permission="['POST /admin/ticket/reject']" type="danger" size="mini" @click="handleTicket(scope.row)">流转</el-button>
          <el-button v-if="scope.row.substatus === 102" v-permission="['POST /admin/ticket/reject']" type="danger" size="mini" @click="handleTicket(scope.row)">撤销</el-button>
          <el-button v-if="scope.row.status != 2" v-permission="['POST /admin/ticket/reject']" type="danger" size="mini" @click="handleTicket(scope.row)">完成</el-button> -->
                </template>
            </el-table-column>
        </el-table>

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

        <el-tooltip placement="top" content="返回顶部">
            <back-to-top :visibility-height="100" />
        </el-tooltip>

        <!-- 添加备注 -->
        <el-dialog title="添加备注" :visible.sync="tjbzVisible" width="600px" :close-on-click-modal="false" center>

            <el-form label-width="120px">
                <el-form-item label="备注">
                    <el-input v-model="memoMark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveMemo">保存</el-button>
                <el-button @click="tjbzVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 完成工单 -->
        <el-dialog title="完成工单" :visible.sync="wcgdVisible" width="600px" :close-on-click-modal="false" center>

            <el-form label-width="120px">
                <el-form-item label="处理结果">
                    <el-select v-model="ticketResulVal" style="width:300px" clearable>
                        <!-- multiple -->
                        <span v-for="item in ticketResultList" :key="item.id">
                            <el-option :label="item.name" :value="item.id" v-if="item.type==tempRow.ticketType" />
                            <!-- <el-option v-for="item in ticketResultList"  :key="item.id" :label="item.name" :value="item.id" /> -->
                        </span>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="completedMark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="completedTicketM">完成</el-button>
                <el-button @click="wcgdVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 驳回 -->
        <el-dialog :title="isbohui" :visible.sync="bohuiVisible" width="600px" :close-on-click-modal="false" center>

            <el-form label-width="120px">
                <el-form-item label="内容">
                    <el-input v-model="rejectmark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="rejectFunction">确定</el-button>
                <el-button @click="bohuiVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 工单流转 -->
        <el-dialog title="工单流转" :visible.sync="cxfpVisible" width="600px" :close-on-click-modal="false" center>
            <el-form label-width="120px">
                <el-form-item label="技能组">
                    <el-select v-model="assignedSkillGroup" style="width:300px" clearable>
                        <!-- multiple -->
                        <el-option v-for="item in skillGroups" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="upgradeRemark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cxfpVisible = false">取消</el-button>
                <el-button type="primary" @click="updateAssigned">确定</el-button>
            </span>
        </el-dialog>

        <!--重新打开工单 -->
        <el-dialog title="重新打开工单" :visible.sync="reopenVisible" width="600px" :close-on-click-modal="false" center>
            <!-- <h4>确定重新打开工单?</h4> -->
            <el-form label-width="120px">
                <el-form-item label="备注">
                    <el-input v-model="reopenRemark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="reopenVisible = false">取消</el-button>
                <el-button type="primary" @click="reopenTicket">确定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script> 
import { listTicket,detail,selectTicketByMobile,memo,completedTicket,reject,upgrade,reopen} from "@/api/ticketHandle";
import { allSkillGroup } from "@/api/campaign";
import { listTicketResult,allTicketResult } from "@/api/ticketResult";
import BackToTop from "@/components/BackToTop";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { formatDate,formatTime } from "@/utils/date";
import _ from "lodash"; 

const levelMap = {
    0: "无",
    1: "一般",
    2: "严重",
    3: "特别严重",
};

const statusMap = {
    0: "创建",
    1: "处理中",
    2: "已完成",
    3: "作废",
};

const substatusMap = {
    101: "待处理",
    102: "流转",
    103: "驳回",
    104: "重新打开",
    201: "完成"
};

const tickerResultMap = {
    1: "接受解释",
    2: "重做一次",
    3: "赔偿",
    4: "投诉到媒体",
};

export default {
    name: "TicketHandle",
    components: { BackToTop, Pagination },
    filters: {},
    data() {
        return {
            tempRow: {}, //临时选择的行---------------------------
            loginUserId: "",
            tjbzVisible: false, //添加备注显示
            memoMark: "",
            wcgdVisible: false, //完成工单显示
            completedMark: "",
            bohuiVisible: false, //驳回显示
            rejectmark: "", //驳回内容填写
            isbohui: "驳回", //撤消
            cxfpVisible: false, //工单流转
            assignedSkillGroup: "",
            upgradeRemark: "",
            skillGroups: [], //下拉选项技能组
            reopenVisible: false, //重新打开工单
            reopenRemark: "",
            ticketResultList: [], //工单处理结果
            ticketResulVal: "", //--------------------------------
            list: [],
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                mobile: "",
                ticketNo: "",
                ticketType: "",
                status: "",
                subStatus: "",
                updateUser: "",
                tab: "5",
                orderId: "",
                sort: "create_time",
                order: "desc",
            },
            typeTag: ["", "success", "warning", "danger"],
            levelMap: levelMap,
            statusDesc: statusMap,
            substatusDesc: substatusMap,
            tickerResult: tickerResultMap,
        };
    },
    created() {
        this.listQuery.tab=this.$route.query.activeIndex;
        this.loginUserId = this.$store.state.user.id;
        this.loadSkillGroup();
        this.loadDmTicketResult(); //工单处理结果
        this.getList();
    },
    methods: {
        fotmatDuration(value){
            return formatTime(value); 
        },
        loadDmTicketResult() {
            // 工单处理结果
            allTicketResult().then((res) => {
                this.ticketResultList = res.data.data;
            });
        },
        loadSkillGroup() {
            //技能组
            allSkillGroup().then((res) => {
                this.skillGroups = res.data.data;
            });
        },
        updateAssigned() {
            //工单流转
            if (this.assignedSkillGroup == "") {
                this.$message.error("请选择流转到哪个技能组");
                return;
            }
            upgrade({
                id: this.tempRow.id,
                memo: this.upgradeRemark,
                skillGroupId: this.assignedSkillGroup,
            })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.cxfpVisible = false;
                        //刷新数据
                        this.getList();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },

        rejectFunction() {
            if (this.rejectmark == "") {
                this.$message.error(this.isbohui + "内容不能为空");
                return;
            }

            reject({ id: this.tempRow.id, memo: this.rejectmark })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.bohuiVisible = false;
                        //刷新数据
                       this.getList();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    // console.log('异常了',e);
                    this.$message.error(e.data.errmsg);
                });
        },
        completedTicketM() {
            //完成
            let that = this;
            if (that.ticketResulVal == "") {
                this.$message.error("请选择处理结果");
                return;
            }

            let boo=true;
            that.ticketResultList.forEach(function (e) {
                if (e.id == that.ticketResulVal && e.isNeedMemo == 1) {
                    if (that.completedMark == "") {
                        that.$message.error("备注不能为空");
                        boo=false;
                    }
                }
            });

            if(!boo){
                return ;
            }

            //取巧传了个默认的技能组-1    result
            completedTicket({
               id: this.tempRow.id,
                memo: this.completedMark,
                skillGroupId: -1,
                result: this.ticketResulVal,
            })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.wcgdVisible = false;
                        //刷新数据
                        this.getList();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    // console.log('异常了',e);
                    this.$message.error(e.data.errmsg);
                });
        },
        saveMemo() {
            //添加备注
            if (this.memoMark == "") {
                this.$message.error("备注内容不能为空");
                return;
            }
            memo({ id: this.tempRow.id, memo: this.memoMark })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`添加成功`);
                        this.tjbzVisible = false;
                        //刷新数据
                       this.getList();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        cancelTicket(row){
            this.bohuiVisible=true;
            this.tempRow=row;
             if (this.tempRow.updateUser == this.loginUserId) {
                this.isbohui = "撤消";
             } else {
                this.isbohui = "驳回";
             } 
        },
        reopenTicket() {
            //添加备注
            if (this.reopenRemark == "") {
                this.$message.error("备注内容不能为空");
                return;
            }
            reopen({ id: this.tempRow.id, memo: this.reopenRemark })
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.reopenVisible = false;
                        //刷新数据
                       this.getList();
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        getList() {
            this.listLoading = true;
            listTicket(this.listQuery)
                .then((response) => {
                    this.list = response.data.data.list;
                    this.total = response.data.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.list = [];
                    this.total = 0;
                    this.listLoading = false;
                });
        },

        handleClick() {
            this.getList();
        },
        handleTicket(row) {},
        handleAddMemo(row) {},
        handleDetail(row) {
            //工单详情
            this.$router.push({
                path: "/ticket/ticketDetail",
                query: {
                    ticketId: row.id,
                    customerId: row.customerId,
                },
            });
        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },
    },
};
</script>

<style>
.detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
}

.operate-container {
    background: #f2f6fc;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
}

.operate-button-container {
    float: right;
    margin-right: 20px;
}

.table-layout {
    margin-top: 20px;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
}

.table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
}

.table-cell-title {
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    background: #f2f6fc;
    text-align: center;
    font-size: 14px;
    color: #303133;
}
.el-table th.gutter {
    display: table-cell !important;
}
.color-danger {
    color: #f56c6c;
    font-size: 18px;
}
</style>
