<template>
  <div>
    <newListLayout
      :isShow="{
        seachZoom: true,
        listDetails: true,
      }"
      v-model="tableHeight"
    >
      <!-- 搜索框 start -->
      <div slot="seach">
        <el-form
          :style="{ maxHeight: showSearch ? '' : '52px' }"
          label-width="90px"
          :inline="true"
          :model="page"
          class="search-form"
          :size="$store.getters.size"
        >
          <el-form-item>
            <el-select
              v-model="page.params.companyId"
              placeholder="请输入公司名称/ID检索"
              clearable
              filterable
              remote
              reserve-keyword
              :remote-method="searchCompanyInfo"
            >
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="page.params.customerId"
              filterable
              remote
              reserve-keyword
              clearable
              placeholder="请输入司机编号/姓名/手机号码"
              :remote-method="searchUserInfo"
            >
              <el-option
                v-for="item in sysCustomerList"
                :key="item.id"
                :label="item.userName"
                :value="item.id"
              >
                {{ item.phone }} ( {{ item.userName }} - {{ item.userCode }})
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="page.params.siteName"
              placeholder="请输入油站名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="page.params.channelCode"
              placeholder="油站渠道"
              clearable
            >
              <el-option value="XOIL" label="星油" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="page.params.oilProductType"
              placeholder="油品类型"
              clearable
            >
              <el-option value="DIESEL" label="柴油" />
              <el-option value="GAS" label="天然气" />
              <el-option value="PETROL" label="汽油" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="page.params.secondChannelCode"
              filterable
              clearable
              placeholder="二级所属渠道"
            >
              <el-option value="QP" label="壳牌" />
              <el-option value="SQ" label="上汽" />
              <el-option value="GDQP" label="广东壳牌" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="page.params.orderStatus"
              placeholder="订单状态"
              clearable
            >
              <el-option label="支付失败" :value="-1" />
              <el-option label="支付中" :value="0" />
              <el-option label="支付成功" :value="1" />
              <el-option label="已取消" :value="2" />
              <el-option label="已退款" :value="3" />
              <el-option label="退款中" :value="4" />
              <el-option label="退款失败" :value="5" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-radio-group v-model="payAccountType_t">
              <el-radio-button :label="2">
                <svg
                  t="1629252270571"
                  style="transform: scale(1.8); margin-right: 2px"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1219"
                  width="10"
                  height="10"
                >
                  <path
                    d="M416 192v224H192V192h224m32-64H160c-17.67 0-32 14.33-32 32v288c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32V160c0-17.67-14.33-32-32-32zM832 192v224H608V192h224m32-64H576c-17.67 0-32 14.33-32 32v288c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32V160c0-17.67-14.33-32-32-32zM416 608v224H192V608h224m32-64H160c-17.67 0-32 14.33-32 32v288c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32V576c0-17.67-14.33-32-32-32zM832 608v224H608V608h224m32-64H576c-17.67 0-32 14.33-32 32v288c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32V576c0-17.67-14.33-32-32-32z"
                    p-id="1220"
                    :fill="payAccountType_t != 2 ? '#87888B' : '#fff'"
                  />
                </svg>
                <span>全部账户</span>
              </el-radio-button>
              <el-radio-button :label="0">
                <svg-icon icon-class="iconsiji1" /> 个人账户
              </el-radio-button>
              <el-radio-button :label="1">
                <svg-icon icon-class="icongongsi-" /> 企业账户
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="page.params.orderSerialNumber"
              placeholder="输入订单号/ID准确搜索"
              clearable
              @keyup.enter.native="getByPage"
            />
          </el-form-item>
          <el-form-item>
            <gl-date-time-picker
              v-model="page.params.createTime"
              msg="创建时间"
              @keyup.enter.native="getByPage"
            />
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="page.params.siteBrand"
              placeholder="油站所属品牌"
              clearable
              @keyup.enter.native="getByPage"
            >
              <el-option label="中国石油" :value="1" />
              <el-option label="中国石化" :value="2" />
              <el-option label="壳牌" :value="3" />
              <el-option label="民营" :value="4" />
              <el-option label="中海油" :value="5" />
              <el-option label="京博" :value="6" />
              <el-option label="中化石油" :value="7" />
              <el-option label="其他" :value="8" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="page.params.plateNumber"
              placeholder="请输入车牌号"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <!-- 搜索框 end -->
      <!-- 左边按钮区 start -->
      <div slot="seachbutten_left">
        <el-row style="margin-top: 5px">
          <el-col :span="12" class="tal">
            <el-button
              class="group-item"
              :size="$store.getters.size"
              type="primary"
              @click="toSupplement"
            >
              <svg-icon icon-class="iconxinzeng" /> 星油补单
            </el-button>

            <el-button
              class="group-item"
              :size="$store.getters.size"
              type="primary"
              @click="toSupplementZeYi"
            >
              <svg-icon icon-class="iconxinzeng" /> 三方补单
            </el-button>
            <el-button
              class="group-item"
              :size="$store.getters.size"
              type="primary"
              @click="toOutPut"
            >
              <svg-icon icon-class="icondaochu" /> 导出
            </el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 左边按钮区 end -->
      <!-- 右边按钮区 start -->
      <div slot="seachbutten_right">
        <el-row>
          <el-button
            type="primary"
            :size="$store.getters.size"
            icon="el-icon-search"
            @click="search"
            >查询</el-button
          >
          <el-button
            :size="$store.getters.size"
            icon="el-icon-refresh"
            type="info"
            @click="resetting"
            >重置</el-button
          >
        </el-row>
      </div>
      <!-- 右边按钮区 end -->
      <!-- 列表详情 start -->
      <div slot="listDetails">
        <el-row>
          <el-col :span="24" :offset="0">
            <el-collapse-transition>
              <div ref="showmore" class="statistic-container">
                <div class="statictic-item">
                  <div class="left-count">
                    <div class="text">订单总数</div>
                    <div class="count">
                      {{ totalData.totalCount | numSplit }}
                    </div>
                  </div>
                  <div class="right-container">
                    <div
                      v-for="(ele, index) in totalChannelData"
                      :key="index"
                      class="right-item"
                    >
                      <div class="pie-table">
                        <ripple-chart
                          :chart-id="ele.type"
                          :title="sites[ele.type]"
                          :chart-color="pieColors[index]"
                          :percent="ele.percent"
                        />
                      </div>
                      <div class="statis-info">
                        <div class="info-item">{{ sites[ele.type] }}</div>
                        <div class="info-item">
                          订单总数：{{ ele.totalCount }}单
                        </div>
                        <div class="info-item">
                          订单总金额：{{ ele.totalMoney }}￥
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="statictic-item">
                  <div class="left-count">
                    <div class="text">订单总金额</div>
                    <div class="count">
                      {{ totalData.totalMoney | numSplit }}
                    </div>
                  </div>
                  <div class="right-container">
                    <div
                      v-for="(item, index) in totalTypeData"
                      :key="index"
                      class="right-item"
                    >
                      <div class="pie-table">
                        <ripple-chart
                          :chart-id="item.type"
                          :title="item.type === '1' ? '企业' : '个人'"
                          :chart-color="pieColors[index]"
                          :percent="item.percent"
                        />
                      </div>
                      <div class="statis-info">
                        <div class="info-item">
                          {{ item.type === "1" ? "企业" : "个人" }}
                        </div>
                        <div class="info-item">
                          订单总数：{{ item.totalCount }}单
                        </div>
                        <div class="info-item">
                          订单总金额：{{ item.totalMoney }}￥
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </el-col>
        </el-row>
      </div>
      <!-- 列表详情 end -->
      <!-- 表格 start -->
      <div slot="list">
        <el-table
          stripe
          v-loading="tableLoading"
          :data="dataPage.list"
          fit
          :max-height="tableHeight"
          style="width: 100%"
          :size="$store.getters.size"
          @sort-change="sortHandler"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" type="index" :index="indexMethod" />
          <template v-for="(item, index) in tableColumns">
            <el-table-column
              v-if="item.show"
              :key="index"
              :fixed="item.fixed"
              :align="item.align"
              :header-align="item.headerAlign"
              :show-overflow-tooltip="true"
              :min-width="item.minWidth"
              :width="item.width"
              :prop="item.prop"
              :sortable="item.sortable"
              :label="item.label"
              :formatter="item.render"
            />
          </template>

          <el-table-column fixed="right" label="操作" width="150px">
            <template slot-scope="scope">
              <el-button
                :size="$store.getters.size"
                type="text"
                @click="handleDetail(scope.row.id)"
              >
                <svg-icon icon-class="iconxiangqing1" /> 详情
              </el-button>
              <el-dropdown>
                <el-button type="text">
                  更多<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu
                  v-if="scope.row.payChannel === 'SXF_WECHAT_MINIAPPS_PAYMENT'"
                  slot="dropdown"
                >
                  <el-dropdown-item @click.native="wechartRefund(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType === 'REAL_ORDER' &&
                        [1, 5].indexOf(scope.row.orderStatus) !== -1
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconback" />
                      微信原路退回
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>

                <el-dropdown-menu v-else slot="dropdown">
                  <el-dropdown-item @click.native="toCancelSf(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType == 'REAL_ORDER' &&
                        scope.row.orderStatus == 2 &&
                        scope.row.createSource == 'SHUNFENG' &&
                        (scope.row.payChannel == 'BALANCE_PAYMENT' ||
                          scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' ||
                          scope.row.payChannel == 'WECHAT_APP_PAYMENT')
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconlajitong" />
                      顺丰取消
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="toRefund(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType == 'REAL_ORDER' &&
                        scope.row.orderStatus == 1 &&
                        scope.row.createSource != 'ZEYI' &&
                        scope.row.createSource != 'FUYOU' &&
                        scope.row.createSource != 'TY' &&
                        scope.row.createSource != 'SHUNFENG' &&
                        scope.row.createSource != 'WJY' &&
                        scope.row.createSource != 'QIAOPAI' &&
                        scope.row.createSource != 'RIRISHUN' &&
                        (scope.row.payChannel == 'BALANCE_PAYMENT' ||
                          scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' ||
                          scope.row.payChannel == 'WECHAT_APP_PAYMENT')
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconlajitong" />
                      星油退款
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="toRefundFY(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType == 'REAL_ORDER' &&
                        scope.row.orderStatus == 1 &&
                        scope.row.createSource == 'FUYOU' &&
                        (scope.row.payChannel == 'BALANCE_PAYMENT' ||
                          scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' ||
                          scope.row.payChannel == 'WECHAT_APP_PAYMENT')
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconlajitong" />
                      福佑退款
                    </el-button>
                  </el-dropdown-item>
                  <!-- //顺丰退款 -->
                  <el-dropdown-item @click.native="toRefundSf(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType == 'REAL_ORDER' &&
                        scope.row.orderStatus == 1 &&
                        scope.row.createSource == 'SHUNFENG' &&
                        (scope.row.payChannel == 'BALANCE_PAYMENT' ||
                          scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' ||
                          scope.row.payChannel == 'WECHAT_APP_PAYMENT')
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconlajitong" />
                      顺丰退款
                    </el-button>
                  </el-dropdown-item>
                  <!-- 退款 + 通联  -->
                  <el-dropdown-item @click.native="toTongLianRefund(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType == 'REAL_ORDER' &&
                        scope.row.orderStatus == 1 &&
                        scope.row.createSource != 'ZEYI' &&
                        scope.row.createSource != 'TY' &&
                        scope.row.createSource != 'WJY' &&
                        scope.row.payChannel == 'SYB_WECHAT_MINIAPPS_PAYMENT'
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconlajitong" />
                      通联退款
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="RefundToBalance(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType == 'REAL_ORDER' &&
                        scope.row.orderStatus == 1 &&
                        scope.row.createSource != 'ZEYI' &&
                        scope.row.createSource != 'TY' &&
                        scope.row.createSource != 'WJY' &&
                        scope.row.payChannel == 'SYB_WECHAT_MINIAPPS_PAYMENT'
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconlajitong" />
                      退款到余额
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="RefundToBalance(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType == 'REAL_ORDER' &&
                        scope.row.orderStatus == 1 &&
                        scope.row.createSource != 'ZEYI' &&
                        scope.row.createSource != 'TY' &&
                        scope.row.createSource != 'WJY' &&
                        (scope.row.payChannel == 'WECHAT_MINIAPPS_PAYMENT' ||
                          scope.row.payChannel == 'WECHAT_APP_PAYMENT')
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconlajitong" />
                      微信退款到余额
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="toCancelOrder(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType == 'REAL_ORDER' &&
                        scope.row.orderStatus == 1 &&
                        scope.row.createSource === 'ZEYI' &&
                        scope.row.payChannel == 'BALANCE_PAYMENT' &&
                        scope.row.suppleMark == 0
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconlajitong" />
                      则一退款
                    </el-button>
                  </el-dropdown-item>
                  <!-- end -->

                  <el-dropdown-item @click.native="toTYRefund(scope.row)">
                    <el-button
                      v-if="
                        scope.row.orderType == 'REAL_ORDER' &&
                        scope.row.orderStatus == 1 &&
                        scope.row.createSource === 'TY' &&
                        scope.row.payChannel == 'BALANCE_PAYMENT' &&
                        scope.row.suppleMark == 0
                      "
                      :size="$store.getters.size"
                      type="text"
                    >
                      <svg-icon icon-class="iconlajitong" />
                      团油退款
                    </el-button>
                  </el-dropdown-item>

                  <el-dropdown-item @click.native="toDelete(scope.row.id)">
                    <!-- <el-button
                        :size="$store.getters.size"
                        type="text"
                      ><svg-icon icon-class="iconlajitong" /> 删除</el-button> -->
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表详情 end -->
      <!-- 分页底部 start -->
      <div slot="footerPage">
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- 分页底部 end -->
    </newListLayout>
    <div>
      <el-drawer direction="ltr" :visible.sync="supplementDialog" size="60%">
        <div slot="title" class="supplement-header">
          <div class="icon">
            <img
              src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/other/2021-4/a1eddda6dfde405a9a40da30af96eda5.png"
              alt=""
            />
          </div>
          <div>补单</div>
        </div>
        <OrderInfoSupplement
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-drawer>
      <!-- 则一补单弹窗 -->
      <el-drawer
        direction="ltr"
        :visible.sync="supplementZeYiDialog"
        size="60%"
      >
        <div slot="title" class="supplement-header">
          <div class="icon">
            <img
              src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/other/2021-4/a1eddda6dfde405a9a40da30af96eda5.png"
              alt=""
            />
          </div>
          <div>三方补单</div>
        </div>
        <OrderInfoZeYiSupplement
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-drawer>

      <!-- 添加弹窗 -->
      <el-dialog
        v-el-drag-dialog
        title="添加"
        :visible.sync="addDialog"
        width="55%"
      >
        <OrderInfoAdd @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-dialog>

      <!-- 订单匹配弹窗 -->
      <el-drawer
        direction="ltr"
        title="订单匹配"
        :visible.sync="orderTfDialog"
        size="60%"
      >
        <OrderTfAdd @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-drawer>

      <el-drawer
        title="导出"
        :visible.sync="outPutDialog"
        width="20%"
        size="40%"
        direction="ltr"
      >
        <el-form label-width="75px" size="small">
          <el-row class="box_daochu">
            <el-col :span="24">
              <el-form-item label="导出方式">
                <el-select v-model="output.outputType" style="width: 100%">
                  <el-option label="导出选中" :value="1" />
                  <el-option label="导出本页" :value="2" />
                  <el-option label="条件导出" :value="3" />
                  <el-option label="eseyExcel条件导出" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="output.outputType !== 4">
                <div style="color: red">
                  <span v-if="output.outputType === 1"
                    >当前选中数据 {{ multipleSelection.length }} 条</span
                  >
                  <span v-if="output.outputType === 2"
                    >本页数据 {{ dataPage.list.length }} 条</span
                  >
                  <span v-if="output.outputType === 3"
                    >条件导出将直接使用页面搜索条件进行数据过滤</span
                  >
                </div>
              </el-form-item>
            </el-col>
            <el-col
              v-if="output.outputType === 3 || output.outputType === 4"
              :span="12"
            >
              <el-form-item label="开始页">
                <el-input v-model="output.startPage" />
              </el-form-item>
            </el-col>
            <el-col
              v-if="output.outputType === 3 || output.outputType === 4"
              :span="12"
            >
              <el-form-item label="结束页">
                <el-input v-model="output.endPage" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="outputData">导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-drawer>

      <!-- 导入弹窗 -->
      <el-dialog
        v-el-drag-dialog
        title="导入"
        :visible.sync="importDialog"
        width="55%"
      >
        <OrderInfoImport @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-dialog>

      <!-- 修改弹窗 -->
      <el-dialog
        v-el-drag-dialog
        title="修改"
        :visible.sync="updateDialog"
        width="55%"
      >
        <OrderInfoUpdate
          :order-info="orderInfo"
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-dialog>

      <!-- 详情抽屉 -->
      <el-drawer
        title="详情"
        :with-header="false"
        class="table-detail-drawer"
        :visible.sync="showTableDrawer"
        size="70%"
        direction="ltr"
        destroy-on-close
      >
        <OrderInfoInfo :order-info="orderInfo" />
      </el-drawer>
    </div>
  </div>
</template>
<script>
import tyApi from "@/api/finance/ty";
import OrderRefund from "@/api/finance/oilCompanyAccount";
import OrderTfAdd from "./OrderTfAdd";
import orderInfoApi from "@/api/order/orderInfo";
import sysCustomerInfoApi from "@/api/user/sysCustomerInfo";
import oilSiteInfoApi from "@/api/user/oilSiteInfo";
import OrderInfoAdd from "./OrderInfoAdd";
import OrderInfoUpdate from "./OrderInfoUpdate";
import OrderInfoInfo from "./OrderInfoInfo";
import OrderInfoImport from "./OrderInfoImport";
import OrderInfoSupplement from "./OrderInfoSupplement";
import OrderInfoZeYiSupplement from "./OrderInfoZeYiSupplement";
import rippleChart from "@/views/dashboard/admin/components/RippleChart";
import openTicketApi from "@/api/finance/openTicketApi";
import oilCompanyInfoApi from "@/api/user/oilCompanyInfo";
import newListLayout from "@/components/newListLayout/index/index";
import { mapGetters } from "vuex";
export default {
  components: {
    newListLayout,
    OrderInfoAdd,
    OrderTfAdd,
    OrderInfoUpdate,
    OrderInfoInfo,
    OrderInfoImport,
    OrderInfoSupplement,
    OrderInfoZeYiSupplement,
    rippleChart,
  },
  data() {
    return {
      payAccountType_t: 2,
      companyList: [],
      tableLoading: false,
      sHeight: "",
      moreHeight: 260,
      orderFlag: false,
      output: {
        outputType: 1, // 导出方式，1导出选中，2导出本页，3条件导出，4导出全部
        startPage: 1, // 导出开始页
        endPage: 1, // 导出结束页
        pageSize: 15, // 每页条数
      },
      siteList: [],
      multipleSelection: [], // 选择表格数据集合
      importDialog: false, // 导入弹窗
      outPutDialog: false, // 导出弹窗
      showTableDrawer: false,
      page: {
        pageSize: 15, // 每页显示条数
        currentPage: 1, // 默认页
        params: {}, // 查询参数
        sorted: {
          createTime: "desc",
        },
        columns: [],
      },
      tableHeight: "",
      filters: this.$options.filters,
      dataPage: {
        // 分页显示page
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {
          // 查询参数
        },
        sorted: {},
      },
      tableColumns: [
        {
          prop: "orderSerialNumber",
          minWidth: 250,
          sortable: "custom",
          label: "订单号",
          show: true,
          render: (row, column, cell) => {
            // 订单号查询
            return (
              <div>
                <div>
                  <el-button
                    on-click={() => this.handleDetailBySerialNumber(cell)}
                    type="text"
                  >
                    ID:{row.id}
                  </el-button>
                </div>
                <div>
                  <el-button
                    on-click={() => this.handleDetailBySerialNumber(cell)}
                    type="text"
                  >
                    订单号：{cell}
                  </el-button>
                </div>
              </div>
            );
          },
        },
        {
          prop: "customerId",
          minWidth: 200,
          sortable: "custom",
          label: "司机信息",
          show: true,
          render: (row, column, cell) => {
            return (
              <div class="column-info-container">
                <div class="column-info-icon">
                  <svg-icon
                    v-show={row.payAccountType === 0}
                    icon-class="iconsiji1"
                  />
                  <svg-icon
                    v-show={row.payAccountType === 1}
                    icon-class="icongongsi-"
                  />
                </div>
                <div class="column-info-content">
                  <div class="column-info-content-item">
                    {row.oilCustomerInfo.name
                      ? row.oilCustomerInfo.name
                      : "暂无"}
                    -
                    {row.oilCustomerInfo.phone
                      ? row.oilCustomerInfo.phone
                      : "暂无"}
                  </div>
                  <div
                    v-show={row.payAccountType === 1}
                    class="column-info-content-item"
                  >
                    {row.companyInfo.name ? row.companyInfo.name : "暂无"}
                  </div>
                  <div class="column-info-content-item" v-show={!row.editor}>
                    <span>{row.plateNumber}</span>
                    <el-button
                      on-click={() =>
                        this.changeEditor(row, row.orderSerialNumber)
                      }
                      type="text"
                    >
                      <svg-icon
                        style="width: 15px;height:15px;"
                        icon-class="iconxiugai"
                      />
                    </el-button>
                  </div>
                  <div class="column-info-content-item" v-show={row.editor}>
                    <el-input
                      ref={row.orderSerialNumber}
                      on-blur={() => this.changeRowPlate(row)}
                      size="mini"
                      v-model={row.plateNumber}
                      clearable
                    />
                  </div>
                </div>
              </div>
            );
          },
        },
        // { prop: 'siteId', minWidth: 200, headerAlign: 'center', sortable: 'custom', label: '油卡信息', show: true, render: (row, column, cell) => {
        //   // <div class='column-info-content-item'>油卡余额：{row.oilCustomerInfo.plateNumber}</div>
        //   return <div class='column-info-container'>
        //     <div class='column-info-icon'>
        //       <el-tag size='small' v-show={row.oilCardNature === 1} effect='plain' type='success'>个人</el-tag>
        //       <el-tag size='small' v-show={row.oilCardNature === 2} effect='plain' type='primary'>直营</el-tag>
        //       <el-tag size='small' v-show={row.oilCardNature === 3} effect='plain' type='danger'>外请</el-tag>
        //     </div>
        //     <div class='column-info-content'>
        //       <div class='column-info-content-item'>{row.companyInfo.name}</div>
        //       <div class='column-info-content-item'>卡号：{row.oilCustomerInfo.phone}</div>
        //     </div>
        //   </div>
        // } },
        {
          prop: "siteId",
          minWidth: 250,
          sortable: "custom",
          label: "油站",
          show: true,
          render: (row, column, cell) => {
            return (
              <div class="column-info-container">
                <div class="column-info-icon">
                  <img
                    style="width: 30px; height: 30px"
                    src={
                      "https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/site-" +
                      row.channelCode +
                      ".png"
                    }
                  />
                </div>
                <div class="column-info-content">
                  <div class="column-info-content-item">
                    {" "}
                    {row.siteLevel} - {row.siteInfo.siteName}-{row.siteInfo.id}
                  </div>
                  <div>
                    <span style="color: red;font-size=16px;margin-right: 10px;font-weight:bold">
                      {row.oilProductType === "GAS"
                        ? "天然气"
                        : row.oilProductType === "PETROL"
                        ? "汽油"
                        : "柴油"}
                      /{row.oilsCode}
                    </span>
                    <span>
                      {row.realPrice}￥/
                      {row.oilProductType === "GAS" ? "KG" : "L"}
                    </span>
                  </div>
                  <div>
                    <div>
                      {row.volume.toFixed(2)}
                      {row.oilProductType === "GAS" ? "KG" : "L"}/
                      {row.payRealAmount}￥
                    </div>
                  </div>
                </div>
              </div>
            );
          },
        },
        {
          prop: "orderStatus",
          minWidth: 120,
          sortable: "custom",
          label: "订单状态",
          show: true,
          render: (row, column, cell) => {
            if (cell === -1) {
              return <el-tag type="danger">支付失败</el-tag>;
            } else if (cell === 0) {
              return <el-tag type="primary">支付中</el-tag>;
            } else if (cell === 1) {
              return <el-tag type="success">支付成功</el-tag>;
            } else if (cell === 2) {
              return (
                <el-tag type="info" minWidth="80">
                  已取消
                </el-tag>
              );
            } else if (cell === 3) {
              return (
                <el-tag type="info" minWidth="80">
                  已退款
                </el-tag>
              );
            } else if (cell === 4) {
              return (
                <el-tag type="info" minWidth="80">
                  退款中
                </el-tag>
              );
            } else if (cell === 5) {
              return (
                <el-tag type="info" minWidth="80">
                  退款失败
                </el-tag>
              );
            } else {
              return cell;
            }
          },
        },
        // { prop: 'siteBrand', minWidth: 80, sortable: 'custom', label: '油站所属品牌', show: true, render: (row, column, cell) => {
        //   if (cell === 1) {
        //     return '中国石油'
        //   }
        //   if (cell === 2) {
        //     return '审核通过'
        //   }
        //   if (cell === 3) {
        //     return '壳牌'
        //   }
        //   if (cell === 4) {
        //     return '民营'
        //   }
        //   if (cell === 5) {
        //     return '中海油'
        //   }
        //   if (cell === 6) {
        //     return '京博'
        //   }
        //   if (cell === 7) {
        //     return '中化石油'
        //   }
        //   if (cell === 8) {
        //     return '其他'
        //   }
        //   return cell
        // } },
        // { prop: 'realAmount', minWidth: 150, sortable: 'custom', label: '油品/升数/金额', show: true, render: (row, column, cell) => {
        //   return <div>
        //     <div>
        //       <span style='color: red;font-size=16px;margin-right: 10px;font-weight:bold'>{row.oilsCode}</span>
        //       <span>{row.realPrice} ￥/L</span>
        //     </div>
        //     <div>
        //       <div>{row.volume}L/{row.payRealAmount}￥</div>
        //     </div>
        //   </div>
        // } },
        {
          prop: "createTime",
          minWidth: 160,
          sortable: "custom",
          label: "创建时间",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "orderSource",
          minWidth: 180,
          label: "来源/支付方式",
          show: true,
          render: (row, column, cell) => {
            var oilCardNatureName = "";
            if (row.oilCardNature === 2) {
              oilCardNatureName = "自营油卡";
            }
            if (row.oilCardNature === 3) {
              oilCardNatureName = "外请油卡";
            }
            return (
              <div>
                <div>来源：{this.markData.ORDER_SOURCE[cell]}</div>
                <div>
                  支付：{oilCardNatureName ? oilCardNatureName + "/" : ""}
                  {this.markData.PAY_CHANNEL[row.payChannel]}
                </div>
              </div>
            );
          },
        },
      ],
      updateDialog: false, // 修改弹窗
      supplementDialog: false, // 补单
      supplementZeYiDialog: false, // 则一补单
      orderTfDialog: false, // 订单匹配
      orderInfo: {},
      showStatistic: false, // 是否展示统计信息
      showSearch: true, // 是否展示统计信息
      totalData: {}, // 总金额和总订单数
      totalTypeData: [], // 个人和企业统计信息
      totalChannelData: [], // 渠道统计信息
      sysCustomerList: [], // 用户集合
      pieColors: [
        // 饼图颜色
        "#fe6b45",
        "#ff2e3b",
        "#fe6a46",
        "#5ed65e",
      ],
      sites: {
        XOIL: "星油",
        WJY: "万金油",
        LV: "老吕",
        TY: "团油",
        YDJY: "一点加油",
      },
      valColumn: [
        "createTime",
        "siteInfo.siteName",
        "sitePrice",
        "realPrice",
        "volume",
        "sitePriceAmount",
        "payRealAmount",
        "siteLevel",
        "channelCode",
        "oilsCode",
        "orderStatus",
        "companyInfo.name",
        "oilCustomerInfo.customerId",
        "oilCustomerInfo.name",
        "plateNumber",
        "payAccountType",
        "siteId",
        "provinceName",
        "cityName",
        "oilsBar",
        "payTime",
        "updateTime",
        "id",
        "orderSerialNumber",
        "otherOrderId",
        "suppleRemak",
      ],
      headers: [
        "创建时间",
        "油站名称",
        "油站单价",
        "实际单价",
        "体积",
        "油站计算金额",
        "实际支付金额",
        "油站等级",
        "渠道名称",
        "油品类型",
        "订单状态",
        "公司名称",
        "司机编号",
        "司机姓名",
        "车牌号",
        "账户类型",
        "油站编号",
        "油站所在省",
        "油站所在市区",
        "油枪号",
        "支付时间",
        "修改时间",
        "订单编号",
        "流水号",
        "三方订单编号",
        "补单说明",
      ],
    };
  },
  computed: {
    ...mapGetters(["sysUserList", "markData"]),
  },
  watch: {
    tableHeight(newValue, oldValue) {
      console.log(newValue, "-----------");
      // this.tableHeight = document.documentElement.clientHeight - 300 - 60 - 60
    },
  },
  created() {
    this.getByPage();
    // this.getHeight()
    // 增加监听事件，窗口变化时得到高度。
    // window.addEventListener('resize', this.getHeight, false)
  },
  mounted() {
    // this.sHeight = this.$refs.searchHeight.offsetHeight
  },
  methods: {
    Sfpush() {
      //顺丰订单补推
      let data = {
        startTime: "2021-12-15 00:00:00",
        endTime: "2021-12-15 23:59:59",
      };
      oilSiteInfoApi.handPushOrderToShunFeng(data).then((res) => {
        console.log(res);
      });
    },
    toRefundFY(row) {
      console.log(row.id);
      // 通联退款
      this.$confirm(
        `
      您确定要对该福佑订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

        "提示",
        { type: "info", dangerouslyUseHTMLString: true }
      ).then(() => {
        let obj = {
          id: row.id,
        };
        orderInfoApi.refundFY(obj).then((res) => {
          console.log(res);
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    RefundToBalance(row) {
      // 退款到余额
      console.log(row.id);
      OrderRefund.RefundToAccount(row.id).then((res) => {
        console.log(res);
        this.getByPage();
      });
    },
    resetting() {
      this.page.params = {};
      this.payAccountType_t = "";
    },
    searchCompanyInfo(info) {
      const oilSiteInfo = {};
      oilSiteInfo.name = info;
      if (info && info !== "") {
        oilCompanyInfoApi.getLikeByNameOrId(oilSiteInfo).then((res) => {
          this.companyList = res.data;
        });
      }
    },
    // 微信退款
    wechartRefund(row) {
      this.$confirm(
        `
      您确定要对该订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,
        "提示",
        { type: "info", dangerouslyUseHTMLString: true }
      ).then(() => {
        this.tableLoading = true;
        OrderRefund.wechatPayRefund({
          orderNum: row.orderSerialNumber,
        }).then((res) => {
          try {
            if (res.code === 20000) {
              this.$message.success("退款已发起，请稍后刷新列表查看");
              this.getByPage();
            } else {
              this.$message.error(res.msg);
            }
          } finally {
            this.tableLoading = false;
          }
        });
      });
    },
    showSearchs() {
      console.log(this.showSearch);
      if (this.showSearch) {
        this.showSearch = false;
        this.tableHeight = this.tableHeight + this.sHeight;
      } else {
        this.showSearch = true;
        this.tableHeight = this.tableHeight - this.sHeight;
      }
    },
    showStatistics() {
      console.log(this.moreHeight, "this.moreHeight");
      if (this.showStatistic) {
        this.moreHeight = this.$refs.showmore.offsetHeight;
        console.log(this.showStatistic, " 为true时");
        this.showStatistic = false;
        this.tableHeight = this.tableHeight + this.moreHeight;
        console.log(this.tableHeight, " this.tableHeight");
      } else {
        console.log(this.showStatistic, " 为false时");
        this.showStatistic = true;
        this.tableHeight = this.tableHeight - this.moreHeight;
        console.log(this.tableHeight, " this.tableHeight changee");
      }
    },
    searchUserInfo(info) {
      if (info && info !== "") {
        sysCustomerInfoApi.searchInfo(info).then((res) => {
          this.sysCustomerList = res.data;
        });
      }
    },
    // 远程搜索主油站
    getSimpleOilSiteInfo(siteName) {
      if (siteName) {
        const oilSiteInfo = {};
        oilSiteInfo.siteName = siteName;
        oilSiteInfoApi.getSimpleOilSiteInfo(oilSiteInfo).then((res) => {
          this.siteList = res.data;
        });
      } else {
        this.sites = [];
      }
    },
    indexMethod(index) {
      return (index + 1) * 1;
    },
    handleSelectionChange(val) {
      // 选择表格数据
      this.multipleSelection = val;
    },
    toForbid() {
      // 禁用
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message.error("请选择需要操作的数据");
        return;
      }
    },
    toStartUsing() {
      // 启用
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message.error("请选择需要操作的数据");
        return;
      }
    },
    changeEditor(row, r) {
      // 修改是否允许修改标识
      this.$set(row, "editor", true);
      this.$nextTick(() => {
        // console.log(this.$refs[r])
        this.$refs[r].focus();
      });
    },
    changeRowPlate(row) {
      // 修改车牌号
      // row.plateNumber = row.oilCustomerInfo.plateNumber
      row.accountCardCode = null;
      orderInfoApi.update(row).then((res) => {
        this.$message.success(res.msg);
        this.$set(row, "editor", false);
      });
    },
    toSupplement() {
      // 补单
      this.supplementDialog = true;
    },
    toSupplementZeYi() {
      // 则一补单
      this.supplementZeYiDialog = true;
    },
    toOrderTf() {
      // 订单匹配
      this.orderTfDialog = true;
    },
    toOutPut() {
      // 导出
      this.outPutDialog = true;
    },
    formatJson(filterVal, jsonData) {
      // 处理数据
      // console.log('filterVal：' + JSON.stringify(filterVal))
      // console.log('jsonData：' + JSON.stringify(jsonData))
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j.indexOf(".") < 0) {
            return v[j];
          }
          const keyArr = j.split(".");
          let data = v[keyArr[0]];
          for (var i = 1; i < keyArr.length; i++) {
            if (data) {
              data = data[keyArr[i]];
            }
          }
          return data;
        })
      );
    },
    async outputData() {
      // 导出数据
      let tmpData = [];
      const status = this.output.outputType;
      if (status === 1) {
        tmpData = this.multipleSelection;
        this.ImportExcel(tmpData);
      } else if (status === 3 || status === 2) {
        const endIndex =
          (parseInt(this.output.endPage) +
            1 -
            parseInt(this.output.startPage)) *
          parseInt(this.output.pageSize);
        const searchParam = { ...this.page };
        searchParam.pageSize = endIndex;
        searchParam.currentPage = this.output.startPage;
        searchParam.params.null_convertRelationOrderId = true;
        const res = await orderInfoApi.getByCustomPage(searchParam);
        tmpData = res.data.list;
        this.ImportExcel(tmpData);
      } else if (status === 4) {
        const searchParam = { ...this.page };
        searchParam.currentPage = this.output.startPage;
        searchParam.params.endPage = this.output.endPage;
        searchParam.params.null_convertRelationOrderId = true;
        orderInfoApi
          .export2Web(searchParam)
          .then((res) => {
            if (res.code === 20000) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        const cs = await orderInfoApi.getCount();
        const dataCount = cs.data;

        const searchParam = {
          currentPage: 1,
          pageSize: dataCount,
        };
        const res = await orderInfoApi.getByCustomPage(searchParam);
        tmpData = res.data.list;
        this.ImportExcel(tmpData);
      }
      this.outPutDialog = false;
    },
    ImportExcel(tmpData) {
      tmpData = tmpData.map((item) => {
        if (item["payAccountType"] === 0) {
          item["payAccountType"] = "个人账户支付";
        } else if (item["payAccountType"] === 1) {
          item["payAccountType"] = "企业账户支付";
        } else {
          item["payAccountType"] = "未识别";
        }
        if (item["orderStatus"] === 0) {
          item["orderStatus"] = "待支付";
        } else if (item["orderStatus"] === 1) {
          item["orderStatus"] = "已支付";
        } else if (item["orderStatus"] === 2) {
          item["orderStatus"] = "已取消";
        } else if (item["orderStatus"] === 3) {
          item["orderStatus"] = "已退款";
        } else if (item["orderStatus"] === -1) {
          item["orderStatus"] = "支付失败";
        } else {
          item["orderStatus"] = "未识别";
        }

        if (!item["suppleRemak"]) {
          item["suppleRemak"] = "暂无";
        }
        return item;
      });
      import("@/vendor/Export2Excel").then((excel) => {
        const data = this.formatJson(this.valColumn, tmpData);
        excel.export_json_to_excel({
          header: this.headers,
          data: data,
          autoWidth: true,
          bookType: "xlsx",
        });
        this.$message.success("导出成功");
      });
    },
    handleDetail(id) {
      // 查看行 详情
      console.log(id);
      orderInfoApi.getInfo(id).then((res) => {
        this.orderInfo = res.data;
        this.showTableDrawer = true;
      });
    },
    handleDetailBySerialNumber(id) {
      // 查看行 详情
      orderInfoApi.getInfoBySerialNumber(id).then((res) => {
        this.orderInfo = res.data;
        this.showTableDrawer = true;
      });
    },
    getHeight() {
      // 获取浏览器高度并计算得到表格所用高度。
      this.tableHeight =
        document.documentElement.clientHeight - 300 - 60 - 60 - 100;
      console.log(this.tableHeight);
      console.log(document.documentElement.clientHeight);
    },
    search() {
      // 搜索
      this.page.currentPage = 1;
      this.getByPage();
    },
    toggleSearchAdvance() {
      this.searchAdvice = !this.searchAdvice;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getByPage();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getByPage();
    },
    sortHandler(column) {
      // 排序查询
      const key = column.prop;
      const value = column.order;
      this.page.sorted = {};
      this.page.sorted[key] = value;
      this.getByPage();
    },
    toUpdate(id) {
      // 跳转到更新
      orderInfoApi.get(id).then((res) => {
        this.orderInfo = res.data;
        this.updateDialog = true;
      });
    },
    toTYRefund(row) {
      openTicketApi.shouldRefund(row.orderSerialNumber).then((res) => {
        console.log(res);
        if (
          res.msg ==
          "该笔订单有申请开票记录，请核实情况后再退款，是否继续退款。"
        ) {
          this.$confirm(res.msg, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$confirm(
                `
      您确定要对该团油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

                "提示",
                { type: "info", dangerouslyUseHTMLString: true }
              ).then(() => {
                tyApi.refund(row.id).then((res) => {
                  this.$message.success(res.msg);
                  this.getByPage();
                });
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消退款",
              });
            });
        } else if (res.code == 40000) {
          this.$message.error(res.msg);
        } else if (res.code == 20000) {
          this.$confirm(
            `
      您确定要对该团油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

            "提示",
            { type: "info", dangerouslyUseHTMLString: true }
          ).then(() => {
            tyApi.refund(row.id).then((res) => {
              this.$message.success(res.msg);
              this.getByPage();
            });
          });
        }
      });
      // 团油退款
    },
    toRefund(row) {
      // 星油退款
      console.log("测试");
      console.log(row);
      openTicketApi.shouldRefund(row.orderSerialNumber).then((res) => {
        console.log(res);
        if (
          res.msg ==
          "该笔订单有申请开票记录，请核实情况后再退款，是否继续退款。"
        ) {
          this.$confirm(res.msg, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$confirm(
                `
      您确定要对该星油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

                "提示",
                { type: "info", dangerouslyUseHTMLString: true }
              ).then(() => {
                if (row.openStatus == 1) {
                  orderInfoApi.refundByOpenStatus(row).then((res) => {
                    this.$message.success(res.msg);
                    this.getByPage();
                  });
                } else {
                  orderInfoApi.refund(row.id).then((res) => {
                    this.$message.success(res.msg);
                    this.getByPage();
                  });
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消退款",
              });
            });
        } else if (res.code == 40000) {
          this.$message.error(res.msg);
        } else if (res.code == 20000) {
          console.log("发起退款");
          this.$confirm(
            `
      您确定要对该星油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

            "提示",
            { type: "info", dangerouslyUseHTMLString: true }
          ).then(() => {
            if (row.openStatus == 1) {
              console.log(row);
              orderInfoApi.refundByOpenStatus(row).then((res) => {
                this.$message.success(res.msg);
                this.getByPage();
              });
            } else {
              orderInfoApi.refund(row.id).then((res) => {
                this.$message.success(res.msg);
                this.getByPage();
              });
            }
          });
        }
      });
    },
    toRefundSf(row) {
      console.log(row.id);
      // 通联退款
      this.$confirm(
        `
      您确定要对该顺丰订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

        "提示",
        { type: "info", dangerouslyUseHTMLString: true }
      ).then(() => {
        let obj = {
          id: row.id,
        };
        orderInfoApi.refundSf(obj).then((res) => {
          console.log(res);
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    toCancelSf(row) {
      //顺丰退款
      console.log(row.id);
      // 通联退款
      this.$confirm(
        `
      您确定要对该顺丰订单进行取消?当前取消人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        取消人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        取消金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

        "提示",
        { type: "info", dangerouslyUseHTMLString: true }
      ).then(() => {
        let obj = {
          id: row.id,
        };
        console.log("obj:", obj, "row:", row);
        orderInfoApi.toCancelSf(row.id).then((res) => {
          console.log(res);
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    toTongLianRefund(row) {
      console.log(row.id);
      // 通联退款
      this.$confirm(
        `
      您确定要对该星油订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

        "提示",
        { type: "info", dangerouslyUseHTMLString: true }
      ).then(() => {
        console.log(row);
        if (row.openStatus == 1) {
          orderInfoApi.refundByOpenStatus(row).then((res) => {
            this.$message.success(res.msg);
            this.getByPage();
          });
        } else {
          orderInfoApi.refund(row.id).then((res) => {
            this.$message.success(res.msg);
            this.getByPage();
          });
        }
      });
    },
    toCancelOrder(row) {
      openTicketApi.shouldRefund(row.orderSerialNumber).then((res) => {
        console.log(res);
        if (
          res.msg ==
          "该笔订单有申请开票记录，请核实情况后再退款，是否继续退款。"
        ) {
          this.$confirm(res.msg, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$confirm(
                `
      您确定要对该则一订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

                "提示",
                { type: "info", dangerouslyUseHTMLString: true }
              ).then(() => {
                oilSiteInfoApi.cancelOrder(row.id).then((res) => {
                  this.$message.success(res.msg);
                  this.getByPage();
                });
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消退款",
              });
            });
        } else if (res.code == 40000) {
          this.$message.error(res.msg);
        } else if (res.code == 20000) {
          this.$confirm(
            `
      您确定要对该则一订单进行退款?当前退款人为[<span style="color:red">${row.oilCustomerInfo.name}</span>]。<br/>
        退款人手机号[<span style="color: red">${row.oilCustomerInfo.phone}</span>]，
        退款金额[<span style="color: red">${row.payRealAmount}</span>]元<br/>
      `,

            "提示",
            { type: "info", dangerouslyUseHTMLString: true }
          ).then(() => {
            oilSiteInfoApi.cancelOrder(row.id).then((res) => {
              this.$message.success(res.msg);
              this.getByPage();
            });
          });
        }
      });

      // 则一退款
    },

    toDelete(id) {
      // 删除
      this.$confirm("确定删除?", "提示", { type: "error" }).then(() => {
        orderInfoApi.deleteById(id).then((res) => {
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    getByPage() {
      this.addDialog = false;

      if (this.page.params.orderStatus === "" && this.orderFlag) {
        delete this.page.params.orderStatus;
        console.log("删除订单标识");
      } else {
        this.orderFlag = true;
      }
      console.log("订单标识");
      console.log(this.orderFlag);
      if (
        this.page.params.createTime != null &&
        this.page.params.createTime != ""
      ) {
        this.page.params.createTime_start =
          this.page.params.createTime.split("~")[0];
        this.page.params.createTime_end =
          this.page.params.createTime.split("~")[1];
      }

      this.page.params.payAccountType = this.payAccountType_t;
      if (this.payAccountType_t == 2) {
        delete this.page.params.payAccountType;
      }
      if (
        this.page.params.orderStatus == "" &&
        this.page.params.orderStatus != 0
      ) {
        delete this.page.params.orderStatus;
      }

      orderInfoApi.getByCustomPage(this.page).then((res) => {
        this.dataPage = res.data;
        this.page.totalCount = this.dataPage.totalCount;
        this.page.totalPage = this.dataPage.totalPage;
        this.getStatisticData();
      });
    },
    async getStatisticData() {
      // 查询统计信息

      const res = await orderInfoApi.statisticOrderTotalData(this.page);
      this.totalData = res.data ? res.data : {};

      const res1 = await orderInfoApi.statisticOrderTotalDataByType(this.page);
      this.totalTypeData = res1.data;
      const res2 = await orderInfoApi.statisticOrderTotalDataByChannel(
        this.page
      );
      this.totalChannelData = res2.data;
    },
    closeDialog() {
      this.addDialog = false;
      this.updateDialog = false;
      this.supplementDialog = false;
      this.supplementZeYiDialog = false;
      this.orderTfDialog = false;
    },
  },
};
</script>
<style lang="scss" scoped>
>>> .foot-page {
  margin-top: 0 !important;
}

.felxLayout {
  display: flex;
  flex-direction: column;
}

.el-form {
  max-height: 300px;
  overflow: hidden;
  transition: 0.5s;
}

.statistic-container {
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: #3595f8;
  margin-top: 20px;
  color: #fff;

  .statictic-item {
    display: flex;
    height: 100px;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;

    .left-count {
      width: 16%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .count {
        font-size: 34px;
        font-weight: bold;
      }

      .text {
        font-size: 14px;
        margin-top: 5px;
      }
    }

    .right-container {
      width: 84%;
      height: 100%;
      display: flex;
      justify-content: start;
      align-items: center;

      .right-item {
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .pie-table {
          margin-right: 15px;
          background-color: #fff;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          color: #33334d;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .statis-info {
          font-size: 14px;
          font-weight: bold;
          display: flex;
          height: 100%;
          flex-direction: column;
          justify-content: space-evenly;
        }
      }
    }
  }
}
</style>
<style scoped>
.box_daochu {
  padding: 3%;
}

.column-info-container {
  display: flex;
  align-items: center;
}

.column-info-icon {
  color: #4988fd;
  margin-right: 10px;
}

.column-info-icon .icon {
  width: 20px;
  height: 20px;
}

.column-info-content {
  font-size: 12px;
}

.handle-button-group {
  margin-bottom: 10px;
}

.supplement-header {
  display: flex;
  line-height: 2.5rem;
  color: #000;
}

.supplement-header img {
  background-size: cover;
  width: 2.5rem;
  margin-right: 0.8rem;
}

.table-header /deep/ .table-list {
  /* max-height: 100% !important; */
}
</style>
