<template>
  <div v-if="!excelViewStatus">
    <el-table :data="tableData" class="tableView">
      <el-table-column fixed prop="formName" label="模板名称" align="center" />
      <el-table-column prop="writeData" align="center" label="是否已填报">
        <template #default="scope">
          <span
            :class="{
              'red-text': scope.row.writeData === '',
              'green-text': scope.row.writeData !== '',
            }"
          >
            {{ scope.row.writeData === "" ? "否" : "是" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-button
            link
            v-if="scope.row.writeData !== ''"
            class="btnText"
            type="primary"
            @click="handleLook(scope.row)"
          >
            查看
          </el-button>
          <el-button
            link
            class="btnText"
            type="primary"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>

          <el-popconfirm
            v-if="scope.row.writeData !== ''"
            :visible="scope.row.dialogVisible"
            title="您确认重置吗？（重置此操作不可逆）"
            width="200"
            @cancel="scope.row.dialogVisible = false"
            @confirm="reset(scope.row)"
          >
            <el-button> 取消 </el-button>
            <el-button type="primary"> 确认 </el-button>
            <template #reference>
              <el-button
                link
                class="btnText"
                type="primary"
                @click="scope.row.dialogVisible = true"
                >重置</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div v-else class="fullScreen">
    <div class="excelView">
      <div class="view">
        <ExcelView
          v-model:data="excelData"
          :option="excelOptions"
          ref="excelViewRef"
          :checkStatus="true"
          :verifications="setting"
        />
      </div>
      <div class="opeara">
        <div class="titles">当前操作表格:</div>
        <div class="titles">{{ title }}</div>
        <div>
          <el-button
            v-if="excelOptions.edit"
            type="primary"
            class="btn"
            @click="submitData"
            >提交</el-button
          >
          <el-button class="btn" @click="resetData">{{
            excelOptions.edit ? "取消" : "返回"
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
defineOptions({
  name: "Excel",
});
import { getExcelData, setExcelData } from "@/api/prosteps/excel";
import { useProcessStore } from "@/store";
import { useDictionaryStore } from "@/store";
const setting = ref([]);
const title = ref("");
const dictS = useDictionaryStore();
const store = useProcessStore();
const tableData = ref([]);
const dataList = async () => {
  const { data } = await getExcelData(store.scanInfo.id);
  tableData.value = data;
};
const useExcelHook = () => {
  const excelViewStatus = ref(false);
  const excelData = ref(null);
  const excelViewRef = ref(null);
  const excelSelectRow = ref(null);
  const excelOptions = ref({
    opreaState: false,
    in: false,
    out: false,
    print: false,
    edit: true,
    inName: "",
  });
  const resetData = () => {
    if (excelViewRef.value) {
      excelViewRef.value.saveCellData();
      excelViewRef.value.reset();
    }
    excelViewStatus.value = false;
    excelData.value = null;
    excelSelectRow.value = null;
    excelOptions.value = {
      opreaState: false,
      in: false,
      out: false,
      print: false,
      edit: true,
      inName: "",
    };
    title.value = "";
  };
  const reset = async (row) => {
    excelData.value = "";
    const { data, code } = await setExcelData({
      excelData: excelData.value,
      formName: row.formName,
      excelFormId: row.excelFormId,
      formType: row.formType,
      processId: store.scanInfo.id,
    });
    if (code == "200") {
      ElMessage.success("操作成功！");
      row.dialogVisible = false;
      resetData();
      dataList();
    }
  };
  const handleEdit = (row) => {
    excelSelectRow.value = row;
    if (row.writeData == "") {
      excelData.value = JSON.parse(row.excelData);
    } else {
      excelData.value = JSON.parse(row.writeData);
    }
    excelOptions.value.inName = row.formName;
    title.value = row.formName;
    excelViewStatus.value = true;
    setting.value = row.settings;
  };
  const handleLook = (row) => {
    excelOptions.value.edit = false;
    excelData.value = JSON.parse(row.writeData);
    excelOptions.value.inName = row.formName;
    excelViewStatus.value = true;
  };
  const submitData = async () => {
    const blobPromise = excelViewRef.value.downloadBlobExcel();
    blobPromise.then(async (blob) => {
      const formData = new FormData();
      excelData.value = excelViewRef.value.getData();
      formData.append("file", blob);
      formData.append("excelData", JSON.stringify(excelData.value)); // 确保非文件数据被正确格式化
      formData.append("excelFormId", excelSelectRow.value.excelFormId);
      formData.append("formName", excelSelectRow.value.formName);
      formData.append("formType", excelSelectRow.value.formType);
      formData.append("processId", store.scanInfo.id);
      const { data, code } = await setExcelData(formData);
      if (code == "200") {
        ElMessage.success("操作成功！");
        resetData();
        dataList();
      }
    });
  };
  return {
    excelViewStatus,
    excelOptions,
    excelData,
    excelViewRef,
    resetData,
    handleEdit,
    submitData,
    handleLook,
    reset,
  };
};
const {
  excelViewStatus,
  excelOptions,
  excelData,
  excelViewRef,
  resetData,
  handleEdit,
  submitData,
  handleLook,
  reset,
} = useExcelHook();
onMounted(() => {
  dataList();
});
</script>

<style lang="scss" scoped>
:deep(.luckysheet-scrollbar-y::-webkit-scrollbar) {
  width: 30px !important;
}
:deep(.luckysheet-scrollbar-x::-webkit-scrollbar) {
  height: 30px !important;
}
:deep(#luckysheet-scrollbar-y) {
  width: 30px !important;
}
:deep(#luckysheet-scrollbar-x) {
  height: 30px !important;
}

.fullScreen {
  position: fixed;
  width: 100vw;
  height: 100vw;
  z-index: 88;
  top: 0;
  left: 0;
  background-color: rgb(241, 243, 245);
}
.btnText {
  font-size: $f20;
  color: black;
}
.excelView {
  width: 100%;
  height: calc(100vh - 28px);
  padding: 20px;
  display: flex;
  background-color: white;
  border-radius: 16px;
  .view {
    position: relative;
    flex: 1;
    height: calc(100vh - 48px);
  }
  .opeara {
    width: 200px;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .titles {
      width: 200px;
      font-size: 25px;
      text-align: center;
    }
  }
}
.tableView {
  width: 100%;
  height: calc(100vh - 260px);
  padding: 20px 0px;
  border-radius: 16px;
}
.btn {
  width: 180px;
  border-radius: 16px;
  height: 40px;
  font-size: 16px;
  margin: 10px 0;
}
.red-text {
  color: red;
}
.green-text {
  color: green;
}
</style>
