<template>
  <ex-table
    v-loading="loading"
    :table="table"
    :data="tableData"
    :columns="columns"
    :page="pageInfo"
    :size="'mini'"
    @page-curr-change="handlePageChange"
    @page-size-change="handleSizeChange"
    @screen-reset="
      pageInfo.curr = 1;
      parmValue.page = 1;
      searchList();
    "
    @screen-submit="
      pageInfo.curr = 1;
      parmValue.page = 1;
      searchList();
    "
  >
    <template #table-header="{}">
      <div style="width: 100%">
        <el-row>
          <el-col :span="24" style="padding: 0 0 0 0">
            <el-col :span="8" style="width: 824px">
              <el-form :inline="true" :size="'mini'">
                <el-form-item style="margin: 0">
                  <period-date-picker
                    :start="parmValue.qrd_start"
                    :end="parmValue.qrd_end"
                    :type="1"
                    :width="'145px'"
                    :placeholder="'下单'"
                    :size="'mini'"
                    @timeReturned="timeReturned1($event)"
                  />
                </el-form-item>
                <el-form-item style="margin: 0 0 0 10px">
                  <period-date-picker
                    :start="parmValue.start"
                    :end="parmValue.end"
                    :type="1"
                    :placeholder="'回款'"
                    :width="'145px'"
                    :size="'mini'"
                    @timeReturned="timeReturned2($event)"
                  />
                </el-form-item>
              </el-form>
            </el-col>

            <el-col :span="4" class="fr" style="width: 300px">
              <el-button
                type="primary"
                class="fr ml10"
                icon="el-icon-download"
                :size="'mini'"
                @click="Export()"
                >导出</el-button
              >
              <el-button
                type="primary"
                class="fr ml10"
                :size="'mini'"
                @click="searchList"
              >
                刷新
              </el-button>

              <el-button
                type="warning"
                class="fr ml10"
                :size="'mini'"
                @click="restSearch"
              >
                重置
              </el-button>
              <el-button
                :size="'mini'"
                type="primary"
                class="fr"
                icon="el-icon-search"
                @click="searchList"
              />
            </el-col>
          </el-col>
        </el-row>
      </div>
    </template>
  </ex-table>
</template>

<script>
import asyncRequest from "@/api/index";
import setHeight from "@/mixins/index";
import mixinPage from "@/mixins/elPaginationHandle";
import { baseApi } from "@/config";
import columns from "@/views/columns";
export default {
  name: "achievementTable",
  mixins: [mixinPage, setHeight],

  data() {
    return {
      name: "时间区间",
      searchSize: "small",
      size: "mini",
      contector: "",
      loading: false,
      showModel: false,
      isDetail: false,
      modelId: 0,
      parmValue: {
        qrd_start: "",
        qrd_end: "",
        hk_start: "",
        hk_end: "",
        page: 1, // 页码
        size: 15, // 每页显示条数
      },
      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      // 表格 - 列参数
      columns: columns,
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    async timeReturned1(e) {
      if (e.startTime !== "") {
        this.parmValue.qrd_start = e.startTime;
      } else {
        this.parmValue.qrd_start = "";
      }
      if (e.endTime !== "") {
        this.parmValue.qrd_end = e.endTime;
      } else {
        this.parmValue.qrd_end = "";
      }
    },
    async timeReturned2(e) {
      if (e.startTime !== "") {
        this.parmValue.hk_start = e.startTime;
      } else {
        this.parmValue.hk_start = "";
      }
      if (e.endTime !== "") {
        this.parmValue.hk_end = e.endTime;
      } else {
        this.parmValue.hk_end = "";
      }
    },
    restSearch() {
      // 表格 - 分页
      this.pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      this.parmValue = {
        qrd_start: "",
        qrd_end: "",
        hk_start: "",
        hk_end: "",
        page: 1, // 页码
        size: 15, // 每页显示条数
      };
      this.searchList();
    },

    async timeVerification() {
      return new Promise(async (resolve, reject) => {
        if (
          this.parmValue.qrd_start === "" &&
          this.parmValue.qrd_end === "" &&
          this.parmValue.hk_start === "" &&
          this.parmValue.hk_end === ""
        ) {
          resolve({ ok: false, msg: "请选择时间区间！" });
        } else if (
          (this.parmValue.qrd_start === "" && this.parmValue.qrd_end !== "") ||
          (this.parmValue.qrd_start !== "" && this.parmValue.qrd_end === "")
        ) {
          resolve({ ok: false, msg: "确认单下单时间区间不完整！" });
        } else if (
          (this.parmValue.hk_start === "" && this.parmValue.hk_end !== "") ||
          (this.parmValue.hk_start !== "" && this.parmValue.hk_end === "")
        ) {
          resolve({ ok: false, msg: "确认单下单时间区间不完整！" });
        } else {
          resolve({ ok: true, msg: "ok" });
        }
      });
    },
    // 刷新表格
    async searchList() {
      if (!this.loading) {
        this.timeVerification()
          .then(async (r) => {
            if (!r.ok) {
              this.$message.warning(r.msg);
            } else {
              this.loading = true;
              const res = await asyncRequest.list(this.parmValue);
              if (res && res.code === 0 && res.data) {
                this.tableData = res.data.list;
                this.pageInfo.total = Number(res.data.count);
              } else if (res && res.code >= 100 && res.code <= 104) {
                await this.logout();
              } else {
                this.tableData = [];
                this.pageInfo.total = 0;
              }
              this.loading = false;
            }
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;
          });
      }
    },
    /**
     * 批量导出开票信息
     */
    async Export() {
      if (!this.loading) {
        this.timeVerification().then(async (r) => {
          if (!r.ok) {
            this.$message.warning(r.msg);
          } else {
            this.loading = true;
            let url = "Admin/downreportcw";
            let httpType = `aplication/zip`;
            let title1 =
              this.parmValue.qrd_start !== ""
                ? `确认单下单时间${this.parmValue.qrd_start}至${this.parmValue.qrd_end}`
                : "";
            let title2 =
              this.parmValue.hk_start !== ""
                ? `回款时间${this.parmValue.hk_start}至${this.parmValue.hk_end}`
                : "";
            axios({
              method: "post",
              url: baseApi + url,
              responseType: "blob",
              data: this.parmValue,
              headers: {
                Accept: httpType,
              },
            })
              .then((res) => {
                if (res && res.status == 200 && res.data) {
                  let blob = new Blob([res.data], {
                    type: httpType,
                  });
                  let url = window.URL.createObjectURL(blob);
                  let aLink = document.createElement("a");
                  aLink.style.display = "none";
                  aLink.href = url;
                  aLink.setAttribute(
                    "download",
                    `提成数据报表${
                      this.parmValue.qrd_start !== "" &&
                      this.parmValue.hk_start !== ""
                        ? title1 + "&&" + title2
                        : this.parmValue.qrd_start !== ""
                        ? title1
                        : title2
                    }.zip`
                  );
                  document.body.appendChild(aLink);
                  aLink.click();
                  document.body.removeChild(aLink); //下载完成移除元素
                  window.URL.revokeObjectURL(url); //释放掉blob对象
                  this.$message.success(title + `信息导出成功！`);
                  setTimeout(() => {
                    this.loading = false;
                  }, 500);
                } else {
                  this.$message.error(res.data.message);
                  setTimeout(() => {
                    this.loading = false;
                  }, 500);
                }
              })
              .catch((error) => {
                console.log(error);
                this.loading = false;
              });
          }
        });
      }
    },
  },
};
</script>

<style>
</style>