<template>
  <!-- 自助填单页面 -->
  <div class="write-page flex flexc">
    <Header>
      <div slot="title" class="title">自助填单</div>
      <div slot="right" class="back-home flex aic" @click="handleBackHome">
        <img class="mr10" src="../../assets/img/shouye.png" />
        返回首页
      </div>
    </Header>
    <div class="main flex1 flex">
      <div class="left">
        <div
          class="preview-box"
          v-for="(v, i) in materailsList"
          :key="v.id"
          v-show="active === i"
        >
          <img :src="api + v.preViewPath" />
          <!-- 打印空白表单按钮 -->
          <el-button class="print-btn" @click="printEmpty(api + v.preViewPath)">
            打印空白表格
          </el-button>
        </div>
        <!-- 侧边栏弹窗 -->
        <div class="sidebar-box" :class="{ show: !showSidebar }">
          <!-- 侧边内容 -->
          <div class="sidebar-main">
            <div class="title flex jcc aic" @click="showSidebar = false">
              <span class="mr30"> 申请表填写进度 </span>
              <i class="el-icon-d-arrow-left"></i>
            </div>
            <!-- 申请编号  -->
            <div class="apply-num tac" v-ellipsis="'284px'">
              申请编号：DX123456789
            </div>
            <!-- 事项名称 -->
            <div class="matter-name tac" v-ellipsis="'284px'">
              {{ matterInfo.matterName }}
            </div>
            <!-- 材料列表 -->
            <div
              class="materails-item pdl10"
              v-ellipsis="'274px'"
              :class="{ active: i === active }"
              v-for="(v, i) in materailsList"
              :key="v.id"
              @click="active = i"
            >
              {{ v.materiaFullName }}
            </div>
          </div>

          <!-- 侧边按钮 -->
          <div
            class="sidebar-btn flex jcc aic"
            v-show="!showSidebar"
            @click="showSidebar = true"
          >
            <div class="sidebar-btn-text flex flexc aic">
              <span class="sidebar-btn-title"> 申请表填写记录 </span>
              <span class="mt15 mb15">
                {{ active + 1 }}/{{ materailsList.length }}
              </span>
              <i class="el-icon-d-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-main">
          <div v-for="(v, i) in materailsList" :key="v.id">
            <div v-if="active === i">
              <div class="materails-title tac">
                <span class="count">第{{ i + 1 }}张表</span>-
                <span>{{ v.materiaFullName }}</span>
              </div>
              <div class="materails-write">
                <formBuilder ref="formBuilder" :buildData="v"></formBuilder>
              </div>
              <div class="footer-btn flex aic jcc">
                <el-button v-if="i != 0" @click="active -= 1" class="prev-btn"
                  >上一张</el-button
                >
                <el-button
                  :loading="previewLoading"
                  class="preview-btn"
                  @click="handlePreview(v.id, v)"
                  >预览</el-button
                >
                <el-button
                  :loading="printLoading"
                  class="print-btn"
                  @click="handlePrint(v.id, v)"
                  >打印此表</el-button
                >
                <el-button :loading="submitLoading" class="sub-btn"
                  >在线提交</el-button
                >
                <el-button
                  :loading="allSubmitLoading"
                  class="sub-btn"
                  v-if="i == materailsList.length - 1"
                  >全部提交</el-button
                >
                <el-button
                  :loading="allPrintLoading"
                  class="print-btn"
                  v-if="i == materailsList.length - 1"
                  >全部打印</el-button
                >
                <el-button
                  v-if="
                    materailsList.length > 1 && i != materailsList.length - 1
                  "
                  :loading="nextLoading"
                  class="next-btn"
                  @click="active += 1"
                  >下一张</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 预览弹窗 -->
    <PreviewModal :previewInfo="formInfo" v-show="PreviewModalShow">
      <el-button
        :loading="printLoading"
        class="print-btn"
        @click="printEmpty(api + formInfo.preview)"
        >打印此表</el-button
      >
      <el-button :loading="submitLoading" class="sub-btn">提交</el-button>
      <el-button class="next-btn" @click="PreviewModalShow = false"
        >关闭</el-button
      >
    </PreviewModal>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import formBuilder from "@/components/formDes/formBuilder.vue";
import { getMaterialsList, mergeFormToDocx } from "@/api";
import PreviewModal from "@/components/PreviewModal.vue";
import local from "@/utils/local";
import { printFn } from "@/utils/print";
export default {
  components: {
    Header,
    formBuilder,
    PreviewModal,
  },
  data() {
    return {
      api: local.getLocal("baseUrl")
        ? local.getLocal("baseUrl") + "/"
        : "http://192.168.0.98:11074",
      matterInfo: this.$route.query,
      materailsList: [],
      formConfig: {}, // 表单配置
      formData: "", // 表单数据
      active: 0,
      formInfo: {}, // 当前表单数据
      formList: [], // 所有填写表格数据
      previewLoading: false,
      printLoading: false,
      submitLoading: false,
      allSubmitLoading: false,
      allPrintLoading: false,
      nextLoading: false,
      showSidebar: false, // 切换侧边弹窗显示
      PreviewModalShow: false, // 预览弹窗
    };
  },
  created() {
    this.getMaterialsList();
  },

  methods: {
    handleBackHome() {
      this.$router.push("/");
    },

    // 获取材料列表
    async getMaterialsList() {
      let res = await getMaterialsList({
        page: 1,
        size: -1,
        matterId: this.matterInfo.matterId,
      });
      let { data } = res.data.data;
      data.forEach((v) => {
        v.formContent = JSON.parse(v.formContent);
        v.form = {};
      });
      this.materailsList = data;
    },

    // 生成表单
    async createForm(id, formData) {
      let res = await mergeFormToDocx({
        id,
        formContent: formData,
      });
      return res.data;
    },

    // 预览
    async handlePreview(id, row) {
      let valid = await this.$refs.formBuilder[0].validate();
      if (valid) {
        this.previewLoading = true;
        let formData = JSON.stringify(row.form, null, 4);
        this.formInfo = { ...row, ...(await this.createForm(id, formData)) };
        this.previewLoading = false;
        this.PreviewModalShow = true;
      }
    },

    // 打印此表
    async handlePrint(id, row) {
      let valid = await this.$refs.formBuilder[0].validate();
      if (valid) {
        let formData = JSON.stringify(row.form, null, 4);
        let data = await this.createForm(id, formData);
        printFn({
          data: this.api + data.preview,
        });
      }
    },

    // 打印空白表格
    printEmpty(data) {
      printFn({
        data,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.write-page {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .back-home {
    font-size: 28px;
    font-family: Source Han Sans CN;
    color: #ffffff;
    cursor: pointer;
  }
}
.main {
  width: 100%;
  position: relative;
}
.left {
  width: 50%;
  height: calc(100vh - 100px - 30px);
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  .sidebar-box {
    width: 284px;
    min-height: 340px;
    background: #fff;
    box-shadow: 6px -1px 10px 0px rgba(0, 0, 0, 0.11);
    border-radius: 0px 38px 8px 0px;
    position: absolute;
    top: 130px;
    left: 0px;
    transition: all 500ms;
    .title {
      height: 42px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      color: #333333;
      i {
        font-size: 24px;
      }
    }
    .apply-num {
      height: 28px;
      background: #e6eefd;
      font-size: 18px;
      line-height: 28px;
      font-family: Source Han Sans CN;
      color: var(--main-theme-color1);
    }
    .matter-name,
    .materails-item {
      height: 42px;
      line-height: 40px;
      border-bottom: 1px solid #e8e8e8;
      font-size: 18px;
      font-family: Source Han Sans CN;
      color: #333333;
    }
    .active {
      color: var(--main-theme-color1);
      border-color: var(--main-theme-color1);
    }

    .sidebar-btn {
      width: 84px;
      height: 276px;
      background: linear-gradient(
        90deg,
        var(--main-theme-color1),
        var(--main-assist-color1)
      );
      box-shadow: 6px -1px 10px 0px rgba(11, 92, 233, 0.11);
      border-radius: 0px 38px 8px 0px;
      font-size: 24px;
      font-family: Source Han Sans CN;
      color: #ffffff;
      cursor: pointer;
      position: absolute;
      right: -84px;
      top: 50px;
      .sidebar-btn-title {
        writing-mode: vertical-lr;
      }
    }
  }
  .show {
    left: -284px;
  }
  .preview-box {
    width: 80%;
    height: 100%;
    border-radius: 4px;
    img {
      width: 98%;
      height: 100%;
      border-radius: 4px;
      object-fit: contain;
    }
  }
  .print-btn {
    width: 211px;
    height: 54px;
    background: linear-gradient(
      90deg,
      var(--gradient-ramp-theme2),
      var(--gradient-ramp-assist2)
    );
    box-shadow: 0px 6px 12px 1px rgba(253, 100, 79, 0.2);
    border-radius: 8px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    color: #ffffff;
    position: absolute;
    left: 50%;
    bottom: 8px;
  }
}
.right {
  width: 50%;
  height: calc(100vh - 100px - 30px);
  padding: 30px;
  overflow-y: auto;
  background-color: #efefef;
  box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.08);

  .right-main {
    background-color: #fff;
    border-radius: 4px;
    padding-bottom: 60px;
  }
  .materails-title {
    padding: 30px 0px;
    font-size: 28px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .count {
      color: var(--main-theme-color1);
    }
  }
  .footer-btn {
    width: calc(50% - 76px);
    height: 64px;
    position: absolute;
    bottom: 30px;
    right: 46px;
    background-color: #fff;
    z-index: 1000;
    .preview-btn {
      width: 130px;
      height: 54px;
      border: 1px solid var(--main-assist-color4);
      border-radius: 8px;
      font-size: 24px;
      font-family: Source Han Sans CN;
      color: var(--main-assist-color4);
    }
  }

  .materails-write {
    border-top: 1px solid #ececec;
  }
}
.prev-btn,
.next-btn {
  width: 130px;
  height: 54px;
  border: 1px solid var(--main-theme-color1);
  border-radius: 8px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  color: var(--main-theme-color1);
}
.print-btn {
  width: 130px;
  height: 54px;
  background: linear-gradient(
    -90deg,
    var(--gradient-ramp-assist3),
    var(--gradient-ramp-theme3)
  );
  box-shadow: 0px 6px 12px 1px rgba(88, 193, 158, 0.2);
  border-radius: 8px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  color: #ffffff;
}
.sub-btn {
  width: 130px;
  height: 54px;
  background: linear-gradient(
    90deg,
    var(--main-theme-color1),
    var(--main-assist-color1)
  );
  box-shadow: 3px 5px 12px 1px rgba(11, 91, 233, 0.2);
  border-radius: 8px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  color: #ffffff;
}
</style>