<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:42:32
-->
<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 { InitClml, saveClml, deleteSjClml, moveClml } from "@/api/clxx.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",
        };
        // 接口待调
        moveClml(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",
        }
        // 接口待调
        moveClml(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", // 是否必选
        };
        saveClml(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(() => {
          deleteSjClml({ 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>