<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container" ref="filter-container">
      <el-form ref="queryForm" :model="listQuery" label-width="100px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="活动类型">
              <el-select
                class="filter-item"
                v-model="listQuery.activityId"
                placeholder="请选择活动类型"
              >
                <el-option
                  :key="null"
                  label="全部"
                  :value="undefined"
                ></el-option>
                <el-option :key="1" label="2680活动" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单号">
              <el-input
                v-model="listQuery.orderNo"
                type="text"
                placeholder="请输入订单号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="用户姓名">
              <el-input
                v-model="listQuery.name"
                placeholder="请输入用户姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="手机号">
              <el-input
                v-model="listQuery.phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="上级手机号">
              <el-input
                v-model="listQuery.leaderPhone"
                placeholder="请输入上级手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单状态">
              <el-select
                class="filter-item"
                v-model="listQuery.status"
                placeholder="请选择订单状态"
              >
                <el-option :key="null" label="全部" :value="null"></el-option>
                <el-option :key="2" label="取消" :value="2"></el-option>
                <el-option :key="3" label="待付款" :value="3"></el-option>
                <el-option :key="6" label="已完成" :value="6"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付时间">
              <el-date-picker
                v-model="listQuery.startPayTime"
                type="date"
                value-format="timestamp"
                placeholder="请输入开始时间"
              ></el-date-picker>
              <span>—</span>
              <el-date-picker
                v-model="listQuery.endPayTime"
                type="date"
                value-format="timestamp"
                placeholder="请输入结束时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="search"
        @click="handleFilter"
        >搜索</el-button
      >
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="delete"
        @click="clearSearch"
        >清除搜索</el-button
      >
      <el-button class="filter-item" type="primary" @click="excel"
        >导出表格</el-button
      >
    </div>
    <div style="width: 100%; text-align: right; margin-bottom: 10px">
      <el-tag>总数：{{ totalobj.number }}</el-tag>
      <el-tag>总金额：{{ totalobj.totalAmount }}</el-tag>
      <el-tag>总佣金：{{ totalobj.totalComissonAmount }}</el-tag>
    </div>

    <el-table
      :key="tableKey"
      :data="list"
      v-loading.body="listLoading"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="活动名称">
        <template slot-scope="scope">
          <p>{{ scope.row.name }}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单号/创建订单时间">
        <template slot-scope="scope">
          <p>{{ scope.row.no }}</p>
          <p>{{ scope.row.crtTime }}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付时间">
        <template slot-scope="scope">
          <p v-if="scope.row.payTime">{{ scope.row.payTime }}</p>
          <p v-else>/</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实付金额(元)">
        <template slot-scope="scope">
          <span>{{ scope.row.realAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="上级姓名/手机号">
        <template slot-scope="scope">
          <span>{{ scope.row.parentName }}</span>
          <span>/{{ scope.row.parentPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="佣金">
        <template slot-scope="scope">
          <span>{{ scope.row.parentComisson }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '2'">取消</span>
          <span v-if="scope.row.status == '3'">待付款</span>
          <span v-if="scope.row.status == '6'">已完成</span>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { page2, activeAmountTotal, excelExport } from "api/order/orderActive";
import { mapGetters } from "vuex";
import rsCode from "../../../utils/rsCode";
// import dataFormattor from '../../../utils/dataFormattor'
import { formatDate } from "utils/dateFormattor";

export default {
  name: "branchCompanyStock",
  data() {
    return {
      detailsDialogFormVisible: false, //用户信息弹窗
      userDetails: {}, //用户信息
      statusBoolean: false, //实名认证
      form: {
        id: null,
        companyId: null,
        companyName: null,
        name: null,
        tel: null,
        count: null,
        state: null,
      },
      rules: {},
      statistics: [],
      isStatistics: true,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        activityId: undefined,
        orderNo: undefined,
        phone: undefined,
        status: undefined,
        startPayTime: undefined,
        endPayTime: undefined,
        name: undefined,
        leaderPhone: undefined,
      },
      createTime: null,
      aplyTime: null,
      dialogFormVisible: false,
      dialogStatus: "",
      btn_del: true,
      btn_buy: true,
      btn_cancel: true,
      tableKey: 0,
      query: null,
      totalobj: {},
    };
  },
  created() {
    this.getList();
    this.getTotalMount();
  },
  computed: {},
  methods: {
    timestamp(now) {
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var Hours = now.getHours();
      var Minutes = now.getMinutes();
      var Seconds = now.getSeconds();
      month = month.toString().length == 1 ? "0" + month : month;
      date = date.toString().length == 1 ? "0" + date : date;
      Hours = Hours.toString().length == 1 ? "0" + Hours : Hours;
      Minutes = Minutes.toString().length == 1 ? "0" + Minutes : Minutes;
      Seconds = Seconds.toString().length == 1 ? "0" + Seconds : Seconds;
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        Hours +
        ":" +
        Minutes +
        ":" +
        Seconds
      );
    },
    excel() {
      excelExport(this.listQuery).then((res) => {
        const content = res;
        console.log(res);
        const blob = new Blob([content]);
        const fileName = "活动订单.xlsx";
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    clearSearch() {
      this.listQuery = {
        page: 1,
        limit: 10,
        activityId: undefined,
        orderNo: undefined,
        phone: undefined,
        status: undefined,
        startPayTime: undefined,
        endPayTime: undefined,
        name: undefined,
        leaderPhone: undefined,
      };
      this.getList();
    },
    getTotalMount() {
      activeAmountTotal().then((res) => {
        if (res.status == 200) {
          this.totalobj = res.data;
        }
      });
    },
    getList() {
      this.listLoading = true;
      page2(this.listQuery).then((response) => {
        console.log(response);
        this.list = response.data.data;

        this.total = response.data.totalCount;
      });
      setTimeout(() => {
        this.listLoading = false;
      }, 300);
    },
    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
  },
};
</script>
<style>
.member .el-dialog--small {
  width: 500px;
}
.user-list-dialog .el-form-item {
  margin-bottom: 0px;
}
.el-card__body {
  overflow: hidden;
  padding: 0;
  width: 100%;
  display: inline-block;
}
.num-title {
  display: inline-block;
  float: left;
  margin-right: 40px;
  font-size: 14px;
}

.box-card li {
  list-style: none;
  float: left;
  text-align: center;
  width: 12.5%;
  font-size: 14px;
}
.box-card li p:nth-child(1) {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}
.box-card li p:nth-child(2) {
  font-weight: bold;
  color: #666;
}
</style>
