<template>
  <div>
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="userForm"
      status-icon
      label-position="right"
      label-width="80px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户名称" prop="customerName">
            <el-input v-model="userForm.customerName" size="mini" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="3" v-if="panelType=='IB'">
          <el-button type="text" @click="switchCustomer" class="switch-btn">切换客户</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户身份" prop="customerType">
            <el-select v-model="userForm.customerType" size="mini">
              <el-option
                v-for="type in defaultTypeOptions"
                :key="type.label"
                :label="type.value"
                :value="type.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="渠道" prop="channelId">
            <el-select v-model="userForm.channelId" size="mini">
              <el-option
                v-for="type in channels"
                :key="type.id"
                :label="type.name"
                :value="type.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来源" prop="source">
            <el-select v-model="userForm.source" size="mini">
              <el-option
                v-for="type in sourceOption"
                :key="type.label"
                :label="type.value"
                :value="type.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="联系方式" prop="tel">
            <el-input v-model="userForm.tel" size="mini" :disabled="disabledTel">
              <template slot="append">
                <div @click="handleCall(userForm.tel)">
                  <svg-icon icon-class="cc" />
                </div>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-for="(tel,index) in fns" :key="index">
          <el-form-item label="联系方式" prop="tel2">
            <el-input v-model="tel.mobile" size="mini">
              <template slot="append">
                <div @click="handleCall(tel.mobile)">
                  <svg-icon icon-class="cc" />
                </div>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="text" @click="addTel" class="switch-btn">新增</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="所在城市" prop="city">
            <el-select v-model="userForm.city" size="mini">
              <el-option
                v-for="type in defaultCityOptions"
                :key="type.label"
                :label="type.value"
                :value="type.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="地址" prop="customerAddr">
            <el-input v-model="userForm.customerAddr" size="mini" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer" style="padding-bottom:0px"> 
      <el-button type="text" style="float:left" @click="updateJzOrder">更新盒马订单</el-button>
      <el-button type="primary" size="mini" @click="updateUser">保存</el-button>
      <!-- <el-button @click="dialogFormVisible = false">取消</el-button> -->
    </div>

    <!-- tab切换 -->
    <div class="tab-wrapper">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="工单信息" name="first">
          <p v-if="ticketList.length == 0">暂无工单</p>

          <el-collapse v-else v-model="activeTicket">
            <el-collapse-item :name="index+1" v-for="(item, index) in ticketList" :key="index">
              <template slot="title">
                <span class="orderIndexText">工单:{{item.ticketSn}}</span>
                   <span class="client-name" style="margin-left:20px">
                      <!-- 工单类型: -->
                    <!-- <el-tag>  {{ item.ticketType == 0 ? "咨询" : "投诉" }}</el-tag> -->
                    <el-tag>  {{ item.ticketTitle==null?'无':item.ticketTitle }}</el-tag>
                    </span>
                 <el-tag :type="item.status==1 ? 'warning' : 'success' " style="margin-left:10px">{{statusDesc[item.status]}}->{{substatusDesc[item.substatus]}}</el-tag>
                <span class="orderIndexText" style="margin-left:10px">处理时长:{{formatTime(item.handleTime)}}</span>
           
              </template>
              <el-row>
                <div class="hand_title">工单信息</div>
                <el-row class="row-mp">
                  <el-col :span="12">
                    <div class="client-name">工单号：{{ item.ticketSn }}</div>
                  </el-col>
                   <el-col :span="12">
                    <span class="client-tel">工单来源：{{ item.source }}</span>
                  </el-col>
                  <!-- <el-col :span="12">
                    <div class="client-name"> -->
                      <!-- 工单状态：{{statusDesc[item.status]}} -->
                      <!-- <el-tag type="warning">{{statusDesc[item.status]}}</el-tag> -->
                      <!-- 子状态：{{substatusDesc[item.substatus]}} -->
                      <!-- <el-tag>{{substatusDesc[item.substatus]}}</el-tag> -->
                   
                    <!-- </div>
                  </el-col> -->
                </el-row>

                <!-- <el-row class="row-mp">
                   <el-col :span="12">
                    <span class="client-tel">工单状态：{{ statusDesc[item.status]}} </span>
                  </el-col>
                                  <el-col :span="12">
                    <span class="client-tel">子状态：{{ substatusDesc[item.substatus]}} </span>
                  </el-col>
                </el-row> -->

                <!-- <el-row class="row-mp">
                  <el-col :span="12">
                    <span class="client-name">
                      工单类型:
                      {{ item.ticketType == 0 ? "咨询" : "投诉" }}
                    </span>
                  </el-col>
                 
                </el-row> -->

                <el-row class="row-mp">
                  
                  <el-col :span="12">
                    <span class="client-address">工单标题：{{ item.ticketTitle }}</span>
                  </el-col>
                </el-row>

                <el-row class="row-mp">
                  <el-col :span="24">
                    <div class="client-name">事件描述：{{ item.ticketDes }}</div>
                  </el-col>
                </el-row>
              
               <el-row class="row-mp">
                  <el-col :span="24">
                    <div class="client-name">  {{item.ticketType == 0 ? "咨询内容" : "投诉内容"}}：<el-tag>{{ item.ticketConsultTypes.join('；') }}</el-tag></div>
                  </el-col>
                </el-row>
                 <el-row class="row-mp" v-if="item.ticketType == 1">
                  <el-col :span="12">
                    <div class="client-name">投诉服务者：{{item.servicer}}</div>
                  </el-col>
                  <el-col :span="12">
                    <div class="client-name">投诉产品：{{item.productName }}</div>
                  </el-col>
                </el-row>
                <el-row class="row-mp">
                  <el-col :span="12">
                    <div class="client-name">受理时间：{{ item.createTime }}</div>
                  </el-col>
                  <el-col :span="12">
                    <div
                      class="client-name"
                    >最后处理人：{{ item.updateUserName }}</div>
                  </el-col>
                  <!-- <el-col :span="12">
                    <div class="client-name">受理时长：{{ item.handleTime }}</div>
                  </el-col> -->
                </el-row>

                <el-row class="row-mp">
                  <el-col :span="12">
                    <div
                      class="client-name"
                    >
                    <!-- 归属技能组：{{ item.lastJzDepartment==null?"":item.lastJzDepartment.name }} -->
                    归属技能组：{{ item.skillGroupName }}
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="client-name">最后处理结果：<span v-if="item.hasOwnProperty('result')">{{tickerResult[item.result] }}</span></div>
                  </el-col>
                  
                </el-row>

               
              </el-row>

                <!-- 工单操作-->
        <div shadow="hover" v-if="!checkSikllGroup(item.skillGroupId)">
            <el-row style="margin-left: 10%">
                <el-col :span="3" v-if="item.substatus==102&&item.updateUser ==loginUserId">
                    <el-button class="filter-item" type="primary" @click="showbohuiDialog(item.id,item.handler)">
                        <span v-if="item.updateUser==loginUserId">撤销</span>
                    </el-button>
                </el-col>
            </el-row>
        </div>
 <div shadow="hover" v-if="checkSikllGroup(item.skillGroupId)">
              <el-row style="margin-left: 10%;margin-top:20px">
                <el-col :span="6" v-if="item.substatus==102">
                  <el-button
                    class="filter-item"
                    type="primary" size="mini"
                    @click="showbohuiDialog(item.id,item.handler)"
                  >
                    <span v-if="item.handler==loginUserId">撤销</span>
                    <span v-if="item.handler!=loginUserId">驳回</span>
                  </el-button>
                </el-col>

                <el-col :span="6" v-if="item.status!=2">
                  <el-button
                    class="filter-item"
                    type="primary" size="mini"
                    @click="showFinishDialog(item.id,item.ticketType)"
                  >完成</el-button>
                </el-col>

                <el-col :span="6" v-if="item.status==1">
                  <el-button class="filter-item" type="primary" size="mini" @click="showAssignDialog(item.id)">流转</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button
                    class="filter-item"
                    type="primary"  
                    @click="showRemarkDialog(item.id)" size="mini"
                  >添加备注</el-button>
                </el-col>

                <el-col :span="6" v-if="item.status==2">
                  <el-button
                    class="filter-item"
                    type="primary" size="mini"
                    @click="showReopenDialog(item.id)"
                  >重新打开</el-button>
                </el-col>
              </el-row>
</div>
              <el-row>
                <div class="hand_title">工单日志</div>
                <el-row class="row-mp">
                  <el-table
                    :data="item.jzTicketActions"
                    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 align="center" label="状态" prop="status">
                      <template slot-scope="scope">
                        <el-tag :type="typeTag[scope.row.status]" v-if="scope.row.hasOwnProperty('status')">
                          {{statusDesc[scope.row.status]}}->
                          <span v-if="scope.row.hasOwnProperty('statusSub')">
                            {{substatusDesc[scope.row.statusSub]}}
                          </span>
                        </el-tag>
                      </template>
                    </el-table-column>

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

                    <el-table-column prop="content" label="处理内容" width="180">
                     
                      <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-button slot="reference">hover 激活</el-button> -->
  </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-collapse-item>
          </el-collapse>
        </el-tab-pane>

         <el-tab-pane label="电访记录" name="third">
          <el-table :data="callList" size='mini' fit highlight-current-row>
            <!-- <el-table-column align="center" label="客户名称" prop="customer.customerName" /> -->
            <el-table-column align="center" label="联系手机" prop="mobile" />
            <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="callResult">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.callResult==0 ? 'warning' : 'success' ">{{ resultMap[scope.row.callResult] }} </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="startTime" />
            <el-table-column align="center" label="结束时间" prop="endTime" />
             <el-table-column align="center" label="备注" prop="remark" />
            <!-- <el-table-column align="center" label="创建时间" prop="createTime" /> -->
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="话务记录" name="second">
          <el-table :data="calllogList" size='mini' fit highlight-current-row>
            <!-- <el-table-column align="center" label="客户名称" prop="customer.customerName" /> -->
            <el-table-column align="center" label="联系手机" prop="mobile" />
            <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="connected">
           <template slot-scope="scope">
             <el-tag :type="scope.row.connected ? 'success' : 'warning' ">{{ scope.row.connected?'接通':'未接通' }} </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="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>
        </el-tab-pane>
       
        <el-tab-pane label="服务订单" name="fourth">

      <el-table :data="jzBookOrders" size='mini' fit highlight-current-row>
                                    <!-- <el-table-column align="center" label="客户手机" prop="mobile" fixed="left" /> -->
                                    <!-- <el-table-column align="center" label="预约时间"  prop="orderDate" /> -->
                                    <el-table-column align="center" label="购买门店" prop="shop.shopName" />
                                    <el-table-column align="center" label="订单编号"  prop="orderSn" />
                                    <el-table-column align="center" label="下单时间"  prop="createTime" />
                                    <el-table-column align="center" label="订单渠道"  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="订单状态"  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" size="mini" @click="shoBookOrderDetail(scope.row)">详情</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
          <!-- <el-table :data="jzBookOrders" fit highlight-current-row>
            <el-table-column align="center" label="客户名称" prop="userName" />
            <el-table-column align="center" label="地址" prop="address" />
            <el-table-column align="center" label="服务类型" prop="serviceType" />
            <el-table-column align="center" label="下单店名" prop="shopName" />
            <el-table-column align="center" label="取消原因" prop="cancelReason" />

            <el-table-column align="center" label="备注" prop="remark" />
            <el-table-column align="center" label="创建时间" prop="createTime" />
          </el-table> -->
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 切换用户 -->
    <el-dialog
      title="切换客户"
      :visible.sync="switchCustomerVisible"
      width="500px"
      :modal="false"
      :close-on-click-modal="false"
      center
    >
      <el-form ref="clueMarkForm" :inline="true" v-model="switchForm" label-width="80px">
        <el-form-item label="手机号码">
          <el-input style="width:300px" :rows="3" placeholder="请输入手机号码" v-model="switchForm.mobile"></el-input>
        </el-form-item>
      </el-form>

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

    <!-- 添加备注 -->
    <el-dialog
      title="添加备注"
      :visible.sync="tjbzVisible"
      width="600px"
      :close-on-click-modal="false"
      center
      :modal="false"
    >
      <el-form label-width="120px">
        <el-form-item label="备注">
          <el-input v-model="memoMark"   type="textarea" 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
      :modal="false"
    >
      <el-form label-width="120px">
        <el-form-item label="完成内容">
          <el-input v-model="completedMark"   type="textarea" clearable />
        </el-form-item>
        <el-form-item label="本次处理结果" prop="consultResult" class="result-input">
            <el-select v-model="handleResultValue" size="mini">
              <el-option
                v-for="type in handleResultList"
                :key="type.id"
                :label="type.name"
                :value="type.id"
              />
            </el-select>
          </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
      :modal="false"
    >
      <el-form label-width="120px">
        <el-form-item label="驳回原因">
          <el-input v-model="rejectmark"   type="textarea" 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   :modal="false"> 
               <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" type="textarea"  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"
      :modal="false"
      center
    >
      <!-- <h4>确定重新打开工单?</h4> -->
      <el-form label-width="120px">
        <el-form-item label="打开原因">
          <el-input v-model="reopenRemark"   type="textarea" 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>

    

    <el-dialog title="盒马服务工单详情" size='mini' :visible.sync="dialogHemaVisible" width="800px" :close-on-click-modal="false" center :modal="false"> 
            <el-table :data="jzServiceOrders" 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>



  </div>
</template>

<script>
import {
  detail,
  selectTicketByMobile,
  memo,
  completedTicket,
  reject,
  upgrade,
  reopen
} from "@/api/ticketHandle";
import { read } from "@/api/customer";
import { allChannel } from "@/api/channel";
import { selectByPaymentNo } from '@/api/bookOrder'
import { allSkillGroup } from '@/api/campaign'
import panelApi from "@/api/panel";
import { formatTime } from '@/utils/date';
const typeMap = {
  IB: "呼入",
  OB: "呼出"
};
const defaultTypeMap = [
  { label: 0, value: '客户' },
  { label: 1, value: '服务者' },
  { label: 2, value: '合伙人' },
  { label: 3, value: '其他' }

  // { label: 1, value: "客户" },
  // { label: 2, value: "阿姨" },
  // { label: 3, value: "合伙人" },
  // { label: 4, value: "其他" }
];


const defaultCityMap = [
  { label: 1, value: "上海" },
  { label: 2, value: "北京" },
  { label: 3, value: "深圳" },
  { label: 4, value: "南京" }
];

const sourceMap = [
  { label: "xinghai", value: "星海" },
  { label: "saasmall", value: "saas商城" },
  { label: "jzmall", value: "鲸致商城" },
  { label: "hema", value: "盒马" },
  { label: "IB", value: "进电" },
  { label: "OB", value: "外拨" },
  { label: "IM", value: "聊天工具" },
  { label: "EMAILL", value: "邮件" },
  { label: "APP", value: "APP" },
  { label: "H5", value: "H5" },
  { label: "Other", value: "其他" }
];

export default {
  name: "CustomerEdit",
  filters: {},
  data() {
    return {
       dialogHemaVisible: false, //订单下 盒马服务工单详情
            jzServiceOrders: [], //服务工单
      loginUserId: "",
      ticketId: "",
      tjbzVisible: false, //添加备注显示
      memoMark: "",
      wcgdVisible: false, //完成工单显示
      completedMark: "",
      bohuiVisible: false, //驳回内容填写
      rejectmark: "",
      isbohui: "驳回", //撤消
      cxfpVisible: false, //工单流转
      assignedSkillGroup: "",
      upgradeRemark: "",
      skillGroups: [], //下拉选项技能组
      reopenVisible: false, //重新打开工单
      reopenRemark: "",
      handleResultList:[],
      handleResultValue:'',
        consultResultList: [],
      complainResultList: [],
      activeTicket: 1,
      activeName: "first",
      channels: [],
      defaultTypeOptions: Object.assign({}, defaultTypeMap),
      defaultCityOptions: Object.assign({}, defaultCityMap),
      sourceOption: Object.assign({}, sourceMap),
      dialogFormVisible: false,
      disabledTel: true,
      typeTag: ["", "success", "warning"],
      statusDesc: {
        0: "创建",
        1: "处理中",
        2: "已完成",
        3: "作废"
      },
       tickerResult: {
                1: "接受解释",
                2: "重做一次",
                3: "赔偿",
                4: "投诉到媒体",
            },
      substatusDesc: {
        101: "待处理",
        102: "升级",
        103: "驳回",
        104: "重新打开",
        201:"完成",
         0: "创建",
      },
       statusMap: {
                101: "未付款",
                102: "用户取消",
                103: "系统取消",
                201: "已付款",
                202: "申请退款",
                203: "已退款",
                301: "已发货",
                401: "用户收货",
                402: "系统收货",
            },
            
resultMap: {
  0: '未拨打',
  1: '个人回拨',
  2: '无应答',
  3: '通话中',
  4: '关机',
  5: '停机',
  6: '成功',
  7: '空号',
  8: '无法接通',
  9: '拒访'
},

      // userForm: {

      // },
      // fns: [], // 亲友号码
      switchForm: "",
      switchCustomerVisible: false,
      genderDic: ["未知", "男", "女"],
      statusDic: ["可用", "禁用", "注销"],
      rules: {
        customerName: [
          { required: true, message: "客户名称不能为空", trigger: "blur" }
        ],
        customerType: [
          { required: true, message: "客户类型不能为空", trigger: "blur" }
        ],
        channelId: [
          { required: true, message: "渠道不能为空", trigger: "blur" }
        ],
        source: [{ required: true, message: "来源不能为空", trigger: "blur" }],
        tel: [
          { required: true, message: "客户联系方式不能为空", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    panelType() {
      return this.$store.state.panel.panelType;
    },
    callList() {
      return this.$store.state.panel.callList;
    },
    calllogList() {
      return this.$store.state.panel.calllogList;
    },
    ticketList() {
      return this.$store.state.panel.ticketList;
    },
    jzBookOrders() {
      return this.$store.state.panel.jzBookOrders;
    },

    userForm: {
      get() {
        return this.$store.state.panel.user;
      }
    },
    fns: {
      get() {
        return this.$store.state.panel.fns;
      }
    }

    //      tel:{
    //           get(){
    //  return this.$store.state.panel.customerPhone;
    //       },
    //     set(value){
    // this.$store.commit('updatePanel',value);
    //     }
    // },
  },
  created() {
    //console.log("create");
    this.loginUserId = this.$store.state.user.id;
    //console.log(this.loginUserId);
    allChannel().then(res => {
      this.channels = res.data.data;
    });
    this.getTicketResultList();
  },

  methods: {
     checkSikllGroup(skillGroupId) {
            let user_skill_id = this.$store.state.user.skillGroupIdsbyUserId;
            //console.log("用户技能组", user_skill_id);
            if (user_skill_id.length > 0) {
                let boo = false;
                user_skill_id.forEach(function (e) {
                    if (skillGroupId == e) {
                        boo = true;
                    }
                });
                if (boo) {
                    return true;
                }
            }
            return false;
        },
    sliceContent(content){
      let isOver=((content.length>3)?'...':'');
      // (scope.row.content).slice(0,1)}}{{scope.row.content.length>3?'...':''
      return  content.slice(0,3)+isOver;

    },
    formatTime(duration){
       return formatTime(duration);
    },
    filterResult(result) {
      return resultMap[result]
    },
    filterType(source) {
      return typeMap[source];
    },
      //  更新盒马订单
    updateJzOrder(){
        const loading = this.$loading({
                lock: true,
                text: '努力更新服务订单中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            });
      let params={
        userId:this.userForm.id
      }
        panelApi
        .updateJzOrder(params)
        .then(res => {
          loading.close();
          console.log(res.data.data);
          this.$message.success("更新成功");
          this.$store.commit("updateJzBookOrders",{jzBookOrders:res.data.data.jzOrders});
          // if (JSON.stringify(res.data.data) == "{}") {
          //   this.$message.warning("无客户信息");
          // } else {
          //   this.$message.success("切换成功");
          //   this.$store.commit("customerInfo", res.data.data);
          // }
          
        })
        .catch(error => {
          loading.close();
          console.log(error);
        });
    },
     loadSkillGroup(){
             allSkillGroup().then(res => {
                this.skillGroups = res.data.data 
            })
        },
            shoBookOrderDetail(row) {
            //展示订单下面的服务工单工单 
            this.dialogHemaVisible=true;
          selectByPaymentNo({paymentNo:row.orderSn})
                .then((res) => {
                 this.jzServiceOrders=res.data.data;
                })
        },
          orderStatusFilter(status) {
            return this.statusMap[status];
        },
          channelsFilter(value) {
            const rs = this.channels.filter((item) => {
                return item.id === value;
            });
            if (rs != null && rs.length > 0) {
                return rs[0].name;
            }
        },
    editCustomerDia(row) {
      this.userForm = row;
      this.dialogFormVisible = true;

      if (!row.tel) {
        this.disabledTel = true;
      }

      read(row.id).then(res => {
        this.userForm = res.data.data.data.user;
        this.fns = res.data.data.data.fns;
        // console.info(this.userForm)
      });
    },
    updateUser() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          console.log(this.userForm);
          let fns = [];
          this.fns.forEach(item => {
            if (item.mobile != "") {
              fns.push(item.mobile);
            }
          });
          let params = {
            user: {
              id: this.userForm.id,
              customerName: this.userForm.customerName,
              customerType: this.userForm.customerType,
              channelId: this.userForm.channelId,
              source: this.userForm.source,
              city: this.userForm.city,
              customerAddr: this.userForm.customerAddr
            },
            fns: fns
          };
          panelApi
            .updateCustomer(params)
            .then(res => {
              console.log(res.data);
              this.$message.success("保存成功");
              this.$store.dispatch("CUSTOMER_DETAIL", { id: this.userForm.id });
              //  this.$store.commit('customerInfo',res.data.data);
            })
            .catch(error => {
              console.log(error);
            });
        }
      });
    },
    switchCustomer() {
      //  this.switchCustomerVisible=true;
      let self = this;
      this.$prompt("请输入手机号", "切换客户", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[1]\d{10}$/,
        inputErrorMessage: "手机号格式不正确"
      })
        .then(({ value }) => {
          //  切换用户action
          console.log(value);
          let params = { mobile: value };
          console.log(self);
          self.confSwitchBtn(params);
        })
        .catch(() => {});
    },
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(this.activeName);
      //  if(this.activeName=='second'){
      //    console.log(this.userForm);
      //    this.$store.dispatch('CALLLOG_RECORD',{mobile:this.userForm.tel,limit:100});
      // this.$store.dispatch('CALLLOG_RECORD',{mobile:'13262258272'});
      //  }
    },
    handleCall(mobile) {
      // alert("软电话条拨打电话");
      let builtId=(this.$store.state.panel.panelType=='IB'?0:this.$store.state.panel.builtId);
      let source=(this.$store.state.panel.panelType=='IB'?'customer':'campaign');
      let call={
          builtId:builtId,//任务id
          ticketId:0, //工单id：如果是工单发起的外呼; 默认0
          customerId:this.userForm.id,//客户id 必传
          mobile:mobile,//电话号码
          name:this.userForm.customerName, //客户名称
          type:'OB',//默认OB
          source:source////外呼来源：电访任务发起=campaign；工单=ticket
          }
     console.log(call);
      
      hollyglobal.dialoutEvent(call);
    },
    addTel() {
      let item = { mobile: "" };
      this.fns.push(item);
    },
    confSwitchBtn(params) {
      // let params={mobile:this.switchForm.mobile};
      //console.log(params);
      panelApi
        .switchCustomer(params)
        .then(res => {
          console.log(res.data.data);
          if (JSON.stringify(res.data.data) == "{}") {
            this.$message.warning("无客户信息");
          } else {
            this.$message.success("切换成功");
            this.$store.commit("customerInfo", res.data.data);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
     getTicketResultList() {
      panelApi
        .ticketResult()
        .then(res => {
          //console.log(res.data);
          this.consultResultList = res.data.data.filter(item => {
            return item.type == 0;
          });
          this.complainResultList = res.data.data.filter(item => {
            return item.type == 1;
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    showRemarkDialog(id) {
      this.ticketId = id;
      this.tjbzVisible = true;
    },
    showFinishDialog(id,ticketType) {
      this.ticketId = id;
      this.handleResultValue='';
      if(this.handleResultList.length==0){
        this.getTicketResultList();
      }
      this.handleResultList=(ticketType==0?this.consultResultList:this.complainResultList);
      this.wcgdVisible = true;
    },
    showbohuiDialog(id, handler) {
      this.ticketId = id;
      this.idbohui = handler == this.loginUserId ? "撤销" : "驳回";
      this.bohuiVisible = true;
    },
    showReopenDialog(id) {
      this.ticketId = id;
      this.reopenVisible = true;
    },
    showAssignDialog(id){
      this.ticketId = id;
      if(this.skillGroups.length==0){
        this.loadSkillGroup();
      }
      this.cxfpVisible = true;
    },
    saveMemo() {
      //添加备注
      if (this.memoMark == "") {
        this.$message.error("备注内容不能为空");
        return;
      }
      memo({ id: this.ticketId, memo: this.memoMark })
        .then(res => {
          if (res.data.errno == 0) {
            this.$message.success(`添加成功`);
            this.tjbzVisible = false;
            //刷新数据
            this.$store.dispatch("CUSTOMER_DETAIL", { id: this.userForm.id });
          } 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.ticketId, memo: this.rejectmark })
        .then(res => {
          if (res.data.errno == 0) {
            this.$message.success(`操作成功`);
            this.bohuiVisible = false;
            //刷新数据
            this.$store.dispatch("CUSTOMER_DETAIL", { id: this.userForm.id });
          } else {
            this.$message.error(res.data.errmsg);
          }
        })
        .catch(e => {
          // console.log('异常了',e);
          this.$message.error(e.data.errmsg);
        });
    },
    completedTicketM() {
      //完成
      if (this.completedMark == "") {
        this.$message.error("完成内容不能为空");
        return;
      }else if(this.handleResultValue==''){
 this.$message.error("本次处理结果不能为空");
        return;
      }
      //取巧传了个默认的技能组-1
      completedTicket({
        id: this.ticketId,
        memo: this.completedMark,
        result: this.handleResultValue,
        skillGroupId: -1
      })
        .then(res => {
          if (res.data.errno == 0) {
            this.$message.success(`操作成功`);
            this.wcgdVisible = false;
            //刷新数据
            this.$store.dispatch("CUSTOMER_DETAIL", { id: this.userForm.id });
          } else {
            this.$message.error(res.data.errmsg);
          }
        })
        .catch(e => {
          // console.log('异常了',e);
          this.$message.error(e.data.errmsg);
        });
    },

    reopenTicket() {
      //添加备注
      if (this.reopenRemark == "") {
        this.$message.error("备注内容不能为空");
        return;
      }
      reopen({ id: this.ticketId, memo: this.reopenRemark })
        .then(res => {
          if (res.data.errno == 0) {
            this.$message.success(`操作成功`);
            this.reopenVisible = false;
            //刷新数据
            this.$store.dispatch("CUSTOMER_DETAIL", { id: this.userForm.id });
          } else {
            this.$message.error(res.data.errmsg);
          }
        })
        .catch(e => {
          this.$message.error(e.data.errmsg);
        });
    },
     updateAssigned(){
            //工单流转 
             if(this.assignedSkillGroup==""){
                    this.$message.error("请选择流转到哪个技能组");
                    return;
                }
            upgrade({
               id:this.ticketId,
               memo: this.upgradeRemark,
               skillGroupId:this.assignedSkillGroup
            }).then(res => {
                if(res.data.errno==0){
                        this.$message.success(`操作成功`);
                        this.cxfpVisible=false;
                        //刷新数据
                 this.$store.dispatch("CUSTOMER_DETAIL", { id: this.userForm.id });
                    }else{
                        this.$message.error(res.data.errmsg);
                    }
            }).catch(e => {
                 this.$message.error(e.data.errmsg);
            })
        },
  
 
  }
};
</script>

<style scoped>
.result-input .el-select--mini{
  width:300px;
}
.el-table th.gutter {
  display: table-cell !important;
}
.dialog-footer {
  padding: 20px;
  padding-top: 10px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-input-group__append {
  padding: 0 10px;
  cursor: pointer;
}
.tab-wrapper {
  clear: both;
}
.switch-btn {
  vertical-align: top;
  margin-left: 20px;
}
.client-address,
.client-name,
.client-tel {
  font-size: 14px;
  color: #646464;
}
.row-mp {
  padding: 0px 15px;
  margin: 3px 0px;
}
.hand_title {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  border-left: 5px solid #0eaefc;
  padding-left: 8px;
  margin: 15px 0px;
}
.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;
} 
.audio-wrapper{
    margin:10px 0 0;
    display:inline-block;
    height: 30px;
  }
  .el-table th{
   line-height: 0px !important;
  }
</style>
