<template>
  <div class="app-container scroll-auto">
    <el-form size="small" :inline="true">
      <el-form-item label="日期" prop="reportDate">
        <!-- <el-date-picker
          v-model="queryParams.reportDate"
          style="width: 240px; margin-right: 8px"
          size="mini"
          type="date"
          value-format="yyyyMMdd"
          :clearable="false"
        ></el-date-picker> -->
        <el-date-picker
          v-model="queryParams.reportDate"
          style="width: 240px; margin-right: 8px"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyyMMdd"
          :clearable="false"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="作业单位" prop="company" v-if="false">
        <el-select
          style="margin-right: 8px"
          size="mini"
          v-model="queryParams.company"
          placeholder="请选择"
          clearable
        >
          <el-option label="全部" value=""> </el-option>
          <el-option
            v-for="item in workUnitOptions"
            :key="item.organAbbr"
            :label="item.organAbbr"
            :value="item.organAbbr"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button icon="el-icon-download" size="mini" @click="onExport"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <div v-loading="loading">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="违章查处情况" name="violationSituationTableRef">
          <ViolationSituationTable ref="violationSituationTableRef" />
        </el-tab-pane>
        <el-tab-pane label="作业计划执行情况" name="executionStatusTableRef">
          <ExecutionStatusTable ref="executionStatusTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="人员到岗到位履职情况"
          name="personnelDutyStatusTableRef"
        >
          <PersonnelDutyStatusTable ref="personnelDutyStatusTableRef" />
        </el-tab-pane>
        <el-tab-pane
          v-if="false"
          label="其他重要情况"
          name="otherSafetySituationsTableRef"
        >
          <OtherSafetySituationsTable ref="otherSafetySituationsTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="明日作业计划安排情况"
          name="tomorrowPlanSituationTableRef"
        >
          <TomorrowPlanSituationTable ref="tomorrowPlanSituationTableRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQuery"
    />
  </div>
</template>

<script>
import ViolationSituationTable from "./components/violation-situation-table.vue";
import ExecutionStatusTable from "./components/execution-status-table.vue";
import OtherSafetySituationsTable from "./components/other-safety-situations-table.vue";
import TomorrowPlanSituationTable from "./components/tomorrow-plan-situation-table.vue";
import PersonnelDutyStatusTable from "./components/personnel-duty-status-table.vue";
import moment from "moment";
import {
  getReportDay,
  dayExport,
  getWorkUnitList,
} from "@/api/secure/daily-newspaper";
export default {
  components: {
    ViolationSituationTable,
    ExecutionStatusTable,
    OtherSafetySituationsTable,
    TomorrowPlanSituationTable,
    PersonnelDutyStatusTable,
  },
  name: "daily",
  data() {
    return {
      activeName: "violationSituationTableRef",
      total: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        reportDate: [
          moment().endOf("day").format("YYYYMMDD"),
          moment().endOf("day").format("YYYYMMDD"),
        ],
        company: "", // 作业单位
      },
      workUnitOptions: [],
    };
  },
  mounted() {
    this.getWorkUnit();
    this.handleQuery();
  },
  methods: {
    moment,
    async getWorkUnit() {
      const { data } = await getWorkUnitList();
      this.workUnitOptions = data;
    },
    handleClick(tab, event) {
      console.log(tab, event, "---------ddd");
      this.activeName = tab.name;
    },
    /** 搜索按钮操作 */
    async handleQuery() {
      this.loading = true;
      const { appointmentList, illegalList, nextDayList, planList } =
        await getReportDay({
          ...this.queryParams,
          startDate: this.queryParams.reportDate[0],
          endDate: this.queryParams.reportDate[1],
        });
      this.$nextTick(() => {
        this.$refs["violationSituationTableRef"].tableData = illegalList;
        this.$refs["executionStatusTableRef"].tableData = planList;
        this.$refs["personnelDutyStatusTableRef"].tableData = appointmentList;
        this.$refs["tomorrowPlanSituationTableRef"].tableData = nextDayList;
      });
      this.loading = false;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.reportDate = [
        moment().endOf("day").format("YYYYMMDD"),
        moment().endOf("day").format("YYYYMMDD"),
      ];
      this.queryParams.company = "";
      this.handleQuery();
    },
    async onExport() {
      const res = await dayExport(
        this.queryParams.reportDate[0],
        this.queryParams.reportDate[1]
      );
      if (res) {
        const elink = document.createElement("a");
        const date = `${this.queryParams.reportDate[0]}_${this.queryParams.reportDate[1]}`;
        elink.download = `衡阳公司配电专业安全管控专班日报-${date}.doc`;
        elink.style.display = "none";
        const blob = new Blob([res], {
          type: "application/msword;charset=UTF-8",
        });
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      } else {
        this.$message.error("导出异常请联系管理员");
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
