<template>
    <div>
        <el-card shadow="hover">
            <el-row>
                <div class="hand_title">客户信息</div>

                <el-row class="row-mp">
                    <el-col :span="5">
                        <span class="client-name">
                            客户姓名: {{ customerInfoData.user.customerName }}
                        </span>
                    </el-col>
                    <el-col :span="6">
                        <span class="client-tel">联系电话： {{ customerInfoData.user.tel }}
                        </span>
                        <span style="color: #1890ff"><a @click="onCall(customerInfoData.user.tel)">&nbsp; &nbsp;拨打 </a>
                        </span>
                        <span style="color: #1890ff">&nbsp; &nbsp;<a @click="laterCallVisible = true">添加回拨任务 </a>
                        </span>
                    </el-col>
                    <el-col :span="10">
                        <span class="client-name">
                            关联手机号:
                            <span style="color:rgb(24, 144, 255)" v-for="(item,index) in customerInfoData.fns" :key="index">

                                <a @click="onCall(item.mobile)">{{item.mobile}}</a> &nbsp;&nbsp;
                            </span>
                        </span>
                    </el-col>
                </el-row>

                <el-row class="row-mp">
                    <br />
                </el-row>

                <el-row class="row-mp">
                    <el-col :span="5">
                        <span class="client-name">
                            来源: {{ source[ customerInfoData.user.source] }}
                        </span>
                    </el-col>
                    <el-col :span="6">
                        <span class="client-name">
                            渠道: {{ customerInfoData.channel.name }}
                        </span>
                    </el-col>

                    <el-col :span="7">

                        <div class="client-address">
                            常用地址：{{ customerInfoData.user.customerAddr }}
                        </div>
                        <br />
                    </el-col>
                </el-row>
            </el-row>

            <!--客户工单，服务订单，话务记录，电访记录-->
            <!-- <el-card shadow="hover"> -->
            <el-row>
                <div class="hand_title">关联信息</div>
                <div style=" clear: both;">

                    <el-tabs>
                        <el-tab-pane label="工单信息" v-model="activeName" @tab-click="handleClick(1)">

                            <el-table :data="customerInfoData.ticketList"  size='mini' fit highlight-current-row  max-height="400px">
                                <el-table-column align="center" label="工单编号" prop="ticketSn" />
                                <el-table-column align="center" label="工单标题" prop="ticketTitle" />
                                <el-table-column align="center" label="创建时间" prop="createTime" />
                                <!-- <el-table-column 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 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 align="center" label="状态" prop="status">
                                    <template slot-scope="scope">
                                        <el-tag :type="typeTag[scope.row.status]">{{statusDesc[scope.row.status]}}->{{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-if="scope.row.result!=''&&scope.row.result!=undefined">
                                            {{ tickerResult[scope.row.result] }}
                                        </el-tag>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="最后处理人" prop="updateUserName" />
                                <el-table-column align="center" label="最后处理时间" prop="updateTime" />
                                <el-table-column label="操作" >
                                    <template slot-scope="scope">
                                        <el-button type="primary"   plain  size="mini" v-if="scope.row.id!=$route.query.ticketId" @click="showDetail(scope.row)">详情</el-button>
                                    </template>
                                </el-table-column>

                            </el-table>

                        </el-tab-pane>

                      

                        
                        <el-tab-pane label="电访记录" v-model="activeName" @tab-click="handleClick(4)">
                            <el-table :data="customerInfoData.jzCalllogs"  size='mini' fit highlight-current-row max-height="400px">
                                <!-- <el-table-column align="center" label="客户名称" prop="customerName">
                                    <template>
                                        <span>{{customerInfoData.user.customerName}}</span>
                                    </template>
                                </el-table-column> -->
                                <el-table-column align="center" label="联系手机" prop="mobile" />
                                <el-table-column align="center" label="呼叫类型" prop="callType">
                                    <template slot-scope="scope">
                                        <el-tag>{{ jzCalllogRecordsTypeMap[scope.row.callType] }}</el-tag>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column align="center" label="响铃时长" prop="ringingtime" />
                                <el-table-column align="center" label="通话时长" prop="talktime" />
                                <el-table-column align="center" label="话后时长" prop="acwtime" /> -->

                                <el-table-column align="center" label="电访结果" prop="callResult">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.callResult==0 ? 'warning' : 'success' ">{{ jzCalllogResultMap[scope.row.callResult] }} </el-tag>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="呼叫开始时间" prop="startTime" />
                                <el-table-column align="center" label="处理结束时间" prop="endTime" />
                                <el-table-column align="center" label="备注" prop="remark" />
                                 <el-table-column align="left" label="操作"   class-name="small-padding fixed-width">
                                    <template slot-scope="scope"> 
                                    <el-button type="primary" plain size="mini" @click="handleRecordDetail(scope.row)">详情</el-button>
                                    </template>
                                 </el-table-column>

                            </el-table>
                        </el-tab-pane>


                        <el-tab-pane label="话务记录" v-model="activeName" @tab-click="handleClick(3)">

                            <el-table :data="customerInfoData.jzCalllogRecords"  size='mini' fit highlight-current-row max-height="400px">
                                <!-- <el-table-column align="center" label="客户名称" prop="customerName">
                                    <template>
                                        <span>{{customerInfoData.user.customerName}}</span>
                                    </template>
                                </el-table-column> -->
                                <el-table-column align="center" label="联系手机" prop="mobile" />
                                <el-table-column align="center" label="呼叫类型" prop="callType">
                                    <template slot-scope="scope">
                                        <el-tag>{{ jzCalllogRecordsTypeMap[scope.row.callType] }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="响铃时长" prop="ringingtime" />
                                <el-table-column align="center" label="通话时长" prop="talktime" />
                                <el-table-column align="center" label="是否接通" prop="connected">
                                    <template slot-scope="scope">
                                        <el-tag>{{  scope.row.connected==0?'未接通':'接通' }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="创建时间" prop="createTime" />
  <el-table-column align="center" label="录音" prop="recordUrl"> 
           <template slot-scope="scope">
                <audio  :src="scope.row.recordUrl"  controls="controls" class="audio-wrapper"  v-if="scope.row.recordUrl!=null">
              您的浏览器不支持 audio 标签。
            </audio>
           </template>
          </el-table-column>
                                <!-- <el-table-column align="center" label="话后时长" prop="acwtime" /> 
                            <el-table-column align="center" label="呼叫开始时间" prop="startTime" />
                            <el-table-column align="center" label="处理结束时间" prop="endTime" />  -->
                            </el-table>
                        </el-tab-pane>

                          <el-tab-pane label="服务订单" v-model="activeName" @tab-click="handleClick(2)">
                            <el-table :data="customerInfoData.jzOrders"  size='mini' fit highlight-current-row max-height="400px">
                                <el-table-column align="center" label="客户手机" prop="mobile" fixed="left" />
                                <el-table-column align="center" label="预约时间" min-width="150" prop="orderDate" />
                                <el-table-column align="center" label="购买门店" prop="shop.shopName" />
                                <el-table-column align="center" label="订单编号" width="135" prop="orderSn" />
                                <el-table-column align="center" label="下单时间" min-width="90" prop="createTime" />
                                <el-table-column align="center" label="订单渠道" min-width="90" prop="orderChannel">
                                    <template slot-scope="scope">
                                        <el-tag type="success">{{ channelsFilter(scope.row.orderChannel) }}</el-tag>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="订单状态" width="120" prop="orderStatus">
                                    <template slot-scope="scope">
                                        <el-tag type="success">{{(scope.row.actualPrice>scope.row.refundAmount)?'部分':''}}{{orderStatusFilter(scope.row.orderStatus) }}</el-tag>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" width="80" label="订单金额" prop="orderPrice" />
                                <el-table-column align="center" width="80" label="支付金额" prop="actualPrice" />
                                <el-table-column align="center" width="80" label="退款金额" prop="refundAmount" />
                                <el-table-column align="center" label="支付时间" min-width="100" prop="payTime" />
                                <el-table-column label="操作" fixed="right">
                                    <template slot-scope="scope">
                                        <el-button type="primary"  plain  size="mini" @click="shoBookOrderDetail(scope.row)">详情</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </el-tab-pane>

                    </el-tabs>

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

        </el-card>

          <!-- 话务详情 --> 
    <el-dialog  title='电访详情'  :visible.sync="dialogDetailRecordsVisible">
      <el-table  :data="records"  size='mini' element-loading-text="正在查询中。。。" fit highlight-current-row>
      <el-table-column align="center" label="电话号码" prop="mobile" />
      <el-table-column align="center" label="响铃时长" prop="ringingtime" />
      <el-table-column align="center" label="通话时长" prop="talktime" />
      <el-table-column align="center" label="是否接通" prop="connected"/>
      <el-table-column align="center" label="呼叫类型" prop="callType">
        <template slot-scope="scope">
          <el-tag>{{ filterType(scope.row.callType) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="来源" prop="callSource"/>
      <el-table-column align="center" label="录音" prop="recordUrl"> 
           <template slot-scope="scope">
                <audio  :src="scope.row.recordUrl"  controls="controls" class="audio-wrapper"  v-if="recordUrl!=null">
              您的浏览器不支持 audio 标签。
            </audio>
           </template>
      </el-table-column>
      </el-table>
       <div slot="footer" class="dialog-footer">
        <el-button  @click="dialogDetailRecordsVisible = false">确定</el-button> 
      </div>
    </el-dialog>

        <el-dialog title="工单明细" :visible.sync="dialogFormVisible" width="1024px" :close-on-click-modal="false" center>
            <ticketDetailCompentPage ref="ticketDetailCompentPage" />
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-if="$route.query.ticketId!=tempChooseTicketRow.id"  @click="toTicketDetail">打开并处理此工单</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="盒马服务工单详情" :visible.sync="dialogHemaVisible" width="1270px" :close-on-click-modal="false" center>
            <el-table :data="jzBookOrders" size='mini' fit highlight-current-row>
                <el-table-column align="center" label="服务订单号" prop="bookOrderNo" />
                <el-table-column align="center" label="服务项" prop="itemName" />
                <el-table-column align="center" label="预约人" prop="userName" />
                <el-table-column align="center" label="预约手机号" prop="phone" />
                <el-table-column align="center" label="上门地址" prop="addrDetail" />
                <el-table-column align="center" label="预约时间" prop="bookTime" />
                <el-table-column align="center" label="创建时间" prop="createTime" />

                <el-table-column align="center" label="预约用户id" prop="userId" />
                <el-table-column align="center" label="关联业务单号" prop="bizOrderId" />
                <el-table-column align="center" label="业务订单实付" prop="payFee" />
                <el-table-column align="center" label="关联渠道单号" prop="hmOrderId" />
                <el-table-column align="center" label="服务主单号" prop="serviceContractNo" />
                <el-table-column align="center" label="付款单号" prop="paymentNo" />
                <el-table-column align="center" label="运营备注" prop="operRemark" />
                <el-table-column align="center" label="状态" prop="status" />
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogHemaVisible = false">关闭</el-button>
            </div>
        </el-dialog>

        <!-- 稍后回拨 -->
        <el-dialog title="添加回拨任务" :visible.sync="laterCallVisible" width="600px" :close-on-click-modal="false" center>
            <el-form label-width="120px" :rules="rules" ref="laterCallForm" :model="laterCallForm">
                <el-form-item label="回拨时间" prop="laterCallTime">
                    <el-date-picker v-model="laterCallForm.laterCallTime" :picker-options="pickerOptions" type="datetime" placeholder="选择日期时间"></el-date-picker>

                </el-form-item>
                <el-form-item label="备注内容" prop="laterCallRemark">
                    <el-input v-model="laterCallForm.laterCallRemark" size="mini" type="textarea" rows="5" clearable />
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="callBackLater">确定</el-button>
                <el-button @click="laterCallVisible = false">取消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { detail } from "@/api/customer";
import { allChannel } from "@/api/channel";
import { selectByPaymentNo } from "@/api/bookOrder";
import { create } from "@/api/built";
import { formatDate } from "@/utils/date";
import ticketDetailCompentPage from "@/views/ticket/compent/ticketDetailCompent.vue";

export default {
    components: { ticketDetailCompentPage },
    props: {
        customerId: "",
    },
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now()- 8.64e7; //-;
                },
            },
            laterCallVisible: false, //稍后回拨弹窗
            laterCallForm: { laterCallRemark: "", laterCallTime: new Date(new Date().getTime() + 2*60*60*1000) }, //添加回拨任务
            rules: {
                laterCallRemark: [
                    {
                        required: true,
                        message: "请输入备注内容",
                        trigger: "blur",
                    },
                ],
                laterCallTime: [
                    {
                        required: true,
                        message: "请选择回拨时间",
                        trigger: "blur",
                    },
                ],
            },
            tempChooseTicketRow: {}, //临时选择的跟多操作
            activeName: "1",
            dialogFormVisible: false, //工单明细
            dialogDetailRecordsVisible:false,//话务详情
            dialogHemaVisible: false, //订单下 盒马服务工单详情
            jzBookOrders: [], //服务工单
            customerInfoData: {
                user: {},
                fns: [],
                ticketList: [], //工单信息
                jzOrders: [], //订单
                jzCalllogs: [], //电访记录
                jzCalllogRecords: [], //话务记录
                channel: {},
            },
            records:[],//电访任务中关联的话务详情
            channels: [], //渠道
            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: "其他",
            },
            jzCalllogRecordsTypeMap: {
                IB: "呼入",
                OB: "呼出",
            },
            jzCalllogResultMap: {
                0: "未拨打",
                1: "个人回拨",
                2: "无应答",
                3: "通话中",
                4: "关机",
                5: "停机",
                6: "成功",
                7: "空号",
                8: "无法接通",
                9: "拒访",
            },
            statusMap: {
                101: "未付款",
                102: "用户取消",
                103: "系统取消",
                201: "已付款",
                202: "申请退款",
                203: "已退款",
                301: "已发货",
                401: "用户收货",
                402: "系统收货",
            },
        };
    },
    computed: {},
    created() {
        // alert(1);
        console.log("create");
        this.loadData();

        allChannel().then((res) => {
            this.channels = res.data.data;
        });
    },

    methods: {
        shoBookOrderDetail(row) {
            //展示订单下面的服务工单工单
            this.dialogHemaVisible = true;
            selectByPaymentNo({ paymentNo: row.orderSn }).then((res) => {
                this.jzBookOrders = res.data.data;
            });
        },
        toTicketDetail() {
            //更多操作
            this.$router.push({
                path: "/ticket/ticketDetail",
                query: {
                    ticketId: this.tempChooseTicketRow.id,
                    customerId: this.tempChooseTicketRow.customerId,
                },
            });
        },
        showDetail(row) {
            //弹窗展示工单详情
            this.dialogFormVisible = true;
            this.tempChooseTicketRow = row;
            setTimeout(() => {
                this.$refs.ticketDetailCompentPage.linkLoad(row.id);
            }, 200);
        },
        handleClick(val) {
            this.activeName = val;
        },
        loadData() {
            // alert(this.customerId);
            //加载客户信息
            detail(this.customerId)
                .then((response) => {
                    this.customerInfoData = response.data.data;
                    //console.log(this.customerInfoData);
                })
                .catch(() => {});
        },
        channelsFilter(value) {
            const rs = this.channels.filter((item) => {
                return item.id === value;
            });
            if (rs != null && rs.length > 0) {
                return rs[0].name;
            }
        },
        orderStatusFilter(status) {
            return this.statusMap[status];
        },
        handleRecordDetail(row){//话务详情
        
          this.dialogDetailRecordsVisible=true;
          //筛选customerInfoData.jzCalllogRecords
          this.records=[];
          this.customerInfoData.jzCalllogRecords.forEach(item=>{
              if(item.callId==row.id)
               this.records.push(item);
          })

        },
        onCall(tel) {
            let call = {
                builtId: 0, //任务id
                ticketId: this.$route.query.ticketId, //工单id：如果是工单发起的外呼; 默认0
                customerId: this.customerId, //客户id 必传
                mobile: tel, //电话号码
                name: this.customerInfoData.user.customerName, //客户名称
                type: "OB", //默认OB
                source: "ticket", ////外呼来源：电访任务发起=campaign；工单=ticket
            };
            console.log("调起电话..", call);
            this.$store.state.panel.customerPhone=tel;
            hollyglobal.dialoutEvent(call);
        },
        callBackLater() {
            console.log(this.laterCallTime);
            let reqData = {
                userId: this.$store.state.user.id,
                customerId: this.$route.query.customerId,
                campaignId: 1, //默认 提醒回拨任务
                ticketId: this.$route.query.ticketId,
                callSource: "ticket",
                nextCallTime: formatDate(
                    this.laterCallForm.laterCallTime,
                    "yyyy-MM-dd hh:mm:ss"
                ),
                remark: this.laterCallForm.laterCallRemark,
            };

            let that = this;
            this.$refs["laterCallForm"].validate((valid) => {
                if (valid) {
                    create(reqData)
                        .then((res) => {
                            if (res.data.errno == 0) {
                                that.laterCallVisible = false;
                                that.$message.success(`添加成功`);
                            } else {
                                that.$message.error(res.data.errmsg);
                            }
                        })
                        .catch((e) => {
                            // that.$message.error(e.data.errmsg);
                        });
                }
            });

            console.log(reqData);
        },
    },
};
</script>

<style scoped>
.hand_title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    border-left: 5px solid #0eaefc;
    padding-left: 8px;
    margin: 15px 0px;
}
.demandInfo_text {
    color: #636363;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    border-left: 4px solid #409eff;
    padding-left: 8px;
}
.demandInfo_content {
    margin: 8px 0px;
    font-size: 14px;
    padding: 0px 15px;
    color: #646464;
}
.client-address,
.client-name,
.client-tel {
    font-size: 14px;
    color: #646464;
}
.row-mp {
    padding: 0px 15px;
    margin: 3px 0px;
}
.dialog-footer {
    padding: 20px;
    padding-top: 10px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 .audio-wrapper{
    margin:10px 0 0;
    display:inline-block;
    height: 30px;
  }
  
  .el-table th{
   line-height: 0px !important;
  }
</style>
