<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-10-24 16:08:44
-->
<template>
  <div class="clxx">
    <!-- 材料预览 -->
    <div class="clyl-box">
      <div class="menu-tree">
        <el-button
          type="primary"
          native-type="submit"
          @click="viewDetail"
          style="width: 100%; margin-top: 10px">申请材料目录</el-button>
        <div class="item">
          材料目录({{ tableData.length }})
          <div class="tableList">
            <div
              style="
                  text-align: center;
                  line-height: 20px;
                  color: black;
                  font-size: 14px;
                "
              v-if="tableData.length == 0">
              暂无数据
            </div>
            <div
              v-for="(item, index) in tableData"
              :key="item.bsmSj"
              :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
              @click="treeClick(item, index)">
              <span v-if="item.isrequired == 1" class="required">必选</span>
              <span class="item_name">{{ item.sjmc }}</span>
              <span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span>
            </div>
          </div>
        </div>
        <el-button
          type="primary"
          native-type="submit"
          style="width: 100%"
          @click="handleAdd()"
          v-if="ableOperation">新增</el-button>
      </div>
      <image-preview
        ref="imageRef"
        :key="imgKey"
        v-if="tableData.length > 0"
        :previewImg="previewImg"
        :ableOperation="ableOperation"
        @updateList="updateList"
        @nextPriview="nextPriview"
        @prevPriview="prevPriview" />
    </div>
    <clxxAddDialog v-model="isDialog" />
  </div>
</template>
<script>
  import { mapGetters } from "vuex";
  import clxxAddDialog from "../dialog/clxxAddDialog.vue";
  import clxxDetailDialog from "../dialog/clxxDetailDialog.vue";
  import imagePreview from "@/views/components/imagePreview.vue";
  import { InitClml, saveClml, getClmxList } from "@/api/clxx.js";
  export default {
    components: { clxxAddDialog, imagePreview, clxxDetailDialog },
    data () {
      return {
        imgKey: 0,
        //表单是否可操作
        ableOperation: true,
        isDialog: false,
        iclass: "",
        // 材料目录选中
        treeCheckIndex: 0,
        treeCheckId: "",
        key: 0,
        tableData: [],
        previewImg: {
          // 收件标识码
          bsmSj: "",
          bsmSlsq: this.$parent.bsmSlsq,
          index: 0,
          selectedIndex: 0,
          imgList: [],
        },
      };
    },
    computed: {
      ...mapGetters(["dictData"]),
    },
    created () {
      this.clmlInitList(1);
    },
    computed: {
      ...mapGetters(["workFresh"]),
    },
    watch: {
      workFresh: {
        handler (newVal, oldVal) {
          if (newVal) this.clmlInitList(1);
        },
      },
    },
    mounted () {
      this.ableOperation = this.$parent.ableOperation;
    },
    methods: {
      /**
       * @description: 自动预览
       * @author: renchao
       */
      nextPriview () {
        if (this.treeCheckIndex < this.tableData.length) {
          this.treeCheckIndex++;
          if (this.tableData[this.treeCheckIndex]) {
            this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
            // 判断页数
            let ys = this.tableData[this.treeCheckIndex].ys
            this.previewImg.index = 0;
            // 获取材料明细
            if (ys > 0) {
              getClmxList(this.treeCheckId).then(res => {
                this.previewImg.imgList = res.result ? res.result : [];
              })
            } else {
              this.previewImg.imgList = []
            }
            this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
          } else {
            this.$message.error('没有最后一张了');
          }
        }
      },
      /**
       * @description: prevPriview
       * @author: renchao
       */
      prevPriview () {
        if (this.treeCheckIndex >= 1) {
          this.treeCheckIndex--;
          this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
          // 判断页数
          let ys = this.tableData[this.treeCheckIndex].ys
          if (ys > 0) {
            // 获取材料明细
            getClmxList(this.treeCheckId).then(res => {
              this.previewImg.imgList = res.result ? res.result : [];
              this.previewImg.index = this.previewImg.imgList.length - 1;
            })
          } else {
            this.previewImg.imgList = [];
            this.previewImg.index = 0
          }
          this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
        } else {
          this.$message.error('没有第一张了');
        }
      },
      /**
       * @description: 材料目录明细初始化
       * @param {*} type
       * @author: renchao
       */
      clmlInitList (type) {
        //type  1：列表初始化  2：新增材料
        return new Promise((resolve) => {
          this.unitData = this.$parent.unitData;
          var formdata = new FormData();
          formdata.append("bsmSlsq", this.$parent.bsmSlsq);
          formdata.append("bsmSldy", this.$parent.currentSelectProps.bsmSldy);

          InitClml(formdata).then((res) => {
            if (res.code == 200) {
              resolve(res.code);
              if (res.result && res.result.length > 0) {
                this.tableData = res.result;
                if (type == 1) {
                  this.treeClick(this.tableData[0], 0);
                } else if (type == 2) {
                  //新增材料后刷新列表焦点置于新增的对象上
                  this.treeClick(
                    this.tableData[this.tableData.length - 1],
                    this.tableData.length - 1
                  );
                }
              }
            } else {
              this.$message.error(res.message);
            }
          });
        });
      },
      /**
       * @description: setChecked
       * @param {*} item
       * @author: renchao
       */
      setChecked (item) {
        this.treeCheckId = item.bsmSj;
        this.title = item.sjmc;
        this.titleYs = 1;
        this.titleNum = item.children.length;
        this.previewImg.imgList = item.children;
        this.previewImg.bsmSj = item.bsmSj;
      },
      /**
       * @description: updateList
       * @param {*} val
       * @author: renchao
       */
      updateList (val) {
        let that = this;
        if (val.children.length != 0) {
          //删除最后一张图片时 val=null
          this.tableData.forEach((item) => {
            if (item.bsmSj === val.bsmSj) {
              item.ys = val.children.length;
            }
          });
          this.previewImg.imgList = _.cloneDeep(val.children);
          if (this.previewImg.index == this.previewImg.imgList.length) {
            this.previewImg.index = this.previewImg.index - 1;
          }
          this.key++
        } else {
          this.previewImg.imgList = [];
          this.tableData.forEach((item, index) => {
            if (this.treeCheckId == item.bsmSj) {
              item.ys = 0;
              that.treeCheckIndex = index;
            }
          });
        }
      },
      /**
       * @description: 添加材料目录
       * @author: renchao
       */
      handleAdd () {
        this.isDialog = true;
      },
      /**
       * @description: 新增弹窗保存
       * @param {*} data
       * @author: renchao
       */
      addSave (data) {
        let obj = {
          bsmSlsq: this.$parent.bsmSlsq,
          isrequired: "1",
          sjmc: data.clmc,
          sjsl: 0,
          smzt: "",
          ys: 0,
          sjlx: data.cllx,
          sfxjcl: "1", // 是否必选
          sfggcl: data.sfggcl,
        };
        //是否公共材料
        if (data.sfggcl == "0") {
          obj["bsmSldy"] = this.$parent.currentSelectProps.bsmSldy;
        }
        if (this.$route.query?.djywbm == "DJBBL") {
          obj.bsmSldy = this.$parent.bsmRepair
        }
        saveClml(obj).then(async (res) => {
          if (res.code == 200) {
            let res = await this.clmlInitList(2);
            if (res == 200)
              this.$message({
                message: "新增成功",
                type: "success",
              });
          }
        });
      },
      /**
       * @description: 材料目录点击选中
       * @param {*} item
       * @param {*} index
       * @author: renchao
       */
      treeClick (item, index) {
        this.previewImg.index = 0;
        this.treeCheckId = item?.bsmSj;
        this.treeCheckIndex = index;
        // 获取材料明细
        getClmxList(item.bsmSj).then(res => {
          this.previewImg.imgList = res.result ? res.result : [];
        })
        this.previewImg.bsmSj = item?.bsmSj;
        if (this.$refs.imageRef) {
          this.$refs.imageRef.initialIndex = 0
        }
        this.imgKey++
      },
      /**
       * @description: 小图片点击
       * @param {*} item
       * @param {*} index
       * @author: renchao
       */
      imgClick (item, index) {
        this.showImg = item;
        this.titleYs = index + 1;
      },
      //查看明细
      async viewDetail () {
        await this.clmlInitList();
        this.$store.dispatch("user/reWorkFresh", false);
        this.$popupDialog(
          "申请材料目录",
          "workflow/components/dialog/clxxDetailDialog",
          {
            data: this.tableData,
            bsmSldy: this.$parent.currentSelectProps.bsmSldy,
            unitData: this.$parent.unitData,
            ableOperation: this.$parent.ableOperation,
            bsmRepair: this.$parent.bsmRepair
          },
          "60%",
          true
        )
      },
      //设置tableData
      setTableData (tableData) {
        this.$nextTick((res) => {
          this.tableData = tableData;
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";

  .active {
    background: $light-blue !important;
    color: #fff;
  }

  .required {
    font-size: 12px;
    color: $pink;
    float: left;
  }

  .cl_number {
    width: 30px;
  }

  .clxx {
    width: 100%;
    display: flex;
    padding-left: 5px;
    height: calc(100vh - 125px);

    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .item {
        width: 28px;
        height: 49%;
        @include flex-center;
        background-color: #e4e7ed;
        border-bottom-right-radius: 10px;
        padding: 5px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          @extend .active;
        }
      }
    }

    .clmlmx-box {
      margin: 0 auto;

      .title {
        text-align: center;
        height: 60px;
        line-height: 60px;
        border: 1px solid #dfe6ec;
        font-size: 20px;
        background: #81d3f81a;
        margin-bottom: -1px;
      }
    }

    .clyl-box {
      width: 100%;
      height: 100%;
      display: flex;
      .tableList {
        margin-top: 10px;
      }
      .menu-tree {
        width: 20%;
        min-width: 160px;
        height: 100%;
        font-size: 14px;
        border-right: 1px dotted #d9d9d9;
        padding: 0 10px;

        .item {
          line-height: 30px;
          padding-top: 5px;
          border-bottom: 1px solid #e8e8e8;
          font-size: 16px;
          text-align: center;
          color: $light-blue;

          .itemIcon {
            float: right;
            line-height: 60px;
            cursor: pointer;
          }

          .child {
            line-height: 32px;
            border-bottom: 1px solid #e8e8e8;
            padding-left: 10px;
            color: #6b6b6b;
            cursor: pointer;
            box-sizing: border-box;
            border-radius: 6px;
            line-height: 20px;
            transition: all 0.3s;
            padding: 8px 0;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
          }
          .item_name {
            flex: 1;
            font-size: 14px;
            display: flex;
            justify-content: center;
          }
          .child:hover {
            color: $light-blue;
            transform: scale(1.1);
          }

          .checked {
            border: 1px solid $light-blue;
            color: $light-blue;
            box-sizing: border-box;
          }
        }
      }

      .clyl-img {
        width: 75%;
        height: 100%;
        background: #f3f4f7;
        margin: 0 auto;
        position: relative;
      }
    }
  }
</style>