<template>
  <!-- 自助填单页面 -->
  <div class="write-page flex flexc">
    <Header>
      <div slot="title" class="title">样表展示</div>
      <div
        slot="right"
        class="back-home flex aic jcc ml20"
        @click="handleBackHome"
        v-onEvent="{
          eventName: '点击',
          eventCode: 'Click',
          businessCode: 'back_homepage',
          businessName: '返回首页',
          routers: $route,
        }"
      >
        <i class="iconfont icon-home mr10"></i>
        <span>首页</span>
      </div>
    </Header>
    <div class="main flex1 flex jcc scroll3">
      <div
        class="preview-box flex flexc aic"
        v-for="(v, i) in materailsList"
        :key="v.id"
        v-show="active === i"
      >
        <div class="short">{{ v.materialName }}</div>
        <div class="full-name">材料全称：{{ v.materiaFullName }}</div>
        <div
          class="preview-img-box flex aic jcc"
          :style="{
            width: width * (scale / 100) + 'px',
            height: v.height * (scale / 100) + 'px',
          }"
        >
          <img
            :style="{
              transform: `scale(${scale / 100})`,
              width: width + 'px',
              height: v.height + 'px',
            }"
            class="preview-img"
            :src="api + v.preViewPath"
          />
        </div>
      </div>
      <!-- 放大，缩小 -->
      <div class="control-box">
        <div
          class="control-btn"
          v-onEvent="{
            eventName: '点击',
            eventCode: 'Click',
            businessCode: 'expansion',
            businessName: '放大表单',
            routers: $route,
          }"
          @click="handleEnlargement"
        >
          <i class="el-icon-zoom-in"></i>
        </div>
        <div
          class="control-btn"
          v-onEvent="{
            eventName: '点击',
            eventCode: 'Click',
            businessCode: 'shrink',
            businessName: '缩小表单',
            routers: $route,
          }"
          @click="handleShrink"
        >
          <i class="el-icon-zoom-out"></i>
        </div>
      </div>
      <!-- 侧边栏弹窗 -->
      <div class="sidebar-box" :class="{ show: !showSidebar }">
        <!-- 侧边内容 -->
        <div class="sidebar-main">
          <div
            class="title flex jcc aic"
            v-onEvent="{
              eventName: '点击',
              eventCode: 'Click',
              businessCode: 'hidden_sidebar',
              businessName: '隐藏边栏',
              routers: $route,
            }"
            @click="showSidebar = false"
          >
            <span class="mr30"> 样表展示 </span>
            <span class="icon2">
              <i class="el-icon-d-arrow-left"></i>
            </span>
          </div>
          <!-- 申请编号  -->
          <!-- <div class="apply-num tac" v-ellipsis="'340px'">
            申请编号：DX123456789
          </div> -->
          <!-- 事项名称 -->
          <div class="matter-name tac" v-ellipsis="'340px'">
            {{ matterName }}
          </div>
          <!-- 材料列表 -->
          <div class="materails-list scroll3">
            <div
              class="materails-item pdl10"
              v-ellipsis="'330px'"
              :class="{ active: i === active }"
              v-for="(v, i) in materailsList"
              :key="v.id"
              @click="changeIndex(v, i)"
              v-onEvent="{
                eventName: '点击',
                eventCode: 'Click',
                businessCode: 'change_materials',
                businessName: '切换表单',
                routers: $route,
              }"
            >
              {{ v.materialName ? v.materialName : v.materiaFullName }}
              <div class="line"></div>
            </div>
          </div>
        </div>

        <!-- 侧边按钮 -->
        <div
          class="sidebar-btn flex jcc aic"
          v-show="!showSidebar"
          @click="showSidebar = true"
          v-onEvent="{
            eventName: '点击',
            eventCode: 'Click',
            businessCode: 'show_sidebar',
            businessName: '显示边栏',
            routers: $route,
          }"
        >
          <div class="sidebar-btn-text flex flexc aic">
            <span class="sidebar-btn-title"> 样表展示 </span>
            <span class="mt15 mb15">
              {{ active + 1 }}/{{ materailsList.length }}
            </span>
            <span class="icon1">
              <i class="el-icon-d-arrow-right"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import { getMaterialsList, checkMaterials } from "@/api";
import local from "@/utils/local";
import { mapGetters } from "vuex";
// import Hammer from "hammerjs";
export default {
  components: {
    Header,
  },
  data() {
    return {
      api: local.getLocal("serverUrl"),
      matterInfo: {},
      matterName: "", // 事项名称
      matterId: this.$route.query.matterId, // 事项id
      materailsId: this.$route.query.id, // 材料id
      materailsList: [],
      active: 0,
      scale: 100,
      showSidebar: false, // 切换侧边弹窗显示
      width: 800,
    };
  },
  computed: {
    ...mapGetters(["operTime"]),
  },
  created() {
    this.getMaterialsList();
    // this.materailsList=this.matterInfo.matterDatumList;
  },
  mounted() {
    // this.handleScale();
  },

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

    // 获取材料列表
    async getMaterialsList() {
      let res = await getMaterialsList({
        page: 1,
        size: -1,
        matterId: this.matterId,
      });
      let { data } = res.data.data;
      if (!data.length) return;
      data.forEach((v) => {
        let image = new Image();
        image.src = this.api + v.preViewPath;
        image.onload = function () {
          v.height = image.height;
        };
      });
      this.materailsList = data;
      this.matterName = this.$route.query.matterName
        ? this.$route.query.matterName
        : data[0].matterName;
      this.active = this.materailsList.findIndex(
        (v) => v.id == this.materailsId
      );
      let curInfo = this.materailsList.find((v) => v.id == this.materailsId);
      // 统计报表
      this.checkMaterials(
        curInfo.matterId,
        curInfo.matterName,
        curInfo.matterFullName,
        curInfo.materialName,
        curInfo.materialFullName
      );
    },

    // 放大
    handleEnlargement() {
      this.scale += 20;
      if (this.scale > 200) {
        this.scale = 200;
      }
    },

    // 缩小
    handleShrink() {
      if (this.scale > 100) {
        this.scale -= 20;
      } else if (this.scale <= 100) {
        this.scale = 100;
      }
    },
    // 统计报表
    async checkMaterials(
      matterId,
      matterName,
      matterFullName,
      materialName,
      materialFullName
    ) {
      await checkMaterials({
        matterId,
        matterName,
        matterFullName,
        materialName,
        materialFullName,
        operTime: this.operTime ? this.operTime : null,
      });
    },
    // 切换材料
    changeIndex(row, index) {
      this.active = index;
      this.checkMaterials(
        row.matterId,
        row.matterName,
        row.materiaFullName,
        row.materialName,
        row.materialFullName
      );
    },
    // 手势放大缩小
    // handleScale() {
    //   setTimeout(() => {
    //     let _this = this;
    //     const img = this.$refs.PreviewImg;
    //     const PreviewImg = new Hammer(img);
    //     PreviewImg.get("pinch").set({ enable: true });
    //     PreviewImg.on("pinchmove", function (e) {
    //       if (e.scale > 1) {
    //         _this.scale += 5;
    //         if (_this.scale > 200) {
    //           _this.scale = 200;
    //         }
    //       } else if (e.scale <= 1) {
    //         _this.scale = 100;
    //       }
    //     });
    //   }, 100);
    // },
  },
};
</script>

<style lang="less" scoped>
.write-page {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .back-home {
    width: 150px;
    height: 64px;
    border: 1px solid var(--main-h1-color);
    border-radius: 8px;
    cursor: pointer;
    .el-icon-arrow-left,
    .icon-home {
      font-size: 26px;
      color: var(--main-h1-color);
    }
    span {
      font-size: 28px;
      font-family: Microsoft YaHei;
      color: var(--main-h1-color);
    }
  }
}
.main {
  width: 100%;
  position: relative;
  .sidebar-box {
    width: 360px;
    min-height: 340px;
    padding: 10px;
    background: #fff;
    box-shadow: 6px -1px 10px 0px rgba(0, 0, 0, 0.11);
    border-radius: 0px 38px 8px 0px;
    position: fixed;
    top: 230px;
    left: 0px;
    z-index: 10;
    transition: all 500ms;
    .materails-list {
      max-height: 600px;
    }
    .title {
      margin-bottom: 15px;
      font-size: 22px;
      font-family: Source Han Sans CN;
      color: #333333;
      position: relative;
      i {
        font-size: 18px;
      }
    }
    .icon1 {
      width: 26px;
      height: 26px;
      // background: var(--main-assist-color);
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 16px;
        color: var(--main-theme-color);
      }
    }
    .icon2 {
      display: inline-block;
      width: 34px;
      height: 34px;
      background: var(--main-assist-color);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      position: absolute;
      right: 28px;
      cursor: pointer;
    }
    .apply-num {
      margin-bottom: 20px;
      font-size: 18px;
      color: #666666;
    }
    .matter-name {
      width: 186px;
      height: 38px;
      margin-bottom: 20px;
      background: #f2f6fe;
      border-radius: 4px;
      line-height: 38px;
      font-size: 22px;
      color: var(--main-theme-color);
    }
    .materails-item {
      height: 42px;
      line-height: 40px;
      font-size: 22px;
      cursor: pointer;
      color: #333333;
    }
    .line {
      height: 1px;
      width: 100%;
      background-image: linear-gradient(
        to right,
        #fff,
        #ccc 10%,
        #ccc 80%,
        #fff
      );
    }
    .active {
      color: var(--main-theme-color);
      .line {
        background-image: linear-gradient(
          to right,
          #fff,
          var(--main-theme-color) 10%,
          var(--main-theme-color) 80%,
          #fff
        );
      }
    }

    .sidebar-btn {
      width: 84px;
      height: 276px;
      background: linear-gradient(
        90deg,
        var(--main-theme-color),
        var(--main-assist-color)
      );
      box-shadow: 6px -1px 10px 0px rgba(11, 92, 233, 0.11);
      border-radius: 0px 38px 8px 0px;
      font-size: 24px;
      color: #ffffff;
      cursor: pointer;
      position: absolute;
      right: -84px;
      top: 50px;
      .sidebar-btn-title {
        writing-mode: vertical-lr;
        letter-spacing: 3px;
      }
    }
  }
  .show {
    left: -360px;
  }
  .preview-box {
    width: 600px;
    padding-top: 50px;
    position: absolute;
    // .preview-img-box {
    //   margin: auto;
    // }
  }
  .short {
    font-size: 34px;
    color: var(--main-theme-color);
  }
  .full-name {
    margin-top: 10px;
    margin-bottom: 24px;
    font-size: 30px;
    color: #888888;
  }
  // .preview-img {
  // }
  // 放大控制
  .control-box {
    position: fixed;
    right: 200px;
    bottom: 36px;
    z-index: 10;
    .control-btn {
      width: 100px;
      height: 100px;
      margin-top: 40px;
      background: #ffffff;
      box-shadow: 0px 0px 24px 3px rgba(0, 0, 0, 0.07);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      i {
        font-size: 54px;
        color: var(--main-theme-color);
      }
    }
  }
}
</style>