<template>
    <div>
        <!--工单信息 -->
        <el-card shadow="hover">
            <el-row>
                <div class="hand_title">工单详情</div>
                <el-row class="row-mp">
                    <el-col :span="6">
                        <div class="client-name">
                            工单号：{{ ticketInfo.ticket.ticketSn }}
                        </div>
                    </el-col>
                     <el-col :span="6">
                      <!--  <div class="client-name">
                            子状态： <el-tag> {{substatusDesc[ticketInfo.ticket.substatus]}} </el-tag>
                        </div> -->
                         <span class="client-name">工单类型:
                            {{ ticketInfo.ticket.ticketType == 0 ? "咨询" : "投诉" }}
                        </span>
                    </el-col>
                    <el-col :span="6">
                        <div class="client-name">
                            工单状态： <el-tag size="mini" :type="typeTag[ticketInfo.ticket.status]"> {{statusDesc[ticketInfo.ticket.status]}}->{{substatusDesc[ticketInfo.ticket.substatus]}} </el-tag>
                        </div>
                    </el-col>
                </el-row>
 

                <el-row class="row-mp"> 
                     <el-col :span="6">
                         <span class="client-name">
                              {{ ticketInfo.ticket.ticketType == 0 ? "咨询内容" : "投诉内容" }}：
                            <el-tag  size="mini">  {{ ticketInfo.consults.join('；') }}</el-tag>
                        </span>
                    </el-col>
                    <el-col :span="6">
                      
                           <span class="client-tel">工单来源：{{ ticketInfo.ticket.source=="CC"?'电访':'' }}</span>
                       
                        <!-- <span style="color: #1890ff"><a @click="perviewPayRecBtn(123)">&nbsp; &nbsp;查看通话记录 </a>  </span> -->
                    </el-col>
                    <!-- <el-col :span="6">
                        <span class="client-name">工单类型:
                            {{ ticketInfo.ticket.ticketType == 0 ? "咨询" : "投诉" }}
                        </span>
                    </el-col> --> 
                   
                </el-row> 

                <el-row class="row-mp">
                     <el-col :span="24">
                        <div class="client-name">
                            事件描述：{{ ticketInfo.ticket.ticketDes }}
                        </div>
                    </el-col>
                </el-row>
                 

                <el-row class="row-mp"> 
                    <el-col :span="6">
                        <div class="client-name">受理时间：{{ getslsj() }}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="client-name">受理时长：{{ getslsc() }}</div>
                    </el-col>
                   
                </el-row>
 

                <el-row class="row-mp">
                     <el-col :span="6">
                        <div class="client-name">
                            <!-- 最后受理部门：{{ ticketInfo.lastJzDepartment==null?"":ticketInfo.lastJzDepartment.name }}
                             -->
                              归属技能组：{{ ticketInfo.ticket.skillGroupName}}
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="client-name">
                            最后处理人：{{ticketInfo.ticket.updateUserName }}
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="client-name">
                            最后处理结果：{{ tickerResult[ticketInfo.ticket.result] }}
                        </div>
                    </el-col>
                </el-row>

            </el-row>
            <!-- </el-card> -->

            <!-- 工单日志-->

            <!-- <el-card shadow="hover"> -->
            <el-row>
                <div class="hand_title">工单日志</div>
                <el-row class="row-mp">
                    <el-table :data="ticketInfo.actions" border style="width: 90%; margin-left: 20px" class="table">
                        <el-table-column prop="index" label="序号" type="index" width="50px"></el-table-column>

                        <!-- <el-table-column prop="statusDes" label="状态"></el-table-column> -->

                        <el-table-column align="center" label="状态" prop="status">
                            <template slot-scope="scope">
                                <el-tag :type="typeTag[scope.row.status]">{{statusDesc[scope.row.status]}}<span v-if="scope.row.statusSub!=''">->{{substatusDesc[scope.row.statusSub]}}</span> </el-tag>
                            </template>
                        </el-table-column>

                        <!--工单子状态 101 待处理；102 工单流转 ，流转到其他技能组 ；103 驳回 流转的工单，上级可以驳回；
             104 撤回 ，已流转的工单，如果上一级为处理 可以自己撤回；105 重新打开；201 完成；301 作废 -->
                        <!-- <el-table-column align="center" label="子状态" prop="substatus">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.statusSub!=''" :type="typeTag[scope.row.statusSub]">{{
                        substatusDesc[scope.row.statusSub]
                      }}</el-tag>
                            </template>
                        </el-table-column> -->

                        <el-table-column prop="content" label="处理内容">

                            <template slot-scope="scope">
                                <el-popover placement="top-start" title="内容" width="240" trigger="hover" :content="scope.row.content">
                                    <span class="tooltip-span" slot="reference">{{scope.row.content}}</span>
                                </el-popover>

                            </template>
                        </el-table-column>

                        <el-table-column prop="createTime" label="操作时间"></el-table-column>

                        <el-table-column prop="createUserName" label="操作人"></el-table-column>
                    </el-table>
                </el-row>
            </el-row>

        </el-card>
    </div>
</template>
<script>
import { detail, selectTicketByMobile } from "@/api/ticketHandle";
import { formatTime } from "@/utils/date";
import customerInfoPage from "@/views/components/customerInfo.vue";
export default {
    components: { customerInfoPage },
    props: {
        ticketId: "",
    },
    data() {
        return {
            ticketInfo: {
                customer: {},
                ticket: {},
                consults: [],
                actions: [],
                relations: {},
                order: {},
                lastSysUser: {},
                lastJzDepartment: { name: "" },
                lastContent: "",
            }, // 客户信息customer、工单ticket、工单咨询类型consults、工单处理过程actions、工单关联信息relations,order，
            customerRelationTicket: [], //客户关联工单
            typeTag: ["", "success", "warning", "danger"],
            statusDesc: {
                0: "创建",
                1: "处理中",
                2: "已完成",
                3: "作废",
            },
            substatusDesc: {
                101: "待处理",
                102: "流转",
                103: "驳回",
                104: "重新打开",
                201: "完成",
            },
            tickerResult: {
                1: "接受解释",
                2: "重做一次",
                3: "赔偿",
                4: "投诉到媒体",
            },
            levelMap: {
                0: "无",
                1: "一般",
                2: "严重",
                3: "特别严重",
            },
            source: {
                xinghai: "星海",
                saasmall: "saas商城",
                jzmall: "鲸致商城",
                hema: "盒马",
                IB: "进电",
                OB: "外拨",
                IM: "聊天工具",
                EMAILL: "邮件",
                APP: "APP",
                H5: "H5",
                Other: "其他",
            },
        };
    },
    created() {
        this.loadTicketInfo();
    },
    activated() {},
    methods: {
        linkLoad(ticketIds) {
            //查看详情的弹窗数据
            detail({ id: ticketIds })
                .then((response) => {
                    this.ticketInfo = response.data.data;
                    console.log(this.ticketInfo);
                })
                .catch(() => {});
        },
        loadTicketInfo() {
            //默认进来工单详情
            detail({ id: this.ticketId })
                .then((response) => {
                    this.ticketInfo = response.data.data;
                    console.log(this.ticketInfo);
                })
                .catch(() => {});
        },
        getslsj() {
            //受理时间
            let sj =
                this.ticketInfo.actions.length > 0
                    ? this.ticketInfo.actions[0].createTime
                    : "";
            return sj;
        },
        getslsc() {
            //受理时长  如果是未结束的工单  就是当前时间 -受理创建时间    结束工单 将受理时长 保存数据库
            //判断工单是否结束
            if (this.ticketInfo.ticket.status == 2) {
                let sc = this.ticketInfo.ticket.handleTime; //获取的是秒
                if (sc == undefined || sc == "") {
                    return "";
                }
                return formatTime(sc);
            }

            //为结束的工单
            if (this.ticketInfo.actions.length > 0) {
                let tm = this.ticketInfo.actions[0].createTime;
                let currentTm = new Date(); // 获取当前日期
                let ksDate = new Date(tm);
                let ms = Math.abs(ksDate - currentTm);
                // 两个日期相减得到毫秒数  1s=1000ms
                let s = ms / 1000; // 毫秒转为秒
                return formatTime(s);
            }
            return "";
        },
        sliceContent(content) {
            let isOver = content.length > 3 ? "..." : ""; 
            return content.slice(0, 3) + isOver;
        },
    },
};
</script>
<style scoped>
.hand_title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    border-left: 5px solid #0eaefc;
    padding-left: 8px;
    margin: 15px 0px;
}

.client-address,
.client-name,
.client-tel {
    font-size: 14px;
    color: #646464;
}
.row-mp {
    padding: 0px 15px;
    margin: 3px 0px;
    margin-bottom: 10px
}
.tooltip-span{
   display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor:pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width:160px;
}
</style>