<template>
  <div class="clxx">
    <div class="left">
      <div v-for="item in menuList" :key="item.id" :class="['item', checkedId == item.id ? 'active' : '']"
        @click="menuClick(item)">
        {{ item.label }}
      </div>
    </div>
    <div class="right">
      <!-- 材料目录明细 -->
      <div class="clmlmx-box" v-if="checkedId == '1'">
        <div class="title">申请材料目录</div>
        <lb-table :column="column" :key="key" :heightNum="150" :pagination="false" :data="tableData">
        </lb-table>
      </div>
      <!-- 材料预览 -->
      <div class="clyl-box" v-else>
        <div class="menu-tree">
          <div class="item">
            材料目录
            <i :class="iclass" @click="iconClick()"></i>
            <el-collapse-transition>
              <div v-show="menuOpen">
                <div v-for="item in tableData" :key="item.bsmSj"
                  :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)">
                  {{ item.sjmc }}
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>
        <image-preview :previewImg="previewImg" @updateList="updateList" />
      </div>
    </div>
    <clxxAddDialog v-model="isDialog" />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import clxxAddDialog from "./clxxAddDialog.vue";
import imagePreview from '@/views/components/imagePreview.vue'
import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js";
export default {
  components: { clxxAddDialog, imagePreview },
  data () {
    return {
      isDialog: false,
      menuList: [
        {
          id: "1",
          label: "材料目录明细",
        },
        {
          id: "2",
          label: "材料预览",
        },
      ],
      menuOpen: true,
      iclass: "itemIcon el-icon-caret-bottom",
      treeCheckId: "",
      checkedId: "1",
      column: [
        {
          width: "35",
          renderHeader: (h, scope) => {
            return (
              <i
                class="el-icon-plus pointer"
                onClick={() => {
                  this.handleAdd()
                }}
              ></i>
            );
          },
          render: (h, scope) => {
            // 新建的材料,可删除
            if (scope.row.sfxjcl === "1") {
              return (
                <i
                  class="el-icon-minus pointer"
                  onClick={() => {
                    this.handleDelete(scope.$index, scope.row);
                  }}
                ></i>
              );
            }
          },
        },
        {
          width: "35",
          label: "序号",
          type: "index",
        },
        {
          prop: "isrequired",
          label: "是否必选",
          width: "50",
          render: (h, scope) => {
            if (scope.row.sfxjcl === "1") {
              return (
                <div>
                  <span>可选</span>
                </div>
              );
            }
            else {
              return (
                <div>
                  <span>必选</span>
                </div>
              );
            }
          },
        },
        {
          prop: "sjmc",
          label: "材料名称",
        },
        {
          prop: "sjlx",
          label: "材料类型",
          width: "80",
          render: (h, scope) => {
            return (
              <div>
                <span>{this.dicStatus(scope.row.sjlx, "A40")}</span>
              </div>
            );
          },
        },
        {
          prop: "sjsl",
          label: "份数",
          width: "50"
        },
        {
          prop: "smzt",
          label: "扫描状态",
          width: "80",
          render: (h, scope) => {
            if (scope.row.children.length > 0) {
              return (
                <div>
                  <span>已扫描</span>
                </div>
              );
            } else {
              return (
                <div>
                  <span>未扫描</span>
                </div>
              );
            }
          },
        },
        {
          prop: "ys",
          label: "扫描页数",
          width: "50"
        },
        {
          label: "操作",
          width: "80",
          render: (h, scope) => {
            return (
              <div>
                <el-button
                  type="text"
                  disabled={scope.$index == 0}
                  onClick={() => {
                    this.moveUpward(scope.$index, scope.row);
                  }}
                >
                  上移
                </el-button>
                <el-button
                  type="text"
                  disabled={scope.$index + 1 == this.tableData.length}
                  onClick={() => {
                    this.moveDown(scope.$index, scope.row);
                  }}
                >
                  下移
                </el-button>
              </div>
            );
          },
        },
      ],
      key: 0,
      tableData: [],
      previewImg: {
        // 收件标识码
        bsmSj: '',
        bsmSlsq: this.$parent.bsmSlsq,
        index: 0,
        selectedIndex: 0,
        imgList: [
          {
            fjurl: 'https://img2.baidu.com/it/u=2955521104,3257476296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
  created () {
    this.clmlInitList()
  },
  methods: {
    // 材料目录明细初始化
    clmlInitList () {
      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) => {
          resolve(res.code)
          if (res.result.result && res.result.result.length > 0) {
            this.tableData = res.result.result;
            this.treeCheckId = this.tableData[0].bsmSj;
            this.title = this.tableData[0].sjmc;
            this.titleYs = 1;
            this.titleNum = this.tableData[0].children.length;

            this.previewImg.imgList = this.tableData[0]?.children;
            this.previewImg.bsmSj = this.tableData[0]?.bsmSj;
          }
        })
      })
    },
    updateList (val) {
      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
      }
    },
    // 左侧菜单点击
    menuClick (item) {
      this.checkedId = item.id
    },
    // 添加材料目录
    handleAdd () {
      this.isDialog = true;
    },
    // 上移
    moveUpward (index, row) {
      let obj = {
        xh: row.xh,
        bsmSlsq: row.bsmSlsq,
        moveDirection: "UP",
      };
      // 接口待调
      move(obj).then(async (res) => {
        if (res.code == 200) {
          let res = await this.clmlInitList()
          if (res == 200) this.$message({
            message: '上移成功',
            type: 'success'
          })
        } else {
          this.$message.error(res.message);
        }
      })
    },
    // 下移
    moveDown (index, row) {
      let obj = {
        xh: row.xh,
        bsmSlsq: row.bsmSlsq,
        moveDirection: "DOWN",
      }
      // 接口待调
      move(obj).then(async (res) => {
        if (res.code == 200) {
          let res = await this.clmlInitList()
          if (res == 200) this.$message({
            message: '下移成功',
            type: 'success'
          })
        } else {
          this.$message.error(res.message);
        }
      })
    },
    // 新增弹窗保存
    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()
          if (res == 200) this.$message({
            message: "新增成功",
            type: "success",
          })
        }
      });
    },
    // 材料目录删除
    handleDelete (index, row) {
      let that = this
      this.$confirm('此操作将永久删除该 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clmlDelete({ sjBsm: row.bsmSj }).then(async (res) => {
          if (res.code == 200) {
            let res = await that.clmlInitList()
            if (res == 200) that.$message({
              message: "删除成功",
              type: "success",
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 材料目录关闭收起
    iconClick () {
      this.menuOpen = !this.menuOpen;
      if (this.menuOpen) {
        this.iclass = "itemIcon el-icon-caret-bottom close";
      } else {
        this.iclass = "itemIcon el-icon-caret-bottom open";
      }
    },
    // 材料目录点击选中
    treeClick (item) {
      this.treeCheckId = item.bsmSj;
      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;
      }
    },
  },
};
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";

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

.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 {
          height: 60px;
          line-height: 60px;
          border-bottom: 1px solid #e8e8e8;
          font-size: 16px;
          color: #4a4a4a;

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

          @keyframes open {
            100% {
              transform: rotate(180deg);
            }
          }

          @keyframes close {
            0% {
              transform: rotate(180deg);
            }

            100% {
              transform: rotate(-0deg);
            }
          }

          .open {
            animation: open 0.5s;
            animation-fill-mode: both;
          }

          .close {
            animation: close 0.5s;
            animation-fill-mode: both;
          }

          .child {
            line-height: 36px;
            border-bottom: 1px solid #e8e8e8;
            padding-left: 10px;
            color: #6b6b6b;
            cursor: pointer;
            box-sizing: border-box;
          }

          .checked {
            border-radius: 6px;
            border: 1px solid #4083f9;
          }
        }
      }

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