<template>
  <div class="box">
    <el-card class="tree-box" shadow="always" :body-style="{ padding: '5px' }" ref='cardTree'>
      <div slot="header" class="clearfix">
        <span v-show="!status">选择档案门类</span>
        <el-button style="float: right; padding:  0" type="text" @click='btns'>
          <el-tooltip class="item" effect="dark" v-if="!status" content="折叠" placement="right">
            <svg-icon icon-class="leftzd" v-if="!status" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" v-if="status" content="展开" placement="left">
            <svg-icon icon-class="rightzd" v-if="status" />
          </el-tooltip>
        </el-button>
      </div>
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 160px)">
          <el-tree v-loading="treeLoading" highlight-current :data="treeData" :props="defaultProps"
            @node-click="handleNodeClick" default-expand-all node-key="id">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <!--可以根据情况，以数据类型来显示不同的图标或图片-->
              <svg-icon icon-class="wjj" style="margin-right: 5px; color: rgb(255, 207, 92)"
                v-if="data.childClass.length" class="iconfont icon-folder-open-fill" />
              <svg-icon icon-class="wj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-else
                class="iconfont icon-wenjian" />
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </el-scrollbar>
    </el-card>
    <div class="resize" title="收缩侧边栏">
      ⋮
    </div>
    <el-card class="form-box" ref='cardForm' shadow="always" :body-style="{ padding: '10px' }">
      <div slot="header" class="clearfix" style="padding:0">
        <span>
          质检项设置
        </span>
        <el-button :loading="btnloading" size="mini" style="float: right;padding: 3px 6px" type="primary"
          @click="saveQuality">保存设置
        </el-button>
      </div>
      <content-box :loading="tableLoading" :tableData="tableData" @getData="getData" @handSelect="handSelect" />
    </el-card>
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  import {
    message,
    dragControllerDiv
  } from '@/utils/common';
  import contentBox from "./components/content";
  import {
    saveQuality
  } from "@/api/system-management/qualityInspection"
  export default {
    data() {
      return {
        btnloading: false,
        status: false,
        defaultProps: {
          label: "className",
          children: "childClass",
        },
        multipleSelection: [], // 勾选项
        treeRow: {}
      }
    },
    components: {
      contentBox
    },
    computed: {
      ...mapState({
        tableData: (state) => state.qualityInspection.tableData,
        treeData: (state) => state.qualityInspection.treeData,
      }),
      treeLoading: {
        get() {
          return this.$store.state.qualityInspection.loading;
        },
        set(val) {
          this.$store.state.qualityInspection.loading = val;
        },
      },
      tableLoading: {
        get() {
          return this.$store.state.qualityInspection.tableLoading;
        },
        set(val) {
          this.$store.state.qualityInspection.tableLoading = val;
        },
      },
    },
    watch: {
      'status': {
        handler(val, oldVal) {
          const cardTree = this.$refs.cardTree.$el.style
          const cardForm = this.$refs.cardForm.$el.style
          if (val) {
            cardTree.width = '5%'
            cardForm.width = '94%'
          } else {
            cardTree.width = '22%';
            cardForm.width = '77%';
          }
        }
      },
    },
    methods: {
      btns() {
        this.status = !this.status
      },
      getTree() {
        this.$store.dispatch("qualityInspection/getTree", { className: "档案" })
      },
      handleNodeClick(data, node) {
        this.treeRow = data;
        if (node.isLeaf) {
          this.getData(data.id);
        }
      },
      // 获取表格数据
      getData(id) {
        this.tableLoading = true;
        const params = {
          entityId: id
        };
        this.$store.dispatch("qualityInspection/getData", params)
          .catch(err => {
            this.tableLoading = false;
          });
      },
      // 质检项保存
      saveQuality() {
        if (!this.multipleSelection.length) {
          message("warning", "请勾选数据", 2000);
          return false;
        }
        const params = {
          entityId: this.treeRow.id,
          inspectItemsIds: this.multipleSelection.map(item => item.id).join(',')
        }
        this.btnloading = true;
        saveQuality(params).then(res => {
          this.btnloading = false;
          if (res.code === "100") {
            message("success", "保存设置成功", 2000);
          }
        }).catch(err => {
          this.btnloading = false;
        })
      },
      handSelect(val) {
        this.multipleSelection = val;
      }
    },
    mounted() {
      dragControllerDiv()
    },
    created() {
      this.getTree()
    }
  }

</script>
<style lang='scss' scoped>
  .box {
    padding: 5px;
    display: flex;
    justify-content: space-around;
    background: #f6f8fc;
    height: 100%;

    .tree-box {
      width: 25%;

      .el-tree {
        width: 100%;
        margin-top: 10px;
      }

      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }

    }

    .form-box {
      width: 74%;
      height: calc(100vh - 95px);
      overflow-y: auto;

      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }

    }
  }

</style>
