<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="日期类型">
          <el-select
            style="margin-right: 20px"
            v-model="formInline.dateType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in [
                { value: '1', label: '日' },
                { value: '2', label: '周' },
                { value: '3', label: '月' },
                { value: '4', label: '年' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="product">
      <div style="font-size: 18px">订单分析</div>
      <div class="stat-list">
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">下单订单数量</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.orderCount }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">支付订单数量</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.payCount }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">有效订单数量</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.validCount }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">有效订单率</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.validRatio }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">订单实付金额（元）</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.payMoney }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">订单退款金额（元）</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.refundMoney }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">售后订单数量</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.afterSaleCount }}
            </div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-right">
            <div class="stat-title">售后订单率（%）</div>
            <div style="font-size: 20px" class="stat-value">
              {{ productList.afterSaleRatio }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        padding: 20px;
        border: 1px solid #ccc;
        margin-top: 20px;
        height: 60vh;
      "
    >
      <div style="font-size: 18px; margin-bottom: 40px">订单结算明细</div>
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="下单时间">
          <el-date-picker
            @change="changeValue"
            value-format="yyyy-MM-dd"
            v-model="value"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结算时间">
          <el-date-picker
            @change="changeValueOne"
            value-format="yyyy-MM-dd"
            v-model="valueOne"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="formData.status" placeholder="请选择状态">
            <el-option
              v-for="item in [
                { label: '全部', value: '' },
                { label: '待结算 ', value: '0' },
                { label: ' 部分结算', value: '1' },
                { label: '已结算', value: '2' },
                { label: '结算失败', value: '-1' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="primary">导出</el-button>
        </el-form-item>
      </el-form>
      <div
        style="
          background: #edf4ff;
          height: 80px;
          margin-bottom: 10px;
          font-size: 16px;
        "
        class="stat-list"
      >
        <div>
          <span>退款金额</span><span style="margin-left: 10px">￥</span
          ><span style="font-weight: 600; font-size: 22px">{{
            orderSummaryList.refundMoney
          }}</span>
        </div>
        <div>
          <span>订单支出</span><span style="margin-left: 10px">￥</span
          ><span style="font-weight: 600; font-size: 22px">{{
            orderSummaryList.expendMoney
          }}</span>
        </div>
        <div>
          <span>待入账金额</span><span style="margin-left: 10px">￥</span
          ><span style="font-weight: 600; font-size: 22px">{{
            orderSummaryList.waitSettleMoney
          }}</span>
        </div>
        <div>
          <span>已入账金额</span><span style="margin-left: 10px">￥</span
          ><span style="font-weight: 600; font-size: 22px">{{
            orderSummaryList.settleMoney
          }}</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; height: 33vh; overflow-y: scroll"
      >
        <el-table-column align="center" type="index" label="排名" width="50">
        </el-table-column>
        <el-table-column prop="unitOrderNo" label="订单编号"> </el-table-column>
        <el-table-column
          align="center"
          prop="payTime"
          label="下单时间"
          width="140"
        >
        </el-table-column>
        <el-table-column align="center" prop="settleTime" label="结算时间">
        </el-table-column>
        <el-table-column
          align="center"
          prop="unitSettleAmount"
          label="实付金额（元）"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="refundAmount"
          label="退款金额（元）"
          width="140"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="finalOutcome"
          label="订单支出（元）"
          width="140"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="finalIncome"
          label="入账金额（元）"
          width="140"
        >
        </el-table-column>
        <el-table-column align="center" prop="name" label="状态" width="140">
          <template slot-scope="scope">
            <span>{{ getStatus(scope.row.status) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="query.pageNumber"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="query.pageSize"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valueOne: [],
      value: [],
      formInline: {
        dateType: "1",
      },
      formData: {
        payBeginDate: "",
        payEndDate: "",
        settleBeginDate: "",
        settleEndDate: "",
        status: "",
      },
      query: {
        pageNumber: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      productList: {},
      orderSummaryList: {},
    };
  },
  created() {
    this.getCurrentDate();
  },
  methods: {
    getList() {
      this.$api.dataCenter.orderAnalysis(this.formInline).then((res) => {
        this.productList = res.data.data;
      });
      this.$api.dataCenter.orderSummary(this.formData).then((res) => {
        console.log(res);
        this.orderSummaryList = res.data.data;
      });
      this.$api.dataCenter
        .orderSummaryPage({ ...this.formData, ...this.query })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data.data;
          this.total = Number(res.data.data.total);
        });
    },
    getCurrentDate() {
      // let now = new Date();
      // let year = now.getFullYear();
      // let month = now.getMonth() + 1;
      // let day = now.getDate();
      // console.log(year, month, day);
      // this.value = [
      //   year + "-" + month + "-" + day,
      //   year + "-" + month + "-" + day,
      // ];
      // this.formData.payBeginDate = year + "-" + month + "-" + day;
      // this.formData.payEndDate = year + "-" + month + "-" + day;
      // this.valueOne = [
      //   year + "-" + month + "-" + day,
      //   year + "-" + month + "-" + day,
      // ];
      // this.formData.settleBeginDate =
      //   year + "-" + month + "-" + day;
      // this.formData.settleEndDate =
      //   year + "-" + month + "-" + day;
      this.getList();
    },
    changeValue(e) {
      console.log(e);
      if (e) {
        this.formData.payBeginDate = e[0];
        this.formData.payEndDate = e[1];
      } else {
        this.formData.payBeginDate = "";
        this.formData.payEndDate = "";
      }
      // this.formInline.brandId = e;
    },
    changeValueOne(e) {
      console.log(e);
      if (e) {
        this.formData.settleBeginDate = e[0];
        this.formData.settleEndDate = e[1];
      } else {
        this.formData.settleBeginDate = "";
        this.formData.settleEndDate = "";
      }
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.pageNumber = val;
      this.getList();
    },
    getStatus(row) {
      if (row == 0) {
        return "待结算";
      } else if (row == 1) {
        return "部分结算";
      } else if (row == 2) {
        return " 已结算";
      } else {
        return "结算失败";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.product {
  padding: 10px;
  //   border: 1px solid #ccc;
  background: #edf4ff;
}
.stat-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  //   margin-top: 20px;
  padding: 10px;
  //   border: 1px solid #ccc;
}
.stat-item {
  width: 21%;
  margin: 30px 0;
  display: flex;
  align-items: center;
}
.stat-icon {
  background: rgb(99 152 252);
  width: 60px;
  height: 60px;
  border-radius: 3px;
}
.stat-right {
  margin-left: 12px;
  font-size: 18px;
}
.stat-title {
  //   color: #969696;
  font-weight: 600;
  margin-bottom: 10px;
}
.grid-content {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}
</style>