<template>
  <div class="container1">
    <div class="header" v-show="!addStatus && !editStatus">
      <Search
        ref="searchref"
        :searchOptions="searchOptons"
        @data-list="getTableData"
      />
    </div>
    <div class="table" v-if="!addStatus && !editStatus">
      <div class="tableheader">
        <el-button type="primary" class="btn" @click="toAdd">新增</el-button>
        <el-button class="btn" @click="exportFnc">导出</el-button>
      </div>
      <!-- <el-button class="btn" style="margin-bottom: 5px" @click="showPrint"
        >打印</el-button
      > -->
      <el-table
        :data="tableData"
        border
        :style="{ height: maxHeight - 40 + 'px' }"
      >
        <el-table-column prop="reportCode" label="报告编码" />
        <el-table-column prop="reportName" label="报告名称" />
        <el-table-column label="报告类型">
          <template #default="{ row }">
            {{ row.reportType === "1" ? "日报" : "月报" }}
          </template>
        </el-table-column>
        <el-table-column prop="genDate" label="生成日期" />
        <el-table-column prop="creator" label="创建人" />
        <el-table-column prop="created" label="创建时间" />
        <el-table-column
          align="center"
          width="160"
          prop=""
          label="操作"
          id="opear"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              class="btn"
              style="height: 25px"
              @click="toEdit(row)"
              link
              >编辑</el-button
            >
            <el-button
              type="primary"
              class="btn"
              style="height: 25px"
              @click="showPrint(row)"
              link
              >查看</el-button
            >
            <el-button
              type="info"
              class="btn"
              style="height: 25px"
              link
              @click="toDelete(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="currentOption.total"
        :page="currentOption.page"
        :limit="currentOption.limit"
        :pageSizes="currentOption.pageSizes"
        v-model:page="currentOption.page"
        v-model:limit="currentOption.limit"
        @pagination="getData"
      />
    </div>
    <div v-if="addStatus || editStatus" class="formView">
      <div class="formTitle">
        {{ addStatus ? "新增报告" : "编辑报告" }}
      </div>
      <el-scrollbar style="height: calc(100% - 60px)">
        <el-form
          ref="ruleFormRef"
          :model="formData"
          label-width="auto"
          class="formStyle"
        >
          <el-form-item label="报告编码" prop="reportCode">
            <el-input v-model="formData.reportCode" />
          </el-form-item>
          <el-form-item label="报告名称" prop="reportName">
            <el-input v-model="formData.reportName" />
          </el-form-item>
          <el-form-item label="报告类型" prop="reportType">
            <el-select v-model="formData.reportType">
              <el-option
                v-for="(item, index) in reportTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="选择生成日期"
            prop="genDate"
            v-if="formData.reportType"
          >
            <el-date-picker
              v-model="formData.genDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              value-format="YYYY-MM-DD"
              v-if="formData.reportType == 1"
            />
            <el-date-picker
              v-model="formData.genDate"
              type="month"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              style="width: 100%"
              v-if="formData.reportType == 2"
            />
          </el-form-item>
          <!--          <el-form-item label="产品型号" prop="prodtCode">-->
          <!--            <el-input-->
          <!--              v-model="formData.prodtCode"-->
          <!--              @click="openChoseForm('prodt')"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="产品批次" prop="batchNo">-->
          <!--            <el-input-->
          <!--              v-model="formData.batchNo"-->
          <!--              @click="openChoseForm('batch')"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="产品工序" prop="operationCode">-->
          <!--            <el-input-->
          <!--              v-model="formData.operationCode"-->
          <!--              @click="openChoseForm('operation')"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="创建人" prop="creator">-->
          <!--            <el-input v-model="formData.creator" />-->
          <!--          </el-form-item>-->
        </el-form>
        <div style="display: flex; justify-content: space-evenly">
          <el-button
            type="primary"
            style="margin-top: 10px"
            class="btn"
            @click="toSubmit"
            >提交</el-button
          >
          <el-button
            type="info"
            style="margin-top: 10px"
            class="btn"
            @click="toCancel"
            >取消</el-button
          >
        </div>
      </el-scrollbar>
    </div>
    <reportTemplate v-model="showStatus" :tablesData="tablesData" />
    <operationForm ref="opRef" />
  </div>
</template>

<script setup>
import Search from "@/components/Search/index.vue";
import reportTemplate from "@/components/ReportView/reportTemplate.vue";
import { useDictionaryStore } from "@/store";
import { getData } from "@/api/report";
import Pagination from "@/components/Pagination/index.vue";
import { getMockData } from "@/api/statistic/reportMockData";
import operationForm from "./operationForm.vue";
const searchref = ref(null);
const showPrint = () => {
  showStatus.value = true;
};
const tablesData = ref([]);
const toLook = (row) => {
  const fullUrl = window.location.href;
  const parts = fullUrl.split("/");
  const thirdSlashIndex = 2;
  const truncatedUrl = parts.slice(0, thirdSlashIndex + 1).join("/");
  window.open(truncatedUrl + "/" + row.fileUrl, "_blank");
};
const currentOption = reactive({
  total: 0,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 40],
});
const getCurrentMonthStartAndEndDates = () => {
  // 获取当前日期
  let now = new Date();

  // 获取当前月份的第一天
  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);

  // 获取当前月份的最后一天
  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);

  // 格式化日期为'YYYY-MM-DD'格式
  function formatDate(date) {
    let year = date.getFullYear();
    let month = String(date.getMonth() + 1).padStart(2, "0");
    let day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }

  // 返回包含开始和结束日期的数组
  return [formatDate(startDate), formatDate(endDate)];
};
const tableData = ref([]);
// const getTableData = async () => {
//   const { data } = await getData({
//     pageNo: currentOption.page,
//     pageSize: currentOption.limit,
//     startTime: searchref.value.searchForm.time
//       ? searchref.value.searchForm.time[0]
//       : null,
//     endTime: searchref.value.searchForm.time
//       ? searchref.value.searchForm.time[1]
//       : null,
//     reportCode: searchref.value.searchForm.reportCode,
//     reportName: searchref.value.searchForm.reportName,
//     reportType: searchref.value.searchForm.reportType,
//   });
//   tableData.value = data.records;
//   currentOption.total = data.totalCount;
// };

// mock数据
const getTableData = async () => {
  const { data } = await getMockData(); // 使用假数据函数
  tableData.value = data.records;
  currentOption.total = data.totalCount;
  console.log(tableData.value);
};

const toCancel = () => {
  addStatus.value = false;
  editStatus.value = false;
};

const formData = reactive({
  reportCode: "",
  rePortName: "",
  rePortType: "",
  creator: "",
  prodtCode: "",
  batchNo: "",
  operationCode: "",
});

const addStatus = ref(false);
const toAdd = () => {
  reset();
  addStatus.value = true;
};
const editStatus = ref(false);
const toEdit = (row) => {
  console.log(row);
  editStatus.value = true;
  formData.reportCode = row.reportCode;
  formData.reportName = row.reportName;
  formData.reportType = row.reportType;
  formData.genDate = row.genDate;
  formData.creator = row.creator;
  formData.prodtCode = row.prodtCode;
  formData.batchNo = row.batchNo;
  formData.operationCode = row.operationCode;
};

const reset = () => {
  formData.reportCode = "";
  formData.reportName = "";
  formData.reportType = "";
  formData.creator = "";
  formData.prodtCode = "";
  formData.batchNo = "";
  formData.operationCode = "";
};

const toSubmit = () => {
  addStatus.value = false;
  editStatus.value = false;
  console.log(formData);
};

const reportTypeOptions = ref([
  { label: "日报", value: "1" },
  { label: "月报", value: "2" },
]);
const showStatus = ref(false);
const searchOptons = [
  {
    label: "创建时间",
    prop: "time",
    type: "daterange",
  },
  {
    label: "报告编号",
    prop: "reportCode",
    type: "input",
  },
  {
    label: "报告名称",
    prop: "reportName",
    type: "input",
  },
  {
    label: "报告类型",
    prop: "reportType",
    type: "select",
    options: reportTypeOptions.value,
  },
];

const exportFnc = () => {};

const opRef = ref(null);
const openChoseForm = (type) => {
  opRef.value.open(type);
};

//------------------
const maxHeight = ref(null);
const setHeight = () => {
  maxHeight.value = document.querySelector(".table").clientHeight - 30;
};
onMounted(async () => {
  searchref.value.searchForm.time = getCurrentMonthStartAndEndDates();
  setHeight();
  getTableData();
});
</script>

<style scoped lang="scss">
.btn {
  height: 25px;
}
.container1 {
  background-color: white;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: auto;
  }
  .table {
    flex: 1;
    padding-bottom: 20px;
    .tableheader {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0px 10px 0px;
    }
  }
}
.formView {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .formTitle {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .formStyle {
    width: 400px;
  }
}
</style>
