<template>
  <div class="app-container">
    <!-- <el-tabs v-model="orderType" @tab-click="getTableData">
      <el-tab-pane label="收款" name="1"></el-tab-pane>
      <el-tab-pane label="销量" name="2"></el-tab-pane>
    </el-tabs> -->
    <div class="head-container">
      <el-form :model="query" :inline="false" label-position="left">
        <el-form-item label="时间">
          <el-radio-group v-model="timeValue" @change="timeChange">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="0">今天</el-radio-button>
            <el-radio-button label="-1">昨天</el-radio-button>
            <el-radio-button label="-7">最近7天</el-radio-button>
            <el-radio-button label="-30">最近30天</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="custom">自定义</el-radio-button>
          </el-radio-group>
          <div class="u-m-l-10">
            <el-date-picker
              v-if="timeValue == 'custom'"
              style="width: 300px"
              v-model="query.createdAt"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="充值类型">
          <el-radio-group v-model="query.bizCode" @change="timeChange">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button
              :label="item"
              :value="index"
              v-for="(item, index) in bizCode"
              :key="index"
            ></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
          <!-- <el-button icon="download" v-loading="downloadLoading" @click="downloadHandle">
            <span v-if="!downloadLoading">导出Excel</span>
            <span v-else>下载中...</span>
          </el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="head-container">
      <div class="collect_wrap">
        <div class="item" v-for="item in payCountList" :key="item.id">
          <div class="icon_wrap" style="--bg-color:#C978EE">
            <i class="icon" :class="item.icon"></i>
          </div>
          <div class="info">
            <div class="m">
              <template v-if="item.isAmount == 1">￥</template>
              {{ item.payAmount }}
            </div>
            <div class="t">{{ item.payType }}</div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="head-container">
      <el-table :data="tableData.data" v-loading="tableData.loading" v-if="orderType == 1">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="id" prop="id"></el-table-column>
        <!-- <el-table-column label="头像地址" prop="headImg">
          <template v-slot="scope">
          <el-image :src="scope.row.headImg"
            style="width:40px;height: 40px;border-radius: 4px;background-color: #efefef;">
            <div class="img_error" slot="error">
              <i class="icon el-icon-document-delete"></i>
            </div>
          </el-image>
        </template>
        </el-table-column> -->
        <el-table-column label="门店" prop="shopName"></el-table-column>
        <el-table-column label="用户手机号" prop="phone"></el-table-column>
        <el-table-column label="用户名" prop="nickName"></el-table-column>
        <el-table-column label="充值金额" prop="amount"></el-table-column>
        <el-table-column label="已退款金额" prop="refundAmount"></el-table-column>

        <el-table-column label="充值类型" prop="bizCode">
          <template #default="scope">
            {{ returnBizCode(scope.row.bizCode) }}
          </template>
        </el-table-column>
        <el-table-column label="充值时间" prop="createTime"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination
        :total="tableData.total"
        :current-page="tableData.page"
        :page-size="tableData.size"
        @current-change="paginationChange"
        @size-change="sizeChange"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import shopUserApi from "@/api/account/shopUser";
import dayjs from "dayjs";
import { downloadFile } from "@/utils/tools";
import { $bizCode } from "./data";
export default {
  data() {
    return {
      bizCode: $bizCode,
      timeValue: "",
      resetQuery: null,
      orderType: "1",
      categorys: [],
      query: {
        createdAt: [],
        proName: "",
        cateId: "",
        userId: "",
        bizCode: "",
      },
      tableData: {
        data: [],
        page: 1,
        size: 10,
        loading: false,
        total: 0,
      },
      downloadLoading: false,
      payCountList: "",
      payCountTotal: 0,
    };
  },
  filters: {
    timeFilter(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  mounted() {
    this.query.userId = this.$route.query.userId || "";
    this.resetQuery = { ...this.query };
    this.getTableData();
  },
  methods: {
    returnBizCode(key) {
      return this.bizCode[key] || "";
    },
    //携带table id跳转到订单列表页面
    toTableOrderList(data) {
      console.log(data);
      this.$router.push({
        path: "/order_manage/order_list",
        query: {
          tableName: data.tableName,
        },
      });
    },
    // 导出Excel
    async downloadHandle() {
      try {
        this.downloadLoading = true;
        const file = await downloadTableRecharge({
          startTime: this.query.createdAt[0],
          endTime: this.query.createdAt[1],
        });
        downloadFile(file, "数据", "xlsx");
        this.downloadLoading = false;
      } catch (error) {
        this.downloadLoading = false;
        console.log(error);
      }
    },
    // 重置查询
    resetHandle() {
      this.timeValue = "";
      this.query = { ...this.resetQuery };
      this.page = 0;
      this.getTableData();
    },
    // 分页大小改变
    sizeChange(e) {
      this.tableData.size = e;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e;
      this.getTableData();
    },
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await shopUserApi.flow({
          page: this.tableData.page,
          size: this.tableData.size,
          userId: this.query.userId,
          bizCode: this.query.bizCode,
          startTime: this.query.createdAt[0],
          endTime: this.query.createdAt[1],
        });
        this.tableData.loading = false;
        this.tableData.data = res.records;
        this.tableData.total = res.totalRow * 1;
      } catch (error) {
        console.log(error);
      }
    },
    // 切换时间
    timeChange(e) {
      const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
      switch (e) {
        case "":
          // 全部
          this.query.createdAt = [];
          break;
        case "0":
          // 今天
          this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
          break;
        case "-1":
          // 昨天
          this.query.createdAt = [
            dayjs().add(-1, "d").format(format[0]),
            dayjs().add(-1, "d").format(format[1]),
          ];
          break;
        case "-7":
          // 最近7天
          this.query.createdAt = [
            dayjs().add(-7, "d").format(format[0]),
            dayjs().format(format[1]),
          ];
          break;
        case "-30":
          // 最近7天
          this.query.createdAt = [
            dayjs().add(-30, "d").format(format[0]),
            dayjs().format(format[1]),
          ];
          break;
        case "week":
          // 本周
          this.query.createdAt = [
            dayjs().startOf("week").format(format[0]),
            dayjs().endOf("week").format(format[1]),
          ];
          break;
        case "month":
          // 本周
          this.query.createdAt = [
            dayjs().startOf("month").format(format[0]),
            dayjs().endOf("month").format(format[1]),
          ];
          break;
        case "custom":
          // 自定义
          this.query.createdAt = [];
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.cursor-pointer {
  cursor: pointer;
  color: #1890ff;
  transition: all 0.3s;
}
.cursor-pointer:hover {
  opacity: 0.7;
}

.collect_wrap {
  display: flex;
  gap: 14px;

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 20px;

    .icon_wrap {
      $size: 34px;
      $border: 6px;
      width: $size;
      height: $size;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--bg-color);
      border-radius: 50%;
      position: relative;

      &::after {
        content: "";
        width: $size + $border;
        height: $size + $border;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--bg-color);
        opacity: 0.3;
      }

      .icon {
        font-size: 16px;
        color: #fff;
      }

      .img {
        width: 20px;
        height: 20px;
      }
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-left: 10px;

      .m {
        font-weight: bold;
      }

      .t {
        font-size: 12px;
        color: #999;
        padding-top: 4px;
      }
    }
  }
}

.refund {
  color: #ff9731;
  font-weight: bold;
}

.table_order_info {
  .order_no {
    color: #999;
  }

  .type {
    color: #e6a23c;
  }
}

.goods_info {
  .row {
    display: flex;

    &:not(:first-child) {
      margin-top: 10px;
    }

    .cover {
      width: 40px;
      height: 40px;
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-left: 10px;

      .sku {
        color: #999;
      }
    }
  }
}
</style>
