<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>
      <div class="t_tree_scrollbar">
        <!-- <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> -->
      </div>
    </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">
        <el-row>
          <el-col :span="6">
            <span>
              不开放数据控制
            </span>
          </el-col>
          <el-col :span="18">
            <el-form :inline="true" label-width="120px" size="small">
              <el-form-item label="是否开放档案">
                <el-radio-group v-model="isOpenArchive" @change="handleChnageIsOpen">
                  <el-radio :label="0">开放</el-radio>
                  <el-radio :label="1">不开放</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <!-- <el-button v-if="isOpenArchive==0" :disabled="isFlag" size="mini" type="primary" @click="executeOpen">保存生效</el-button> -->
                <el-button :disabled="isFlag" size="mini" type="success" @click="showAdd">新建条件</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <content-box :loading="tableLoading" :tableData="tableData" @getData="getData" @clickDel="handleClickRowDel" />
    </el-card>

    <!-- 添加条件 -->
    <add-contion :visible="isShowAdd" :treeRow="treeRow" :treeParentId="treeParentId" :isOpenArchive="isOpenArchive" :entityArray="entityArray" :form="addForm" @cancel="cancel" @clickAdd="handleClickAdd"></add-contion>
  </div>
</template>
<script>
  import {mapState} from "vuex";
  import {message,dragControllerDiv} from '@/utils/common';
  import {getEntityTable} from "@/api/system-management/templateSetting";
  import { addOpenCondition,delOpenCondition,executeOpen} from "@/api/system-management/openControl"
  import contentBox from "./components/content";
  import addContion from "./components/add.vue";
  export default {
    data() {
      return {
        isFlag:true, // 是否可用
        entityArray:[], // 实体字段数据
        isShowAdd:false, // 是否展示新增弹框
        isOpenArchive:0, // 默认开放
        btnloading: false,
        defaultProps: {
          label: "className",
          children: "childClass",
        },
        status: false,
        treeParentId:null,// 节点父id
        treeRow: {},
        addForm:{
          fieldCh:'',
          fieldEg:'',
          compare:'',
          value:''
        },
      }
    },
    components: {
      contentBox,
      addContion
    },
    computed: {
      ...mapState({
        tableData: (state) => state.openDataControl.tableData,
        treeData: (state) => state.openDataControl.treeData,
      }),
      treeLoading: {
        get() {
          return this.$store.state.openDataControl.loading;
        },
        set(val) {
          this.$store.state.openDataControl.loading = val;
        },
      },
      tableLoading: {
        get() {
          return this.$store.state.openDataControl.tableLoading;
        },
        set(val) {
          this.$store.state.openDataControl.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: {
      // 获取档案门类对象上一级的父id 
      executeOpen(){
        executeOpen().then((res)=>{
          if(res.code == 100){
            message('success','保存生效成功',3000);
          }
        })
      },
      // 切换是否开放
      handleChnageIsOpen(val){
        if(Object.keys(this.treeRow).length === 0){
          message('warning','请选择档案门类',3000);
          return;
        }
        this.getData(this.treeRow.id);
      },
      // 获取实体对应的字段
      getEntityTable(){
        let params = {
          entityId:this.treeRow.id
        }
        getEntityTable(params).then((res)=>{
          let resultData = res.body.tableStructDescriptionList || [];
          this.entityArray = resultData;
        })
      },
      cancel(){
        this.isShowAdd = false;
        this.addForm = {
          fieldCh:'',
          fieldEg:'',
          compare:'',
          value:''
        }
      },
      // 展示-显示新增
      showAdd(){
        this.isShowAdd = true;
      },
      // 新增-确定按钮
      handleClickAdd(params){
        addOpenCondition(params).then(res=>{
          if(res.code == 100){
            this.isShowAdd = false;
            this.getData(this.treeRow.id);
            message('success',res.msg,3000);
          }
          this.addForm = {
            fieldCh:'',
            fieldEg:'',
            compare:'',
            value:''
          }
        }).catch(error=>{
          this.isShowAdd = false;
          //message('error',error,3000);
        })
        
      },
      // 删除行
      handleClickRowDel(row){
        this.$confirm("确定删除数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          delOpenCondition({id:row.id}).then(res=>{
            if(res.code == 100){
              this.getData(this.treeRow.id);
              message('success',res.msg,3000);
            }
          }).catch(error=>{
            message('error',error,3000);
          })
        })
      },
      btns() {
        this.status = !this.status
      },
      getTree() {
        this.$store.dispatch("openDataControl/getTree", { className: "档案" });
        this.getData(null);
      },
      handleNodeClick(data, node) {
        this.treeParentId = null;
        this.treeRow = data;
        if (node.isLeaf) {
          this.isFlag = false;
          this.getData(data.id);
          // 获取实体字段
          this.getEntityTable();
          // 获取树节点对应的父节点
          this.treeParentId = this.findParentId(this.treeData,this.treeRow.id)
        }
      },
      // 查询门类节点的父节点
      findParentId(data, targetId, parentId = null) {
        let _this = this;
        for (const node of data) {
            if (node.id === targetId) {
              return parentId;
            }
            if (node.childClass) {
              const parent = _this.findParentId(node.childClass, targetId, node.id);
              if (parent) {
                  return parent;
              }
            }
        }
        return null;
      },
      // 获取表格数据
      getData(id) {
        if(id=='' || id==null){
          this.$store.state.openDataControl.tableData = [];
          return;
        }
        const params = {
          entityId: id,
          openType:this.isOpenArchive
        };
        this.$store.dispatch("openDataControl/getData", params)
          
      },
    },
    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>
