<template>
  <div>
    <div class="table-header table-div el-scrollbar styleTime">
      <ListLayout :table-columns="tableColumns">
        <div slot="search" ref="searchHeight" style="margin-top: 5px">
          <!--这里放顶部搜索-->
          <el-collapse-transition>
            <!-- 搜索部分开始 -->
            <el-form v-show="showSearch" label-width="90px" :inline="true" :model="page" class="search-form"
              :size="$store.getters.size">
              <!-- <el-form-item>
                <el-input v-model="page.params.companyName" placeholder="请输入公司名称/ID检索" clearable
                  @keyup.enter.native="getByPage" />
              </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.id }}--{{ item.userName }}--{{ item.phone }}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="page.params.siteName" placeholder="请输入油站名称" clearable
                  @keyup.enter.native="getByPage" />
              </el-form-item>
              <el-form-item>
                <el-select v-model="page.params.siteCode" placeholder="油站渠道" clearable>
                  <el-option value="XOIL" 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-input v-model="page.params.orderSerialNumber" placeholder="输入订单号准确搜索" clearable
                  @keyup.enter.native="getByPage" />
              </el-form-item>
              <el-form-item>
                <gl-date-time-picker v-model="page.params.btw_createTime" msg="创建时间" @keyup.enter.native="getByPage" />
              </el-form-item>
              <el-form-item>
                <el-input v-model="page.params.plateNumber" placeholder="请输入车牌号" clearable />
              </el-form-item>
            </el-form>
          </el-collapse-transition>

          <!-- 搜索部分结束 -->
        </div>

        <div slot="button-group">
          <el-row style="margin-top: 5px">
            <el-col :span="24">
              <!-- <el-button
                type="text"
                :size="$store.getters.size"
                :icon="showSearch?'el-icon-arrow-up':'el-icon-arrow-down'"
                @click="showSearch = !showSearch"
              >{{ showStatistic?'隐藏搜索':'展开搜索' }}</el-button> -->
              <!-- <el-button
                type="text"
                :size="$store.getters.size"
                :icon="showStatistic?'el-icon-arrow-up':'el-icon-arrow-down'"
                @click="showStatistic = !showStatistic"
              >{{ showStatistic?'折叠':'展开' }}</el-button> -->
              <el-button class="group-item" :size="$store.getters.size" type="primary" @click="toOutPut">
                <svg-icon icon-class="icondaochu" /> 导出
              </el-button>
              <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="page.params = {}">重置</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-collapse-transition>
                <div v-show="showStatistic" 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="(item, index) in totalChannelData" :key="index" class="right-item">
                        <div class="pie-table">
                          <ripple-chart :chart-id="item.type" :title="sites[item.type]" :chart-color="pieColors[index]"
                            :percent="item.percent" />
                        </div>
                        <div class="statis-info">
                          <div class="info-item">{{ sites[item.type] }}</div>
                          <div class="info-item">
                            订单总数：{{ item.totalCount }}单
                          </div>
                          <div class="info-item">
                            订单总金额：{{ item.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>

        <div slot="table">
          <!--这里放表格和分页-->
          <!-- 列表开始 -->
          <el-table v-loading="tableLoading" stripe :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="180px">
              <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="toUpdate(scope.row.id)"
                    >
                      <el-button
                        :size="$store.getters.size"
                        type="text"
                      ><svg-icon icon-class="iconicon-" /> 编辑</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 != 'TY' &&
                        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' ||
                          scope.row.payChannel ==
                          'YIBAO_WECHAT_MINIAPPS_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>

                    <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>
                <el-button v-if="
                  scope.row.orderType == 'REAL_ORDER' &&
                  scope.row.orderStatus == 0 &&
                  scope.row.payChannel == 'SYB_WECHAT_MINIAPPS_PAYMENT'
                " :size="$store.getters.size" icon="el-icon-refresh-right" type="text"
                  @click="ManualCheck(scope.row.orderSerialNumber)" />
              </template>
            </el-table-column>
          </el-table>
          <!-- 列表结束 -->

          <!-- 分页组件开始 -->
          <div class="page-div">
            <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>
          <!-- 分页组件结束 -->
        </div>
      </ListLayout>

      <!-- 补单弹窗 -->
      <el-drawer v-el-drag-dialog 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 v-el-drag-dialog 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 v-el-drag-dialog direction="ltr" title="订单匹配" :visible.sync="orderTfDialog" size="60%">
        <OrderTfAdd v-if="orderTfDialog" @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-drawer>

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

      <el-dialog v-el-drag-dialog title="导出" :visible.sync="outPutDialog" width="20%">
        <el-form label-width="75px" size="small">
          <el-row>
            <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="导出全部" :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" :span="12">
              <el-form-item label="开始页">
                <el-input v-model="output.startPage" />
              </el-form-item>
            </el-col>
            <el-col v-if="output.outputType === 3" :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 :loading="outputDataLoading" type="primary" @click="outputData">导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>

      <!-- 导入弹窗 -->
      <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">
        <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 payOrderApi from "@/api/pay/payOrder";
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 { mapGetters } from "vuex";
import { object } from "bfj/src/events";
export default {
  components: {
    OrderInfoAdd,
    OrderTfAdd,
    OrderInfoUpdate,
    OrderInfoInfo,
    OrderInfoImport,
    OrderInfoSupplement,
    OrderInfoZeYiSupplement,
    rippleChart,
  },

  data() {
    return {
      outputDataLoading: false,
      output: {
        outputType: 1, // 导出方式，1导出选中，2导出本页，3条件导出，4导出全部
        startPage: 1, // 导出开始页
        endPage: 1, // 导出结束页
        pageSize: 10, // 每页条数
      },
      tableLoading: false,
      siteList: [],
      multipleSelection: [], // 选择表格数据集合
      importDialog: false, // 导入弹窗
      outPutDialog: false, // 导出弹窗
      showTableDrawer: false,
      page: {
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {
          // 查询参数
          orderStatus: "", // 订单状态
          siteName: "", // 油站名称
          siteCode: "", // 渠道编码
          customerId: "", // 司机编号
          orderSerialNumber: "", // 订单流水号
          plateNumber: "", // 车牌号
          dateStartTime: "", // 开始时间
          dateStartEnd: "", // 结束时间
        }, // 查询参数
        sorted: {
          // createTime: "desc",
        },
        columns: [],
      },
      tableHeight: 0,
      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.userName || '暂无'}
                    -
                    { row.phone || '暂无'}
                  </div>
                  <div
                    v-show={row.payAccountType === 1}
                    class="column-info-content-item"
                  >
                    {row.companyInfo && 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: 250,
          sortable: "custom",
          label: "油站",
          show: true,
          render: (row, column, cell) => {
            return (
              <div class="column-info-container">
                <div class="column-info-content">
                  <div class="column-info-content-item">
                    {row.siteLevel} - {" "}
                    { row.siteName
                      ? row.siteName
                      : "暂无"}
                    -
                    { row.id ? row.id : "暂无"}
                  </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.toFixed(2)}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: "orderTime",
          minWidth: 160,
          sortable: "custom",
          label: "订单时间",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "orderSource",
          minWidth: 180,
          label: "来源/支付方式",
          show: true,
          render: (row, column, cell) => {
            
            let cellName;
            let payChannelName;
            switch(Number(cell)?Number(cell):null){
              case 0:
              cellName = '待支付'
              break;
              case 1:
              cellName = '已支付'
              break;
              case -1:
              cellName = '支付失败'
              break;
              case 2:
              cellName = '已取消'
              break;
              case 3:
              cellName = '已退款'
              break;
              case 4:
              cellName = '退款中'
              break;
              case 5:
              cellName = '退款失败'
              break;
              default : cellName = '暂无数据'

            }
            switch(row.payChannel?row.payChannel:null){
              case 'BALANCE_PAYMENT':
              payChannelName = '余额支付'
              break;
              case 'WECHAT_MINIAPPS_PAYMENT':
              payChannelName = '微信小程序支付'
              break;
              case 'YIBAO_WECHAT_MINIAPPS_PAYMENT':
              payChannelName = '易宝支付'
              break;
              default : payChannelName = '暂无数据' 
            }
            return (
              <div>
                <div>
                  来源：
                  { this.markData.ORDER_SOURCE[cell] }
                </div>
                <div>
                  支付：
                  {payChannelName}
                </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: [
        "id",
        "oilCustomerInfo.customerId",
        "oilCustomerInfo.name",
        "plateNumber",
        "createTime",
        "orderStatusText",
        "siteId",
        "siteInfo.siteName",
        "siteInfo.provinceName",
        "siteInfo.cityName",
        "oilsBar",
        "floorPrice",
        "sitePrice",
        "realPrice",
        "volume",
        "settlementPriceAmount",
        "realPriceAmount",
        "siteUser",
        "couponMark",
        "settlementScaleAmount",
        "oilsCode",
        "payTime",
        "orderSerialNumber",
        "updateTime",
        "payAccountTypeText",
        "companyInfo.name",
        "otherOrderId",
        "convertRelationOrderId",
        "suppleRemak",
      ],
      headers: [
        "订单编号",
        "司机编号",
        "司机姓名",
        "车牌号",
        "创建时间",
        "状态",
        "油站编号",
        "油站名称",
        "油站所在省",
        "油站所在市",
        "油枪号",
        "底价",
        "单价",
        "实际单价",
        "体积",
        "金额",
        "实际金额",
        "油站工作人员号",
        "券",
        "打折率",
        "油品类型",
        "支付时间",
        "流水号",
        "修改时间",
        "账户类型",
        "公司名称",
        "三方订单编号",
        "企业订单号",
        "备注",
      ],
    };
  },
  computed: {
    ...mapGetters(["sysUserList", "markData"]),
  },
  // watch: {
  //   tableHeight(newValue, oldValue) {
  //     this.tableHeight = document.documentElement.clientHeight - 300 - 60 - 60;
  //   },
  // },
  created() {
    this.getByPage();
    // 增加监听事件，窗口变化时得到高度。
    this.getHeight();
    window.addEventListener("resize", this.getHeight, false);
  },
  methods: {
    RefundToBalance(row) {
      // 退款到余额
      console.log(row.id);
      OrderRefund.RefundToAccount(row.id).then((res) => {
        console.log(res);
        this.getByPage();
      });
    },
    ManualCheck(row) {
      console.log(row);
      payOrderApi.CheckList(row).then((res) => {
        if (res.code === 20000) {
          this.search();
        }
        console.log(res);
      });
    },
    searchUserInfo(info) {
      if (info && info !== "") {
        sysCustomerInfoApi.liekQuery(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.accountCardCode = null;
      orderInfoApi.updateC(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() {
      this.outputDataLoading = true;
      try {
        // 导出数据
        let tmpData = [];
        const status = this.output.outputType;
        if (status === 1) {
          tmpData = this.multipleSelection;
        } else if (status === 2) {
          tmpData = this.dataPage.list;
        } else if (status === 3) {
          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;
          const res = await this.asGetByPage(searchParam);
          console.log(res, "条件导出数据");
          // debugger
          tmpData = res;
        } else {
          const cs = await orderInfoApi.getCount();
          const dataCount = cs.data;
          const searchParam = {
            currentPage: 1,
            pageSize: dataCount,
          };
          const res = await orderInfoApi.getByPage(searchParam);
          tmpData = res.data.list;
        }
        const orderStatusObj = {
          0: "待支付",
          1: "已支付",
          "-1": "支付失败",
          2: "已取消",
          3: "已退款",
        };
        const payAccountTypeObj = {
          0: "个人账户",
          1: "企业账户",
        };
        tmpData.forEach((e) => {
          const orderStatus = e.orderStatus;
          e.orderStatusText = orderStatusObj[orderStatus + ""];
          const payAccountType = e.payAccountType;
          e.payAccountTypeText = payAccountTypeObj[payAccountType + ""];
        });
        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.outputDataLoading = false;
        });
      } catch (error) {
        this.outputDataLoading = false;
      }
    },
    async asGetByPage(searchParam) {
      let copysearchParam = JSON.parse(JSON.stringify(searchParam));
      let array = [];
      if (searchParam.pageSize > 2000) {
        this.$message.warning("数据较多清稍等");
        let a = Math.ceil(searchParam.pageSize / 2000);
        for (let i = 0; i < a; i++) {
          let res = await orderInfoApi.getByPage(
            Object.assign(copysearchParam, {
              currentPage: i + 1,
              pageSize: 2000,
            })
          );
          array = array.concat(res.data.list);
        }
      } else {
        let res = await orderInfoApi.getByPage(searchParam);
        array = res.data.list;
      }
      array.length > searchParam.pageSize
        ? (array.length = searchParam.pageSize)
        : array;
      return array;
    },
    handleDetail(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() {
      setTimeout(() => {
        this.sHeight = this.$refs.searchHeight.offsetHeight;
        let fixedHeaderHeight =
          document.querySelector(".fixed-header").clientHeight;
        let elPaginationHeight =
          document.querySelector(".el-pagination").clientHeight;
        this.tableHeight =
          document.documentElement.clientHeight -
          this.sHeight -
          fixedHeaderHeight -
          elPaginationHeight -
          160;
      }, 350);
    },
    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) {
      // 排序查询
      console.log(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) {
      // 团油退款
      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) {
      // 星油退款
      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();
          });
        }
      });
    },
    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(() => {
        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();
          });
        }
      });
    },
    toCancelOrder(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(() => {
        oilSiteInfoApi.cancelOrder(row.id).then((res) => {
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    // 微信退款
    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;
          }
        });
      });
    },
    toDelete(id) {
      // 删除
      this.$confirm("确定删除?", "提示", { type: "error" }).then(() => {
        orderInfoApi.deleteById(id).then((res) => {
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    getByPage() {
      // 分页查询
      this.addDialog = false;
      this.page.params.eq_payAccountType = 0;
      if(this.page.params.btw_createTime){
          let time = this.page.params.btw_createTime.split('~')
          this.page.params['dateStartTime'] = time[0];
          this.page.params['dateStartEnd'] = time[1];
        }else{
          this.page.params['dateStartTime'] = ''
          this.page.params['dateStartEnd'] = ''
        }
      orderInfoApi.getPersonByPage(this.page).then((res) => {
        console.log(res.data, "pppppppppppppppppp");
        this.dataPage = res.data;
        this.page.totalCount = this.dataPage.totalCount;
        this.page.totalPage = this.dataPage.totalPage;
      });
      // this.getStatisticData()
    },
    getStatisticData() {
      // 查询统计信息
      orderInfoApi.statisticOrderTotalData(this.page).then((res) => {
        this.totalData = res.data ? res.data : {};
      });
      orderInfoApi.statisticOrderTotalDataByType(this.page).then((res) => {
        this.totalTypeData = res.data;
      });
      orderInfoApi.statisticOrderTotalDataByChannel(this.page).then((res) => {
        this.totalChannelData = res.data;
      });
    },
    closeDialog() {
      this.addDialog = false;
      this.updateDialog = false;
      this.supplementDialog = false;
      this.supplementZeYiDialog = false;
      this.orderTfDialog = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.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>
.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;
}
</style>
<style>
.styleTime .el-date-editor {
  width: 424px !important;
}

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

.group-item {
  float: left;
}
</style>
