<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-05 09:55:42
-->
<template>
  <div class="clxx">
    <div class="right">
      <!-- 材料预览 -->
      <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 style="margin-top:10px">
              <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>
                {{ item.sjmc }}
                <span class="cl_number">({{item.children ? item.children.length : 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' v-if="tableData.length>0" :previewImg="previewImg" :ableOperation="ableOperation" @updateList="updateList"
          @nextPriview="nextPriview"
          @prevPriview="prevPriview" />
      </div>
    </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, deleteSjClml, moveClml } from "@/api/clxx.js";
  import { popupDialog } from "@/utils/popup.js";
  export default {
    components: { clxxAddDialog, imagePreview, clxxDetailDialog },
    data () {
      return {
        //表单是否可操作
        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)
    },
      mounted() {
         this.ableOperation=this.$parent.ableOperation
     },
    methods: {
      // 自动预览
      nextPriview () {
        if (this.treeCheckIndex < this.tableData.length) {
          this.treeCheckIndex++
          this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
          this.previewImg.index = 0
          this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
          this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
        }
      },
      prevPriview () {
        if (this.treeCheckIndex >= 1) {
          this.treeCheckIndex--
          this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
          this.previewImg.index = this.previewImg.imgList.length
          this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
          this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
        }
      },
      // 材料目录明细初始化
      clmlInitList (type) {
        //type  1：列表初始化  2：新增材料
        return new Promise(resolve => {
          this.unitData = this.$parent.unitData;
          var formdata = new FormData();
          formdata.append("bsmSldy", this.unitData[0]?.bsmSldy);
          formdata.append("bsmSlsq", this.$parent.bsmSlsq);
          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 {
                  //新增材料后刷新列表焦点置于新增的对象上
                  this.treeClick(this.tableData[this.tableData.length - 1], this.tableData.length - 1);
                }
              }
            } else {
              this.$message.error(res.message)
            }
          })
        })
      },
      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;
      },
      updateList (val) {
        let that = this
        if (val.children.length != []) { //删除最后一张图片时 val=null
          this.tableData.forEach(item => {
            if (item.bsmSj === val.bsmSj) {
              item.children = val.children
            }
          })
          this.previewImg.imgList = _.cloneDeep(val.children)
          if (this.previewImg.index == this.previewImg.imgList.length) {
            this.previewImg.index = this.previewImg.index - 1
          }
        } else {
          this.previewImg.imgList = []
          this.tableData.forEach((item, index) => {
            if (this.treeCheckId == item.bsmSj) {
              item.children = []
              that.treeCheckIndex = index
            }
          })
        }
      },
      // 添加材料目录
      handleAdd () {
        this.isDialog = true;
      },
      // 新增弹窗保存
      addSave (data) {
        let obj = {
          bsmSlsq: this.$parent.bsmSlsq,
          isrequired: "1",
          sjmc: data.clmc,
          sjsl: 0,
          smzt: '',
          ys: 0,
          sjlx: data.cllx,
          sfxjcl: "1", // 是否必选
        };
        saveClml(obj).then(async (res) => {
          if (res.code == 200) {
            let res = await this.clmlInitList(2)
            if (res == 200) this.$message({
              message: "新增成功",
              type: "success",
            })
          }
        });
      },
      // 材料目录点击选中
      treeClick (item, index) {
        this.previewImg.index = 0
        this.treeCheckId = item?.bsmSj
        this.treeCheckIndex = index
        this.previewImg.imgList = item.children ? item.children : []
        this.previewImg.bsmSj = item?.bsmSj
      },
      // 小图片点击
      imgClick (item, index) {
        this.showImg = item;
        this.titleYs = index + 1;
      },
      // 字典
      dicStatus (val, code) {
        let data = this.$store.getters.dictData[code],
          name = "暂无";
        if (data) {
          data.map((item) => {
            if (item.dcode == val) {
              name = item.dname
            }
          });
          return name
        }
      },
      //查看明细
      viewDetail () {
        this.$popupDialog("查看明细", "workflow/components/dialog/clxxDetailDialog", {
          data: this.tableData
        }, "60%")
      },
      //设置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 {
    float: right;
  }

  .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;
        }
      }
    }

    .right {
      width: 100%;
      height: 100%;

      .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;

        .menu-tree {
          width: 20%;
          min-width: 160px;
          height: 100%;
          margin-right: 10px;
          border-right: 1px dotted #d9d9d9;
          padding: 0 15px;

          .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;
            }

            .child:hover {
              color: $light-blue;
              transform: scale(1.1);
            }

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

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