<template>
  <el-container>
    <el-col :span="5" style="margin-right: 15px;" v-if="dataView == true">
      <div class="scroll" v-bind:style="{height: screenHeight+'px'}">
        <el-input placeholder="请输入分类内容" suffix-icon="el-icon-search" v-model="filterText" clearable></el-input>
        <el-scrollbar style="height:80%;">
          <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all
            :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </el-scrollbar>
      </div>
    </el-col>

    <el-col :span="19" v-if="dataView == true">
      <div class="app-container" style="background:#fff;">
        <div style="padding-left:20px;box-sizing: border-box;">
          <div class="tab-toolbar">
            <el-form :model="formCre"  ref="formCre" class="demo-form-inline mar-l-0">
              <div class="search-row-b5">
                <el-form-item label="中文名称: " class="mar-l-30" prop="molName">
                  <el-input clearable class="search-width" v-model="formCre.molName"></el-input>
                </el-form-item>

                <el-form-item label="所属部门：" class="mar-l-30" prop="molUnit" v-show="unitIsShow">
                  <el-cascader clearable :options="listTi" v-model="formCre.molUnit" change-on-select
                    :show-all-levels="false" :props="unitProps" class="select-width"></el-cascader>
                </el-form-item>
                <el-form-item label="创建类型：" class="mar-l-30" prop="molCreateType">
                  <el-select v-model="formCre.molCreateType" placeholder="请选择" clearable class="search-width">
                    <el-option v-for="item in publicTypeOptions" :key="item.cogKey" :label="item.cogValue"
                      :value="item.cogKey"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="表名: " class="mar-l-30" style="margin-right:20px;" prop="molTableName">
                  <el-input clearable class="search-width" v-model="formCre.molTableName"></el-input>
                </el-form-item>
                <el-button class="outButton" icon="el-icon-search" size="medium" type="primary">查询</el-button>
                <el-button class="outButton" icon="el-icon-refresh" size="medium" type="primary">清空</el-button>
              </div>
            </el-form>
          </div>
          <el-table :data="tableData" @sort-change="sortChange" ref="multipleTable" tooltip-effect="dark"
            style="width: 100%" stripe border class="table1">
            <el-table-column label="序号" type="index" width="50" :index="typeIndex">
              <!-- <template slot-scope="scope"><span>{{scope.$index+1}}</span></template> -->
            </el-table-column>
            <el-table-column label="中文名称" prop="molName" width="150">
              <template slot-scope="scope">
                <div class="tab-ellipsis" :title="scope.row.molName">{{scope.row.molName}}</div>
              </template>
            </el-table-column>
            <el-table-column label="表名" prop="molTableName">
              <template slot-scope="scope">
                <div class="tab-ellipsis" :title="scope.row.molTableName">{{scope.row.molTableName}}</div>
              </template>
            </el-table-column>
            <el-table-column label="所属部门" prop="molUnit">
              <template slot-scope="scope">
                <div class="tab-ellipsis" :title="scope.row.molUnit">{{scope.row.molUnit}}</div>
              </template>
            </el-table-column>
            <el-table-column label="创建类型" prop="molCreateType" width="90">
              <template slot-scope="scope">
                <div class="tab-ellipsis" :title="scope.row.molCreateType">{{scope.row.molCreateType}}</div>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="80" prop="molIfCreate" sortable="custom">
              <template slot-scope="scope">
                <div v-if="scope.row.molIfCreate==0">未创建</div>
                <div v-if="scope.row.molIfCreate==1">已创建</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="addInfo('clone',scope.row.molId)">模型克隆</el-button>
                <el-button type="text" size="small" @click="addInfo('update',scope.row.molId, scope.row.molIfCreate)">维护
                </el-button>
                <el-button type=" text" size="small" @click="listDetailShow(scope.row.molId)">查看字段</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-show="!listLoading" class="pagination-container">
            <el-pagination background @current-change="getTreeList" :current-page="pagination.currPage"
              :page-size="pagination.size" layout="total,prev, pager, next, jumper" :total="pagination.total">
            </el-pagination>
          </div>
        </div>
      </div>

    </el-col>
  </el-container>
</template>

<script>

  import { Message } from "element-ui";
  export default {
    name: "index",
    data() {
      return {
        listQuery: {
          sortby: "",
          order: ""
        },
        disable1: true,
        disable2: true,
        disable3: true,
        disable4: true,
        disable5: true,
        disable6: true,
        isAdd: false,
        isUpdate: false,
        tableData: [],
        dialogTableVisible: false,
        getDetailBulitField: false,
        listDetail: false,
        listLoading: true, // 加载 等待
        butLoading: false,
        treeData: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },

        addId: "",
        newId: "",
        saveId: "",
        pagination: {
          currPage: 1,
          size: 10,
          total: null
        },
        filterText: "",
        ids: [],
        aId: [],
        sels: [], // 删除选中的值
        titleName: null, // 弹框title名字
        groupTypeManager_btn_edit: false, // 弹框设值
        dialogFormVisible: false, // 模态框设值值
        ruleForm2: {
          cayTree1: "",
          cayTree2: "",
          cayTree3: "",
          cayTree4: "",
          cayId: "",
          cayTreeCode: "",
          cayTreeCodeParent: "",
          cayManagerUnit: "",
          cayTree: "",
          stdType: ""
        },
        formCre: {
          // 提交表单
          molName: "",
          molUnit: [],
          molCreateType: "",
          molTableName: ""
        },
        innCre: {
          // 提交表单
          innName: ""
        },
        companyforms: "",
        listTi: [], // 所属部门

        unitProps: {
          value: "id",
          label: "name",
          children: "childMenus"
        },
        publicTypeOptions: [], // 创建类型
        viewFieldList: [], // 查看字段 表格字段
        showView: {
          // 查看字段  title字段
          cosName: "",
          molName: "",
          molUnit: ""
        },
        BulitField: [], // 同步编目详情
        BulitQuery: [], // 同步编目筛选
        listColmns: [],
        dataView: true,
        screenHeight: document.body.clientHeight - 160,
        cacheList: [],
        unitIsShow: false
      };
    },
    // mounted() {
    //   const that = this;
    //   $(window).resize(() =>
    //     (() => {
    //       window.screenHeight = document.body.clientHeight;
    //       that.screenHeight = window.screenHeight - 160;
    //     })()
    //   );
    // },
    created() {
      const admType = this.$store.state.user.admType;
      if (admType == 1) {
        this.unitIsShow = true;
      }
    },
    beforeCreate() {
      // 所属部门
      deptData().then(response => {
        this.listTi = response.data;
      });
      // 创建类型
      innNewBuiltCycleData().then(response => {
        this.publicTypeOptions = response.data;
      });
    },
    // created() {
    //   // TABLE init
    //   this.getTreeList(this.pagination.currPage);
    // },
    mounted() {


    },
    watch: {
      filterText(val) {
        this.$refs.categoryTree.filter(val);
      }
    },
    methods: {
      // reseShowView() {
      //   if (this.showView.cosName) {
      //     this.showView.cosName = "";
      //   }
      //   if (this.showView.cosCode) {
      //     this.showView.cosCode = "";
      //   }
      //   this.viewFieldList = this.cacheList;
      // },
      // chaxunShowView() {
      //   if (this.showView.cosName || this.showView.cosCode) {
      //     let upperCase = ""
      //     if (this.showView.cosCode) {
      //       upperCase = this.showView.cosCode.toLocaleUpperCase();
      //     }
      //     var reg = new RegExp(this.showView.cosName);
      //     var reg2 = new RegExp(this.showView.cosCode);
      //     var reg3 = new RegExp(upperCase)
      //     let searchList = [];
      //     this.cacheList.map(item => {
      //       //如果字符串中不包含目标字符会返回-1
      //       let flag = item.cosCode.match(reg2) || item.cosCode.match(reg3)
      //       if (item.cosName.match(reg) && flag) {
      //         searchList.push(item);
      //       }
      //     });
      //     this.viewFieldList = [];
      //     this.viewFieldList = searchList;
      //   } else {
      //     this.viewFieldList = this.cacheList;
      //   }
      // },
      // typeIndex(index) {
      //   return index + (this.pagination.currPage - 1) * this.pagination.size + 1;
      // },
      // // 清除
      // resetForm(searchForm) {
      //   this.$refs[searchForm].resetFields();
      // },
      // // 查看字段
      // listDetailShow(id) {
      //   this.listDetail = true;
      //   const ids = {
      //     id: id
      //   };
      //   viewFieldModel(ids)
      //     .then(response => {
      //       this.showView = response.data;
      //       this.viewFieldList = response.data.list;
      //       this.cacheList = response.data.list;
      //       for (const item of response.data.list) {
      //         if (item.cosPrimary === "true") {
      //           item.cosPrimary = "是";
      //         } else {
      //           item.cosPrimary = "否";
      //         }

      //         if (item.cosNull === "true") {
      //           item.cosNull = "是";
      //         } else {
      //           item.cosNull = "否";
      //         }

      //         if (item.cosOnly === "true") {
      //           item.cosOnly = "是";
      //         } else {
      //           item.cosOnly = "否";
      //         }
      //       }
      //     })
      //     .catch(error => {
      //       console.log(error);
      //     });
      // },
      // // PAGEING
      // handelPage(val) {
      //   this.getTreeList(val);
      // },
      // // detail modify
      // addInfo(state, id, status) {
      //   if (state === "update") {
      //     this.$router.push({
      //       path: "/databaseMan/dataModel/addModel",
      //       query: {
      //         state: "update",
      //         id,
      //         status
      //       }
      //     });
      //   } else if (state === "clone") {
      //     this.$router.push({
      //       path: "/databaseMan/dataModel/addModel",
      //       query: {
      //         state: "clone",
      //         id
      //       }
      //     });
      //   } else {
      //     this.$router.push({
      //       path: "/databaseMan/dataModel/addModel",
      //       query: {
      //         state: "add"
      //       }
      //     });
      //   }
      // },
      // /* ADD */
      // handleAdd() {
      //   this.dialogFormVisible = true;
      //   this.isAdd = true;
      //   this.isUpdate = false;

      //   if (this.newId) {
      //     addEltId(this.newId).then(response => {
      //       this.ruleForm2 = response.data;
      //       const codLength = this.ruleForm2.cayTreeCode.length;
      //       if (codLength == 2) {
      //         this.disable1 = false;
      //         this.disable2 = true;
      //         this.disable3 = true;
      //         this.disable4 = true;
      //       } else if (codLength == 4) {
      //         this.disable1 = true;
      //         this.disable2 = false;
      //         this.disable3 = true;
      //         this.disable4 = true;
      //       } else if (codLength == 6) {
      //         this.disable1 = true;
      //         this.disable2 = true;
      //         this.disable3 = false;
      //         this.disable4 = true;
      //       } else if (codLength == 8) {
      //         this.disable1 = true;
      //         this.disable2 = true;
      //         this.disable3 = true;
      //         this.disable4 = false;
      //       } else if (codLength == 10) {
      //         this.disable1 = true;
      //         this.disable2 = true;
      //         this.disable3 = true;
      //         this.disable4 = true;
      //       }
      //     });
      //   }
      // },
      // /* 选中的值 */
      // handleSelectionChange(sels) {
      //   this.sels = sels;
      // },
      // // 保存同步编目
      // passSync() {
      //   this.butLoading = true;
      //   this.aId = this.sels.map(element => element.id);
      //   const data = {
      //     ids: this.aId
      //   };
      //   savesyncChronized(data).then(response => {
      //     if (response.status == "SUCCESS") {
      //       this.getDetailBulitField = false;
      //       this.butLoading = false;
      //       Message({
      //         message: "同步成功",
      //         type: "success"
      //       });
      //       this.getTreeList(this.pagination.currPage);
      //       this.returnList();
      //     } else {
      //       this.butLoading = false;
      //       this.$message.error(response.msg);
      //     }
      //   });
      // },
      // /* 同步编目 */
      // getDetailBulitFields(type) {
      //   console.log(type, "type");
      //   this.BulitField = [];
      //   if (type == 1) {
      //     if (this.innCre.innName.length == 0) {
      //       this.BulitField = this.BulitQuery;
      //     } else {
      //       var reg = new RegExp(this.innCre.innName);
      //       this.BulitQuery.map(item => {
      //         //如果字符串中不包含目标字符会返回-1
      //         if (item.innName.match(reg)) {
      //           this.BulitField.push(item);
      //         }
      //       });
      //     }
      //   } else {
      //     this.getDetailBulitField = true;
      //     this.passTable2 = [];
      //     syncChronized("1")
      //       .then(response => {
      //         this.BulitField = response.data;
      //         this.BulitQuery = response.data;
      //       })
      //       .catch(error => {
      //         console.log(error);
      //       });
      //   }
      // },

      // /* 修改 */
      // handleEdit(row) {
      //   const codLength = row.cayTreeCode.length;
      //   (this.isAdd = false),
      //     (this.isUpdate = true),
      //     (this.dialogFormVisible = true);
      //   this.saveId = row.cayId;
      //   this.titleChange = "修改";
      //   console.log(row.cayId);
      //   console.log(222);
      //   getMyList(row.cayId).then(response => {
      //     this.ruleForm2 = response.data;
      //     const codLength = this.ruleForm2.cayTreeCode.length;
      //     if (codLength == 4) {
      //       this.disable1 = false;
      //       this.disable2 = true;
      //       this.disable3 = true;
      //       this.disable4 = true;
      //     } else if (codLength == 6) {
      //       this.disable1 = true;
      //       this.disable2 = false;
      //       this.disable3 = true;
      //       this.disable4 = true;
      //     } else if (codLength == 8) {
      //       this.disable1 = true;
      //       this.disable2 = true;
      //       this.disable3 = false;
      //       this.disable4 = true;
      //     } else if (codLength == 10) {
      //       this.disable1 = true;
      //       this.disable2 = true;
      //       this.disable3 = true;
      //       this.disable4 = false;
      //     }
      //   });
      // },
      // /* 修改保存 */
      // updateTitle() {
      //   const codLength = this.ruleForm2.cayTreeCode.length;
      //   if (codLength == 4) {
      //     const param = {
      //       cayId: this.saveId,
      //       cayTree: this.ruleForm2.cayTree1,
      //       cayTreeCodeParent: this.ruleForm2.cayTreeCode,
      //       cayManagerUnit: this.ruleForm2.cayManagerUnit
      //     };
      //     if (param) {
      //       updateTitle(param)
      //         .then(response => {
      //           this.$message({
      //             message: "修改成功",
      //             type: "success"
      //           });
      //           // this.$router.go(-1);
      //         })
      //         .catch(error => {
      //           console.log(error);
      //         });
      //       console.log("ok");
      //     } else {
      //       console.log("error submit!!!");
      //       return false;
      //     }
      //   } else if (codLength == 6) {
      //     const param = {
      //       cayId: this.saveId,
      //       cayTree: this.ruleForm2.cayTree2,
      //       cayTreeCodeParent: this.ruleForm2.cayTreeCode,
      //       cayManagerUnit: this.ruleForm2.cayManagerUnit
      //     };
      //     if (param) {
      //       updateTitle(param)
      //         .then(response => {
      //           this.$message({
      //             message: "修改成功",
      //             type: "success"
      //           });
      //           // this.$router.go(-1);
      //         })
      //         .catch(error => {
      //           console.log(error);
      //         });
      //       console.log("ok");
      //     } else {
      //       console.log("error submit!!!");
      //       return false;
      //     }
      //   } else if (codLength == 8) {
      //     const param = {
      //       cayId: this.saveId,
      //       cayTree: this.ruleForm2.cayTree3,
      //       cayTreeCodeParent: this.ruleForm2.cayTreeCodeParent,
      //       cayTreeCode: this.ruleForm2.cayTreeCode,
      //       cayManagerUnit: this.ruleForm2.cayManagerUnit
      //     };
      //     if (param) {
      //       updateTitle(param)
      //         .then(response => {
      //           this.$message({
      //             message: "修改成功",
      //             type: "success"
      //           });
      //           // this.$router.go(-1);
      //         })
      //         .catch(error => {
      //           console.log(error);
      //         });
      //       console.log("ok");
      //     } else {
      //       console.log("error submit!!!");
      //       return false;
      //     }
      //   } else if (codLength == 10) {
      //     const param = {
      //       cayId: this.saveId,
      //       cayTree: this.ruleForm2.cayTree4,
      //       cayTreeCodeParent: this.ruleForm2.cayTreeCodeParent,
      //       cayTreeCode: this.ruleForm2.cayTreeCode,
      //       cayManagerUnit: this.ruleForm2.cayManagerUnit
      //     };
      //     if (param) {
      //       updateTitle(param)
      //         .then(response => {
      //           this.$message({
      //             message: "修改成功",
      //             type: "success"
      //           });
      //           // this.$route.go(-1);
      //         })
      //         .catch(error => {
      //           console.log(error);
      //         });
      //       console.log("ok");
      //     } else {
      //       console.log("error submit!!!");
      //       return false;
      //     }
      //   }
      //   this.dialogFormVisible = false;
      //   getList();
      //   getTreeList();
      // },
      // sortChange(column, prop, order) {
      //   console.log(column + "-" + column.prop + "-" + column.order); //createDate  ascending升序 descending降序
      //   if (column.order === "ascending") {
      //     console.log("ascending升序", column.order);
      //     this.listQuery.sortby = column.prop;
      //     this.listQuery.order = "1";
      //   } else {
      //     this.listQuery.sortby = column.prop;
      //     // this.listQuery.order = 'asc'
      //     console.log("descending降序", column.order);
      //     this.listQuery.order = "2";
      //   }
      //   this.getTreeList(this.pagination.currPage);
      // },
      // // 树形信息开始 列表生成
      // getTreeList(val) {
      //   this.pagination.currPage = val;
      //   window.sessionStorage.setItem(`${this.$route.path}SIDER_BAR_PARAMS`, JSON.stringify(this.addId));
      //   window.sessionStorage.setItem(`${this.$route.path}LIST_PAGE`, JSON.stringify(this.pagination));
      //   window.sessionStorage.setItem(`${this.$route.path}SEARCH_PARAMS`, JSON.stringify(this.formCre));
      //   this.listLoading = true;
      //   getSiderTree().then(response => {
      //     this.treeData = response.data;
      //   });
      //   const data = {
      //     cayTree: this.addId,
      //     page: this.pagination.currPage,
      //     size: this.pagination.size,
      //     molName: this.formCre.molName,
      //     molUnit: this.formCre.molUnit[this.formCre.molUnit.length - 1],
      //     molCreateType: this.formCre.molCreateType,
      //     molTableName: this.formCre.molTableName,
      //     sortField: this.listQuery.sortby,
      //     sortType: this.listQuery.order
      //   };
      //   queryList(data).then(response => {
      //     this.tableData = response.data.list;
      //     this.pagination.total = response.data.total;
      //     this.listLoading = false;
      //   });
      // },
      // filterNode(value, treeData) {
      //   if (!value) return true;
      //   return treeData.cayTree.indexOf(value) !== -1;
      // },
      // getNodeData(treeData) {
      //   this.addId = treeData.cayTreeCode;
      //   window.sessionStorage.setItem(`${this.$route.path}LIST_PAGE`, JSON.stringify(this.pagination));
      //   window.sessionStorage.setItem(`${this.$route.path}SIDER_BAR_PARAMS`, JSON.stringify(this.addId));
      //   if (!this.formEdit) {
      //     this.formStatus = "update";
      //   }
      //   this.listLoading = true;
      //   const data = {
      //     cayTree: this.addId,
      //     page: this.pagination.currPage,
      //     size: this.pagination.size
      //   };

      //   queryList(data).then(response => {
      //     this.tableData = response.data.list;
      //     this.pagination.total = response.data.total;
      //     this.listLoading = false;
      //   });
      // },
      // //图形化点击效果
      // dataViewfun() {
      //   this.dataView = false;
      //   this.iframeHei = $(window).height() - 190;
      // },
      // dataShowfun() {
      //   this.$router.push({
      //     path: "/databaseMan/dataModel/showTab",
      //     query: {
      //       state: "showTab"
      //     }
      //   });
      // }
    }
  };
</script>

<style>
  .navMenu {
    display: block;
    float: left;
  }

  .app-container {
    display: block;
    float: left;
  }

  .el-tree-node:focus>.el-tree-node__content,
  .el-tree-node__content:hover {
    background: #ffffff;
    color: #66b1ff;
  }
</style>
<style scoped>
  /* .scroll {
     background: black;
    background-size: 100%;
    height: 100%;} */
  .input-box {
    text-align: left;
    padding: 0 30px;
  }
</style>