<template>
  <div>
    <layout-card>
      <div class="pdf-page">
        <div class="pdf-cover">
          <div class="top">
            <h1>{{ info.CREATOR_NAME }}</h1>
            <h1>
              {{ dayjs(info.CREATTIME).format("YYYY") }}年度风险管控动态评估报告
            </h1>
          </div>
          <div style="padding-top: 200px; margin: auto; width: 400px">
            <div style="display: flex">
              <h1>编制：</h1>
              <div style="border-bottom: 1px solid #606266; width: 80%" />
            </div>
            <div style="display: flex; margin-top: 50px">
              <h1>批准：</h1>
              <div style="border-bottom: 1px solid #606266; width: 80%" />
            </div>
          </div>
          <div class="bot" style="padding-top: 300px">
            <h1>{{ info.CREATOR_NAME }}</h1>
            <h1>{{ dayjs(info.CREATTIME).format("YYYY年MM月DD日") }}</h1>
          </div>
        </div>
        <div class="pdf-content">
          <table>
            <tr v-for="(item, index) in list" :key="index">
              <td
                v-if="fnGetCurrentIndex(item, '0') >= 0"
                :rowspan="fnGetCurrentData(item, '0').ROW_SPAN"
                :colspan="fnGetCurrentData(item, '0').COL_SPAN"
                :style="fnGetCurrentData(item, '0').STYLE"
              >
                {{ fnGetCurrentData(item, "0").DESCRITPTION }}
              </td>
              <td
                v-if="fnGetCurrentIndex(item, '1') >= 0"
                :rowspan="fnGetCurrentData(item, '1').ROW_SPAN"
                :colspan="fnGetCurrentData(item, '1').COL_SPAN"
                :style="fnGetCurrentData(item, '1').STYLE"
              >
                {{ fnGetCurrentData(item, "1").DESCRITPTION }}
              </td>
              <td
                v-if="fnGetCurrentIndex(item, '2') >= 0"
                :rowspan="fnGetCurrentData(item, '2').ROW_SPAN"
                :colspan="fnGetCurrentData(item, '2').COL_SPAN"
                :style="fnGetCurrentData(item, '2').STYLE"
              >
                {{ fnGetCurrentData(item, "2").DESCRITPTION }}
              </td>
              <td
                v-if="fnGetCurrentIndex(item, '3') >= 0"
                :rowspan="fnGetCurrentData(item, '3').ROW_SPAN"
                :colspan="fnGetCurrentData(item, '3').COL_SPAN"
                :style="fnGetCurrentData(item, '3').STYLE"
              >
                {{ fnGetCurrentData(item, "3").DESCRITPTION }}
              </td>
              <td
                v-if="fnGetCurrentIndex(item, '4') >= 0"
                :rowspan="fnGetCurrentData(item, '4').ROW_SPAN"
                :colspan="fnGetCurrentData(item, '4').COL_SPAN"
                :style="fnGetCurrentData(item, '4').STYLE"
              >
                {{ fnGetCurrentData(item, "4").DESCRITPTION }}
              </td>
              <td
                v-if="fnGetCurrentIndex(item, '5') >= 0"
                :rowspan="fnGetCurrentData(item, '5').ROW_SPAN"
                :colspan="fnGetCurrentData(item, '5').COL_SPAN"
                :style="fnGetCurrentData(item, '5').STYLE"
              >
                <el-button
                  type="primary"
                  text
                  link
                  v-if="
                    !fnGetCurrentData(item, '5').DESCRITPTION && type !== 'view'
                  "
                  @click="fnEdit(fnGetCurrentData(item, '5'))"
                >
                  编辑
                </el-button>
                {{ fnGetCurrentData(item, "5").DESCRITPTION || "" }}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </layout-card>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit" v-if="type !== 'view'">
        确定
      </el-button>
      <!--        TODO"-->
      <el-button type="primary" v-if="type === 'view'">导出PDF</el-button>
    </div>
    <assessment-results
      v-model:visible="data.editDialog.visible"
      v-model:form="data.editDialog.form"
      @submit="fnAssessmentResultsSubmit"
    />
  </div>
</template>

<script setup>
import useListData from "@/assets/js/useListData.js";
import {
  getRiskControlMenuList,
  getRiskControlMenuView,
  setRiskControlMenuSubmit,
} from "@/request/dynamic_evaluation.js";
import { useRoute, useRouter } from "vue-router";
import { debounce } from "throttle-debounce";
import { nextTick, reactive, ref } from "vue";
import AssessmentResults from "./components/assessment_results.vue";
import { cloneDeep } from "lodash-es";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

const route = useRoute();
const router = useRouter();
const { REPORT_LOG_ID, YEAR, currentPage, pageSize, type } = route.query;
const info = ref({});
const color = ref("unset");
const border_color = ref("var(--el-border-color-lighter)");
const width = ref("100%");
const { list } = useListData(getRiskControlMenuView, {
  usePagination: false,
  otherParams: { REPORT_LOG_ID },
  key: "list",
  callbackFn: (list, resData) => {
    info.value = resData.log || {};
  },
});
const { list: outerList, fnGetData } = useListData(getRiskControlMenuList, {
  otherParams: { YEAR, currentPage, pageSize },
  key: "list",
  immediate: false,
});
if (type === "edit") fnGetData();
const data = reactive({
  editDialog: {
    visible: false,
    form: {},
  },
});
const fnGetCurrentData = (row, number) => {
  return row[fnGetCurrentIndex(row, number)];
};
const fnGetCurrentIndex = (row, number) => {
  return row.findIndex((item) => item.COL_NUMBER === number);
};
const fnEdit = async (row) => {
  data.editDialog.visible = true;
  await nextTick();
  data.editDialog.form = cloneDeep({
    ...row,
    DESCRITPTION: row.DESCRITPTION || 0,
  });
};
const fnAssessmentResultsSubmit = (DESCRITPTION) => {
  for (let i = 0; i < list.value.length; i++) {
    const index = list.value[i].findIndex(
      (item) => item.REPORT_ID === data.editDialog.form.REPORT_ID
    );
    if (index > -1) {
      list.value[i][index].DESCRITPTION = DESCRITPTION + "";
      break;
    }
  }
  let total = 0;
  for (let i = 0; i < list.value.length; i++) {
    for (let j = 0; j < list.value[i].length; j++) {
      if (list.value[i][j].COL_NUMBER === "5") {
        if (!isNaN(list.value[i][j].DESCRITPTION)) {
          total =
            (total * 100 + Number(list.value[i][j].DESCRITPTION) * 100) / 100;
        }
      }
    }
  }
  for (let i = 0; i < list.value.length; i++) {
    for (let j = 0; j < list.value[i].length; j++) {
      if (list.value[i][j].AUTOMATIC_FLAG === "2") {
        list.value[i][j].DESCRITPTION = total;
      }
    }
  }
};
const fnSubmit = debounce(
  1000,
  async () => {
    const listData = [];
    let info = {};
    for (let i = 0; i < list.value.length; i++) {
      for (let j = 0; j < list.value[i].length; j++) {
        if (
          list.value[i][j].HAND_MOVEMENT_FLAG === "1" ||
          list.value[i][j].AUTOMATIC_FLAG === "1" ||
          list.value[i][j].AUTOMATIC_FLAG === "2"
        ) {
          listData.push(list.value[i][j]);
        }
      }
    }
    for (let i = 0; i < outerList.value.length; i++) {
      if (outerList.value[i].REPORT_LOG_ID === REPORT_LOG_ID) {
        info = outerList.value[i];
        break;
      }
    }
    await setRiskControlMenuSubmit({
      info: JSON.stringify(info),
      list: JSON.stringify(listData),
    });
    ElMessage.success("保存成功");
    router.back();
  },
  { atBegin: true }
);
</script>

<style scoped lang="scss">
.pdf-page {
  //width: 1100px;
  width: v-bind(width);
  padding: 20px;
  position: relative;
  color: v-bind(color);

  .pdf-cover {
    top: -1523px;
    position: absolute;
    width: 100%;
    height: 1497px;
    background: #fff url("/src/assets/images/print/cover-bg.png") no-repeat 0
      bottom;

    background-size: 100% 630px;

    .top {
      padding-top: 400px;

      h1 {
        font-size: 34px;
        text-align: center;
      }
    }

    .bot {
      padding-top: 700px;

      h1 {
        font-size: 18px;
        text-align: center;
      }
    }
  }
}

table {
  border-collapse: collapse;
  width: 100%;

  td {
    border: 1px solid v-bind(border_color);
    padding: 8px 12px;
    font-size: 14px;
  }

  .title {
    background: var(--el-fill-color-light);
    width: 200px;
    text-align: center;
  }
}
</style>
