<template>
  <div class="app-container">
    <div>
      <span><b>电信卡下单快捷链接</b></span>
      <div style="margin: 20px 0px 30px 0px">
        <div class="lj"><a href="https://fx.sh.189.cn/nxtmall/view/13/207298/105786/fillOrder.html" target="_blank">100M单宽-360元</a></div>
        <div class="lj"><a href="https://fx.sh.189.cn/nxtmall/view/13/207298/108850/fillOrder.html" target="_blank">200M单宽-599元</a></div>
        <div class="lj"><a href="https://fx.sh.189.cn/nxtmall/view/13/207298/108851/fillOrder.html" target="_blank">300M单宽-799元</a></div>
        <div class="lj"><a href="https://fx.sh.189.cn/nxtmall/view/13/207298/108848/fillOrder.html" target="_blank">500M单宽-1200元</a></div>
        <div class="lj"><a href="https://fx.sh.189.cn/nxtmall/view/13/207298/108981/fillOrder.html" target="_blank">1000M融合-2488元</a></div>
      </div>
    </div>
    <!-- 查询和其他操作 -->
    <div class="filter-container">

      <!--<el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 160px;" placeholder="请输入用户ID" />-->
      <el-select v-model="listQuery.operator" style="width: 200px" class="filter-item" placeholder="请选择运营商" clearable>
        <el-option  :key="1" label="电信" :value="1" />
        <el-option  :key="2" label="移动" :value="2" />
        <el-option  :key="3" label="联通" :value="3" />
      </el-select>
      <el-select v-model="listQuery.operatorChannel" style="width: 200px" class="filter-item" placeholder="请选择渠道运营商" clearable>
        <el-option  :key="1" label="上海电信" :value="1" />
        <el-option  :key="2" label="浙江移动" :value="2" />
        <el-option  :key="3" label="北京移动" :value="3" />
      </el-select>
      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 160px;" placeholder="客户姓名" />
      <el-input v-model="listQuery.contactMobile" clearable class="filter-item" style="width: 160px;" placeholder="客户手机号" />
      <el-input v-model="listQuery.idCard" clearable class="filter-item" style="width: 160px;" placeholder="客户身份证号" />
      <el-input v-model="listQuery.installedAddress" clearable class="filter-item" style="width: 160px;" placeholder="客户地址" />
      <el-input v-model="listQuery.orderNo" clearable class="filter-item" style="width: 160px;" placeholder="抖音订单号" />
      <el-input v-model="listQuery.ticketCode" clearable class="filter-item" style="width: 160px;" placeholder="抖音券码" />
<!--      <el-select v-model="listQuery.commodityId" style="width: 200px" class="filter-item" placeholder="请选择商品名称" clearable>
        <el-option v-for="(item, index) in dyCommodityList"  :key="item.dyCommodityId" :label="item.dyCommodityName" :value="item.dyCommodityId" />
      </el-select>-->
      <el-date-picker v-model="listQuery.timeArray" type="daterange" class="filter-item" range-separator="至"
        start-placeholder="下单开始日期" end-placeholder="下单结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" />
      <el-select v-model="listQuery.dyOrderStatus" style="width: 200px" class="filter-item" placeholder="请选择抖音订单状态" clearable>
        <el-option  :key="0" label="已下单" :value="0" />
        <el-option  :key="1" label="已核销" :value="1" />
        <el-option  :key="2" label="已退款" :value="2" />
      </el-select>
      <el-date-picker v-model="listQuery.hxtimeArray" type="daterange" class="filter-item" range-separator="至"
                      start-placeholder="核销时间" end-placeholder="核销时间" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" />
      <el-input v-model="listQuery.outOrderNo" clearable class="filter-item" style="width: 160px;" placeholder="领客订单号" />
      <el-input v-model="listQuery.telecomOrderNo" clearable class="filter-item" style="width: 160px;" placeholder="工单号（HZ开头）" />
      <el-input v-model="listQuery.deviceNumber" clearable class="filter-item" style="width: 160px;" placeholder="充值账号" />
      <el-select v-model="listQuery.orderChannel" style="width: 200px" class="filter-item" placeholder="请选择订单来源" clearable>
        <el-option  :key="1" label="抖音" :value="1" />
        <el-option  :key="7" label="快手" :value="7" />
        <el-option  :key="-1" label="系统录入" :value="-1" />
      </el-select>
      <el-date-picker v-model="listQuery.smtimeArray" type="daterange" class="filter-item" range-separator="至"
                      start-placeholder="实际上门安装时间" end-placeholder="实际上门安装时间" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" />
      <el-select v-model="listQuery.isCreateOrder" style="width: 200px" class="filter-item" placeholder="请选择是否代客下单" clearable>
        <el-option  :key="0" label="否" :value="0" />
        <el-option  :key="1" label="是" :value="1" />
      </el-select>
      <el-input v-model="listQuery.createOrderUser" clearable class="filter-item" style="width: 160px;" placeholder="下单客服" />
      <el-select v-model="listQuery.isCoAddress" style="width: 200px" class="filter-item" placeholder="请选择是否同址" clearable>
        <el-option  :key="0" label="否" :value="0" />
        <el-option  :key="1" label="是" :value="1" />
      </el-select>

      <el-select v-model="listQuery.telecomOrderStatus" style="width: 200px" class="filter-item" placeholder="订单安装状态" clearable>
        <el-option  :key="0" label="待签约" :value="0" />
        <el-option  :key="1" label="完成安装" :value="1" />
        <el-option  :key="2" label="已撤单" :value="2" />
        <el-option  :key="3" label="开通中" :value="3" />
      </el-select>

<!--      状态，-1已取消，0待确认，1确认，8已完成-->
      <el-select v-model="listQuery.status" style="width: 200px" class="filter-item" placeholder="请选择领客订单状态" clearable>
        <el-option  :key="0" label="待确认" :value="0" />
        <el-option  :key="1" label="确认" :value="1" />
        <el-option  :key="8" label="已完成" :value="8" />
        <el-option  :key="-1" label="已取消" :value="-1" />
      </el-select>


        <el-select v-model="listQuery.commodityName" style="width: 500px" class="filter-item" placeholder="请选择商品名称" clearable>
          <el-option v-for="(item, index) in goodsName"  :key="item" :label="item" :value="item" />
        </el-select>


      <el-button v-permission="['POST /admin/telecomOrder/getList']" class="filter-item" type="primary" icon="el-icon-search"
        @click="handleFilter">查找</el-button>

      <el-button v-permission="['POST /admin/telecomOrder/createOrder']" class="filter-item" type="primary" icon="el-icon-search"
                 @click="addOrder()">录入订单</el-button>

      <el-button v-permission="['POST /admin/telecomOrder/export']" class="filter-item" type="primary" icon="el-icon-search"
                 @click="exportData()">导出</el-button>
      <span class="filter-item" style="color: #0eaefc;margin-left: 30px" @click="clearQuery()">清空条件</span>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" :height="tableMaxHeight" border fit highlight-current-row>
      <el-table-column align="center" label="Id" width="135" prop="id" fixed="left" />

      <el-table-column align="center" label="渠道信息" width="160" prop="orderSn">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">运营商:</span>
            {{ operatorText(scope.row.operator) }}
            <br />
            <span style="font-weight: 600;">渠道运营商:</span>
            {{ operatorChannelText(scope.row.operatorChannel) }}
            <br />
            <span style="font-weight: 600;">订单来源:</span>
            {{ orderChannelText(scope.row.orderChannel) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单信息" width="300" prop="orderSn">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">领克订单号:</span>
            {{ scope.row.outOrderNo }}
            <br />
            <span style="font-weight: 600;">抖音订单号:</span>
            {{ scope.row.orderNo }}
            <br />
            <span style="font-weight: 600;">核销券码:</span>
            {{ scope.row.ticketCode }}
            <br />
            <span style="font-weight: 600;">下单时间:</span>
            {{ formatTime2(scope.row.createTime) }}
            <br />
            <span style="font-weight: 600;">产品名称:</span>
            {{ scope.row.commodityName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="客户信息" width="350" prop="orderSn">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">客户姓名:</span>
            {{ scope.row.name }}
            <br />
            <span style="font-weight: 600;">客户手机号:</span>
            {{ scope.row.contactMobile }}
            <br />
            <span style="font-weight: 600;">客户身份证号:</span>
            {{ scope.row.idCard }}
            <br />
            <span style="font-weight: 600;">实际下单地址:</span>
            {{ scope.row.installedAddress }}
            <br />
            <span style="font-weight: 600;">预计上门安装时间:</span>
            {{ scope.row.predictVisitDate }}
            <br />
            <span style="font-weight: 600;">客户备注信息:</span>
            {{ scope.row.userRemark }}
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="订单信息" width="350" prop="orderSn">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">抖音订单状态:</span>
            {{ dyOrderStatusText(scope.row.dyOrderStatus) }}
            <br />
            <span style="font-weight: 600;">核销时间:</span>
            {{ formatTime2(scope.row.verificationTime) }}
            <br />
            <span style="font-weight: 600;">订单支付时间:</span>
            {{ formatTime2(scope.row.dyPaymentTime) }}
            <br />
            <span style="font-weight: 600;">支付金额:</span>
            {{ scope.row.orderPrice }}
            <br />
            <span style="font-weight: 600;">是否帮用户在电信后台下单成功:</span>
            {{ scope.row.isCreateOrder==1?'是':'否' }}
            <br />
            <span style="font-weight: 600;">下单客服:</span>
            {{ scope.row.createOrderUser }}
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="订单信息" width="350" prop="orderSn">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">领客订单状态:</span>
            {{ statusText(scope.row.status) }}
            <br />
            <span style="font-weight: 600;">是否登记同址:</span>
            {{ scope.row.isCoAddress==1?'是':'否' }}
            <br />
            <span style="font-weight: 600;">电信下单工单号（HZ开头）:</span>
            {{ scope.row.telecomOrderNo }}
            <br />
            <span style="font-weight: 600;">电信订单状态:</span>
            {{ telecomOrderStatusText(scope.row.telecomOrderStatus) }}
            <br />
            <span style="font-weight: 600;">实际完成安装时间:</span>
            {{ formatTime2(scope.row.telecomOrderCompletionTime) }}
            <br />
            <span style="font-weight: 600;">客服备注信息:</span>
            {{ scope.row.remark }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备相关信息" width="350" prop="orderSn">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">设备号:</span>
            {{ scope.row.deviceNumber }}
            <br />
            <span style="font-weight: 600;">融合套餐主手机号:</span>
            {{ scope.row.masterPhone }}
            <br />
            <span style="font-weight: 600;">充值金额:</span>
            {{ scope.row.topUpAmount }}
            <br />
            <span style="font-weight: 600;">充值时间:</span>
            {{ formatTime2(scope.row.topUpDate) }}
            <br />
            <span style="font-weight: 600;">支付订单号:</span>
            {{ scope.row.paymentNo }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="退费信息" width="350" prop="orderSn">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">充值后退费金额:</span>
            {{ scope.row.refundAmount }}
            <br />
            <span style="font-weight: 600;">提交线下退费月份:</span>
            {{ scope.row.refundDate }}
            <br />
            <span style="font-weight: 600;">退费订单号:</span>
            {{ scope.row.refundNo }}
          </div>
        </template>
      </el-table-column>
<!--&lt;!&ndash;      运营商(1电信 2移动 3联通)&ndash;&gt;
      <el-table-column align="center" label="运营商" prop="operator" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.operator==1" type="success">电信</el-tag>
          <el-tag v-if="scope.row.operator==2" type="success">移动</el-tag>
          <el-tag v-if="scope.row.operator==3" type="success">联通</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="渠道运营商" prop="operatorChannel" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.operatorChannel==1" type="success">上海电信</el-tag>
          <el-tag v-if="scope.row.operatorChannel==2" type="success">浙江移动</el-tag>
          <el-tag v-if="scope.row.operatorChannel==3" type="success">北京移动</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单来源" prop="orderChannel">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderChannel==1" type="success">抖音</el-tag>
          <el-tag v-if="scope.row.orderChannel==7" type="success">快手</el-tag>
          <el-tag v-if="scope.row.orderChannel==-1" type="success">系统录入</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="领克订单号" prop="outOrderNo" width="200" />
      <el-table-column align="center" label="抖音订单号" prop="orderNo" width="200" />
      <el-table-column align="center" label="核销券码" prop="ticketCode" width="200"/>
      <el-table-column align="center" label="下单时间" prop="createTime" width="160"  :formatter="dateFormat"/>
      <el-table-column align="center" label="产品名称" prop="commodityName"  width="200"/>
      <el-table-column align="center" label="客户姓名" prop="name"  width="160"/>
      <el-table-column align="center" label="客户手机号"  prop="contactMobile" width="160" />
      <el-table-column align="center" label="客户身份证号" prop="idCard" />
      <el-table-column align="center" label="实际下单地址"  width="300px" prop="installedAddress" />
      <el-table-column align="center" label="预计上门安装时间"  prop="predictVisitDate" />
      <el-table-column align="center" label="抖音订单状态"   prop="dyOrderStatus" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.dyOrderStatus==0" >已下单</el-tag>
          <el-tag v-if="scope.row.dyOrderStatus==1" type="success">已核销</el-tag>
          <el-tag v-if="scope.row.dyOrderStatus==2" type="danger">已退款</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="核销时间"  prop="verificationTime" :formatter="dateFormat" />
      <el-table-column align="center" label="订单支付时间"  prop="dyPaymentTime" :formatter="dateFormat"/>
      <el-table-column align="center" label="是否帮用户在电信后台下单成功"   prop="isCreateOrder" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isCreateOrder==0" type="danger" >否</el-tag>
          <el-tag v-if="scope.row.isCreateOrder==1" type="success">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="下单客服"   prop="createOrderUser" />
      <el-table-column align="center" label="是否登记同址"   prop="isCoAddress" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isCoAddress==0" type="danger" >否</el-tag>
          <el-tag v-if="scope.row.isCoAddress==1" type="success">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电信下单工单号（HZ开头）-鲸致客服填写"   prop="telecomOrderNo" />
      <el-table-column align="center" label="设备号"   prop="deviceNumber" />
      <el-table-column align="center" label="备注信息"   prop="remark" />
      <el-table-column align="center" label="融合套餐主手机号"   prop="masterPhone" />
      <el-table-column align="center" label="充值金额"   prop="topUpAmount" />
      <el-table-column align="center" label="充值时间"   prop="topUpDate"  :formatter="dateFormat"/>
      <el-table-column align="center" label="支付订单号"   prop="paymentNo" />
      <el-table-column align="center" label="充值后退费金额"   prop="refundAmount" />
      <el-table-column align="center" label="提交线下退费月份"   prop="refundDate" />
      <el-table-column align="center" label="退费订单号"   prop="refundNo" />-->
      <el-table-column align="center" label="操作" fixed="right" width="200">
        <template slot-scope="scope">
<!--          <el-button v-if="scope.row.state == 0" style="margin-bottom:10px " type="primary" size="mini"
                     @click="sendH5(scope.row)">发送H5邀请</el-button>-->
          <el-button   style="margin-bottom:10px" type="text" size="mini"
                      @click="handleDetail(scope.row)">详情</el-button>
          <el-button  v-permission="['POST /admin/telecomOrder/updateDxOrderStatus']" style="margin-bottom:10px" type="text" size="mini"
                     @click="updateDxOrderStatusExchange(scope.row)">修改代客下单状态</el-button>
          <el-button v-permission="['POST /admin/telecomOrder/addDeviceNumber']" style="margin-bottom:10px" type="text" size="mini"
                     @click="addDeviceNumber(scope.row)">添加设备充值记录</el-button>
          <el-button v-permission="['GET /admin/telecomOrder/updateIsCoAddress']" style="margin-bottom:10px" type="text" size="mini"
                     @click="updateIsCoAddress(scope.row)">修改同址</el-button>
          <el-button v-permission="['GET /admin/telecomOrder/updateAddress']" style="margin-bottom:10px" type="text" size="mini"
                     @click="updateAddress(scope.row)">修改预约</el-button>

          <el-button v-permission="['GET /admin/telecomOrder/updateTelecomStatus']" style="margin-bottom:10px" type="text" size="mini"
                     @click="updateTelecomStatus(scope.row)">修改订单状态</el-button>
          <el-button v-permission="['GET /admin/telecomOrder/getLog']" style="margin-bottom:10px" type="text" size="mini"
                     @click="getLog(scope.row)">操作记录</el-button>
<!--          <el-button v-if="scope.row.state == 1"  type="primary" size="mini"
                     @click="getState(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" />
    <!-- 订单详情对话框 -->
    <broadbandServiceRef ref="broadbandServiceRef" />
    <!-- 订单详情对话框 -->
    <el-dialog :visible.sync="orderDialogVisible" title="订单状态信息" width="800">
      <el-card shadow="never" style="margin-top: 15px">

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">订单状态信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="8" class="table-cell-title">订单编号</el-col>
            <el-col :span="5" class="table-cell-title">订单状态</el-col>
            <el-col :span="5" class="table-cell-title">订单物流公司</el-col>
            <el-col :span="6" class="table-cell-title">订单物流单号</el-col>
          </el-row>
          <el-row>
            <el-col :span="8" class="table-cell">
              {{
                dxOrderStateInfo.orderNo
              }}
            </el-col>
            <el-col :span="5" class="table-cell">
              {{
                dxOrderStateInfo.msg
              }}
            </el-col>
            <el-col :span="5" class="table-cell">
              {{
                dxOrderStateInfo.freightVendor
              }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{
                dxOrderStateInfo.freightCode
              }}
            </el-col>
          </el-row>
        </div>

        <div style="float: right;padding-top:10px;padding-bottom: 10px ">
          <el-button type="primary" @click="orderDialogVisible = false">确 认</el-button>
        </div>
      </el-card>
    </el-dialog>

    <!-- 添加或修改对话框  -->
    <el-dialog  :visible.sync="dialogFormVisible" :title="updateFlag?'修改订单':'创建订单'">
      <el-form ref="dataForm"  :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 700px; margin-left:30px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="name" style="width: 200px">
              <el-input v-model="dataForm.name" type="text" style="width: 200px;" placeholder="客户姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户手机号" prop="contactMobile" style="width: 200px">
              <el-input v-model="dataForm.contactMobile" maxlength="11" type="text" style="width: 200px;" show-word-limit placeholder="客户手机号"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="客户身份证号" prop="idCard" style="width: 550px">
              <el-input v-model="dataForm.idCard" type="text" maxlength="18" style="width: 550px;" show-word-limit placeholder="客户身份证号"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="客户下单地址" prop="installedAddress" style="width: 550px">
              <el-input v-model="dataForm.installedAddress" type="text" style="width: 550px;" placeholder="客户下单地址"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="渠道运营商" prop="operatorChannel" style="width: 200px">
              <el-select v-model="dataForm.operatorChannel" style="width: 200px" class="filter-item" placeholder="请选择渠道运营商" clearable>
                <el-option  :key="1" label="上海电信" :value="1" />
                <el-option  :key="2" label="浙江移动" :value="2" />
                <el-option  :key="3" label="北京移动" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领客订单号" prop="outOrderNo" style="width: 200px">
              <el-input v-model="dataForm.outOrderNo" type="text" style="width: 200px;" placeholder="领客订单号"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="抖音订单号" prop="operatorChannel" style="width: 200px">
              <el-input v-model="dataForm.orderNo" type="text" style="width: 200px;" placeholder="抖音订单号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核销券码" prop="ticketCode" style="width: 200px">
              <el-input v-model="dataForm.ticketCode" type="text" style="width: 200px;" placeholder="核销券码"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="commodityName" style="width: 200px">
              <el-input v-model="dataForm.commodityName" type="text" style="width: 200px;" placeholder="产品名称"/>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">
            <el-form-item label="预计上门安装时间" prop="predictVisitDate" style="width: 200px">
              <el-input v-model="dataForm.predictVisitDate" type="text" style="width: 200px;" placeholder="预计上门安装时间"/>
            </el-form-item>
          </el-col>-->
        </el-row>

        <el-row>
        <el-col :span="24">
          <el-form-item label="预计上门安装时间" prop="visitDate" >
            <el-date-picker
              v-model="dataForm.visitDate"
              type="date"
              placeholder="预计上门安装时间">
            </el-date-picker>
            <el-time-select
              style="width: 150px"
              placeholder="起始时间"
              v-model="dataForm.startTime"
              :picker-options="{
              start: '07:30',
              step: '00:30',
              end: '20:30'
            }">
            </el-time-select>
            <el-time-select
              style="width: 150px"
              placeholder="结束时间"
              v-model="dataForm.endTime"
              :picker-options="{
              start: '07:30',
              step: '00:30',
              end: '20:30',
              minTime: dataForm.startTime }">
            </el-time-select>
          </el-form-item>
        </el-col>
        </el-row>


        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark" style="width: 550px">
              <el-input v-model="dataForm.remark"   type="textarea" :rows="2" style="width: 550px;" placeholder="备注"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;updateFlag=false">取消</el-button>
        <el-button  v-if="!updateFlag" type="primary" @click="createData">确定</el-button>
        <el-button v-if="updateFlag" type="primary" @click="updateData">保存</el-button>
      </div>
    </el-dialog>


    <!-- 修改订单状态  -->
    <el-dialog  :visible.sync="updateDxOrderStatusVisible" title="修改代客下单状态">
      <el-form ref="updateDxOrderStatusDataForm"  :rules="updateDxOrderStatusRules" :model="updateDxOrderStatusDataForm" status-icon label-position="left" label-width="100px" style="width: 700px; margin-left:30px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="核销券码" prop="ticketCode" style="width: 200px">
              <el-input v-model="updateDxOrderStatusDataForm.ticketCode" type="text" style="width: 200px;" placeholder="请输入核销券码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否下单" prop="isCreateOrder" style="width: 300px">
              <template>
                <el-radio v-model="updateDxOrderStatusDataForm.isCreateOrder" :label="1">已下单</el-radio>
                <el-radio v-model="updateDxOrderStatusDataForm.isCreateOrder" :label="0">未下单</el-radio>
              </template>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="抖音订单状态" prop="dyOrderStatus" style="width: 200px">
              <el-select v-model="updateDxOrderStatusDataForm.dyOrderStatus" style="width: 200px" class="filter-item" placeholder="抖音订单状态" clearable>
                <el-option  :key="0" label="已下单" :value="0" />
                <el-option  :key="1" label="已核销" :value="1" />
                <el-option  :key="2" label="已退款" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核销时间" prop="verificationTime" style="width: 200px">
              <el-date-picker
                v-model="updateDxOrderStatusDataForm.verificationTime"
                type="datetime"
                placeholder="核销时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="下单工单号" prop="name" style="width: 200px">
              <el-input v-model="updateDxOrderStatusDataForm.telecomOrderNo" type="text" style="width: 200px;" placeholder="下单工单号（电信HZ开头）"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下单时间" prop="createTime" style="width: 200px">
              <el-date-picker
                v-model="updateDxOrderStatusDataForm.createTime"
                type="datetime"
                placeholder="下单时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="下单客服" prop="createOrderUser" style="width: 200px">
              <el-input v-model="updateDxOrderStatusDataForm.createOrderUser" type="text" style="width: 200px;" placeholder="下单客服"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark" style="width: 200px">
              <el-input v-model="updateDxOrderStatusDataForm.remark"   type="textarea" :rows="2" style="width: 200px;" placeholder="备注"/>
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-row>
          <el-form-item label="收获地址" prop="area">
            <el-cascader style="width: 550px" :options="areaList" v-model="conversionInterestDataForm.area" ref="cascader1"
                         @change="handleUpdateAreaChange1" clearable placeholder="省市区"></el-cascader>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="installedAddress">
              <el-input v-model="conversionInterestDataForm.installedAddress" type="text" style="width: 200px;" placeholder="请输入详细地址"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收货电话" prop="contactMobile">
              <el-input v-model="conversionInterestDataForm.contactMobile" maxlength="11" show-word-limit  type="text" style="width: 200px;" placeholder="请输入收货电话"/>
            </el-form-item>
          </el-col>
        </el-row>-->

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

    <!-- 添加/修改设备充值记录  -->
    <el-dialog  :visible.sync="addDeviceNumberVisible" title="添加/修改设备充值记录">
      <el-form ref="addDeviceNumberDataForm"  :rules="addDeviceNumberDataRules" :model="addDeviceNumberDataForm" status-icon label-position="left" label-width="100px" style="width: 700px; margin-left:30px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="充值金额" prop="topUpAmount" style="width: 200px">
              <el-input v-model="addDeviceNumberDataForm.topUpAmount" type="number" style="width: 200px;" placeholder="充值金额"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="充值时间" prop="topUpDate" style="width: 200px">
              <el-date-picker
                v-model="addDeviceNumberDataForm.topUpDate"
                type="datetime"
                placeholder="充值时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>



          <el-col :span="12">
            <el-form-item label="支付订单号" prop="paymentNo" style="width: 200px">
              <el-input v-model="addDeviceNumberDataForm.paymentNo" type="text" style="width: 200px;" placeholder="支付订单号"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDeviceNumberVisible = false">取消</el-button>
        <el-button  type="primary" @click="saveDeviceNumber">确定</el-button>
      </div>
    </el-dialog>
    <!--    修改同址-->
    <el-dialog  :visible.sync="updateIsCoAddressVisible" title="修改同址">
      <el-form ref="updateIsCoAddressDataForm"  :rules="updateIsCoAddressDataRules" :model="updateIsCoAddressDataForm" status-icon label-position="left" label-width="100px" style="width: 700px; margin-left:30px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="修改同址" prop="isCoAddress" style="width: 200px">
              <template>
                <el-radio v-model="updateIsCoAddressDataForm.isCoAddress" :label="1">同址</el-radio>
                <el-radio v-model="updateIsCoAddressDataForm.isCoAddress" :label="0">不同址</el-radio>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateIsCoAddressVisible = false">取消</el-button>
        <el-button  type="primary" @click="saveUpdateIsCoAddress">确定</el-button>
      </div>
    </el-dialog>

    <!-- 修改预约-->
    <el-dialog  :visible.sync="updateAddressVisible" title="修改预约">
      <el-form ref="updateAddressDataForm"  :rules="updateAddressDataRules" :model="updateAddressDataForm" status-icon label-position="left" label-width="100px" style="width: 700px; margin-left:30px;">
        <el-row>
        <el-col :span="12">
          <el-form-item label="客户姓名" prop="name" style="width: 200px">
            <el-input v-model="updateAddressDataForm.name" type="text" style="width: 200px;" placeholder="客户姓名"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户手机号" prop="contactMobile" style="width: 200px">
            <el-input v-model="updateAddressDataForm.contactMobile" maxlength="11" type="text" style="width: 200px;" show-word-limit placeholder="客户手机号"/>
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="客户身份证号" prop="idCard" style="width: 550px">
              <el-input v-model="updateAddressDataForm.idCard" type="text" maxlength="18" style="width: 550px;" show-word-limit placeholder="客户身份证号"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="上门安装地址" prop="installedAddress">
              <el-input v-model="updateAddressDataForm.installedAddress" type="text"  placeholder="上门安装地址"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="上门安装时间" prop="predictVisitDate">
              <el-input v-model="updateAddressDataForm.predictVisitDate"   placeholder="上门安装时间"/>
            </el-form-item>
          </el-col>
        </el-row>

<!--        <el-row>
          <el-col :span="24">
            <el-form-item label="预计上门安装时间" prop="visitDate" >
              <el-date-picker
                v-model="updateAddressDataForm.visitDate"
                type="date"
                placeholder="预计上门安装时间">
              </el-date-picker>
              <el-time-select
                style="width: 150px"
                placeholder="起始时间"
                v-model="updateAddressDataForm.startTime"
                :picker-options="{
              start: '07:30',
              step: '00:30',
              end: '20:30'
            }">
              </el-time-select>
              <el-time-select
                style="width: 150px"
                placeholder="结束时间"
                v-model="updateAddressDataForm.endTime"
                :picker-options="{
              start: '07:30',
              step: '00:30',
              end: '20:30',
              minTime: updateAddressDataForm.startTime }">
              </el-time-select>
            </el-form-item>
          </el-col>
        </el-row>-->

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

    <!--    修改订单状态-->
    <el-dialog  :visible.sync="updateTelecomStatusVisible" title="修改订单状态">
      <el-form ref="updateTelecomStatusDataForm"  :rules="updateTelecomStatusDataRules" :model="updateTelecomStatusDataForm" status-icon label-position="left" label-width="100px" style="width: 700px; margin-left:30px;">
        <el-row>
          <el-col :span="24">
            <el-form-item label="订单状态" prop="telecomOrderStatus" >
              <template>
                <el-radio v-model="updateTelecomStatusDataForm.telecomOrderStatus" :disabled="telecomOrderStatusOld" :label="0">待签约</el-radio>
                <el-radio v-model="updateTelecomStatusDataForm.telecomOrderStatus" :disabled="telecomOrderStatusOld" :label="3">开通中</el-radio>
                <el-radio v-model="updateTelecomStatusDataForm.telecomOrderStatus" :disabled="telecomOrderStatusOld" :label="1">完成安装</el-radio>
                <el-radio v-model="updateTelecomStatusDataForm.telecomOrderStatus" :disabled="telecomOrderStatusOld" :label="2">已撤单</el-radio>
              </template>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
        <div style="color: red;display: inline-block;margin-left: 200px;margin-bottom: 10px">*选择完成安装后，此订单会核销且不可更改状态</div>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户设备号" prop="deviceNumber" style="width: 200px">
              <el-input v-model="updateTelecomStatusDataForm.deviceNumber" type="text"   style="width: 200px;" placeholder="客户设备号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="融合套餐主手机号" prop="masterPhone" style="width: 200px">
              <el-input v-model="updateTelecomStatusDataForm.masterPhone"  style="width: 200px;" maxlength="11"  show-word-limit placeholder="融合套餐主手机号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实际安装时间" prop="telecomOrderCompletionTime" style="width: 200px">
              <el-date-picker
                v-model="updateTelecomStatusDataForm.telecomOrderCompletionTime"
                type="datetime"
                placeholder="安装时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateTelecomStatusVisible = false">取消</el-button>
        <el-button  type="primary" @click="saveUpdateTelecomStatus">确定</el-button>
      </div>
    </el-dialog>
    <!-- 操作日志 -->
    <el-dialog :visible.sync="logDiaVisible" title="操作日志" center width="800px">
      <el-table :data="logList" style="width: 100%" border>
        <el-table-column prop="operatorTime" width="200px" label="操作时间"  :formatter="dateFormat" />
        <el-table-column prop="operatorName" label="操作人员" />
        <el-table-column prop="operatorContent" label="操作内容" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="logDiaVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
// import areaJson from "../../areaJson";
import { regionData } from "element-china-area-data";
import {
  getPageList,
  create,
  updateDxOrderStatus,
  addDeviceNumber,
  updateIsCoAddress,
  updateAddress,
  getLog,
  exportData,
  updateTelecomStatus
} from "@/api/broadbandService";
import { allChannel } from "@/api/channel";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { formatDate } from "@/utils/date";
import checkPermission from "@/utils/permission"; // 权限判断函数
import { getToken } from "@/utils/auth";
import {orderBookReassign} from "@/api/orderStorage";
import moment from "moment/moment";
import broadbandServiceRef from '@/views/order/components/broadbandServiceRef.vue'

let vm;

const statusMap = {
  reserve: "预约",
  create: "创建",
  reserve_failed: "预约失败",
  cancel: "取消",
  complete: "完成",
  confirm: "确认服务已完成 待核销",
  sing_in: "签单",
  accept: "接单",
};

export default {
  name: "Order",
  components: {Pagination,broadbandServiceRef },
  filters: {
    orderStatusFilter(status) {
      return statusMap[status];
    },
    channelsFilter(value) {
      const rs = vm.channels.filter(item => {
        return item.id === value;
      });
      if (rs != null && rs.length > 0) {
        return rs[0].name;
      }
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        phone: undefined,
        orderSn: undefined,
        timeArray: [],
        orderStatusArray: '',
        sort: "create_time",
        order: "desc",
        hxtimeArray:[],
        smtimeArray:[],
        commodityName:''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      channels: [],
      statusMap,
      orderDialogVisible: false,
      orderDetail: {
        order: {},
        user: {},
        orderGoods: [],
        refundList: []
      },

      importForm: {
        channelId: 1,
        file: undefined,
        filename: undefined
      },

      headers: { "Content-Type": "multipart/form-data" },

      areaList: regionData,
      dataForm:{
        startTime: '',
        endTime: '',
      },
      dialogFormVisible:false,
      dyCommodityList:[],
      telecomCommodityList:[],
      rules: {
        name: [
          { required: true, message: "请输入客户姓名！", trigger: "blur" },
        ],
        contactMobile: [
          { required: true, message: "请输入客户手机号！", trigger: "blur" },
        ],
        idCard: [
          { required: true, message: "请输入身份证号！", trigger: "blur" },
        ],
        installedAddress: [
          { required: true, message: "请输入下单地址！", trigger: "blur" },
        ],
        operatorChannel: [
          { required: true, message: "请选择渠道运营商", trigger: "change" },
        ],
        orderNo: [
          { required: true, message: "请输入抖音订单号", trigger: "blur" },
        ],
        commodityName: [
          { required: true, message: "请输入产品名称", trigger: "blur" },
        ],
        visitDate: [
          { required: true, message: "请输入预计上门安装时间", trigger: "blur" },
        ],
      },
      updateDxOrderStatusVisible:false,
      updateDxOrderStatusDataForm:{
        id:'',
        ticketCode:'',
        isCreateOrder:0,
        createTime:'',
        createOrderUser:'',
        remark:'',
        outOrderNo:'',
        telecomOrderNo:'',
        dyOrderStatus:'',
        verificationTime:''

      },
      updateDxOrderStatusRules:{
        isCreateOrder: [
          { required: true, message: "请输入姓名", trigger: "change" },
        ]
      },
      orderData:{},
      phoneList:[],
      selectPhoneVisible:false,
      dxOrderStateInfo:{},
      updateFlag:false,
      addDeviceNumberVisible:false,
      addDeviceNumberDataForm:{
        deviceNumber:'',
        masterPhone:'',
        topUpAmount:'',
        topUpDate:'',
        paymentNo:''
      },
      addDeviceNumberDataRules:{

      },
      updateIsCoAddressVisible:false,
      updateIsCoAddressDataForm:{
        id:'',
        isCoAddress:''
      },
      updateIsCoAddressDataRules:{

      },
      updateAddressVisible:false,
      updateAddressDataForm:{
        id:'',
        installedAddress:'',
        predictVisitDate:'',
        visitDate:'',
        startTime:'',
        endTime:'',
        name:'',
        contactMobile:'',
        idCard:''
      },
      updateAddressDataRules:{
        installedAddress: [
          { required: true, message: "请输入安装地址", trigger: "blur" },
        ],
        predictVisitDate: [
          { required: true, message: "请输入预计上门安装日期", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        contactMobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ]
      },
      logDiaVisible:false,
      logList:[],
      updateTelecomStatusVisible:false,
      updateTelecomStatusDataForm:{
        id:'',
        telecomOrderStatus:'',
        deviceNumber:'',
        telecomOrderCompletionTime:'',
        masterPhone:''
      },
      updateTelecomStatusDataRules:{
        telecomOrderStatus: [
          { required: true, message: "请选择订单状态", trigger: "blur" },
        ]

      },
      telecomOrderStatusOld:false,
      goodsName:[]


    };
  },
  computed: {
      tableMaxHeight() {
        console.info(window.innerHeight)
        console.info(this.tableHeight)
        this.tableHeight = (window.innerHeight - (window.innerWidth > 1800 ? 420 : 450)) + "px";
        console.info(this.tableHeight)
        return this.tableHeight;
    }
  },
  beforeCreate() {
    vm = this;
  },
  created() {
    this.getList();
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true;
      if (this.listQuery.timeArray && this.listQuery.timeArray.length === 2) {
        this.listQuery.createOrderStartTime = this.listQuery.timeArray[0];
        this.listQuery.createOrderEndTime = this.listQuery.timeArray[1];
      } else {
        this.listQuery.createOrderStartTime = null;
        this.listQuery.createOrderEndTime = null;
      }
      if (this.listQuery.hxtimeArray && this.listQuery.hxtimeArray.length === 2) {
        this.listQuery.verificationStartTime = this.listQuery.hxtimeArray[0];
        this.listQuery.verificationEndTime = this.listQuery.hxtimeArray[1];
      } else {
        this.listQuery.verificationStartTime = null;
        this.listQuery.verificationEndTime = null;
      }
      if (this.listQuery.smtimeArray && this.listQuery.smtimeArray.length === 2) {
        this.listQuery.visitStartTime = this.listQuery.smtimeArray[0];
        this.listQuery.visitEndTime = this.listQuery.smtimeArray[1];
      } else {
        this.listQuery.visitStartTime = null;
        this.listQuery.visitEndTime = null;
      }
      getPageList(this.listQuery)
        .then(response => {
          this.list = response.data.data.list;
          if(this.listQuery.commodityName==''){
            this.goodsName = this.unique(this.list.map(item => item.commodityName))
          }

          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    formatTime(time) {
      if (time == null || time === "") {
        return "";
      }
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleDetail(row) {
      this.$refs.broadbandServiceRef.getDetail(row);
    },
    addOrder(){

      this.dialogFormVisible=true;
      this.updateFlag=false;
      this.dataForm={};

    },
    createData(){
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if(this.dataForm.startTime=='' || this.dataForm.startTime==undefined  || this.dataForm.endTime=='' || this.dataForm.endTime==undefined ){
            this.$message.error("请选择预计上门时段");
            return;
          }
          this.dataForm.predictVisitDate=this.formatTime(this.dataForm.visitDate)+" "+this.dataForm.startTime+"~"+this.dataForm.endTime
          create(this.dataForm).then(res=>{
            if (res.data.errno == 0) {
              this.$message.success("录入成功");
              this.getList();
              this.dialogFormVisible=false;
            } else {
              this.$message.error(res.data.errmsg);
            }
          }).catch(res=>{
            console.log(res);
            this.$message.error(res.data.errmsg);
          })
        }
      });
    },
    selectCommodity(value){
      console.log(value)
      getTelecomCardCommodity({commodityId:value}).then(res=>{
        this.telecomCommodityList=res.data.data;
      }).catch(res=>{

      })
    },
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      // return moment(date).format("YYYY-MM-DD HH:mm");
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    updateDxOrderStatusExchange(row){
      this.updateDxOrderStatusVisible=true;
      this.orderData=row;
      this.updateDxOrderStatusDataForm={
        id:'',
        ticketCode:'',
        isCreateOrder:0,
        createTime:'',
        createOrderUser:'',
        remark:'',
        telecomOrderNo:'',
        outOrderNo:'',
        dyOrderStatus:'',
        verificationTime:''
      };
      this.updateDxOrderStatusDataForm.id=this.orderData.id
      this.updateDxOrderStatusDataForm.ticketCode=this.orderData.ticketCode
      this.updateDxOrderStatusDataForm.isCreateOrder=this.orderData.isCreateOrder
      this.updateDxOrderStatusDataForm.createTime=this.orderData.createTime
      this.updateDxOrderStatusDataForm.createOrderUser=this.orderData.createOrderUser
      this.updateDxOrderStatusDataForm.remark=this.orderData.remark
      this.updateDxOrderStatusDataForm.telecomOrderNo=this.orderData.telecomOrderNo
      this.updateDxOrderStatusDataForm.outOrderNo=this.orderData.outOrderNo
      this.updateDxOrderStatusDataForm.dyOrderStatus=this.orderData.dyOrderStatus
      this.updateDxOrderStatusDataForm.verificationTime=this.orderData.verificationTime

    },
    handleUpdateAreaChange1(value) {
      console.log(value);
      console.log(this.conversionInterestDataForm.area == "");
      let node = this.$refs["cascader1"].getCheckedNodes();
      console.log(node);
      if (node.length > 0) {
        console.log(node[0].path, node[0].pathLabels);
        this.conversionInterestDataForm.areaCode = node[0].path[2];
        this.conversionInterestDataForm.province = node[0].pathLabels[0];
        this.conversionInterestDataForm.city = node[0].pathLabels[1];
        this.conversionInterestDataForm.county = node[0].pathLabels[2];
        if (
          node[0].pathLabels[2] == "市辖区" &&
          node[0].pathLabels[0] != "北京市" &&
          node[0].pathLabels[0] != "上海市" &&
          node[0].pathLabels[0] != "重庆市" &&
          node[0].pathLabels[0] != "天津市"
        ) {
          this.$notify.error({
            title: "请选择具体区域",
          });
          this.conversionInterestDataForm.area = "";
          return false;
        }

        if (node[0].pathLabels[1] == "市辖区") {
          this.conversionInterestDataForm.city = node[0].pathLabels[0];
        }

      }
    },
    updateDxOrder(){
      this.$refs["updateDxOrderStatusDataForm"].validate((valid) => {
        if (valid) {
          if(this.updateDxOrderStatusDataForm.isCreateOrder==1){
            console.log(2)
            if(this.updateDxOrderStatusDataForm.telecomOrderNo==''){
              this.$message.error("请输入电信订单编号！");
              return;
            }
            if(this.updateDxOrderStatusDataForm.createOrderUser==''){
              this.$message.error("请输入下单客服！");
              return;
            }
            if(this.updateDxOrderStatusDataForm.createTime==''){
              this.$message.error("请选择下单时间！");
              return;
            }

          }
          updateDxOrderStatus(this.updateDxOrderStatusDataForm).then(res=>{
            if (res.data.errno == 0) {
              this.$message.success("操作成功");
              this.getList();
              this.updateDxOrderStatusVisible=false;
            } else {
              this.$message.error(res.data.errmsg);
            }
          }).catch(res=>{
            console.log(res);
            this.$message.error(res.data.errmsg);
          })
        }
      });
    },
    updateData(){
      update(this.dataForm).then(res=>{
        if (res.data.errno == 0) {
          this.$message.success("修改成功");
          this.getList();
          this.dialogFormVisible=false;
        } else {
          this.$message.error(res.data.errmsg);
        }
      }).catch(res=>{
        console.log(res);
        this.$message.error(res.data.errmsg);
      })
    },
    clearQuery(){
      this.listQuery={
        page:1,
        limit:20
      }
      this.getList()
    },
    addDeviceNumber(row){
      this.addDeviceNumberVisible=true;
      this.addDeviceNumberDataForm={
          deviceNumber:'',
          masterPhone:'',
          topUpAmount:'',
          topUpDate:'',
          paymentNo:''
      }
      this.addDeviceNumberDataForm.id=row.id
      this.addDeviceNumberDataForm.deviceNumber=row.deviceNumber
      this.addDeviceNumberDataForm.masterPhone=row.masterPhone
      this.addDeviceNumberDataForm.topUpAmount=row.topUpAmount
      this.addDeviceNumberDataForm.topUpDate=row.topUpDate
      this.addDeviceNumberDataForm.paymentNo=row.paymentNo
    },
    saveDeviceNumber(){
      addDeviceNumber(this.addDeviceNumberDataForm).then(res=>{
        if (res.data.errno == 0) {
          this.$message.success("操作成功");
          this.getList();
          this.addDeviceNumberVisible=false;
        } else {
          this.$message.error(res.data.errmsg);
        }
      }).catch(res=>{
        console.log(res);
        this.$message.error(res.data.errmsg);
      })


    },
    updateIsCoAddress(row){
      this.updateIsCoAddressVisible=true;
      this.updateIsCoAddressDataForm.id=row.id;
      this.updateIsCoAddressDataForm.isCoAddress=row.isCoAddress;
    },
    saveUpdateIsCoAddress(){
      updateIsCoAddress(this.updateIsCoAddressDataForm).then(res=>{
        if (res.data.errno == 0) {
          this.$message.success("操作成功");
          this.getList();
          this.updateIsCoAddressVisible=false;
        } else {
          this.$message.error(res.data.errmsg);
        }
      }).catch(res=>{
        console.log(res);
        this.$message.error(res.data.errmsg);
      })
    },
    updateAddress(row){
      this.updateAddressVisible=true;
      this.updateAddressDataForm.id=row.id
      this.updateAddressDataForm.installedAddress=row.installedAddress;
      this.updateAddressDataForm.predictVisitDate=row.predictVisitDate;
      this.updateAddressDataForm.name=row.name;
      this.updateAddressDataForm.contactMobile=row.contactMobile;
      this.updateAddressDataForm.idCard=row.idCard;
     /* this.updateAddressDataForm.visitDate=row.predictVisitDate.split(' ')[0];
      this.updateAddressDataForm.startTime=row.predictVisitDate.split(' ')[1].split('~')[0];
      this.updateAddressDataForm.endTime=row.predictVisitDate.split(' ')[1].split('~')[1];*/
      console.log(this.updateAddressDataForm)
    },
    saveUpdateAddress(){
      this.$refs["updateAddressDataForm"].validate((valid) => {
        if (valid) {
          updateAddress(this.updateAddressDataForm).then(res => {
            if (res.data.errno == 0) {
              this.$message.success("操作成功");
              this.getList();
              this.updateAddressVisible = false;
            } else {
              this.$message.error(res.data.errmsg);
            }
          }).catch(res => {
            console.log(res);
            this.$message.error(res.data.errmsg);
          })
        }
      })

    },
    getLog(row){
      getLog({id:row.id}).then(res => {

        if (res.data.errno == 0) {
          this.logList=res.data.data
          this.logDiaVisible = true;
        } else {
          this.$message.error(res.data.errmsg);
        }
      }).catch(res => {
        console.log(res);
        this.$message.error(res.data.errmsg);
      })

    },
    exportData(){
      this.listLoading = true;
      if (this.listQuery.timeArray && this.listQuery.timeArray.length === 2) {
        this.listQuery.createOrderStartTime = this.listQuery.timeArray[0];
        this.listQuery.createOrderEndTime = this.listQuery.timeArray[1];
      } else {
        this.listQuery.createOrderStartTime = null;
        this.listQuery.createOrderEndTime = null;
      }
      if (this.listQuery.hxtimeArray && this.listQuery.hxtimeArray.length === 2) {
        this.listQuery.verificationStartTime = this.listQuery.hxtimeArray[0];
        this.listQuery.verificationEndTime = this.listQuery.hxtimeArray[1];
      } else {
        this.listQuery.verificationStartTime = null;
        this.listQuery.verificationEndTime = null;
      }
      if (this.listQuery.smtimeArray && this.listQuery.smtimeArray.length === 2) {
        this.listQuery.visitStartTime = this.listQuery.smtimeArray[0];
        this.listQuery.visitEndTime = this.listQuery.smtimeArray[1];
      } else {
        this.listQuery.visitStartTime = null;
        this.listQuery.visitEndTime = null;
      }
      exportData(this.listQuery).then((response) => {
        this.listLoading = false;
        let blob = new Blob([response.data], {
          type: "application/vnd.ms-excel",
        });
        console.log(blob);
        let fileName = Date.parse(new Date()) + ".xlsx";
        if (window.navigator.msSaveOrOpenBlob) {
          console.log(2);
          navigator.msSaveBlob(blob, fileName);
        } else {
          console.log(3);
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          //释放内存
          window.URL.revokeObjectURL(link.href);
        }
      });
    },
    updateTelecomStatus(row){
      this.updateTelecomStatusVisible=true;
      this.updateTelecomStatusDataForm.id=row.id
      this.updateTelecomStatusDataForm.telecomOrderStatus=row.telecomOrderStatus
      this.updateTelecomStatusDataForm.deviceNumber=row.deviceNumber
      this.updateTelecomStatusDataForm.telecomOrderCompletionTime=row.telecomOrderCompletionTime
      this.telecomOrderStatusOld=row.telecomOrderStatus==1?true:false;
    },
    saveUpdateTelecomStatus(){
      this.$refs["updateTelecomStatusDataForm"].validate((valid) => {
        if (valid) {
          if(this.updateTelecomStatusDataForm.telecomOrderCompletionTime!=''){
            this.updateTelecomStatusDataForm.telecomOrderCompletionTime=this.formatTime2(this.updateTelecomStatusDataForm.telecomOrderCompletionTime)
          }
          updateTelecomStatus(this.updateTelecomStatusDataForm).then(res => {
            if (res.data.errno == 0) {
              this.$message.success("操作成功");
              this.getList();
              this.updateTelecomStatusVisible = false;
            } else {
              this.$message.error(res.data.errmsg);
            }
          }).catch(res => {
            console.log(res);
            this.$message.error(res.data.errmsg);
          })
        }
      })

    },
    //(1电信 2移动 3联通)
    operatorText(operator){
      if(operator==1){
        return '电信'
      }else if(operator==2){
        return '移动'
      }else if(operator==3){
        return '联通'
      }
      return ""
    },
    /*  -1已取消，0待确认，1确认，8已完成*/
    orderStatusFilter(status) {
      if(status==0){
        return '待确认'
      }else if(status==-1){
        return '已取消'
      }else if(status==1){
        return '确认'
      }else if(status==8){
        return '已完成'
      }
      return ""
    },
    //1 上海电信 2 浙江移动 3 北京移动
    operatorChannelText(operatorChannel){
      if(operatorChannel==1){
        return '上海电信'
      }else if(operatorChannel==2){
        return '浙江移动'
      }else if(operatorChannel==3){
        return '北京移动'
      }
      return ""
    },
    //1 抖音  7快手 -1系统录入
    orderChannelText(orderChannel){
      if(orderChannel==1){
        return '抖音'
      }else if(orderChannel==2){
        return '快手'
      }else if(orderChannel==-1){
        return '系统录入'
      }
      return ""
    },
    formatTime2(time) {
      if (time == null || time === "") {
        return "";
      }
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    //0已下单 1已核销 2已退款
    dyOrderStatusText(dyOrderStatus){
      if(dyOrderStatus==1){
        return '已核销'
      }else if(dyOrderStatus==2){
        return '已退款'
      }else if(dyOrderStatus==0){
        return '已下单'
      }
      return ""
    },
    statusText(status){
      if(status==1){
        return '确认'
      }else if(status==8){
        return '已完成'
      }else if(status==0){
        return '待确认'
      }else if(status==-1){
        return '已取消'
      }
      return ""
    },
    //0待签约 1完成安装 2已撤单 3开通中
    telecomOrderStatusText(telecomOrderStatus){
      if(telecomOrderStatus==1){
        return '完成安装'
      }else if(telecomOrderStatus==2){
        return '已撤单'
      }else if(telecomOrderStatus==0){
        return '待签约'
      }else if(telecomOrderStatus==3){
        return '开通中'
      }
      return ""
    },
    unique (arr) {
      return Array.from(new Set(arr))
    },
  },

};
</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: 60px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  font-size: 14px;
  color: #606266;
  text-align: center;
 /* white-space: pre-wrap;*/
  /* 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;
}

.el-dialog .el-cascader {
  width: 400px;
}

.fixed-width .el-button--mini {
  width: auto;
  min-width: 60px;
}
.phone{
  height: 40px;
  border: #0eaefc 1px solid;
  text-align: center;
  margin: 10px;
  line-height: 40px;
  border-radius: 10px;
  font-size: 16px;


}
.lj{
  border: 1px solid #0eaefc;
  display: inline-block;
  color: #0eaefc;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
  margin-right: 20px;
}
</style>
