<template>
  <el-dialog title="门类范围" :visible.sync="visible" top="5vh" v-dialogDrag width="70%" :close-on-click-modal="false"
    :before-close="cancel">
    <div class="dia-box">
      <div class="tree-box">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: 500px">
        <el-tree v-loading="treeLoading" ref="tree" show-checkbox check-on-click-node default-expand-all :data="treeData"
            :props="defaultProps" 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 > 0" 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>
      </div>
      <div class="type-box">
          <el-table v-if="treeData.length" size="mini" highlight-current-row :current-row-key="curRow.typeId" row-key="typeId" @row-click="rowClick" :data="typeList">
            <el-table-column label="类型" prop="type">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click.stop="save(scope.row)">保存</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getTree,
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import { saveCount, getCount } from "@/api/archives-management/annualReport"
  import { message } from "@/utils/common";

  export default {
    props: {
      visible: {
        type: Boolean,
        default: () => false
      },
    },
    data() {
      return {
        treeData: [],
        treeLoading: false,
        defaultProps: {
          children: "childClass",
          label: "className"
        },
        typeList: [
          { typeId: '1', type: '（纸质档案）'},
          { typeId: '2', type: '（电子档案）数码照片'},
          { typeId: '3', type: '（电子档案）数字录音、数字录像'},
          { typeId: '4', type: '（其他载体档案）照片档案'},
          { typeId: '5', type: '（其他载体档案）录音磁带，录像磁带，影片磁带'},
          { typeId: '6', type: '（其他载体档案）微缩胶片'},
          { typeId: '7', type: '（实物档案）'},
        ],
        curRow: {},
      };
    },
    methods: {
      save(row){
        const params = {
          type: row.type,
          typeId: row.typeId,
          scope: this.$refs.tree.getCheckedKeys().join(',')
        }
        saveCount(params).then(res => {
          if(res.code === '100'){
            message('success', '保存成功', 2000)
            this.curRow = row;
          }
        })
      },
      rowClick(row){
        this.curRow = row;
        const params = {
          typeId: row.typeId,
        }
        getCount(params).then(res => {
          if(res.code === '100'){
            const checkedKeys = res.body.annualScope.scope.split(',').map(item => parseInt(item))
            this.$refs.tree.setCheckedKeys(checkedKeys)
          }
        })
      },
      cancel() {
        this.curRow = {}
        this.$refs.tree.setCheckedKeys([]);
        this.$emit("cancel");
      },
      initTree(){
        this.treeLoading = true
        let data = {
          className: "档案"
        };
        getTree(data).then(res => {
            this.treeLoading = false
            if(res.code === '100'){
              this.treeData = res.body.list
            }
        }).catch(() => {
            this.treeLoading = false
        })
      }
    },
    created(){
        this.initTree()
    }
  };

</script>

<style lang="scss" scoped>
  .dia-box{
      width: 100%;
      display: flex;
      justify-content: space-around;
      .tree-box{
          width: 35%;
      }
      .type-box{
          width: 65%;
      }
  }
</style>
