<template>
  <div class="eniting">
    <!-- 头部 -->
    <div class="eniting_header">
      <!-- <p class="p">表编辑</p> -->
      <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="ppl">
        <p v-for="(item, index) in tabldie" :key="index" @click="enditTab(index)">
          <img src="../../../assets/images/icon_tbtab_normal.png" alt="" class="index_headerImg" v-if="num !== index" />
          <img src="../../../assets/images/icon_tbtab_selected.png" alt="" class="index_headerImg" v-if="num == index" />
          <span :class="[index == num ? 'span' : '']">{{ item.tableComment }}</span>
        </p>
      </div>
      <el-divider></el-divider>
      <div class="table_headerBtun table_headerBtuntue" v-if="queryData.buttonList">
        <el-form v-if="num !== 0" :model="queryParamstwoi" ref="queryForm" :inline="true">
          <dynamic-form :ref="item.columnName" :config="queryParamstwoi" @inputs="changeFn" :formConfig="item" v-for="(item, index) in queryDatatwo.queryList" :key="index" />
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryiu">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="small" plain v-for="(item, indexss) in jeigneutwo" :key="keyname + indexss" @click="handleQuery(item)">{{ item }}</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="eniting_nav">
      <el-collapse v-model="activeNames" @change="handleChange">
        <div class="table_forem">
          <el-form
            v-show="num == 0"
            :rules="queryData.rules"
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            :label-width="this.queryData.table_column == 6 ? '70px' : '120px'"
          >
            <el-collapse-item :title="item.columnComment" :name="index" v-for="(item, index) in queryData.showData" :key="index" class="eitde">
              <el-row>
                <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-row>
            </el-collapse-item>
          </el-form>
        </div>
        <div v-show="num !== 0" style="background-color: #fff; padding-bottom: 40px; padding-left: 23px; padding-right: 23px; padding-top: 23px;">
          <el-table v-loading="loading" :data="postList.rows" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" style="color: red;" align="center" />
            <template v-for="(item, index) in postList.tableHeadList">
              <el-table-column :label="item.columnComment" align="center" :prop="item.columnName" :key="index">
                <template slot-scope="scope">
                  <img
                    class="img_icon"
                    v-if="item.htmlType == 'imageUpload' && scope.row[scope.column.property]"
                    @click="imgBtn(JSON.parse(scope.row[scope.column.property])[0].url)"
                    :src="JSON.parse(scope.row[scope.column.property])[0].url"
                    alt=""
                  />
                  <!-- :style="scope.row.list_class" scope.row[scope.column.property] -->
                  <span :style="scope.row.list_class" v-else-if="item.columnName == 'status'">{{ scope.row[scope.column.property] }}</span>
                  <span v-else>{{ scope.row[scope.column.property] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
          <div class="index_haderPagin">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParamslist.pageNo" :limit.sync="queryParamslist.pageSize" @pagination="foremliseju" />
          </div>
        </div>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { tableQuery, getTableQuery, delMenutab, getQueryList, geteditindeTab, tableSubimt, tableSubimtanit, addbjectSave, getUserProfiletab, tabsubm } from '@/api/system/table.js';
import { listIndex } from '@/api/system/form.js';

export default {
  name: 'index',
  inject: ['reload'],
  data() {
    return {
      // 总条数
      total: 0,
      loading: true,
      activeNames: [0],
      title: '单表1',
      // 查询参数
      queryParams: {},
      labletit: '查询参数1233',
      num: 0,
      tabledeLise: {
        table: '',
        isUi: true
      },
      taleLisst: [], //列表数据
      // 按钮参数
      tableZbie: {
        table: 'obj_test',
        isUi: true,
        fixedData: {
          id: -1
        }
      },
      tableZbietabg: {
        table: 'sys_user'
      },
      queryData: {},
      queryDatatwo: {},
      keyname: 'nu',
      tabldie: [],
      forme: {
        table: '',
        objId: -1,
        fixedData: {}
      },
      formeanti: {
        table: '',
        commitData: []
      },
      formy: {
        id: 0,
        status: 1
      },
      // 删除参数
      deledlid: {
        table: '',
        idList: []
      },
      jeigneu: [],
      jeigneutwo: [],
      imgShoew: 1,
      queryParamslist: {
        pageNo: 1,
        pageSize: 10,
        orderBy: 'create_time desc',
        table: '',
        fixedData: {
          condition: {}
        }
      },
      postList: {},
      single: true,
      multiple: true,
      taheus: '',
      taheusid: 0,
      tabName: '',
      queryParamstwoi: {},
      juegh: {}
    };
  },
  mounted() {
    this.deledlid.idList = [];
    this.formeanti.table = this.$route.query.tables;
    // this.formeanti.id = this.$route.query.id
    this.forme.table = this.$route.query.tables;
    this.forme.objId = this.$route.query.id;
    this.tabledeLise.table = this.$route.query.tables;
    this.tableZbie.table = this.$route.query.tables;
    this.tableZbie.fixedData.id = this.$route.query.id;
    this.formy.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.tableZbietabg.table = this.$route.query.tables;
    this.deledlid.table = this.$route.query.tables;
    this.queryParamslist.table = this.$route.query.tables;
    this.taheus = this.$route.query.tables;
    this.taheusid = this.$route.query.id;
    this.deledlid.idList.push(this.$route.query.id);
    // tab
    this.edingelsietab();
    this.init();
    this.getUser();
  },
  filters: {},
  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);
    },
    handleChange(val) {},
    enditTab(index) {
      this.num = index;
      if (this.num == 0) {
        this.tabledeLise.table = this.tabldie[index].tableName;
        this.formeanti.table = this.tabldie[index].tableName;
        this.juegh.businessTypeName = this.$route.query.tables;
        this.juegh.dbname = this.$route.query.tables;
        this.forme.table = this.tabldie[index].tableName;
        this.tableZbie.table = this.taheus;
        this.tableZbie.fixedData.id = this.taheusid;
        this.init();
        this.reload();
      } else {
        this.tabName = this.tabldie[index].tableName;
        this.queryParamslist.table = this.tabldie[index].tableName;
        this.inittwo();
        this.foremliseju();
      }
    },
    // 按钮
    init() {
      getTableQuery(this.tableZbie).then(res => {
        let data = res.data;
        this.queryData = data;
        this.juegh.businessType = res.data.showData[0].tableId;
        this.jeigneutwo = [];
        this.jeigneu = [];
        this.jeigneu = data.buttonList.split('');
        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.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;
            });
            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;
                });
              }
            }
          });
        }
      });
    },
    inittwo() {
      tableQuery({
        table: this.tabName
      }).then(res => {
        let data = res.data;
        this.queryDatatwo = data;
        this.jeigneutwo = [];
        this.jeigneu = [];
        this.jeigneu = data.buttonList.split('');
        this.jeigneu.filter(route => {
          if (route == 'A') {
            route = '新增';
            this.jeigneutwo.push(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);
          }
        });
      });
    },
    // 数据信息
    edingelsie() {
      getQueryList(this.tabledeLise).then(res => {
        let data = res.data;
        this.taleLisst = data;
      });
    },
    // tab数据
    edingelsietab() {
      geteditindeTab(this.tableZbietabg).then(response => {
        this.tabldie = [{ tableComment: '主表数据', tableName: this.taheus }];
        this.tabldie = this.tabldie.concat(response.data.ref);
        if (this.tabldie.length !== 1) {
        } else {
          this.msgSuccess('暂无tab数据');
          this.$store.dispatch('tagsView/delView', this.$route);
          this.$router.go(-1);
        }
      });
    },
    // 列表数据
    foremliseju() {
      listIndex(this.queryParamslist).then(res => {
        if (res.code == 200) {
          let data = res.data;
          this.postList = data;
          this.total = res.data.total - 0;
        } else {
        }
        this.loading = false;
      });
    },
    changeFn(obj) {
      for (let key in obj) {
        this.queryParams[key] = obj[key];
      }
    },
    handleQuery(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 if (item.hrChildren[i].htmlType == 'cascader') {
            // console.log()
            if (this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName]) {
              console.log(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][
                this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName].length - 1
              ];
            } 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 = 1;
        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.submitForm();
      } else if (index == '返回') {
        this.$store.dispatch('tagsView/delView', this.$route);
        this.$router.go(-1);
      } else if (index == '刷新') {
        this.reload();
      } else if (index == '新增') {
        this.routerFn(-1, this.tabName);
      } else if (index == '修改') {
        if (this.single) {
          this.msgInfo('请勾选一条信息');
          return;
        }
        const id = this.ids.join(',');
        this.routerFn(id, this.tabName);
      }

      // this.getList();
    },
    /** 新增 修改提交按钮 */
    submitForm: function() {
      this.$refs['queryForm'].validate(valid => {
        if (valid) {
          addbjectSave(this.forme).then(response => {
            this.msgSuccess('保存成功');
            this.open = false;
            this.$store.dispatch('tagsView/delView', this.$route);
            this.$router.go(-1);
            // this.getList();
          });
        }
      });
    },
    // 提交反提交
    antiSubmission() {
      this.$refs['queryForm'].validate(valid => {
        if (valid) {
          if (this.formy.status == 1) {
            // 提交
            tableSubimt(this.formeanti).then(response => {
              // this.msgSuccess("提交成功");
              this.$store.dispatch('tagsView/delView', this.$route);
              this.$router.go(-1);
              this.submoii();
            });
          } 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.$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) {
      if (this.num == 0) {
        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);
          });
      } else {
        if (this.single) {
          this.msgInfo('请勾选一条信息');
          return;
        }
        // console.log(this.ids)
        var that = this;
        index.idList = this.ids;
        index.table = this.tabName;
        this.$confirm('是否确认删除', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(function() {
            return delMenutab(index);
          })
          .then(() => {
            this.foremliseju();
            this.msgSuccess('删除成功');
            // this.$router.go(-1)
          });
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    routerFn(id, tables) {
      // if (this.queryDatatwo.viewType == 'crud') {
      this.$router.push({
        path: 'table',
        query: {
          id,
          tables
        }
      });
    },
    // 搜索
    handleQueryiu() {
      for (let item of this.queryDatatwo.queryList) {
        if (item.htmlType == 'checkbox') {
          this.queryParamstwoi[item.columnName] = this.$refs[item.columnName][0].config;
        } else if (item.htmlType == 'imageUpload' || item.htmlType == 'fileUpload') {
          this.queryParamstwoi[item.columnName] = JSON.stringify(this.$refs[item.columnName][0].config);
        } else {
          this.queryParamstwoi[item.columnName] = this.$refs[item.columnName][0].config[item.columnName];
        }
      }
      for (var items in this.queryParamstwoi) {
        if (this.queryParamstwoi[items] == '') {
          this.queryParamstwoi[items] = undefined;
        }
      }
      this.queryParamslist.fixedData.condition = this.queryParamstwoi;
      this.foremliseju();
    },
    resetQuery() {
      this.resetForm('queryParamstwoi');
      this.foremliseju();
    }
  }
};
</script>

<style lang="scss">
.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%;
  }
}
.eniting_header {
  position: relative;
  .el-divider--horizontal {
    margin-top: 0;
  }
  .el-form-item {
    margin-bottom: 0 !important;
    margin-right: 10px;
  }
}

.eniting_nav {
  // .el-form-item{
  //   width: 25% !important;
  //   }
  .el-collapse-item__content {
    padding-bottom: 0;
  }

  .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: 65%;
  // }
  .textarea_et {
    width: 95%;

    .el-form-item__content {
      width: 80%;
      height: 83px;

      .el-textarea__inner {
        height: 100%;
      }
    }
  }

  .textarea_etyju {
    width: 90%;

    .el-form-item__content {
      width: 75%;

      // height: 83px;
      .el-textarea__inner {
        // height: 100%;
      }
    }
  }

  .textarea_ety {
    width: 100%;

    .el-form-item__content {
      width: 88%;
      height: 150px;
      margin-bottom: 0;

      .el-textarea__inner {
        height: 100%;
      }
    }
  }

  .el-collapse {
    border-top: 0;
  }

  .eitde {
    background-color: #fff;
    border-radius: 6px;
    padding: 23px;
    padding-top: 0;
    margin-bottom: 10px;
  }
}
</style>

<style scoped lang="scss">
.table_headerBtuntue {
  display: flex;
  height: 30px;
  align-items: center;
}
.eniting {
  p {
    margin: 0;
  }

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

  .eniting_header {
    background-color: #fff;
    border-radius: 6px;
    padding: 13px;
    margin-bottom: 10px;

    .p {
      font-size: 15px;
      font-weight: bold;
      color: #3c8dbc;
      line-height: 36px;
      margin-bottom: 0;
    }

    .p::before {
      content: '';
      display: block;
      width: 18px;
      height: 8px;
      background: #3c8dbc;
      border-radius: 3px;
    }

    .ppl {
      display: flex;
      height: 54px;

      p {
        position: relative;
        width: 113px;
        height: 38px;

        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          // z-index: -1;
        }

        span {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          // transform: translate(-50%);
          text-align: center;
          line-height: 38px;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #aaa;
        }

        .span {
          color: #3c8dbc;
        }
      }
    }
  }

  // 内容
  .eniting_nav {
    // background-color: #fff;
    // border-radius: 6px;
    // padding: 23px;
  }
}
.imge_tab {
  position: absolute;
  right: 0;
  top: 5px;
}
</style>
