<template>
  <div class="table_total">
    <div class="table_header">
      <!-- <p>单表</p>
      <el-divider></el-divider> -->
      <div class="imge_tab">
        <img src="../../../assets/images/pic_sy_ytj.png" alt="" v-if="imgShoew == 2">
        <img src="../../../assets/images/pic_sy_shz.png" alt="" v-if="imgShoew == 4">
        <img src="../../../assets/images/pic_sy_ybh.png" alt="" v-if="imgShoew == 3">
      </div>
      <div class="table_headerBtun table_headerBtuntwo" >
        <el-button type="primary" size="mini" plain v-for="(item,index) in jeigneutwo" :key="index"
                   @click="handleQuery(item)">{{item}}
        </el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="table_nav headertable_nav table_forem">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-form :model="queryParams" :rules="queryData.rules" ref="queryForm" :inline="true"
                 :label-width="this.queryData.table_column == 6 ? '70px' :'110px'">
          <el-collapse-item :title="item.columnComment" :name="index" v-for="(item,index) in queryData.showData"
                            :key="index">
            <dynamic-formsteo @iChange="iChange" :queryData="queryData" @modelFn="modelFn" :ref="items.columnName"
                              :config="queryParams" @inputs="changeFn" :formConfig="items"
                              v-for="(items,indexs) in item.hrChildren"
                              :key='indexs'/>
          </el-collapse-item>
        </el-form>
        <div>
          <el-dialog :close-on-click-modal="false" title="选择人员" :visible.sync="modalShow" width="980px" append-to-body>
           <!-- <Flowshoe  :instanceId="instanceId"></Flowshoe> -->
          <div class="tab_bott">
            <div class="tabBot_oje">
              <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="按部门" name="first">用户管理</el-tab-pane>
                  <el-tab-pane label="按角色" name="second">配置管理</el-tab-pane>
                  <el-tab-pane label="按组" name="third">角色管理</el-tab-pane>
                </el-tabs>
            </div>
            <div class="tabBot_two">
              <el-card class="box-card" shadow="always">
                <div slot="header" class="clearfix">
                  <span>人员对应的单位</span>
                  <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <ul class="infinite-list infinite-listty" v-infinite-scroll="load" style="overflow:auto">
                 <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
                </ul>
              </el-card>
            </div>
          </div>
          </el-dialog>
        </div>
      </el-collapse>
    </div>
  </div>
</template>
<script>
  import Flowshoe from '@/components/flowshoe'
  import {
    getTableQuery,
    getQueryList,
    tableSubimt,
    tableSubimtanit,
    addbjectSave,
    delMenutab,
    tabsubm,
    getUserProfiletab,
    bohuie
  } from '@/api/system/table.js'

  export default {
    name: "table",
    inject: ['reload'],
    components:{Flowshoe},
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        activeNames: [0],
        title: '单表1',
        tabledeLise: {
          table: '',
          isUi: true
        },
        queryData: {},
        // 查询参数
        queryParams: {},
        labletit: '查询参数1233',
        tableZbie: {
          table: '',
          isUi: true,
          fixedData: {
            id: -1
          }

        },
        taleLisst: [],
        forme: {
          table: '',
          objId: -1,
          fixedData: {}
        },
        formeanti: {
          table: '',
          commitData: [],
        },
        formy: {
          id: 0,
          status: 1
        },
        // 删除参数
        deledlid: {
          table: '',
          idList: []
        },
        jeigneu: [],
        jeigneutwo: [],
        xidugje: 0,
        tijeq: 0,
        imgShoew: 0,
        tablees: -1,
        juegkae: '',
        tabdiese: '',
        cielsshow: false,
        oieufr: 0,
        ojeuduj: 0,
        juegh:{

        },
        oejgtueo:{
          businessCode:0
        },
        instanceId: 0,
        modalShow:false,
        // 无限滚动
        count: 0
      };
    },
    mounted() {
      this.deledlid.idList = []
      this.formeanti.table = this.$route.query.tables
      this.instanceId = this.$route.query.id- 0
      this.forme.table = this.$route.query.tables
      this.forme.objId = this.$route.query.id
      this.oejgtueo.businessCode = this.$route.query.id
      this.tableZbie.table = this.$route.query.tables
      this.tableZbie.fixedData.id = this.$route.query.id
      this.juegh.businessCodes = this.$route.query.id - 0
      this.juegh.businessTypeName = this.$route.query.tables
      this.juegh.dbname = this.$route.query.tables
      this.formy.id = this.$route.query.id
      this.deledlid.table = this.$route.query.tables
      this.ojeuduj = this.$route.query.id
      this.deledlid.idList.push(this.$route.query.id)
      if (this.$route.query.tabfe) {
        this.tablees = this.$route.query.tabfe
        this.juegkae = this.$route.query.tabik + '_id'
        this.tabdiese = this.$route.query.tabik
        console.log(this.juegkae)
      } else {
        this.tablees = undefined
        this.juegkae = undefined
        this.tabdiese = this.$route.query.tabik
      }
      this.init()
      this.getUser()
      // this.tablsie()
    },
    methods: {
      iChange(name, val) {
        for (let item of this.queryData.showData) {
          for (let itemChild of item.hrChildren) {
            if (itemChild.columnName == name) {
              itemChild.columnValue = (val ? val : null)
            }
          }
        }
      },
      modelFn(obj, cont) {
        this.$set(this.queryParams, obj, cont)
      },
      changeFn(obj) {
        for (let key in obj) {
          this.queryParams[key] = obj[key]
        }
      },
      resetQuery() {

      },
      /** 搜索按钮操作 */
      handleQuery(index) {
        console.log(index)
        for (let item of this.queryData.showData) {
          for (var i = 0; i < item.hrChildren.length; i++) {
            if (item.hrChildren[i].htmlType == 'checkbox') {
              this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config
            } else if (item.hrChildren[i].htmlType == 'imageUpload' || item.hrChildren[i].htmlType == 'fileUpload') {
              if (this.$refs[item.hrChildren[i].columnName][0].config.length) {
                this.queryParams[item.hrChildren[i].columnName] = JSON.stringify(this.$refs[item.hrChildren[i].columnName][0].config)
              }
            } else if (item.hrChildren[i].htmlType == 'datetime') {
              if (this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName]) {
                this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName]
              } else {
                this.queryParams[item.hrChildren[i].columnName] = null
              }
            } else {
              this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[
                item.hrChildren[i].columnName]
            }
          }
        }
        if (this.queryParams.pageNum !== undefined) {
          this.queryParams.pageNum = undefined
        }
        if (this.queryParams.pageSize !== undefined) {
          this.queryParams.pageSize = undefined
        }

        if (index == '删除') {
          //删除
          this.handleDelete(this.deledlid)
        } else if (index == '提交') {
          //提交  保存
          this.formeanti.commitData = []
          this.formy.status = 4
          this.formeanti.commitData.push(this.formy)
          this.antiSubmission()
        } else if (index == '反提交') {
          //反提交  保存
          this.formeanti.commitData = []
          this.formy.status = 2
          this.formeanti.commitData.push(this.formy)
          this.antiSubmission()
        } else if (index == '保存') {
          // 修改
          this.forme.fixedData = this.queryParams
          this.forme.fixedData[this.juegkae] = this.tablees
          this.submitForm()
        } else if (index == '新增') {
          //新增
          this.xidugje = 0
          this.reload()
        } else if (index == '返回') {
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.go(-1)
        } else if (index == '刷新') {
          this.xidugje = 1
          this.reload()
        }else if(index == '流程详情'){
          console.log(23)
         this.modalShow = true
        }
        // this.getList();
      },
      getList() {

      },
      init() {
        getTableQuery(
          this.tableZbie
        ).then(res => {
          let data = res.data
          this.juegh.businessType = res.data.showData[0].tableId
          console.log(res.data.showData[0].tableId)
          this.queryData = {}
          this.queryData = data
          // imgShoew
          this.jeigneutwo = []

          this.jeigneu = []
          if(data.buttonList !== ''){
            this.jeigneu = data.buttonList.split('')
          }else{
            this.jeigneu = []
            this.jeigneutwo.push('流程详情')

          }
          // console.log(data.buttonList)

          this.jeigneu.filter(route => {
            if (route == 'A') {
              if (this.formy.id == -1) {
                route = '保存'
                this.jeigneutwo.push(route)
              } else {
                route = '新增'
              }

            } else if (route == 'M') {
              route = '保存'
              // if (this.formy.id != -1) {
                this.jeigneutwo.push(route)
              // }
            } else if (route == 'D') {
              route = '删除'
              // if (this.formy.id != -1) {
                this.jeigneutwo.push(route)
              // }
            } else if (route == 'Q') {
              route = '查询'
              this.jeigneutwo.push(route)
            } else if (route == 'S') {
              route = '提交'
              // if (this.formy.id != -1) {
                this.jeigneutwo.push(route)
              // }
            } else if (route == 'U') {
              route = '反提交'
              // if (this.formy.id != -1) {
                this.jeigneutwo.push(route)
              // }
            } else if (route == 'I') {
              route = '导入'
              this.jeigneutwo.push(route)
            } else if (route == 'E') {
              route = '导出'
              this.jeigneutwo.push(route)
            }

          })
           this.jeigneutwo.push('刷新')
           this.jeigneutwo.push('返回')
          if (this.xidugje == '刷新') {
            if (res.code == 200) {
              this.msgSuccess("操作成功");
            }
          }
          // 图片的显示隐藏
          if (this.queryData.showData.length !== 0) {
            this.queryData.showData.filter(route => {
              route.hrChildren.filter(routerst => {
                if (this.queryData.table_column == undefined) {
                  this.queryData.table_column = null
                }
                routerst.tableColumnuy = this.queryData.table_column
                routerst.tableid = this.ojeuduj
              })
              if (route.cssClass !== null) {
                this.imgShoew = route.cssClass

                if (route.cssClass == 2 || route.cssClass == 4) {
                  route.hrChildren.filter(routers => {
                    routers.isonliy = true
                  })
                } else {
                  route.hrChildren.filter(routers => {
                    routers.isonliy = false
                  })
                }
                if(this.imgShoew == 3){
                }
              }
            })
          }
        })
      },
      tablsie() {
        getQueryList(
          this.tabledeLise
        ).then(res => {
          let data = res.data
          this.taleLisst = data
        })
      },
      handleChange(val) {
      },
      // 按钮点击
      delet(index) {
        if (index == 'D') {
          this.handleDelete(this.formy.id)
        }
      },
      /** 新增 修改提交按钮 */
      submitForm: function () {
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            addbjectSave(this.forme).then(response => {
              this.msgSuccess("保存成功");
              if (response.code == 200) {
                this.cielsshow = true;
              } else {
                this.cielsshow = false;
              }
              let query = Object.assign({'id': response.data, 'tables': this.forme.table}, {})
              this.oieufr = response.data
              // this.mounted()
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.go(-1)
            });
          }
        });
      },
      // 提交反提交
      antiSubmission() {
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            if (this.formy.status == 4) {
              // 提交
              tableSubimt(this.formeanti).then(response => {
                // this.msgSuccess("提交成功");
                this.$store.dispatch("tagsView/delView", this.$route);
                this.submoii()
                // this.$router.go(-1)
                // this.getList();
              });
            } else if (this.formy.status == 2) {
              // 反提交
              tableSubimtanit(this.formeanti).then(response => {
                this.msgSuccess("反提交成功");
                this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.go(-1)
                // this.getList();
              });
            }
          }
        });
      },
      // 提交2.0
      submoii(){
       tabsubm(this.juegh).then(response => {
         if(response.resultCode == 0){
           this.msgSuccess("提交成功");
         }
         this.$store.dispatch("tagsView/delView", this.$route);
         this.reload()
         // this.$router.go(-1)
         // this.formeanti.commitData = []
         // this.formy.status = 1
         // this.formeanti.commitData.push(this.formy)
         // this.antiSubmission();
       });
      },
      getUser() {
        getUserProfiletab().then(response => {
          this.juegh.initiator = response.data.id
          this.juegh.userName = response.data.userName
          console.log(response.data,877)
        });
      },
      //删除
      handleDelete(index) {
        this.$confirm('是否确认删除', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delMenutab(index);
        }).then(() => {
          // this.getList();
          this.msgSuccess("删除成功");
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.go(-1)
        })
      },
      load(){
        this.count += 2
      }
    },
  };
</script>

<style lang="scss">
  .table_header {
    position: relative;
    .el-divider--horizontal {
      margin-top: 16px;
    }
  }

  .table_forem {
    .el-form--inline .el-form-item {
      width: 100% !important;
    }
    .el-select {
      width: 100%;
    }
    .el-date-editor.el-input {
      width: 100% !important;
    }
    .el-form-item--medium .el-form-item__content {
      width: 70%;
    }
  }

  .headertable_nav {
    .el-collapse-item__wrap {
      border-bottom: 0;
    }
    .el-collapse-item__header {
      border-bottom: 0;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3C8DBC;
      line-height: 36px;
    }
    // .el-form-item__content{
    //   width: 55%;
    // }
    .el-collapse {
      border-top: 0;
    }
  }
   .infinite-list{
     height: 200px;
   }
   .tab_bott{
     display: flex;
   }
  .tabBot_oje{
    width: 40%;
  }
  .tabBot_two{
    width: 50%;
    margin-left: 30px;
  }
</style>


<style scoped lang="scss">
  .app-main {
    // background-color: #eef0ff !important;
  }

  .table_total {
    background-color: #eef0ff;
    height: 100%;
    padding: 20px;
    // 头部
    .table_header {
      background-color: #fff;
      border-radius: 6px;
      padding: 13px;
      margin-bottom: 10px;
      p {
        font-size: 15px;
        font-weight: bold;
        color: #3C8DBC;
        line-height: 36px;
      }
      p::before {
        content: "";
        display: block;
        width: 18px;
        height: 8px;
        background: #3C8DBC;
        border-radius: 3px;

      }
      .table_headerBtuntwo {
        margin-bottom: 0 !important;
      }
    }
    // 内容
    .headertable_nav {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
    }
  }

  p {
    margin: 0;

  }

  .imge_tab {
    position: absolute;
    right: 0;
    top: 5px;
  }
  .infinite-list{
    // border: 1px solid #eee;
    padding: 30px;
  }
  .infinite-listty{
    margin-top: 20px;
    // border: 1px solid #eee;
  }
</style>


<style scoped lang="scss">
  .app-main {
    // background-color: #eef0ff !important;
  }

  .table_total {
    background-color: #eef0ff;
    height: 100%;
    padding: 20px;

    // 头部
    .table_header {
      background-color: #fff;
      border-radius: 6px;
      padding: 13px;
      margin-bottom: 10px;

      p {
        font-size: 15px;
        font-weight: bold;
        color: #3C8DBC;
        line-height: 36px;
      }

      p::before {
        content: "";
        display: block;
        width: 18px;
        height: 8px;
        background: #3C8DBC;
        border-radius: 3px;

      }
    }

    // 内容
    .headertable_nav {
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
      padding-top: 0;
    }
  }

  p {
    margin: 0;

  }
</style>
