<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="!this.$route.query.viewtype">新增</el-button>
        </div>
        <image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
          @prevPriview="prevPriview" />
      </div>
    </div>
    <clxxAddDialog v-model="isDialog" />
    <clxxDetailDialog v-model="detailDialog" :data="tableData"/>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import clxxAddDialog from "./clxxAddDialog.vue";
import clxxDetailDialog from "./clxxDetailDialog.vue";
import imagePreview from '@/views/components/imagePreview.vue'
import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js";
import { popupDialog } from "@/utils/popup.js";
export default {
  components: { clxxAddDialog, imagePreview,clxxDetailDialog },
  data () {
    return {
      isDialog: false,
      detailDialog: 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)
  },
  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);
        clmlInit(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 != null) { //删除最后一张图片时 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", // 是否必选
      };
      save(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
      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.detailDialog = 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 {
  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>