<template>
  <div>
    <div class="simple-container">
      <simple-form
        :form="table_form"
        :handle="table_handle"
        @search="handleSearch"
        @download="handleDownload"
        class="department-form"
      ></simple-form>
      <simple-table
        :list="table_list"
        :config="table_config"
        :loading="table_loading"
        :handle-row="table_handle_row"
      ></simple-table>
      <!-- <simple-pagination
        :page="page"
        :total="total"
        @change="handleChange"
      ></simple-pagination> -->
    </div>
  </div>
</template>

<script>
import simpleForm from "./components/form.vue";
import simpleTable from "./components/table.vue";
// import simplePagination from "./components/pagination.vue";
export default {
  components: {
    simpleTable,
    simpleForm,
    // simplePagination,
  },
  data() {
    return {
      page: 1,
      rows: 10,
      total: 0,
      table_loading: false,
      table_search: {},
      table_form: [
        {
          label: "模板类型",
          props: "templateType",
          type: "input",
        },
        {
          label: "统计时间",
          props: "Time",
          type: "dateRange",
          default: [new Date(), new Date().setDate(new Date().getDate() + 1)],
        },
        {
          label: "模板名称",
          props: "templateName",
          type: "input",
        },
        {
          label: "科室名称",
          props: "deptName",
          type: "input",
        },
      ],
      table_list: [],
      table_handle: [
        {
          label: "导出",
          props: "download",
        },
      ],
      table_handle_row: [],
      table_config: [
        {
          label: "科室名称",
          props: "dept",
        },
        {
          label: "科室经理",
          props: "loginName",
        },
        {
          label: "接收待办数",
          props: "number",
        },
        {
          label: "待办完成数",
          props: "finishAgencyNumber",
        },
        {
          label: "进行中待办数",
          props: "conductAgencyNumber",
        },
        {
          label: "完成回复率",
          props: "percentageReply",
        },
        {
          label: "超期率",
          props: "percentageTimeOut",
        },
        {
          label: "累计超期时间",
          props: "day",
        },
        {
          label: "平均超期时间（天）",
          props: "averageDay",
        },
      ],
    };
  },
  methods: {
    handleInit(data) {
      this.table_loading = true;
      this.$http({
        url: "/market/CMKIssued/CMKIssuedReplyStatistics",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      }).then(({ data }) => {
        //   console.log(res,'data');
        // this.total = count;
        this.table_list = data;
        this.table_loading = false;
      });
      // const data = [];
      // let index = 0;
      // while (index < 10) {
      //     data.push({
      //         department_name: `科室${index}`,
      //         department_manager: `经理${index}`,
      //         received_umber: `${index}`,
      //         response_rate: `${index + 1}0`,
      //         overdue_rate: `50%`,
      //         cumulative_overtime: `3`,
      //     });
      //     index = index + 1;
      // }
    },
    handleDownload() {
      this.$http({
        url: "/market/CMKIssued/exportCMKIssuedReplyStatistics",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: {
          ...this.table_search,
        },
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          // let month = this.table_search.time
          //   ? this.$formatDate(this.table_search.time, "YYYY年MM月")
          //   : "";
          window.navigator.msSaveOrOpenBlob(blob, `回复统计.xlsx`);
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          // let month = this.table_search.time
          //   ? this.$formatDate(this.table_search.time, "YYYY年MM月")
          //   : "";
          downloadElement.download = `回复统计.xlsx`;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
      // this.$http({
      //   url: "/CMKIssued/exportCMKIssuedReplyStatistics",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   data: {
      //     ...this.table_search,
      //     time: this.table_search.time ? this.table_search.time : "",
      //   },
      //   responseType: "blob", // 解决下载的文件乱码空白等问题
      // }).then(({ data }) => {
      //   console.log(data,'data');
      //   let url = window.URL.createObjectURL(new Blob([data]));
      //   let a = document.createElement("a");
      //   a.setAttribute("href", url);
      //   //   a.setAttribute('download', scope.row.fileName)
      //   a.click();
      // });
      console.log("我下载了");
    },
    handleSearch(data) {
      let obj = data;
      Object.values(data).forEach((el, index) => {
        if (el instanceof Array) {
          obj[`start${Object.keys(data)[index]}`] = this.$formatDate(
            el[0],
            "YYYY-MM-DD HH:mm:ss"
          );
          obj[`end${Object.keys(data)[index]}`] = this.$formatDate(
            el[1],
            "YYYY-MM-DD HH:mm:ss"
          );
          delete data[`${Object.keys(data)[index]}`];
        }
      });
      console.log(obj);
      this.table_search = obj;
      this.handleReset();
      this.handleInit({ ...obj });
    },
    handleChange(page) {
      this.page = page;
      this.handleInit({ ...this.table_search });
    },
    handleReset() {
      this.page = 1;
    },
  },
  mounted() {
    this.handleInit({
      startTime: this.$formatDate(new Date(), "YYYY-MM-DD"),
      endTime: this.$formatDate(
        new Date().setDate(new Date().getDate() + 1),
        "YYYY-MM-DD"
      ),
    });
  },
};
</script>

<style></style>
