<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container" ref="container">
      <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 150px;" placeholder="客户或预约手机" />
      <el-input v-model="listQuery.orderSn" clearable class="filter-item" style="width: 170px;" placeholder="请输入订单编号" />
      <el-input v-model="listQuery.zhonganOrderNo" clearable class="filter-item" style="width: 170px;"
        placeholder="请输入众安订单号" />
      <el-date-picker v-model="listQuery.timeArray" type="datetimerange" class="filter-item" style="width:320px"
        range-separator="至" start-placeholder="下单开始日期" end-placeholder="下单结束日期" :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss" />
      <el-select v-model="listQuery.orderStatusArray" multiple style="width: 150px" class="filter-item"
        placeholder="请选择订单状态">
        <el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value" />
      </el-select>
      <el-select  v-model="listQuery.bookStatus" style="width:180px" class="filter-item" placeholder="请选择预约状态" clearable>
        <el-option v-for="(key, value) in bookStatusMap" :key="key" :label="key" :value="value" />
      </el-select>

      <el-select v-model="listQuery.orderType" style="width: 120px" class="filter-item" placeholder="订单类型">
        <el-option v-for="(key, value) in orderTypeMap" :key="key" :label="key" :value="value" />
      </el-select>
      <el-select v-model="listQuery.cityId" clearable filterable style="width: 120px" class="filter-item"
        placeholder="请选择城市" multiple>
        <el-option v-for="item in city" :key="item.id" :label="item.cityName" :value="item.id" />
      </el-select>

      <el-select v-model="listQuery.orderChannel" style="width: 160px" class="filter-item" placeholder="订单渠道" clearable
        multiple>
        <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.couponChannel" style="width: 160px" class="filter-item" placeholder="优惠券渠道" clearable>
        <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <el-select v-model="listQuery.isHandle" style="width: 130px" class="filter-item" placeholder="请选择处理状态" clearable>
        <el-option label="未处理" value="0" />
        <el-option label="已处理" value="1" />
      </el-select>

      <el-input v-model="listQuery.couponCode" clearable class="filter-item" style="width: 150px;"
        placeholder="请输入优惠券号" />

      <el-input v-model="listQuery.goodsName" clearable class="filter-item" style="width: 160px;"
        placeholder="请输入商品名称" />

      <el-select v-model="listQuery.fraId" style="width: 160px" class="filter-item" placeholder="请选择加盟商" clearable
        filterable>
        <el-option v-for="item in fras" :key="item.id" :label="item.fraName" :value="item.id" />
      </el-select>


      <el-button v-permission="['GET /admin/order/list']" class="filter-item" type="primary" icon="el-icon-search"
        @click="handleFilter">查找
      </el-button>
      <el-button v-permission="['GET /admin/order/export']" :loading="importLoading" class="filter-item" type="primary"
        icon="el-icon-download" @click="handleDownload">本页导出
      </el-button>
      <el-button v-permission="['POST /admin/order/create']" class="filter-item" type="primary" @click="orderInput">订单录入
      </el-button>
    </div>

    <el-tabs v-model="listQuery.tab" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="0" />
      <el-tab-pane label="已付款-未处理" name="5" />
      <el-tab-pane label="已付款" name="1" />
      <el-tab-pane label="待付款" name="2" />
      <el-tab-pane label="已取消" name="3" />
      <el-tab-pane label="已退款" name="4" />
    </el-tabs>

    <!-- 查询结果 -->
    <div :style="{ height: tableHeight }">
      <el-table v-loading="listLoading" :data="list" ref="table" :height="tableMaxHeight"
        @expand-change="handleExpandChange" element-loading-text="正在查询中。。。" border fit highlight-current-row>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-tabs type="card" v-model="scope.row.activeName" @tab-click="handleTabClick($event, scope.row)">
              <el-tab-pane label="预约单" name="book">
                <!-- 客户预约信息 -->
                <el-table :data="scope.row.bookDetailList" style="width:1300px;max-height: 400px;overflow-y: auto"
                  border fit highlight-current-row :row-class-name="tableRowClassName">
                  <el-table-column align="center" label="工单id" prop="id" />
                  <el-table-column align="center" label="加盟商" width="150" prop="fraName">
                    <template slot-scope="scope">
                      {{ scope.row.fraName }}
                      <br />
                      {{ scope.row.fraWxAccount }}
                    </template>
                  </el-table-column>
                  <!-- <el-table-column align="center" label="加盟商电话" width="120" prop="fraTel" />  -->
                  <el-table-column align="center" label="上门时段" prop="bookTime" width="180" />
                  <!-- <el-table-column align="center" label="加盟商企微" width="120" prop="fraWxAccount" /> -->
                  <!-- <el-table-column align="center" label="服务者姓名" prop="servantName">
                    <template slot-scope="scope1">
                      {{ scope1.row.servantName }}{{
        scope1.row.servantName ? (scope1.row.servantType == 0 ? '(全职)' :
          '(兼职)') : ''
      }}
                    </template>
                  </el-table-column> -->
                  <el-table-column align="center" label="服务者信息"   width="200px">
                    <template slot-scope="scope">
                      <div style="text-align: left;">
                          <template v-for="(item, idx) in scope.row.workerInfoList">
                            <span :key="idx" style="font-weight: 600;">人员信息{{idx+1}}：</span>{{ item.workerName }}({{ item.servantType }}){{ item.workerTel }}<br />
                          </template>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="服务单状态" prop="status" width="115">
                    <template slot-scope="scope1">
                      {{ bookStatusMap[scope1.row.status] }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作时间" width="160" prop="updateTime" />
                  <el-table-column align="center" label="操作人" prop="updateUserName" />
                  <el-table-column align="center" label="操作" width="280">
                    <template slot-scope="scope1">
                      <el-button v-permission="['POST /admin/orderbookdetail/changeWorker']" type="primary" plain size="mini"
                        @click="handleReassign(scope1.row, scope.$index)"
                        v-if="(scope1.row.status == 1 || scope1.row.status == 0 || scope1.row.status == 7) && scope.row.orderChannel !== 104">
                        {{
        scope1.row.status ==
          0 ? "预约" : "修改预约"
      }}
                      </el-button>
                      <el-button v-permission="['GET /admin/orderbook/cancelBook']" type="danger" plain size="mini"
                        @click="handleCancel(scope1.row, scope.$index)"
                        v-if="(scope1.row.status == 1 || scope1.row.status == 7) && scope.row.orderChannel !== 104">
                        取消预约
                      </el-button>
                      <el-button v-permission="['GET /admin/orderbook/finish']" type="success" plain size="mini"
                        @click="handleFinish(scope1.row, scope.$index)"
                        v-if="scope1.row.status == 1 && scope1.row.servantMobile != ''">完成工单
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="短信日志" name="sms">
                <el-table :data="scope.row.smsLogs" style="width:760px" border fit highlight-current-row>
                  <el-table-column label="短信名称" align="center" prop="msName" />
                  <el-table-column label="发送状态" align="center" prop="sendStatus">
                    <template slot-scope="scopeSms">
                      {{ scopeSms.row.sendStatus == null ? "等待回执" : (scopeSms.row.sendStatus ? '成功' : '失败') }}
                    </template>
                  </el-table-column>
                  <el-table-column label="发送次数" align="center" prop="sendCount" />
                  <el-table-column label="发送时间" align="center" width="160" prop="updateTime">
                    <template slot-scope="scopeSms">
                      {{ scopeSms.row.updateTime ? scopeSms.row.updateTime : scopeSms.row.createTime }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="核销信息" name="verify">
                <p v-show="scope.row.orderChannel == 38">核销码: {{ scope.row.verificationCode }}</p>
                <el-table :data="scope.row.verifyInfo" style="width:760px" border fit highlight-current-row>
                  <el-table-column label="分类" align="center" prop="type" />
                  <el-table-column label="状态" align="center" prop="status" />
                  <el-table-column label="处理时间" align="center" prop="handleTime" />
                  <el-table-column label="金额(分)" align="center" prop="amount" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="带货达人" name="cps">
                <!-- 达人信息 -->
                <el-table :data="[scope.row.commission]" style="width:960px" border fit highlight-current-row>
                  <el-table-column label="达人帐号" align="center" prop="commissionUserDouyinid" />
                  <el-table-column label="达人昵称" align="center" prop="commissionUserNickname" />
                  <el-table-column label="分佣比例(万分制)" align="center" width="220" prop="commissionRate" />
                  <el-table-column label="预计分佣金额(分)" align="center" prop="commissionAmount" />
                  <el-table-column label="分佣类型" align="center" prop="sourceType">
                    <template slot-scope="sc">
                      {{ sc.row && sc.row.sourceType ? (sc.row.sourceType == 1 ? '短视频' : '直播间') : "" }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="客服备注" name="remind">
                <!-- 客服备注信息 -->
                <el-table :data="scope.row.orderMemo" style="width:960px" border fit highlight-current-row>
                  <el-table-column label="备注时间" align="center" prop="createTime" />
                  <el-table-column label="内容" align="center" prop="content" />
                  <el-table-column label="提醒时间" align="center" prop="remindTime" />
                  <el-table-column label="操作人" align="center" prop="createUserName" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单信息" width="250" prop="orderSn">
          <template slot-scope="scope">
            <div style="text-align: left;">
              <span style="font-weight: 600;">订单编号:</span> {{ scope.row.orderSn }}<i class="el-icon-copy-document"
                @click="fnCopy(scope.row.orderSn, scope.row.orderChannel)"></i><br />
              <span style="font-weight: 600;">下单渠道:</span>
              <el-tag type="success">{{
        scope.row.orderChannel |
        channelsFilter
      }}
              </el-tag>
              <br />
              <span style="font-weight: 600;">优惠券渠道:</span>
              <span>{{ scope.row.couponChannel |  channelsFilter  }}  </span>
              <br />
              <span style="font-weight: 600;">下单时间:</span> {{ scope.row.createTime }}<br />
              <span style="font-weight: 600;">支付时间:</span> {{ scope.row.payTime }}<br />
              <span style="font-weight: 600;">订单类型:</span>
              <span v-if="scope.row.orderType == 5" style="color:red">{{ scope.row.orderType | orderTypeFilter }}</span>
              <span v-else>{{ scope.row.orderType | orderTypeFilter }}</span><br />

            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单状态" width="250" prop="orderSn">
          <template slot-scope="scope">
            <div style="text-align: left;">
              <span style="font-weight: 600;">订单状态:</span>
              <el-tag :type="scope.row.aftersaleStatus == 1 ? 'warning' : 'info'">
                {{ scope.row.refundAmount && scope.row.actualPrice > scope.row.refundAmount ? "部分" : "" }}
                {{ scope.row.orderStatus | orderStatusFilter }} {{ scope.row.aftersaleStatus | aftersaleStatusFilter }}
              </el-tag>
              <br />
              <span style="font-weight: 600;">预约状态:</span>
              <el-tag type="info">
                {{ scope.row.bookStatus }}
              </el-tag>
              <br />
              <span style="font-weight: 600;">处理状态:</span>
              <el-tag :type="scope.row.isHandle ? 'warning' : ''">
                {{ scope.row.isHandle ? '已处理' : '未处理' }}
              </el-tag>
              <br />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品支付信息" width="250" prop="orderSn">
          <template slot-scope="scope">
            <div style="text-align: left;">
              <span style="font-weight: 600;">订购商品:</span> {{ scope.row.goods.goodsName }}<br />
              <span style="font-weight: 600;">订单金额:</span> {{ scope.row.orderPrice }}<br />
              <span style="font-weight: 600;">支付金额:</span> {{ scope.row.actualPrice }}<br />
              <span style="font-weight: 600;">加购金额:</span> {{ scope.row.increaseSumPrice }}<br />
              <span style="font-weight: 600;">已退金额:</span> {{ scope.row.refundAmount }}<br />
              <span style="font-weight: 600;">补差项目:</span> {{ scope.row.diffName }}<br />
              <span style="font-weight: 600;">补差金额:</span> {{ scope.row.diffPrice }}<br />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="预约信息" prop="goods.goodsName" width="350px">
          <template slot-scope="scope">
            <div style="text-align: left;">
              <span style="font-weight: 600;">客户手机:</span> {{ scope.row.customer ? scope.row.customer.tel : '' }}<i
                class="el-icon-copy-document"
                @click="fnCopy(scope.row.customer ? scope.row.customer.tel : '')"></i><br />
              <span style="font-weight: 600;">预约人:</span> {{ scope.row.consignee }}<i class="el-icon-copy-document"
                @click="fnCopy(scope.row.consignee)"></i><br />
              <span style="font-weight: 600;">预约手机:</span> {{ scope.row.mobile }}<i class="el-icon-copy-document"
                @click="fnCopy(scope.row.mobile)"></i><br />
              <span style="font-weight: 600;">服务地址:</span> {{ scope.row.address }}<i class="el-icon-copy-document"
                @click="fnCopy(scope.row.address)"></i><br />
              <span style="font-weight: 600;">客户备注:</span> {{ scope.row.message }}<br />
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="预约手机" prop="mobile">
          <template slot-scope="scope">
            {{ scope.row.mobile }}<i class="el-icon-copy-document" style="margin-left:5px;color:#46a6ff;cursor: pointer;"
              @click="fnCopy(scope.row.mobile)"></i>
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="center" label="下单时间" min-width="90" prop="createTime" /> -->
        <!-- <el-table-column
        align="center"
        label="预约时间"
        min-width="150"
        prop="orderDate"
          />-->
        <!-- <el-table-column align="center" label="城市" width="80" prop="address">
          <template slot-scope="scope">
            <el-tag>{{ cityFilter(scope.row.address, scope.row.cityId) }}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="订单加盟商" prop="fraName">
          <template slot-scope="scope">
            <div style="text-align: left;">
              <span style="font-weight: 600;">订单城市:</span>
              <el-tag>{{
        cityFilter(scope.row.address, scope.row.cityId)
      }}
              </el-tag>
              <br />
              <span style="font-weight: 600;">加盟商家:</span> {{ scope.row.fraName }}<br />
              <span style="font-weight: 600;">商家电话:</span> {{ scope.row.fraTel }}<br />
              <span v-if="scope.row.shop"><span style="font-weight: 600;">销售门店:</span> {{ scope.row.shop.shopName
                }}<br /></span>
              <span style="font-weight: 600;">销售类型:</span> {{ assignTypeMap[scope.row.assignType] }}<br />
            </div>
          </template>
          <!-- <template slot-scope="scope">
            {{ scope.row.fraName }}<br />{{ scope.row.fraTel }}
          </template> -->
        </el-table-column>
        <!-- <el-table-column align="center" label="服务地址" width="255" prop="address">
          <template slot-scope="scope">
            {{ scope.row.address }}<i class="el-icon-copy-document" style="margin-left:5px;color:#46a6ff;cursor: pointer;"
              @click="fnCopy(scope.row.address)"></i>
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="center" label="客户备注" prop="message" /> -->
        <!-- <el-table-column align="center" label="订单类型" prop="orderType">
        <template slot-scope="scope">{{ scope.row.orderType|orderTypeFilter }}</template>
      </el-table-column>
        <el-table-column align="center" label="订单渠道" min-width="90" prop="orderChannel">
          <template slot-scope="scope">
            <el-tag type="success">
              {{ scope.row.orderChannel | channelsFilter }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="订单状态" width="130" prop="orderStatus">
          <template slot-scope="scope">
            <el-tag :type="scope.row.aftersaleStatus == 1 ? 'warning' : 'info'">
              {{ scope.row.refundAmount && scope.row.actualPrice > scope.row.refundAmount ? "部分" : "" }}
              {{ scope.row.orderStatus | orderStatusFilter }} {{ scope.row.aftersaleStatus | aftersaleStatusFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="预约状态" width="120" prop="bookStatus">
          <template slot-scope="scope">
            <el-tag type="info">
              {{ scope.row.bookStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="处理状态" width="120" prop="isHandle">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isHandle ? 'warning' : ''">
              {{ scope.row.isHandle ? '已处理' : '未处理' }}
            </el-tag>
          </template>
        </el-table-column>-->
        <!-- <el-table-column align="center" width="150" label="订购商品" prop="goods.goodsName">
          <template slot-scope="scope">
            {{ scope.row.goods ? scope.row.goods.goodsName : '' }}<i class="el-icon-copy-document"
              style="margin-left:5px;color:#46a6ff;cursor: pointer;" @click="fnCopy(scope.row.goods.goodsName)"></i>
          </template>
        </el-table-column>
          <el-table-column align="center" width="150" label="加购信息" prop="goods.goodsName">
          <template slot-scope="scope">
            <div>名称：{{scope.row.goods.unitDescribe}}</div>
            <div>份数：{{scope.row.goods.unitIncreaseNumber}}</div>
            <div>单价：{{scope.row.goods.unitPrice}}</div>
            <div>总计：{{scope.row.increaseSumPrice}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="70" label="订单金额" prop="orderPrice" />

        <el-table-column align="center" width="70" label="支付金额" prop="actualPrice" />
        <el-table-column align="center" width="70" label="已退款金额" prop="refundAmount" /> -->

        <!-- <el-table-column align="center" label="支付时间" min-width="100" prop="payTime" /> -->

        <el-table-column align="center" label="操作" class-name="small-padding fixed-width" fixed="right" width="240">
          <template slot-scope="scope">
            <el-button v-permission="['GET /admin/order/detail']" type="text" size="mini" icon="el-icon-view"
              @click="handleDetail(scope.row)">详情
            </el-button>
            <el-button v-permission="['POST /admin/order/edit']" v-show="scope.row.orderStatus == 101" type="text"
              icon="el-icon-edit" size="mini" @click="handleEdit(scope.row)">修改金额
            </el-button>
            <!-- <el-button v-permission="['POST /admin/order/commission']" v-show="scope.row.orderStatus == 201" type="primary" size="mini" @click="handleCommission(scope.row)">计算分佣</el-button> -->
            <el-button v-permission="['GET /admin/orderbook/detail']" type="text" style="color:green"
              icon="el-icon-fork-spoon" v-show="scope.row.orderStatus >= 201" size="mini"
              @click="handleBook(scope.row)">服务详情
            </el-button>
            <el-button v-permission="['POST /admin/order/applyRefund']" style="color:red"
              v-show="scope.row.orderStatus == 201 && scope.row.aftersaleStatus == 0 && scope.row.orderType == 0 && (scope.row.orderChannel == 26 || scope.row.orderChannel == 107 || scope.row.orderChannel == 110||scope.row.orderChannel == 5||scope.row.orderChannel == 112)"
              type="text" icon="el-icon-edit-outline" size="mini" @click="handleApplyRefund(scope.row)">申请退款
            </el-button>
            <el-button v-permission="['GET /admin/order/cancelOrde']" style="color:red" icon="el-icon-stopwatch"
              v-show="scope.row.orderStatus != 102 && (scope.row.orderChannel == 21 || scope.row.orderChannel == 1)"
              type="text" size="mini" @click="baogangRefund(scope.row)">宝钢/口碑退款
            </el-button>
            <el-button v-permission="['POST /admin/order/createMemo']" v-show="scope.row.orderStatus > 101" type="text"
              icon="el-icon-plus" size="mini" @click="handleAddRemark(scope.row)">添加备注
            </el-button>
            <el-button v-permission="['POST /admin/sms/send']" type="text" icon="el-icon-message" size="mini"
              @click="handleSendSMS(scope.row)">发短信
            </el-button>
            <el-button v-permission="['GET /admin/order/ishandle']" type="text" icon="el-icon-circle-plus-outline"
              size="mini" @click="handleContactCus(scope.row)">
              {{ scope.row.isHandle ? '未处理' : '已处理' }}
            </el-button>
            <!-- v-show="scope.row.orderStatus == 201"-->
            <!-- <el-button v-permission="['POST /admin/order/updateOrderAddress']" type="text" icon="el-icon-edit" size="mini"
              @click="updateOrderAddress(scope.row)">修改地址</el-button> -->
            <el-button type="text" icon="el-icon-plus" size="mini" v-permission="['POST /admin/order/addOrderRemind']"
              @click="handleAddOrderRemind(scope.row)">添加订单提醒
            </el-button>

            <el-button type="text" icon="el-icon-close" size="mini"
              v-show="scope.row.orderStatus == 201 && (scope.row.orderType == 1 || scope.row.orderChannel == 38|| scope.row.orderChannel == 113)"
              style="color:red" v-permission="['POST /admin/order/cancelOrder']"
              @click="handleCancelOrder(scope.row)">取消/作废订单
            </el-button>

            <el-button type="text" icon="el-icon-close" size="mini"
              v-show="(scope.row.orderStatus == 201 || scope.row.orderStatus == 301) && (scope.row.orderChannel == 104)"
              style="color:red" v-permission="['GET /admin/aftersale/unlock']" @click="cancelMeituan(scope.row)">取消美团预约
            </el-button>
            <el-button type="text" icon="el-icon-close" size="mini"
              v-show="(scope.row.orderStatus == 201 || scope.row.orderStatus == 301) && (scope.row.orderChannel == 106)"
              style="color:red" v-permission="['GET /admin/aftersale/cancleZhongAnOrder']"
              @click="cancelZhongAn(scope.row)">取消众安预约
            </el-button>

            <el-button type="text" size="mini" icon="el-icon-finished"
              v-show="(scope.row.orderStatus == 201 || scope.row.orderStatus == 301) && (scope.row.orderChannel == 104)"
              style="color:red" v-permission="['GET /admin/order/mtOrderComplete']"
              @click="mtComplete(scope.row)">美团履约完成
            </el-button>

            <el-button type="text" icon="el-icon-news" size="mini"
              v-show="scope.row.orderChannel == 104 && scope.row.orderType == 0" style="color:rgb(27, 1, 1)"
              v-permission="['POST /admin/order/mtOrderTypeChange']" @click="handleMtOrderType(scope.row)">美团订单类型
            </el-button>

            <el-button type="text" icon="el-icon-news" size="mini" v-show="scope.row.couponLockState == 2"
              v-permission="['POST /admin/order/addToUnlock']" @click="addToUnlock(scope.row)">原生订单加锁
            </el-button>
            <el-button type="text" icon="el-icon-news" size="mini" v-show="scope.row.couponLockState == 1"
              v-permission="['POST /admin/order/addToUnlock']" @click="addToUnlock(scope.row)">原生订单解锁
            </el-button>

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

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

    <!-- 订单导入-->
    <el-dialog :visible.sync="importLoading" title="订单导入">
      <el-form ref="importForm" :model="importForm" status-icon label-position="left" label-width="100px"
        style="width: 400px; margin-left:50px;">
        <el-form-item label="订单渠道" prop="channelId">
          <el-select v-model="importForm.channelId" placeholder="请选择">
            <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="Excel文件" prop="file">
          <el-upload ref="upload" class="upload-demo" :headers="headers" :limit="1" :before-upload="beforeUpload"
            accept=".xls, .xlsx">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <a href="./static/order.xlsx" rel="external nofollow" download="模板">
              <el-button size="small" type="success">下载模板</el-button>
            </a>
            <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过5MB</div>
            <div slot="tip" class="el-upload-list__item-name">{{ importForm.filename }}</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="importLoading = false">取消</el-button>
        <el-button type="primary" @click="confirmImport">确定</el-button>
      </div>
    </el-dialog>

    <!-- 修改订单状态对话框 -->
    <el-dialog :visible.sync="shipDialogVisible" title="修改订单状态" width="600px">
      <el-form ref="shipForm" :model="shipForm" :rules="rules" status-icon label-position="left" label-width="100px"
        style="width: 400px; margin-left:50px;">
        <el-form-item label="订单状态" prop="orderStatus">
          <el-select v-model="shipForm.orderStatus" placeholder="请选择">
            <el-option v-for="(key, value) in statusModifyMap" :key="key" :label="key" :value="value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shipDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmShip">确定</el-button>
      </div>
    </el-dialog>

    <!-- 申请退款对话框 -->
    <el-dialog :visible.sync="applyRefundDialogVisible" title="申请退款" width="800px">
      <el-form ref="applyRefundForm" :model="applyRefundForm" :rules="applyRefundRules" status-icon
        label-position="left" label-width="100px" style="padding:20px 40px">
        <el-row :gutter="60">
          <!-- <el-col :span="12">
            <el-form-item label="退款编号" prop="refundSn">
              <el-input v-model="applyRefundForm.refundSn" />
            </el-form-item>
          </el-col> -->

          <el-col :span="12">
            <el-form-item label="退款类型" prop="type">
              <el-select v-model="applyRefundForm.type" style="width:100%" placeholder="请选择退款渠道">
                <el-option label="未收货退款" :value="0" />
                <el-option label="已收货（无需退货）退款" :value="1" />
                <el-option label="用户退货退款" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="退款金额" prop="amount">
              <el-input v-model="applyRefundForm.amount" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="退款渠道" prop="refundChannel">
              <el-select v-model="applyRefundForm.refundChannel" style="width:100%" placeholder="请选择退款渠道">
                <el-option label="微信" :value="0" />
                <el-option label="支付宝" :value="1" />
                <el-option label="公对私转账" :value="2" />
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <!-- <el-row :gutter="60">
          <el-col :span="16">
            <el-form-item label="退款时间" prop="refundTime">
              <el-date-picker v-model="applyRefundForm.refundTime" style="width:100%" type="datetime" class="filter-item" value-format="yyyy-MM-dd hh:mm:ss" />
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row :gutter="60">
          <el-col :span="24">
            <el-form-item label="退款原因" prop="reason">
              <el-input v-model="applyRefundForm.reason" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="applyRefundDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmApplyRefund">确定</el-button>
      </div>
    </el-dialog>

    <!-- 修改订单金额对话框 -->
    <el-dialog :visible.sync="editVisible" title="修改订单金额">
      <el-form ref="editForm" :model="editForm" :rules="rules" status-icon label-position="left" label-width="100px"
        style="width: 400px; margin-left:50px;">
        <el-form-item label="支付金额" prop="actualPrice">
          <!-- <el-input v-model="refundForm.refundMoney" :disabled="true" /> -->
          <el-input v-model="editForm.actualPrice" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
        <!-- @click="confirmEditconfirmEdit" -->
      </div>
    </el-dialog>

    <!-- 订单录入 -->
    <el-dialog :visible.sync="orderInputVisible" title="订单录入" width="900px" center :close-on-click-modal="false">
      <el-form ref="orderInputForm" :model="orderInputForm" :rules="orderInputFormRules" status-icon
        label-position="left" label-width="100px" style=" padding:10px 30px">
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="orderInputForm.customerName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="tel">
              <el-input v-model="orderInputForm.tel" clearable maxlength="11" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="省市区" prop="area">
              <!-- <el-input v-model="orderInputForm.address" /> -->
              <el-cascader style="width:100%" :options="areaList" v-model="orderInputForm.area" ref="cascader"
                @change="handleUpdateAreaChange" clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单渠道" prop="orderChannel">
              <el-select v-model="orderInputForm.orderChannel" style="width:100%" placeholder="请选择">
                <el-option v-for="item in channels.filter(item => { return item.id != 4 })" :key="item.id"
                  :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="服务地址" prop="addressDetail">
          <el-input v-model="orderInputForm.addressDetail" clearable />
        </el-form-item>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="购买商品" prop="goodsId">
              <!-- <el-input v-model="orderInputForm.goodsId" /> -->
              <el-select v-model="orderInputForm.goodsId" style="width:100%" placeholder="请选择" filterable
                @change="goodsIdChange">
                <template v-for="item in goodsList" >
                <el-option  :key="item.id" v-if="item.deleted==false&&item.isOnSale==true" :label="item.name" :value="item.id" />
              </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品类" prop="productId">
              <el-select v-model="orderInputForm.productId" style="width:100%" placeholder="请选择">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.shortName"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="订单类型" prop="orderType">
              <el-select v-model="orderInputForm.orderType" style="width:100%" placeholder="请选择">
                <el-option v-for="(key, value) in orderTypeMapInput" :key="key" :label="key" :value="value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="支付方式" prop="payChannel">
              <el-select v-model="orderInputForm.payChannel" style="width:100%" placeholder="请选择支付渠道">
                <el-option label="支付宝" value="ZFB" />
                <el-option label="微信" value="WX" />
                <el-option label="转账" value="ZZ" />
                <el-option label="抖音" value="DY" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="订单金额" prop="orderPrice">
              <el-input v-model="orderInputForm.orderPrice" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="支付单编号" prop="payId">
              <el-input v-model="orderInputForm.payId" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="支付时间" prop="payTime">
              <el-date-picker v-model="orderInputForm.payTime" style="width:100%" type="datetime" class="filter-item"
                value-format="yyyy-MM-dd hh:mm:ss" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="message">
          <el-input v-model="orderInputForm.message" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderInputVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmInputOrder">确定</el-button>
      </div>
    </el-dialog>


    <!-- 修改地址 -->
    <el-dialog :visible.sync="updateAddressVisible" title="修改地址" width="660px" center>
      <el-form ref="updateAddressForm" :model="updateAddressForm" :rules="updateAddressFormRules" status-icon
        label-position="left" label-width="200px" style=" padding:10px 30px">
        <el-row :gutter="60">
          <el-form-item label="预约人" prop="consignee">
            <el-input v-model="updateAddressForm.consignee" clearable placeholder="请输入预约联系人" />
          </el-form-item>
        </el-row>
        <el-row :gutter="60">
          <el-form-item label="预约电话" prop="mobile">
            <el-input v-model="updateAddressForm.mobile" clearable placeholder="请输入预约联系人的电话" />
          </el-form-item>
        </el-row>
        <el-row :gutter="60">
          <el-form-item label="省市区" prop="area">
            <el-cascader style="width:100%" :options="areaList" v-model="updateAddressForm.area" ref="cascader1"
              @change="handleUpdateAreaChange1" clearable></el-cascader>
          </el-form-item>
        </el-row>
        <el-row :gutter="60">
          <el-form-item label="服务地址" prop="addressDetail">
            <el-input v-model="updateAddressForm.addressDetail" clearable />
          </el-form-item>
        </el-row>

        <el-row :gutter="60">

          <el-form-item label="是否取消已预约未服务工单" prop="cancelBookOrderDetail">
            <!-- <el-select v-model="updateAddressForm.cancelBookOrderDetail" style="width:100%" placeholder="请选择支付渠道">

                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select> -->
            <el-radio-group v-model="updateAddressForm.cancelBookOrderDetail">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>


        </el-row>

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

    <el-dialog :visible.sync="showbaogangRefund" title="外部订单退还(口碑/宝钢)" width="900px" center>
      <el-form>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="订单号">
              <el-input v-model="bgData.orderNo" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="外部订单号">
              <el-input v-model="bgData.serviceContractNo" readonly />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="60">
          <el-col :span="24">
            <el-form-item label="取消原因">
              <el-input v-model="bgData.reason" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

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

    <!-- 追加订单备注 -->
    <el-dialog :visible.sync="memoDialogVisible" title="追加订单备注" width="800px">
      <div>
        <svg-icon icon-class="people" />
        <span class="font-small">历史备注</span>
      </div>
      <el-table :data="orderMemo" height="250px"
        style="margin-bottom:10px;width: 100%;margin-top: 10px;overflow-y: auto !important;">
        <el-table-column label="备注时间" align="center" prop="createTime" />
        <el-table-column label="内容" align="center" prop="content" />
        <el-table-column label="提醒时间" align="center" prop="remindTime" />
        <el-table-column label="是否同步服务者" align="center" prop="remindTime"  >
          <template slot-scope="scope">
            <span>{{ scope.row.isToServant?'是':'否' }}</span>
            </template>>
        </el-table-column>
        <el-table-column label="操作人" align="center" prop="createUserName" />
      </el-table>

      <el-form ref="memoForm" :model="memoForm" :rules="rules" status-icon label-position="left" label-width="150px"
        style="width: 700px; ">
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否需提醒" prop="isRemind">
              <el-switch active-text="提醒" inactive-text="无需提醒" v-model="memoForm.isRemind" @change="handleRemind" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否同步给服务者" prop="isToServant">
              <el-switch active-text="同步" inactive-text="不同步" v-model="memoForm.isToServant" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="提醒时间" prop="remindTime">
          <el-date-picker v-model="memoForm.remindTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"
            :picker-options="{}" />
        </el-form-item>
        <el-form-item label="备注内容" prop="content">
          <el-input v-model="memoForm.content" type="textarea" placeholder="请输入备注内容"
            :autosize="{ minRows: 6, maxRows: 10 }" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="memoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmOrderMemo">确定</el-button>
      </div>
    </el-dialog>

    <!-- 生成权益单 -->
    <el-dialog :visible.sync="applyBenefitVisible" title="生成权益单" width="700px">
      <el-form ref="applyBenefitForm" :model="applyBenefitForm" :rules="applyBenefitRules" status-icon
        label-position="right" label-width="100px" style="padding:20px 60px 20px 20px">
        <el-row>
          <el-form-item label="供应商" prop="supplierCode">
            <el-select v-model="applyBenefitForm.supplierCode" placeholder="请选择供应商" style="width:100%">
              <el-option v-for="(item, index) in supplierList" :key="index" :label="item.supplyName"
                :value="item.supplyCode" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="门店" prop="shopCode">
            <el-select v-model="applyBenefitForm.shopCode" placeholder="请选择门店" style="width:100%" filterable>
              <el-option v-for="(item, index) in shopList" :key="index" :label="item.shopName" :value="item.shopCode" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="服务项" prop="itemId">
            <el-select v-model="applyBenefitForm.itemId" filterable="" placeholder="请选择服务项" style="width:100%"
              @focus="itemFocus">
              <el-option v-for="(item, index) in itemList" :key="index" :label="item.skuName" :value="item.itemId" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="用户姓名" prop="userName">
            <el-input v-model="applyBenefitForm.userName" placeholder="请输入用户姓名" disabled />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="用户手机" prop="userPhone">
            <el-input v-model="applyBenefitForm.userPhone" placeholder="请输入用户手机" disabled />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="权益次数" prop="useTimes">
            <el-input v-model="applyBenefitForm.useTimes" placeholder="请输入权益次数" disabled />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="关联单据" prop="refHmOrderNo">
            <el-input v-model="applyBenefitForm.refHmOrderNo" placeholder="请输入关联单据" disabled />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="赠送目的" prop="useCode">
            <el-select v-model="applyBenefitForm.useCode" placeholder="请选择赠送目的" style="width:100%">
              <el-option v-for="(item, index) in givePurposeTypeMap" :key="index" :label="item.label"
                :value="item.id" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="赠送详细描述" prop="userRemark">
            <el-input type="textarea" placeholder="请输入内容" v-model="applyBenefitForm.userRemark" maxlength="50" rows="3"
              show-word-limit />
          </el-form-item>
        </el-row>

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

    <!-- 改派对话框 -->
    <el-dialog :visible.sync="reassignDialogVisible" title="改派">
      <el-form ref="reassignForm" :model="reassignForm" status-icon label-position="left" label-width="100px"
        style="width: 400px; margin-left:50px;" :rules="rules">
        <el-form-item label="日期" prop="bookDate">
          <el-date-picker v-model="reassignForm.bookDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="服务者" prop="servantId">
          <el-select v-model="reassignForm.servantId" placeholder="请选择" @change="servantChange">
            <el-option v-for="item in servantList" :key="item.code" :label="item.workerName" :value="item.workerId" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间段" prop="bookTime">
          <el-select v-model="reassignForm.bookTime" placeholder="请选择" @focus="getAppointTime">
            <el-option v-for="(item, index) in timeListAppoint" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reassignDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmReassign">确定</el-button>
      </div>
    </el-dialog>

    <!-- 取消预约对话框 -->
    <el-dialog :visible.sync="cancelAppointVisible" title="取消预约" width="600px">
      <el-form ref="cancelAppointForm" :model="cancelAppointForm" status-icon label-position="left" label-width="100px"
        :rules="cancelAppointrules">

        <el-form-item label="取消原因" prop="changeReason">
          <el-select v-model="cancelAppointForm.changeReason" placeholder="请选择">
            <el-option v-for="item in cancelReasonList" :key="item.id" :label="item.reason" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAppointVisible = false">取消</el-button>
        <el-button type="primary" @click="cancelBook">确定</el-button>
      </div>
    </el-dialog>

    <!-- 发送短信  -->
    <el-dialog title="发送短信" :visible.sync="dislogSmsFormVisible" width="600px" :close-on-click-modal="false" center
      :modal="false">
      <el-form label-width="120px" :model="smsForm" ref="smsForm" :rules="sendSMSRule">
        <el-form-item label="短信类型" prop="id">
          <el-select v-model="smsForm.id" clearable filterable @change="smsTempChange">
            <el-option v-for="item in smsTemplates" :key="item.id" :label="item.msName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户手机" prop="tel">
          <el-input v-model="smsForm.tel" placeholder="请输入接收手机" />
        </el-form-item>
        <el-form-item label="短信内容" prop="smsContent">
          <el-input type="textarea" v-model="smsForm.smsContent" rows="7" disabled></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dislogSmsFormVisible = false">取消</el-button>
        <el-button type="primary" @click="sendSMS">发送</el-button>
      </span>
    </el-dialog>

    <!-- 添加订单提醒 -->
    <el-dialog :visible.sync="orderRemindDialogVisible" title="添加订单提醒" width="800px">
      <el-form ref="orderRemindForm" :model="orderRemindForm" :rules="remindRules" status-icon label-position="left"
        label-width="150px" style="width: 700px; ">
        <el-form-item label="提醒内容" prop="remind">
          <el-input v-model="orderRemindForm.remind" type="textarea" placeholder="请输入提醒内容" rows="3" maxlength="50"
            show-word-limit />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderRemindDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmOrderRemind">确定</el-button>
      </div>
    </el-dialog>

    <!-- 美团订单类型修改 -->
    <el-dialog :visible.sync="mtOrderTypeFormVisible" title="美团订单类型修改" width="600px">
      <el-form ref="mtOrderTypeForm" :model="mtOrderTypeForm" status-icon label-position="left" label-width="150px">
        <el-form-item label="订单类型" prop="orderType">
          <el-select v-model="mtOrderTypeForm.orderType" style="width: 320px" class="filter-item" placeholder="订单类型">
            <el-option label="默认下单" :value="0" />
            <el-option label="零佣金订单" :value="5" />
          </el-select>
        </el-form-item>
        <div style="color:red;margin-left: 150px;">修改为零佣金订单，结算时此单服务商将不会扣款，请谨慎修改</div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="mtOrderTypeFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmMtOrderTypeChange">确定</el-button>
      </div>
    </el-dialog>

<!--众安订单取消选择原因    -->
    <el-dialog :visible.sync="cancelZhongAnOrderVisable" title="众安订单取消" width="300px">
      <el-select value="cancelReason" v-model="cancelReason" placeholder="请选择取消原因" style="width:100%">
        <el-option
          v-for="item in zhonganCancelOption"
          :key="item.value"
          :label="item.label"
          :value="item.label">
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelZhongAnOrderVisable = false">取消</el-button>
        <el-button type="primary" @click="confirmCancelZhongAnOrder">确定</el-button>
      </div>
    </el-dialog>
 
    <addressSelectRef ref="addressSelectRef" />
    <!-- 订单详情对话框 -->
    <orderInfoRef ref="orderInfoRef" />

    <serviceBookRef ref="serviceBookRef" />

  </div>
</template>

<script>
// import areaJson from "../../areaJson";
import {regionData} from "element-china-area-data";
import {
  addInterst,
  addOrderRemind,
  addToUnlock,
  applyRefundOrder,
  cancelBook,
  cancelOrde,
  cancelOrder,
  checkInterst,
  commission,
  createMemo,
  deleteOrder,
  editOrder,
  getAllFras,
  getAssignmentPerson,
  getAssignmentPersonTime,
  getHmSkuItem,
  getHmSuppliersShop,
  getOrderVerifyInfo,
  getProduct,
  importOrder,
  listOrder,
  modifyStatus,
  mtOrderComplete,
  mtOrderTypeChange,
  orderBookDetail,
  orderBookFinish,
  orderBookReassign,
  orderCreate,
  orderIsHandle,
  readMemo,
  shipOrder,
  updateOrderAddress
} from "@/api/order";
import {getAllGoods,} from "@/api/stat";
import {allChannel} from "@/api/channel";
import {getSmsLog, getSmsTemplate, send} from "@/api/sms";
import {allRange} from "@/api/serviceTimeRange";
import {bookStatusMap, cancelReasonList, ObjectToArray, statusMap, statusModifyMap} from "@/api/enumUtils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import {formatDate} from "@/utils/date";
import {getUserCity} from "@/api/city";
import checkPermission from "@/utils/permission"; // 权限判断函数
import {cancelZhongAn, unlock} from "@/api/aftersale"; 
import addressSelectRef from '../order/components/addressSelectRef'
import orderInfoRef from '@/views/order/components/orderInfoRef.vue'
import serviceBookRef from "@/views/order/components/serviceBookRef";

let vm;

const orderTypeMap = {
  0: "默认下单",
  1: "代客下单",
  2: "赠送单",
  3: "理赔单",
  4: "补差单"
};

export default {
  name: "Order",
  components: { Pagination, addressSelectRef, orderInfoRef ,serviceBookRef},
  filters: {
    aftersaleStatusFilter(status) {
      if (status == 1) return "-退款申请中";
      if (status == 2) return "-退款审核通过";
      if (status == 3) return "-退款成功";
      if (status == 4) return "-退款拒绝";
      if (status == 5) return "-退款取消";
      return "";
    },
    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;
      }
    },
    orderTypeFilter(value) {
      if (value == 0) return "默认下单";
      if (value == 1) return "代客下单";
      if (value == 2) return "赠送单";
      if (value == 3) return "理赔单";
      if (value == 4) return "补差单";
      if (value == 5) return "零佣金订单";
      return "";
    },
    bookStatusFilter(status) {
      return bookStatusMap[status];
    },
  },
  data() {
    var payChannelValid = (rule, value, callback) => {
      if (
        this.orderInputForm.orderType == 1 &&
        (value == null || value == "")
      ) {
        callback(new Error("请输入服务时长"));
      } else {
        callback();
      }
    };

    return {
      assignTypeMap: { 1: '指定服务商', 3: '服务商POI', 4: '公共池' },
      productList: [],
      tableHeight: "570px",//表控件高度
      activeIndex: '',
      payChannelMap: { "WX": '微信', 'ZFB': '支付宝', 'DOUYIN': '抖音' },
      showbaogangRefund: false,
      bgData: {
        orderNo: "",
        serviceContractNo: "",
        reason: "",
        operName: "",
      },
      applyRefundDialogVisible: false,
      applyRefundRules: {
        amount: [
          { required: true, message: "请输入退款金额", trigger: "blur" },
        ],
        // refundSn: [
        //   { required: true, message: "请输入退款编号", trigger: "blur" },
        // ],
        // refundChannel: [
        //   { required: true, message: "请选择退款渠道", trigger: "blur" },
        // ],
        type: [{ required: true, message: "请选择退款类型", trigger: "blur" }],
        // refundTime: [
        //   { required: true, message: "请输入退款时间", trigger: "blur" },
        // ],
        reason: [
          { required: true, message: "请输入退款原因", trigger: "blur" },
        ],
      },
      applyRefundForm: {
        orderId: "",
        amount: "",
        refundChannel: "",
        refundTime: "",
        reason: "",
        refundSn: "",
        type: 0,
      },
      orderInputVisible: false, //订单录入
      goodsList: [],
      fras: [],//加盟商列表
      city: [],
      actualPrice: "", //退款金额
      refundAmount: "",
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined,
        mobile: undefined,
        tab: "5",
        timeArray: ['', ''],
        isHandle: "",
        orderStatusArray: [],
        sort: "create_time",
        order: "desc",
        orderType: "",
        zhonganOrderNo: '',
        bookStatus: '',
        couponChannel:''
      },
      rules: {
        bookDate: [
          { required: true, message: "请选择改派日期", trigger: "blur" },
        ],
        bookTime: [
          { required: true, message: "请选择改派时间", trigger: "blur" },
        ],
        servantId: [
          { required: true, message: "请选择服务者", trigger: "blur" },
        ],
      },
      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: statusMap,
      statusModifyMap: statusModifyMap,
      bookStatusMap: bookStatusMap,
      bookStatusMapValue: ObjectToArray(bookStatusMap),
      orderTypeMap,
      orderTypeMapInput: {
        // 0: "默认下单",
        1: "代客下单",
        2: "赠送单",
        3: "理赔单",
        4: "补差单",
        5: "零佣金订单"
      },
      orderDialogVisible: false,
      orderDetail: {
        order: {},
        user: {},
        orderGoods: [],
        refundList: [],
        commission: {},
        fraInfo: {}
      },
      shipForm: {
        orderId: undefined,
        orderStatus: undefined,
      },
      editForm: {
        orderId: undefined,
        actualPrice: "",
      },
      importForm: {
        channelId: 1,
        file: undefined,
        filename: undefined,
      },
      editVisible: false,
      shipDialogVisible: false,
      orderMemo: [], //坐席备注list
      memoForm: {
        orderId: "",
        orderSn: "",
        content: "",
        isRemind: false,
        remindTime: "",
        isToServant: false
      },
      memoDialogVisible: false,
      importLoading: false,
      headers: { "Content-Type": "multipart/form-data" },
      orderInputForm: {
        customerName: "",
        tel: "",
        area: "",
        addressDetail: "",
        goodsId: "",
        orderChannel: "",
        payChannel: "",
        payId: "",
        orderPrice: "",
        message: "",
        areaCode: "",
        province: "",
        city: "",
        county: "",
        productId: '',
      },
      areaList: regionData,
      orderInputFormRules: {
        message: [
          { required: true, message: "请输入订单备注", trigger: "blur" },
        ],
        customerName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        tel: [{ required: true, message: "请输入客户手机号", trigger: "blur" }],
        area: [{ required: true, message: "请选择省市区", trigger: "change" }],
        addressDetail: [
          { required: true, message: "请输入客户地址", trigger: "blur" },
        ],
        goodsId: [{ required: true, message: "请选择商品", trigger: "change" }],
        productId: [{ required: true, message: "请选择品类", trigger: "change" }],
        orderChannel: [
          { required: true, message: "请选择订单渠道", trigger: "change" },
        ],
        payId: [
          {
            validator: payChannelValid,
            required: true,
            message: "请输入支付单编号",
            trigger: "blur",
          },
        ],
        payChannel: [
          {
            validator: payChannelValid,
            required: true,
            message: "请选择支付渠道",
            trigger: "blur",
          },
        ],
        payTime: [
          {
            validator: payChannelValid,
            required: true,
            message: "请选择支付时间",
            trigger: "blur",
          },
        ],
        orderPrice: [
          {
            validator: payChannelValid,
            required: true,
            message: "请输入订单金额",
            trigger: "blur",
          },
        ],
        orderType: [
          { required: true, message: "请选择订单类型", trigger: "blur" },
        ],
      },
      applyBenefitVisible: false,
      givePurposeTypeMap: [
        {
          id: "00",
          label: "组合订单",
        },
        {
          id: "01",
          label: "周期订单",
        },
        {
          id: "02",
          label: "体验单",
        },
        {
          id: "03",
          label: "赠送单",
        },
        {
          id: "04",
          label: "返工单",
        },
        {
          id: "05",
          label: "其他订单",
        },
      ],
      applyBenefitForm: {
        refHmOrderNo: "",
        userName: "",
        userPhone: "",
        useTimes: "",
        supplierCode: "",
        shopCode: "",
        itemId: "",
        useCode: "",
        userRemark: "",
      },
      applyBenefitRules: {
        supplierCode: [
          { required: true, message: "请选择供应商", trigger: "change" },
        ],
        shopCode: [
          { required: true, message: "请选择门店", trigger: "change" },
        ],
        itemId: [
          { required: true, message: "请选择服务项", trigger: "change" },
        ],
        refHmOrderNo: [
          { required: true, message: "请输入关联单据", trigger: "change" },
        ],
        userName: [
          { required: true, message: "请输入用户姓名", trigger: "change" },
        ],
        userPhone: [
          { required: true, message: "请输入用户手机号", trigger: "change" },
        ],
        useTimes: [
          { required: true, message: "请输入权益次数", trigger: "change" },
        ],
        useCode: [
          { required: true, message: "请选择赠送目的", trigger: "change" },
        ],
      },
      shopList: [],
      supplierList: [],
      itemList: [],

      reassignDialogVisible: false, //改派
      reassignForm: {
        id: "",
        bookDate: "",
        bookTime: "",
        servantId: "",
        orderId: "",
      },
      cancelAppointVisible: false,
      cancelOrderItem: "",
      cancelAppointrules: {
        changeReason: [
          { required: true, message: "请选择取消原因", trigger: "change" },
        ],
      },
      cancelAppointForm: {
        changeReason: "",
      },
      cancelReasonList: cancelReasonList,
      smsTemplates: [], //短信模板
      dislogSmsFormVisible: false,
      smsForm: {
        id: 0, //1 未接通 2物损 3添加微信
        memo: "",
        templateNo: "",
        beforeTime: "",
        nextTime: "",
        smsContent: "",
        tel: "",
      },
      timeListAppoint: [],
      servantList: [],
      sendSMSRule: {
        id: [
          { required: true, message: "短信模版不能为空", trigger: "change" },
        ],
        tel: [
          { required: true, message: "请输入接收手机号", trigger: "change" },
        ],
      },
      updateAddressVisible: false,
      updateAddressForm: {
        area: '',
        addressDetail: '',
        cancelBookOrderDetail: '',
        mobile: '',
        consignee: ''
      },
      updateOrderInfo: {},
      updateAddressFormRules: {
        consignee: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入客户电话", trigger: "blur" },
        ],
        area: [{ required: true, message: "请选择省市区", trigger: "change" }],
        addressDetail: [
          { required: true, message: "请输入客户地址", trigger: "blur" },
        ],
        goodsId: [{ required: true, message: "请选择商品", trigger: "change" }],

        cancelBookOrderDetail: [
          {
            required: true,
            message: "是否取消已预约未服务工单",
            trigger: "blur",
          },
        ]
      },
      orderRemindDialogVisible: false,
      orderRemindForm: {
        orderId: '',
        remind: ''
      },
      remindRules: {
        remind: [
          { required: true, message: '请输入提醒内容', trigger: 'change' }
        ]
      },
      mtOrderTypeForm: {
        id: '',
        orderType: ''
      },
      mtOrderTypeFormVisible: false,
      cancelZhongAnOrderVisable:false,
      cancelOrderId:null,
      cancelReason:'',
      zhonganCancelOption: [
        { value: '1', label: '改时间' },
        { value: '2', label: '地址不在服务范围' },
        { value: '3', label: '电器洗衣机，空调，油烟机等不在服务范围' },
        { value: '4', label: '退保取消' },
        { value: '5', label: '约错服务取消' },
        { value: '6', label: '无法联系用户' },
      ],

    };
  },
  computed: {
    tableMaxHeight() {
      console.info(window.innerHeight)
      console.info(this.tableHeight)
      this.tableHeight = (window.innerHeight - (window.innerWidth > 1800 ? 300 : 330)) + "px";
      console.info(this.tableHeight)
      return this.tableHeight;
    },
  },
  beforeCreate() {
    vm = this;
  },
  created() {
    allChannel().then((res) => {
      this.channels = res.data.data;
    });
    this.getCity();
    let orderSn = this.$route.query.orderSn;
    if (orderSn) {
      this.listQuery.orderSn = orderSn;
    }
    allRange().then((res) => {
      this.timerange = res.data.data;
    });

    this.getList();
    this.getAllFras();
  },
  methods: {
    checkPermission,
    handleMtOrderType(row) {
      this.mtOrderTypeForm = {
        id: row.id,
        orderType: row.orderType
      }
      this.mtOrderTypeFormVisible = true;
    },
    confirmMtOrderTypeChange() {
      mtOrderTypeChange(this.mtOrderTypeForm).then(res => {
        this.$notify.success({
          title: "成功",
          message: "修改美团订单类型成功",
        });
        for (const v of this.list) {
          if (v.id === this.mtOrderTypeForm.id) {
            v.orderType = this.mtOrderTypeForm.orderType;
            break
          }
        }
        this.mtOrderTypeFormVisible = false;
      })
    },
    goodsIdChange(value) {
      this.orderInputForm.productId = '';
      this.getAllProduct(value);
    },
    getAllProduct(id) {
      getProduct({ goodsId: id }).then((res) => {
        this.productList = res.data.data;
      });
    },
    toRefundbaogang() {
      if (this.bgData.reason == "") {
        this.$notify.error({
          title: "失败",
          message: "请填写原因",
        });
        return;
      }
      cancelOrde(this.bgData)
        .then((res) => {
          if (res.data.errno == 0) {
            this.$notify.success({
              title: "成功",
              message: "订单已取消",
            });
            this.showbaogangRefund = false;
            this.getList();
          }
        })
        .catch((res) => {
          this.$notify.error({
            title: "失败",
            message: res.data.errmsg,
          });
        });
    },
    handleSendSMS(row) {
      if (this.smsTemplates.length == 0) this.getSmsTemplate();

      this.smsForm = {
        id: null, //1 未接通 2物损 3添加微信
        memo: "",
        templateNo: "",
        beforeTime: "",
        nextTime: "",
        smsContent: "",
        cusId: row.id,
        tel: row.mobile,
      };
      this.dislogSmsFormVisible = true;
    },
    sendSMS() {
      var params = this.smsForm;
      this.$refs["smsForm"].validate((valid) => {
        if (valid) {
          if (this.smsForm.id == 1) {
            params = {
              id: this.smsForm.id,
              cusId: this.smsForm.cusId,
              ticketId: 0,
              beforeTime: formatDate(
                this.smsForm.beforeTime,
                "yyyy-MM-dd hh:mm:ss"
              ),
              nextTime: formatDate(
                this.smsForm.nextTime,
                "yyyy-MM-dd hh:mm:ss"
              ),
              memo: this.smsForm.memo,
            };
          }

          this.$confirm("确定发送此短信？", "提示", {
            confirmButtonText: "发送",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            send(params)
              .then((res) => {
                this.dislogSmsFormVisible = false;
                this.$notify.success({
                  title: "成功",
                  message: "短信发送成功",
                });
              })
              .catch((res) => {
                this.$notify.error({
                  title: "错误",
                  message: res.data.errmsg,
                });
              });
          });
        }
      });
    },
    smsTempChange(value) {
      this.smsTemplates.forEach((item) => {
        if (item.id == value) {
          this.smsForm.smsContent = item.msContent;
        }
      });
    },
    getAllFras() {
      getAllFras().then(res => {
        this.fras = res.data.data
      })
    },
    getSmsTemplate() {
      getSmsTemplate().then((res) => {
        res.data.data.forEach((item) => {
          if (item.id != 1 && item.id != 2 && item.id != 21)
            this.smsTemplates.push(item);
        });
      });
    },
    handleContactCus(row) {
      //已处理=联系过客户
      let content = "确定已联系客户、预约完成后，将此订单设置为【已处理】？";
      if (row.isHandle) content = "确定将此订单设置为【未处理】？";

      this.$confirm(content).then((res) => {
        orderIsHandle(row.id).then((res) => {
          row.isHandle = res.data.data;
          this.$message.success("设置处理状态成功");
        });
      });
    },
    baogangRefund(row) {
      this.showbaogangRefund = true;
      this.bgData = {
        orderNo: row.orderSn,
        serviceContractNo: row.serviceContractNo,
        reason: "",
        operName: this.$store.state.user.name,
      };
    },
    getCity() {
      getUserCity().then((res) => {
        this.city = res.data.data;
        //去除非业务城市
        this.areaList = [];
        regionData.forEach(p => {
          if (this.city.filter(city => {
            return city.cityName == p.label
          }).length > 0)
            this.areaList.push(p);
          else {
            let province = { label: p.label, value: p.value, children: [] };
            p.children.forEach(c => {
              if (this.city.filter(city => {
                return city.cityName == c.label
              }).length > 0)
                province.children.push(c);
            })
            if (province.children.length > 0)
              this.areaList.push(province);
          }

        })
      });
    },
    getList() {
      if (this.listQuery.goodsName && this.listQuery.goodsName.length < 2) {
        this.$message.warning("请至少输入2位长度的商品名称");
        return;
      }

      this.listLoading = true;
      if (this.listQuery.timeArray && this.listQuery.timeArray.length === 2) {
        this.listQuery.start = this.listQuery.timeArray[0];
        this.listQuery.end = this.listQuery.timeArray[1];
      } else {
        this.listQuery.start = null;
        this.listQuery.end = null;
      }
      console.log('list');

      listOrder(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
          // this.$forceUpdate();
          this.$refs.table.doLayout();
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleClick() {
      this.getList();
    },
    cityFilter(address, cityId) {
      let citys = this.city.filter(i => i.id == cityId);
      if (citys.length > 0)
        return citys[0].cityName;

      if (address) {
        if (address.indexOf("上海") >= 0) return "上海市";
        if (address.indexOf("北京") >= 0) return "北京市";
        if (address.indexOf("南京") >= 0) return "南京市";
        if (address.indexOf("深圳") >= 0) return "深圳市";
        if (address.indexOf("苏州") >= 0) return "苏州市";
        if (address.indexOf("无锡") >= 0) return "无锡市";
        if (address.indexOf("杭州") >= 0) return "杭州市";
        if (address.indexOf("宜昌") >= 0) return "宜昌市";
        if (address.indexOf("青岛") >= 0) return "青岛市";
        if (address.indexOf("成都") >= 0) return "成都市";
        if (address.indexOf("重庆") >= 0) return "重庆市";
        if (address.indexOf("广州") >= 0) return "广州市";
      }
      return "";
    },
    formatTime(time) {
      if (time == null || time === "") {
        return "";
      }
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleFilter2() {
      this.listQuery2.page = 1;
      this.getList2();
    },
    handleFilter3() {
      this.listQuery3.page = 1;
      this.getList3();
    },
    handleFilter4() {
      this.listQuery4.page = 1;
      this.getList4();
    },
    handleFilter5() {
      this.listQuery5.page = 1;
      this.getList5();
    },
    formatStepStatus(value, time) {
      if (value === 201) {
        // 待发货
        return 2;
      } else if (value === 301) {
        // 已发货
        return 3;
      } else if (value === 401 || value === 402) {
        // 已完成
        if (time != null && time != "undefined") {
          return 5;
        } else {
          return 4;
        }
      } else {
        // 待付款、已关闭、无限订单
        return 1;
      }
    },
    /*************************************预约单相关操作 **************************************/
    getServantList(id) {
      getAssignmentPerson(id).then((res) => {
        this.servantList = res.data.data;
      });
    },
    handleExpandChange(row, expandRows) {
      console.log("handleExpandChange");
      //console.log(expandRows);
      if (!row.isLoadBookDetail) {
        orderBookDetail(row.id).then((res) => {
          res.data.data.forEach((item) => {
            row.bookDetailList.push(item);
          });
        });
        row.isLoadBookDetail = true;
      }
    },
    handleTabClick(value, row) {
      console.info(row.activeName)
      if (row.activeName == "remind") {
        if (!row.isLoadMemo) {
          readMemo({ orderId: row.id }).then((res) => {
            res.data.data.forEach((item) => {
              row.orderMemo.push(item);
            });
          });
          row.isLoadMemo = true;
        }
      } else if (row.activeName == "sms") {
        if (!row.isLoadSms) {
          getSmsLog({ orderId: row.id }).then((res) => {
            //console.info(res.data.data)
            //console.info(row.smsLogs)
            // row.smsLogs=res.data.data;
            res.data.data.forEach((item) => {
              row.smsLogs.push(item);
            });

            console.info(row.smsLogs)
          });
          row.isLoadSms = true;
        }
      } else if (row.activeName == "verify") {
        if (!row.isLoadVerify) {
          getOrderVerifyInfo({ orderSn: row.orderSn }).then((res) => {
            console.info(res.data.data)
            row.verifyInfo = res.data.data;
            console.info(row.verifyInfo)
          });
          row.isLoadVerify = true;
        }
      }
    },
    getTimeList(type) {
      let timeList = [];
      this.timerange.forEach(e => {
        let str = e.startTime + "-" + e.endTime;
        if (e.duration == type && timeList.includes(str) == false) {
          timeList.push(str)
        }
      })
      return timeList;
    },
    getAppointTime() {
      if (
        this.reassignForm.bookDate == "" ||
        this.reassignForm.bookDate == null
      ) {
        this.$message.warning("请先选择日期");
        return false;
      } else if (this.reassignForm.servantId == "") {
        this.$message.warning("请先选择服务者");
        return false;
      } else {
        let list = [];
        this.timeList.forEach((item) => {
          let obj = {
            startTime: item.split("-")[0],
            endTime: item.split("-")[1],
          };
          list.push(obj);
        });
        let params = {
          workerId: this.reassignForm.servantId,
          reservationDate: this.reassignForm.bookDate,
          timesList: list,
        };
        getAssignmentPersonTime(params)
          .then((res) => {
            console.log(res);
            let reslist = res.data.data.timesList;
            this.timeListAppoint = reslist.map((item) => {
              return item.startTime + "-" + item.endTime;
            });
          })
          .catch((response) => {
          });
      }
    },
    servantChange(value) {
      console.log(value);
      this.timeListAppoint = [];
      this.reassignForm.bookTime = "";
    },
    handleCancel(row, index) {
      this.activeIndex = index;
      this.cancelOrderItem = row;
      this.cancelAppointVisible = true;
    },
    cancelBook() {
      this.$refs["cancelAppointForm"].validate((valid) => {
        if (valid) {
          let params = {
            detailId: this.cancelOrderItem.id,
            changeReason: this.cancelAppointForm.changeReason,
          };
          cancelBook(params)
            .then((response) => {
              this.$message.success("取消成功");
              this.cancelAppointVisible = false;
              this.orderBookDetail(this.cancelOrderItem.orderId);
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg,
              });
            });
        }
      });
    },
    confirmCancelZhongAnOrder() {
      this.$confirm("确定要取消此众安预约单吗？", "提示", {
        confirmButtonText: "确定取消",
        cancelButtonText: "再等等",
        type: "warning",
      }).then(() => {
        cancelZhongAn({ orderId:  this.cancelOrderId, reason: this.cancelReason }).then(() => {
          this.$message.success("订单已取消");
          this.cancelZhongAnOrderVisable=false;
          this.getList();
        })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.errmsg,
            });
          })
      })
    },

    cancelZhongAn(row) {
      this.cancelZhongAnOrderVisable=true;
      this.cancelOrderId =row.id;
    },

    cancelMeituan(row) {

      this.$confirm("确定要取消此美团预约单吗？", "提示", {
        confirmButtonText: "确定取消",
        cancelButtonText: "再等等",
        type: "warning",
      }).then(() => {
        unlock({ orderId: row.id }).then((response) => {
          this.$message.success("订单已取消");
          row.orderStatus = 104;
          row.bookStatus = "已取消";
        })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.errmsg,
            });
          })
      })
    },
    mtComplete(row) {
      this.$confirm("是否确定完成美团订单(中介保姆类订单可操作)？", "提示", {
        confirmButtonText: "确定完成",
        cancelButtonText: "再等等",
        type: "warning",
      }).then(() => {
        mtOrderComplete({ orderId: row.id }).then((response) => {
          if (res.data.errno == 0) {
            this.$message.success("操作成功");
            row.orderStatus = 401;
          } else {
            this.$message.error(response.data.errmsg);
          }
        })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.errmsg,
            });
          })
      })
    },
    handleCancelOrder(row) {//代客下单取消
      this.$confirm("确定要取消此订单吗？", "提示", {
        confirmButtonText: "取消订单",
        cancelButtonText: "再等等",
        type: "warning",
      }).then(() => {
        cancelOrder({ orderId: row.id }).then((response) => {
          this.$message.success("订单已取消");
          row.orderStatus = 104;
          row.bookStatus = "已取消";
        })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.errmsg,
            });
          })
      })
    },

    handleReassign(row, index) {
      // this.reassignDialogVisible = true;
      // this.timeList = this.getTimeList(row.serviceDuration);

      // this.getServantList(row.id);
      // this.reassignForm = {
      //   id: row.id,
      //   bookDate: "",
      //   bookTime: "",
      //   servantId: "",
      //   orderId: row.orderId,
      // };
      this.activeIndex = index;
      let data={ id: row.id,orderId:row.orderId, fraId: row.fraId};
      this.$refs.serviceBookRef.init(data);
    },
    orderBookDetail(id) {
      orderBookDetail(id).then((res) => {
        this.list[this.activeIndex].bookDetailList = res.data.data;
      });
    },
    handleFinish(row, index) {
      this.$confirm("确定要手动核销完成此服务单吗！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.activeIndex = index;
        orderBookFinish({ id: row.id })
          .then((response) => {
            this.$message.success("完结成功");
            row.status = 4;
            console.log(response);
            // this.orderBookDetail(row.orderId);
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.errmsg,
            });
          });
      });
    },
    confirmReassign() {
      this.$refs["reassignForm"].validate((valid) => {
        if (valid) {
          let params = {
            id: this.reassignForm.id,
            bookDate: this.reassignForm.bookDate,
            bookStartTime: this.reassignForm.bookTime.split("-")[0],
            bookEndTime: this.reassignForm.bookTime.split("-")[1],
            servantId: this.reassignForm.servantId,
          };
          orderBookReassign(params)
            .then((response) => {
              this.$message.success("改派成功");
              console.log(response);
              this.reassignDialogVisible = false;
              this.orderBookDetail(this.reassignForm.orderId);
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg,
              });
            });
        }
      });
    },

    confirmShip() {
      this.$refs["shipForm"].validate((valid) => {
        if (valid) {
          shipOrder(this.shipForm)
            .then((response) => {
              this.shipDialogVisible = false;
              this.$notify.success({
                title: "成功",
                message: "确认发货成功",
              });
              this.getList();
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg,
              });
            });
        }
      });
    },
    /*****************************************************预约单操作方法结束 ********************************/
    handleDetail(row) {
      this.$refs.orderInfoRef.getDetail(row.id);
      // detailOrder(row.id).then((response) => {
      //   this.orderDetail = response.data.data;
      // });
      // this.readMemo(row);
      // this.orderDialogVisible = true;
    },
    handleModifyStatus(row) {
      this.shipForm.orderId = row.id;
      this.shipForm.orderStatus = row.orderStatus;

      // this.shipForm.shipChannel = row.shipChannel
      // this.shipForm.shipSn = row.shipSn

      this.shipDialogVisible = true;
      this.$nextTick(() => {
        this.$refs["shipForm"].clearValidate();
      });
    },
    handleEdit(row) {
      this.editForm.orderId = row.id;
      this.editForm.actualPrice = row.actualPrice;

      this.editVisible = true;
      this.$nextTick(() => {
        this.$refs["editForm"].clearValidate();
      });
    },
    confirmShip() {
      this.$refs["shipForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确定修改订单状态?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            modifyStatus(this.shipForm)
              .then((response) => {
                this.shipDialogVisible = false;
                this.$notify.success({
                  title: "成功",
                  message: "确认发货成功",
                });
                this.getList();
              })
              .catch((response) => {
                this.$notify.error({
                  title: "失败",
                  message: response.data.errmsg,
                });
              });
          });
        }
      });
    },
    handleBook(row) {
      //工单情况
      this.$router.push({
        path: "/order/serviceorder",
        query: {
          orderSn: row.orderSn,
        },
      });
    },
    confirmEdit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          editOrder(this.editForm)
            .then((response) => {
              this.editVisible = false;
              this.$notify.success({
                title: "成功",
                message: "修改成功",
              });
              this.getList();
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg,
              });
            });
        }
      });
    },
    fnCopy(content, orderChannel) {
      let oInput = document.createElement("input");
      if (orderChannel) {
        const channelName = this.channels.filter((item) => {
          return item.id === orderChannel;
        });
        if (channelName) orderChannel = channelName[0].name;
        else orderChannel = "";
        content = orderChannel + ":" + content;
      }

      oInput.value = content;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.remove();
      this.$notify.success({
        title: "成功",
        message: "复制成功",
      });
    },
    handleDeleteConfirm(row) {
      this.$confirm("订单删除后无法恢复，确定继续删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.handleDelete(row);
      });
    },

    handleCommission(row) {
      this.$confirm("已计算过的 不会重复计算，确定重新计算分佣吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        commission({ id: row.id }).then((res) => {
          this.$notify.success({
            title: "成功",
            message: "计算成功",
          });
        });
      });
    },
    handleDelete(row) {
      deleteOrder({ orderId: row.id })
        .then((response) => {
          this.$notify.success({
            title: "成功",
            message: "订单删除成功",
          });
          this.getList();
        })
        .catch((response) => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg,
          });
        });
    },
    itemFocus() {
      if (
        this.applyBenefitForm.supplierCode != "" &&
        this.applyBenefitForm.shopCode != ""
      ) {
        getHmSkuItem({
          supplierCode: this.applyBenefitForm.supplierCode,
          shopCode: this.applyBenefitForm.shopCode,
        })
          .then((res) => {
            this.itemList = res.data.data;
          })
          .catch((res) => {
            console.log(res);
            this.$notify.error({
              title: "失败",
              message: res.data.errmsg,
            });
          });
      }
    },
    getsupplierListByCityId(cityId) {
      let tempsupplierCode = {
        1: "282121208",
        2: "282136170",
        3: "282139010",
        4: "282160323",
        5: "282139010",
        7: "282160847",
      };
      //上海市,北京市,深圳市,南京市,苏州市,无锡市,杭州市
      return tempsupplierCode[cityId];
    },
    handleBenefit(row) {
      checkInterst({ orderId: row.id })
        .then((res) => {
          this.applyBenefitForm = res.data.data;
          this.applyBenefitVisible = true;
          this.$set(
            this.applyBenefitForm,
            "supplierCode",
            this.getsupplierListByCityId(row.cityId)
          );
          this.$set(this.applyBenefitForm, "shopCode", "");
          this.$set(this.applyBenefitForm, "itemId", "");
          this.$set(this.applyBenefitForm, "useCode", "");
          this.$set(this.applyBenefitForm, "userRemark", "");
          if (this.supplierList.length == 0 || this.shopList.length == 0) {
            getHmSuppliersShop()
              .then((res) => {
                this.supplierList = res.data.data.supplierList;
                this.shopList = res.data.data.shopList;
              })
              .catch((res) => {
                console.log(res);
                this.$notify.error({
                  title: "失败",
                  message: res.data.errmsg,
                });
              });
          }
        })
        .catch((res) => {
          console.log(res);

          this.$notify.error({
            title: "失败",
            message: res.data.errmsg,
          });
        });
    },
    confirmApplyBenefit() {
      this.$refs["applyBenefitForm"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "同步中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.5)",
          });
          addInterst(this.applyBenefitForm)
            .then((response) => {
              loading.close();
              this.$notify.success({
                title: "成功",
                message: "提交成功",
              });
              this.applyBenefitVisible = false;
              this.getList();
            })
            .catch((response) => {
              loading.close();
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg,
              });
            });
        } else {
          console.log("error submit!!");
        }
      });
    },
    handleApplyRefund(row) {
      this.applyRefundForm.orderId = row.id;
      this.applyRefundDialogVisible = true;
      if (row.refundAmount) {
        this.applyRefundForm.amount = (
          row.actualPrice - row.refundAmount
        ).toFixed(2);
        this.refundAmount = row.refundAmount;
      } else {
        this.applyRefundForm.amount = row.actualPrice;
      }
      this.applyRefundForm.refundSn = "";
      this.applyRefundForm.refundChannel = "";
      this.applyRefundForm.refundTime = "";
      this.applyRefundForm.reason = "";
      this.applyRefundForm.type = 0;

      this.actualPrice = row.actualPrice;
      this.$nextTick(() => {
        this.$refs["applyRefundForm"].clearValidate();
      });
    },
    confirmApplyRefund() {
      this.$refs["applyRefundForm"].validate((valid) => {
        if (valid) {
          let balance = (this.actualPrice - this.refundAmount).toFixed(2);
          console.log(balance);
          if (Number(this.applyRefundForm.amount) > balance) {
            this.$message.warning("申请退款金额不能大于未退款金额!");
          } else {
            applyRefundOrder(this.applyRefundForm)
              .then((response) => {
                this.applyRefundDialogVisible = false;
                this.$notify.success({
                  title: "成功",
                  message: "申请退款成功",
                });
                this.getList();
              })
              .catch((response) => {
                this.$notify.error({
                  title: "失败",
                  message: response.data.errmsg,
                });
              });
          }
        }
      });
    },
    handleImport() {
      this.importLoading = true;
      this.importForm.file = undefined;
    },
    handleAddRemark(row) {
      this.memoForm = {
        orderId: row.id,
        orderSn: row.orderSn,
        remindTime: "",
      };
      this.readMemo(row);
      this.memoDialogVisible = true;
    },
    confirmOrderMemo() {
      //保存订单备注
      this.$refs["memoForm"].validate((valid) => {
        if (valid) {
          createMemo(this.memoForm).then((res) => {
            this.memoDialogVisible = false;
            this.list.forEach((order) => {
              if (order.id == res.data.data.orderId) {
                order.orderMemo.push(res.data.data);
              }
            });
            this.$notify.success({
              title: "成功",
              message: "备注成功，点击详情可查看",
            });
          });
        }
      });
    },
    readMemo(row) {
      readMemo({ orderId: row.id }).then((res) => {
        this.orderMemo = res.data.data;
      });
    },
    handleRemind(isRemind) {
      if (isRemind) {
        this.memoForm.remindTime = formatDate(
          new Date(new Date().getTime() + 1 * 60 * 60 * 1000),
          "yyyy-MM-dd hh:mm:ss"
        );
        console.info(this.memoForm);
      } else {
        this.memoForm.remindTime = null;
      }
    },
    beforeUpload(file) {
      // this.files = file;
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!extension && !extension2) {
        this.$message.warning("上传模板只能是 xls、xlsx格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.warning("上传模板大小不能超过 5MB!");
        return;
      }
      this.importForm.filename = file.name;
      this.importForm.file = file;
      return false; // 返回false不会自动上传
    },
    confirmImport() {
      // 确定上传
      console.info(this.importForm);
      var formData = new FormData();
      formData.append("file", this.importForm.file);
      formData.append("channelId", this.importForm.channelId);

      var config = {
        headers: { "Content-Type": "multipart/form-data" },
      };

      importOrder(formData, config).then((res) => {
      });
    },
    printOrder() {
      if (this.$print != undefined) {
        this.$print(this.$refs.print);
        this.orderDialogVisible = false;
      }
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "客户手机",
          "订单编号",
          "下单时间",
          "服务商品",
          "收货人联系方式",
          "上门地址",
          "城市",
          "订单状态",
          "支付编号",
          "支付金额",
          "支付时间",
          "众安订单号",
        ];
        const filterVal = [
          "customer.tel",
          "orderSn",
          "createTime",
          "goods.goodsName",
          "mobile",
          "address",
          "city",
          "orderStatus",
          "payId",
          "actualPrice",
          "payTime",
          "zhongAnOrderSn"
        ];
        var lists = [];
        if (this.list && this.list.length > 0) {
          for (let i = 0; i < this.list.length; i++) {
            var order = this.list[i];
            order.city = this.cityFilter(order.address);
            order.orderStatus = statusMap[order.orderStatus];
            lists.push(order);
          }
          console.info(lists);
        }
        excel.export_json_to_excel2(tHeader, lists, filterVal, "订单");
        this.downloadLoading = false;
      });
    },
    orderInput() {
      this.orderInputVisible = true;
      this.handleAreaChange();
      this.orderInputForm = {
        customerName: "",
        tel: "",
        area: "",
        addressDetail: "",
        goodsId: "",
        orderChannel: "",
        payId: "",
        orderPrice: "",
        message: "",
        areaCode: "",
        province: "",
        city: "",
        county: "",
        productId: ''
      };
    },

    handleUpdateAreaChange(value) {
      console.log(value);
      let node = this.$refs["cascader"].getCheckedNodes();
      console.log(node);
      if (node.length > 0) {
        console.log(node[0].path, node[0].pathLabels);
        this.orderInputForm.areaCode = node[0].path[2];
        this.orderInputForm.province = node[0].pathLabels[0];
        this.orderInputForm.city = node[0].pathLabels[1];
        this.orderInputForm.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.orderInputForm.area = "";
          return false;
        }

      }
    },
    confirmInputOrder() {
      this.$refs["orderInputForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确定要保存吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            const loading = this.$loading({
              lock: true,
              text: "提交中...",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.5)",
            });
            orderCreate({
              addressDto: {
                addressDetail: this.orderInputForm.addressDetail,
                areaCode: this.orderInputForm.areaCode,
                city: this.orderInputForm.city,
                county: this.orderInputForm.county,
                province: this.orderInputForm.province,
              },
              customerName: this.orderInputForm.customerName,
              goodsId: this.orderInputForm.goodsId,
              productId: this.orderInputForm.productId,
              message: this.orderInputForm.message,
              orderChannel: this.orderInputForm.orderChannel,
              orderPrice: this.orderInputForm.orderPrice,
              tel: this.orderInputForm.tel,
              payId: this.orderInputForm.payId,
              payTime: this.orderInputForm.payTime,
              payChannel: this.orderInputForm.payChannel,
              orderType: this.orderInputForm.orderType,

            })
              .then((response) => {
                loading.close();
                this.orderInputVisible = false;
                this.$notify.success({
                  title: "成功",
                  message: "录入成功",
                });
                this.getList();
              })
              .catch((response) => {
                loading.close();
                this.$notify.error({
                  title: "录入失败",
                  message: response.data.errmsg,
                });
              });
          });
        }
      });
    },
    handleAreaChange(value) {
      // if (this.orderInputForm.orderChannel == '') {
      //   this.$notify.error({
      //     title: "请选择订单渠道",
      //   });
      //   return;
      // }
      // console.log(value);
      // console.log(this.orderInputForm.area == "");
      // let node = this.$refs["cascader"].getCheckedNodes();
      // console.log(node);
      // if (node.length > 0) {
      //   console.log(node[0].path, node[0].pathLabels);
      //   this.orderInputForm.areaCode = node[0].path[2];
      //   this.orderInputForm.province = node[0].pathLabels[0];
      //   this.orderInputForm.city = node[0].pathLabels[1];
      //   this.orderInputForm.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] != "苏州市" &&
      //     node[0].pathLabels[0] != "南京市" &&
      //     node[0].pathLabels[0] != "成都市"
      //   ) {
      //     this.$notify.error({
      //       title: "请选择具体区域",
      //     });
      //     this.orderInputForm.area = "";
      //     return false;
      //   }
      //   let ctname = node[0].pathLabels[1];
      //   if (ctname == '市辖区') {
      //     ctname = node[0].pathLabels[0];
      //   }
      getAllGoods().then((response) => {
        this.goodsList = response.data.data;
        this.orderInputForm.goodsId = "";
      })
        .catch((response) => {
          this.$notify.error({
            title: "获取商品失败",
            message: response.data.errmsg,
          });
        });
      // }
    },
    updateOrderAddress(row) {
      // if (row.address == null || row.address == '') {
      //   this.$notify.error({
      //     title: "提醒",
      //     message: "请先补全客户地址，然后再预约",
      //   });
      //   return;
      // }

      // this.updateAddressVisible = true;
      // this.updateOrderInfo = row;
      // this.updateAddressForm = {
      //   area: '',
      //   addressDetail: (row.address.split(' '))[1],
      //   cancelBookOrderDetail: '',
      //   consignee: row.consignee,
      //   mobile: row.mobile
      // };
      let location = [];
      if (row.position && row.position.length > 6)
        location = row.position.split(',');

      this.$refs.addressSelectRef.init(row.id, row.mobile, row.consignee, row.address, location);
    },
    confirmUpdateAddress() {
      this.$refs["updateAddressForm"].validate((valid) => {
        if (valid) {
          // this.$confirm("确定要修改吗?", "提示", {
          //   confirmButtonText: "确定",
          //   cancelButtonText: "取消",
          //   type: "warning",
          // }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: "提交中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.5)",
          });
          //             {
          //   "addressDto": {
          //     "addressDetail": "string",
          //     "areaCode": "string",
          //     "city": "string",
          //     "county": "string",
          //     "lat": "string",
          //     "lng": "string",
          //     "name": "string",
          //     "province": "string",
          //     "shopId": 0,
          //     "tel": "string",
          //     "userId": 0
          //   },
          //   "cancelBookOrderDetail": 0,
          //   "orderId": 0
          // }
          updateOrderAddress({
            addressDto: {
              addressDetail: this.updateAddressForm.addressDetail,
              areaCode: this.updateAddressForm.areaCode,
              city: this.updateAddressForm.city,
              county: this.updateAddressForm.county,
              province: this.updateAddressForm.province,
              name: this.updateAddressForm.consignee,
              tel: this.updateAddressForm.mobile
            },
            orderId: this.updateOrderInfo.id,
            cancelBookOrderDetail: this.updateAddressForm.cancelBookOrderDetail,
            // customerName: this.orderInputForm.customerName,
            // goodsId: this.orderInputForm.goodsId,
            // message: this.orderInputForm.message,
            // orderChannel: this.orderInputForm.orderChannel,
            // orderPrice: this.orderInputForm.orderPrice,
            // tel: this.orderInputForm.tel,
            // payId: this.orderInputForm.payId,
            // payTime: this.orderInputForm.payTime,
            // payChannel: this.orderInputForm.payChannel,
            // orderType: this.orderInputForm.orderType,
          })
            .then((response) => {
              loading.close();
              this.updateAddressVisible = false;
              this.$notify.success({
                title: "成功",
                message: "修改成功",
              });
              this.getList();
            })
            .catch((response) => {
              loading.close();
              this.$notify.error({
                title: "修改失败",
                message: response.data.errmsg,
              });
            });
          // });
        }
      });
    },
    handleUpdateAreaChange1(value) {
      console.log(value);
      console.log(this.updateAddressForm.area == "");
      let node = this.$refs["cascader1"].getCheckedNodes();
      console.log(node);
      if (node.length > 0) {
        console.log(node[0].path, node[0].pathLabels);
        this.updateAddressForm.areaCode = node[0].path[2];
        this.updateAddressForm.province = node[0].pathLabels[0];
        this.updateAddressForm.city = node[0].pathLabels[1];
        this.updateAddressForm.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.updateAddressForm.area = "";
          return false;
        }

      }
    },
    tableRowClassName({ row, index }) {
      if (row.status == 5 || row.status == 6) {
        return "";
      } else if (row.status == 1) {
        return "waiting";
      } else if (row.status == 2) {
        return "processing";
      } else if (row.status == 3 || row.status == 4) {
        return "completed";
      } else if (row.status == 0)
        return "nobook";
      return "accept";//待接单
    },
    handleAddOrderRemind(row) {
      this.orderRemindDialogVisible = true;
      this.orderRemindForm.orderId = row.id;
      this.orderRemindForm.remind = '';
      this.orderRemindForm.type = 1;
    },
    confirmOrderRemind() {
      this.$refs['orderRemindForm'].validate((valid) => {
        if (valid) {
          addOrderRemind(this.orderRemindForm).then(res => {
            this.orderRemindDialogVisible = false;
            this.$message.success('添加提醒完成')
          })
        }
      })
    },
    addToUnlock(row) {
      let params = {
        orderId: row.id,
        orderChannel: row.orderChannel,
        operType: row.couponLockState
      }
      addToUnlock(params).then(res => {
        this.$message.success(res.data.errmsg)
        this.getList()
      }).catch(res => {
        this.$message.error(res.data.errmsg)
      })
    }
  },
};
</script>
<style>
.pagination-container {
  margin-top: 0px;
  padding: 5px 16px !important;
}

.el-table .accept {
  background-color: #cc5858;
}

.el-table .completed {
  background-color: #999;
}

.el-table .waiting {
  background-color: #73bfec;
}

.el-table .nobook {
  background-color: #bebbbb;
}

.el-table .cancel {
  background-color: #bebbbb;
}

.el-table .processing {
  background-color: rgb(169 201 234);
}


.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: 20px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  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;
}

.el-button+.el-button {
  margin-left: 0px;
}

.el-table colgroup.gutter {
  display: table-cell !important;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.color-danger {
  color: #f56c6c;
  font-size: 18px;
}

.color-rebuy {
  color: #09afff;
  font-size: 18px;
}

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

.fixed-width .el-button--mini {
  width: auto;
  min-width: 60px;
}

.el-step.is-center .el-step__description {
  padding-left: 18%;
  padding-right: 18%;
}

.el-table th.gutter {
  display: table-cell !important;
}

.el-icon-copy-document {
  margin-left: 5px;
  color: #46a6ff;
  cursor: pointer;
}
</style>
