<!-- eslint-disable vue/valid-v-bind -->
<template>
  <div class="app-container">
    <div class="head-container">
      <el-form :model="query" inline label-position="left">
        <el-form-item>
          <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>
          <el-date-picker
            v-if="timeValue == 'custom'"
            v-model="query.createdAt"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <template>
          <el-form-item>
            <el-select v-model="query.status" placeholder="全部状态" clearable style="width: 140px">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="head-container">
      <div class="collect_wrap">
        <div v-for="(item, index) in payCountList" :key="index" class="item">
          <div class="icon_wrap" :style="{ backgroundColor: `rgba(${item.color},0.5)` }">
            <el-icon :color="`rgba(${item.color},1)`" :size="18">
              <InfoFilled v-if="item.icon == 'info'" />
              <Check v-if="item.icon == 'check'" />
              <Warning v-if="item.icon == 'warning'" />
              <Plus v-if="item.icon == 'plus'" />
            </el-icon>
          </div>
          <div class="info">
            <div class="m">￥{{ item.amount }}</div>
            <div class="t">{{ item.label }}{{ index == 0 ? item.count + "笔" : "" }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="head-container">
      <el-table v-loading="tableData.loading" :data="tableData.data">
        <el-table-column label="创建日期" prop="createTime" />
        <el-table-column label="订单号" prop="orderId" />
        <el-table-column label="应付金额" prop="payAmount">
          <template v-slot="scope">{{ "￥" + scope.row.payAmount || "-" }}</template>
        </el-table-column>
        <el-table-column label="已付款金额" prop="paidAmount">
          <template v-slot="scope">{{ "￥" + scope.row.paidAmount || "-" }}</template>
        </el-table-column>
        <el-table-column label="待付款金额" prop="unpaidAmount">
          <template v-slot="scope">{{ "￥" + scope.row.unpaidAmount || "-" }}</template>
        </el-table-column>
        <el-table-column label="状态" prop="salesAmount">
          <template v-slot="scope">
            {{
              scope.row.status == "unpaid"
                ? "未付款"
                : scope.row.status == "partial"
                ? "部分支付"
                : scope.row.status == "paid"
                ? "已付款"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="付款方式" prop="lastPaymentMethod">
          <template v-slot="scope">{{ scope.row.lastPaymentMethod }}</template>
        </el-table-column>
        <el-table-column label="备注" prop="remark">
          <template v-slot="scope">{{ scope.row.remark }}</template>
        </el-table-column>
        <el-table-column label="付款时间" prop="lastPaymentTime" />
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <el-button
              type="text"
              :style="{ color: repaymentMethod == 'total' ? '#999' : '' }"
              @click="openDialog(scope.row, 'payment')"
            >
              付款
            </el-button>
            <el-button type="text" @click="openDialog(scope.row, 'paymentRecord')">
              账单付款记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination
        :total="tableData.total"
        :current-page="query.page"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="paginationChange"
        @size-change="sizeChange"
      />
    </div>

    <!-- 还款 -->
    <creditRepayment ref="creditRepayment" @success="resetHandle" />

    <!-- 还款记录 -->
    <creditRepaymentRecord ref="creditRepaymentRecord" @success="resetHandle" />
  </div>
</template>

<script>
import creditRepayment from "./components/detail/credit_repayment.vue";
import creditRepaymentRecord from "./components/detail/credit_RePaymentRecord.vue";
import dayjs from "dayjs";
import creditOrderApi from "@/api/order/credit-order";
export default {
  components: { creditRepayment, creditRepaymentRecord },
  filters: {},
  data() {
    return {
      timeValue: "",
      resetQuery: null,
      repaymentMethod: "",
      statusList: [
        { label: "未付款", value: "unpaid" },
        { label: "部分支付", value: "partial" },
        { label: "已付款", value: "paid" },
      ],
      query: {
        page: 1,
        size: 10,
        creditBuyerId: "",
        createdAt: [],
        status: "",
      },
      tableData: {
        data: [],
        loading: false,
        total: 0,
      },
      downloadLoading: false,
      payCountList: [
        { label: "总交易", icon: "info", color: "201, 120, 236", amount: 0, count: 0 },
        { label: "已支付金额", icon: "check", color: "70, 181, 24", amount: 0 },
        { label: "待支付金额", icon: "plus", color: "248, 110, 16", amount: 0 },
        { label: "待支付笔数", icon: "warning", color: "254, 180, 38", amount: 0 },
      ],
      payCountTotal: 0,
    };
  },
  mounted() {
    console.log(this.$route.query);
    this.query.creditBuyerId = this.$route.query.id;
    this.repaymentMethod = this.$route.query.repaymentMethod;
    this.resetQuery = { ...this.query };
    // repaymentMethod
    this.getTableData();
    // this.tbShopCategoryGet()
  },
  methods: {
    search() {
      this.query.page = 1;
      this.getTableData();
    },
    /**
     * 获取明细数据
     */
    async getTableData() {
      this.tableData.loading = true;
      try {
        this.creditDetailSummary();
        // eslint-disable-next-line prefer-const
        let params = {
          page: this.query.page,
          size: this.query.size,
          status: this.query.status,
          creditBuyerId: this.query.creditBuyerId,
        };
        if (this.query.createdAt.length > 0) {
          params.beginDate = this.query.createdAt[0].substring(0, 10);
          params.endDate = this.query.createdAt[1].substring(0, 10);
        }
        // eslint-disable-next-line prefer-const
        let res = await creditOrderApi.page(params);
        this.tableData.loading = false;
        this.tableData.data = res.records;
        this.tableData.total = res.totalRow * 1;
      } catch (error) {
        console.log(error);
      }
    },

    /**
     * 获取明细统计
     */
    async creditDetailSummary() {
      try {
        // eslint-disable-next-line prefer-const
        let params = {
          page: this.query.page,
          size: this.query.size,
          status: this.query.status,
          creditBuyerId: this.query.creditBuyerId,
        };
        if (this.query.createdAt.length > 0) {
          params.beginDate = this.query.createdAt[0].substring(0, 10);
          params.endDate = this.query.createdAt[1].substring(0, 10);
        }
        // eslint-disable-next-line prefer-const
        let res = await creditOrderApi.summary(params);
        this.payCountList[0].amount = res.payAmountTotal;
        this.payCountList[0].count = res.count;
        this.payCountList[1].amount = res.paidAmountTotal;
        this.payCountList[2].amount = res.unpaidAmountTotal;
        this.payCountList[3].amount = res.unpaidCount;
      } catch (error) {
        console.log(error);
      }
    },

    /**
     * 操作
     */
    openDialog(row, type) {
      if (type === "payment" && this.repaymentMethod === "order") {
        this.$refs.creditRepayment.show(
          { creditBuyerId: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod },
          row
        );
      } else if (type === "paymentRecord") {
        this.$refs.creditRepaymentRecord.show(
          { id: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod },
          row.orderId
        );
      }
    },

    /**
     * 切换时间
     * @param e
     */
    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;
      }
    },

    /**
     * 重置查询
     */
    resetHandle() {
      this.timeValue = "";
      this.query = { ...this.resetQuery };
      this.getTableData();
    },

    /**
     * 分页大小改变
     * @param e
     */
    sizeChange(e) {
      console.log(e);
      this.query.size = e;
      this.getTableData();
    },

    /**
     * 分页回调
     * @param e
     */
    paginationChange(e) {
      this.query.page = e;
      this.getTableData();
    },
  },
};
</script>

<style scoped lang="scss">
.collect_wrap {
  display: flex;
  gap: 14px;
  justify-content: space-between;

  .item {
    background-size: 100% 100%;
    width: 255px;
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 7px 7px 7px 7px;

    .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;
      > div {
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      &::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: 32px;
        position: absolute;
        left: 1px;
        right: 0;
        top: 1px;
        bottom: 0;
        margin: auto;
      }

      .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>
