<template>
  <div>
    <div class="table-header table-div el-scrollbar styleTime">
      <ListLayout :table-columns="tableColumns">
        <div slot="search" 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="请输入公司名称"
                  clearable
                  @keyup.enter.native="getByPage"
                />
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="page.params.type"
                  filterable
                  placeholder="消费类型"
                >
                  <el-option value="1" label="已消费" />
                  <el-option value="0" label="未消费" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <gl-date-time-picker
                  timeFrame="60"
                  v-model="page.params.btw_createTime"
                  msg="创建时间"
                  @keyup.enter.native="getByPage"
                />
              </el-form-item>
            </el-form>
          </el-collapse-transition>
          <!-- 搜索部分结束 -->
        </div>

        <div slot="button-group">
          <el-row style="margin-top: 5px">
            <el-col :span="16" style="text-align:left">
              <el-button class="group-item" :size="$store.getters.size" type="primary" @click="toOutPut">
                <svg-icon icon-class="icondaochu" /> 导出
              </el-button>
            </el-col>
            <el-col :span="8">
              <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 = {type:'1'}"
                >重置
              </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="listLoading"
            stripe
            fit
            row-key="companyId"
            :expand-row-keys="expands"
            :data="dataPage.list"
            :max-height="tableHeight"
            style="width: 100%"
            :size="$store.getters.size"
            @sort-change="sortHandler"
            @selection-change="handleSelectionChange"
            @row-click="clickRowHandle"
            @expand-change="expandSelect"
          > 
          <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-col :span="9" style="font-size: initial;">
                <el-form-item>
                </el-form-item>
              </el-col>
              <el-col :span="9" style="display:flex;flex-direction: column">
                <el-form-item label="充值金额">
                  <span> {{scope.row.rechargeBalance|balanceType}} </span>
                </el-form-item>
                <el-form-item label="赊销金额">
                  <span> {{scope.row.chargeRechargeBalance|balanceType}}</span>
                </el-form-item>
                <el-form-item label="消返金额">
                  <span>{{scope.row.consumeRebateBalance|balanceType}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="display:flex;flex-direction: column">
                <el-form-item label="累计充值金额">
                  <span> {{dataListChild.czje?dataListChild.czje:'0.00'}} </span>
                </el-form-item>
                <el-form-item label="累计赊销金额">
                  <span> {{dataListChild.sxje?dataListChild.sxje:'0.00'}}</span>
                </el-form-item>
                <el-form-item label="累计消返金额">
                  <span>{{dataListChild.xfje?dataListChild.xfje:'0.00'}}</span>
                </el-form-item>
              </el-col>
            </el-form>
            <!-- <div>
              <div class="rowBalance">
                <div></div>
                <div>
                  <span>充值金额</span>
                  <span>1</span>
                </div>
                <div>
                  <span>累计充值金额</span>
                  <span>2</span>
                </div>
              </div>
              <div class="rowBalance">
                <div></div>
                <div>
                  <span>赊销金额</span>
                  <span>3</span>
                </div>
                <div>
                  <span>累计赊销金额</span>
                  <span>4</span>
                </div>
              </div>
              <div class="rowBalance">
                <div></div>
                <div>
                  <span>充返金额</span>
                  <span>5</span>
                </div>
                <div>
                  <span>累计充返金额</span>
                  <span>6</span>
                </div>
              </div>
              <div class="rowBalance">
                <div></div>
                <div>
                  <span>消返金额</span>
                  <span>7</span>
                </div>
                <div>
                  <span>累计消返金额</span>
                  <span>8</span>
                </div>
              </div>
            </div> -->
          </template>
        </el-table-column>
            <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>
          <!-- 列表结束 -->

          <!-- 分页组件开始 -->
          <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-dialog v-el-drag-dialog title="导出" :visible.sync="outPutDialog" width="20%">
        <OilSiteOilsPriceOutput :page="page" :dataPage="dataPage" v-if="outPutDialog"
          :multipleSelection="multipleSelection" @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-dialog>
      <!-- 详情抽屉 -->
      <el-drawer
        title="详情"
        :with-header="false"
        class="table-detail-drawer"
        :visible.sync="showTableDrawer"
        size="70%"
        direction="ltr"
      >
        详情抽屉
      </el-drawer>
    </div>
  </div>
</template>
<script>
import tyApi from "@/api/finance/ty";
import AreaCodeApi from "@/api/base/areaCode";
import OrderRefund from "@/api/finance/oilCompanyAccount";
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 { mapGetters } from "vuex";
import OilSiteOilsPriceOutput from "./OilSiteOilsPriceOutput.vue";
import api from "@/api/statisticalReport/companyConsumptionStatistics";
export default {
  filters:{
    balanceType(val){
      if(val||val==0){
        return val
      }else{
        return '--'
      }
    }
  },
  components: {
    OilSiteOilsPriceOutput
  },
  data() {
    return {
      dataListChild:{
        // czje:0,
        // sxje:0,
        // cfje:0,
        // xfje:0
      },
      // 获取row的key值
      getRowKeys(row) {
        return row.companyId;
      },
      // 要展开的行，数值的元素是row的key值
      expands: [],
      listLoading:false,
      output: {
        outputType: 4, // 导出方式，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: {
          type : '1',
          btw_createTime:
            `${new Date( Date.parse(new Date()) - 2592000000).getFullYear()}-${new Date(Date.parse(new Date()) - 2592000000).getMonth()+1}-${new Date(Date.parse(new Date()) - 2592000000).getDate() + 1} 00:00:00~${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()} 00:00:00` ,
        }, // 查询参数
        sorted: {
          balance: "desc",
        },
        columns: [],
      },
      tableHeight: "",
      filters: this.$options.filters,
      dataPage: {
        // 分页显示page
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {
          // 查询参数
        },
        sorted: {},
      },
      tableColumns: [
        {
          prop: "orderSerialNumber",
          minWidth: 216,
          sortable: "custom",
          label: "企业名称",
          show: true,
          render: (row, column, cell) => {
            // 订单号查询
            return (
              <div>
                <div>{row.companyName||'--'}</div>
                <div>{row.companyId || "暂无数据"}</div>
              </div>
            );
          },
        },
        {
          prop: "balance",
          minWidth: 200,
          sortable: "custom",
          label: "当前企业余额",
          show: true,
          render: (row, column, cell) => {
            return (
              <div>
                <div class="column-info-container">
                  <span>{Number(row.balance).toFixed(2)}</span>
                </div>
              </div>
            );
          },
        },
        {
          prop: "payRealAmount",
          minWidth: 120,
          sortable: "custom",
          label: "累计消费金额",
          show: true,
          render: (row, column, cell) => {
            return (
              <div class="column-info-container">
                {Number(row.payRealAmount).toFixed(2)}
              </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: "一点加油",
      },
    };
  },
  computed: {
    ...mapGetters(["sysUserList", "markData"]),
    addrCode: {
      get() {
        const arr = [];
        arr[0] = this.page.params.provinceCode;
        arr[1] = this.page.params.cityCode;
        arr[2] = this.page.params.areaCode;
        return arr;
      },
      set(val) {
        this.page.params.provinceCode = val[0];
        this.page.params.cityCode = val[1];
        this.page.params.areaCode = val[2];
      },
    },
  },
  watch: {
    "page.params.btw_createTime":{
      handler(n) {
      let time = n.split("~") || [];
      if (time.length !== 0) {
        this.page.params["dateStartTime"] = time[0];
        this.page.params["dateEndTime"] = time[1];
      } else {
        delete this.page.params["dateStartTime"];
        delete this.page.params["dateEndTime"];
      }
    },
    immediate:true
    },
    tableHeight(newValue, oldValue) {
      this.tableHeight = document.documentElement.clientHeight - 350;
    },
  },
  created() {
    this.getByPage();
    this.getHeight();
    // 增加监听事件，窗口变化时得到高度。
    window.addEventListener("resize", this.getHeight, false);
    AreaCodeApi.getTree().then((res) => {
      this.areaTree = res.data;
    });
  },
  methods: {
    expandSelect(row, expandedRows) {
        console.log('expandedRows', expandedRows)
        // console.log('row', row)
        var that = this
        if (expandedRows.length) {
          that.expands = []
          if (row) {
            let data = {
              companyId: row.companyId,
              dateStartTime: this.page.params["dateStartTime"],
              dateEndTime: this.page.params["dateEndTime"]
            }
            api.getAccountTypeByCompanyId(data).then( res =>{
              if(res.data){      
                this.dataListChild = res.data
              }
            })
            that.expands.push(row.companyId)// 每次push进去的是每行的ID
          }
        } else {
          that.expands = []// 默认不展开
        }
        // console.log('that.expands', that.expands)
      },
    clickRowHandle(row, column, event) {
      let data = {
        companyId: row.companyId,
        dateStartTime: this.page.params["dateStartTime"],
        dateEndTime: this.page.params["dateEndTime"]
      }
      api.getAccountTypeByCompanyId(data).then( res =>{
        if(res.data){      
          this.dataListChild = res.data
        }
      console.log(res.data,'aaaaaaaaaaaaaaaaaaaaaaaaaaa')

      })
      console.log(row, this.expands,this.dataListChild,'ssssssssssssssssssssss')
        if (this.expands.includes(row.companyId)) {
          this.expands = this.expands.filter(val => val !== row.companyId);
        } else {
          this.expands = []
          this.expands.push(row.companyId);
        
      }
     
    },
    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.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.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() {
      // 导出数据
      // orderInfoApi.exportDispatchWeb().then(res=>{
      //   console.log(res,'outputData')
      // });
      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 orderInfoApi.getByPage(searchParam);
        tmpData = res.data.list;
      } else if (status === 4) {
        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;
        searchParam.params.payAccountType = 0;
        console.time();
        orderInfoApi.exportDispatchWeb(searchParam).then((res) => {
          this.tableHeight = this.tableHeight + this.sHeight;
          // console.log("123")
          // console.log(res)
          const link = document.createElement("a");
          // 创建Blob对象，设置文件类型
          const blob = new Blob([res], { type: "application/vnd.ns-excel" }); // MIME类型
          link.href = URL.createObjectURL(blob); // 创建URL
          link.setAttribute("download", decodeURI(Date.now() + ".xlsx")); // 设置下载文件名称
          link.click(); // 下载文件
          document.body.appendChild(link);
          console.timeEnd();
          this.$message.success("导出成功");
          URL.revokeObjectURL(link.href); // 释放内存
        });
      } 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'
      //   })
      // })
    },
    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() {
      // 获取浏览器高度并计算得到表格所用高度。
      this.tableHeight =
        document.documentElement.clientHeight - 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.listLoading = true
      this.addDialog = false;
      this.page.params.eq_payAccountType = 0;
      api.getStatisticalReportByPage(this.page).then((res) => {
        this.dataPage = res.data;
        this.page.totalCount = this.dataPage.totalCount;
        this.page.totalPage = this.dataPage.totalPage;
      this.listLoading = false
      }).catch(err=>{
        this.listLoading = false
      })
      // 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.outPutDialog = false; // 导出弹窗
      this.orderTfDialog = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: auto;
  }
  .demo-table-expand .el-form-item__label{
    color: #999;
    width: auto;
  }
}
>>> .foot-page {
  margin-top: 0px !important;
}
.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>
/* >>> .el-table{
    display: flex !important;
    flex-direction: column !important;
} */
.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; */
}
.rowBalance{
  display: flex;
}
</style>
