<template>
  <div class="basetable-container">
    <el-collapse v-model="activeNames" v-if="tableSet.CollShow">
      <el-collapse-item :title="tableSet.CollapseTitle"  name="1">
        <!-- 过滤表单 -->
        <div class="fliter-from-container" v-if="tableSet.Fliterfrom">
          <span v-for="item in tableSet.filterFrom" :key="item.index" class="fliter-item">
            <component
              :is="item.name"
              :defaultVal="item.defaultVal"
              :ref="item.ref"
              :label="item.label"
              :palceholder="item.palceholder"
              :params="item.params"
              @handleChange="handleChange"
            ></component>
          </span>
          <el-button
            type="primary"
            v-for="item in tableSet.headerBtn"
            :key="item.index"
            @click="handleClick('','',item.handleName)"
          >{{item.text}}</el-button>
          <el-button @click="handleClear">清空</el-button>
          <br />
          <div class="Filter-btnList">
            <div>
                <el-button
                :type="tableSet.ButtonType"
                :plain="tableSet.plain"
                style="margin-top: 10px"
                :class="item.class"
                v-for="item in tableSet.headerBottomBtn"
                v-show="tableSet.FilterButtonbuttons && authBtn(authBtnList,item.btnName)"
                :key="item.index"
                @click="handleClick('','',item.handleName)"
              >{{item.text}}</el-button>
            </div>
            <!-- <br /> -->
            <!-- && authbtn是权限控制的 -->
            <!-- <div>
               <el-button
                type="primary"
                style="margin-top: 10px"
                :class="item.class"
                v-show="tableSet.headerTwoBottons && authBtn(authBtnList,item.btnName)"
                v-for="item in tableSet.headerTwoBottonBtn"
                :key="item.index"
                @click="handleClick('','',item.handleName)"
              >{{item.text}}</el-button>
            </div>           -->
            <div>
               <el-button
                type="primary"
                style="margin-top: 10px"
                :class="item.class"
                v-show="tableSet.headerTwoBottons"
                v-for="item in tableSet.headerTwoBottonBtn"
                :key="item.index"
                @click="handleClick('','',item.handleName)"
              >{{item.text}}</el-button>
            </div> 
          </div>         
        </div>
      </el-collapse-item>
    </el-collapse>
 

    
    <!-- 表格 -->
    <el-table
      ref="table"
      class="fliter-table"
      v-if="tableSet.tableData"
      :data="tableSet.tableData"
      style="width: 100%;"
      :header-row-style="{color:'#56bcff',height:'80px'}"
      :header-align="'center'"
      highlight-current-row
      @selection-change="handleSelectionChange"
      :row-key="getRowKeys"
      :default-sort = "{prop: 'date', order: 'descending'}"
      @sort-change="handleChangeSort"
      :row-class-name="tableRowClassName"
    >
      <el-table-column :reserve-selection="true" v-if="tableSet.select" type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>

      <el-table-column
        v-for="item in isShowTables"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        align='center'
        :width="item.width"
        :show-overflow-tooltip="!item.width"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <span v-if="item.html" v-html="item.html(scope.row)"></span>
          <span v-else-if="item.link" @click="item.link(scope.row)" style="cursor: pointer;border-bottom: 1px solid #000;">{{scope.row[item.prop]}}</span>
          <span v-else>{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" :align="'center'"  :width="tableSet.btnColWidth" fixed="right">
        <!-- <template slot-scope="scope">
            <el-dropdown style="cursor:pointer" size="small" split-button type="primary">
              更多操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item 
                v-for="item in tableSet.btns" 
                :key="item.index"
                v-show="!item.show || (item.show&&item.show(scope.row))"
                @click.native="handleClick(scope.row,scope.$index,item.handleName)"
              >
                  <span v-if="item.html" v-html="item.html(scope.row)"></span>
                  <span v-if="item.text">{{item.text}}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template> -->
        
        <template slot-scope="scope">
          <el-button
            v-for="item in tableSet.btns"
            v-show="!item.show || (item.show&&item.show(scope.row))"
            :key="item.index"
            :type="item.type"
            :size="item.size || 'small'"
            @click="handleClick(scope.row,scope.$index,item.handleName)"
          >
          <span v-if="item.html" v-html="item.html(scope.row)"></span>
          <span v-if="item.text">{{item.text}}</span>
        </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-box"  v-if="tableSet.tableData">
      <div class="el-pagination__total">共 {{tableSet.total}} 条</div>
      <el-pagination
        class="pagination"
        background
        layout="sizes,prev, pager, next"
        @current-change="handleChangePage"
        :current-page.sync="tableSet.currentPage"
        :total="tableSet.total"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>


<script>
import {authBtn} from '@/utils/authbtn.js'

export default {
  name:"tableSet",
  props:['tableSet','total'],
  data() {
    return {
      authBtn,
      authBtnList:[],
      getRowKeys(row){
        return row.woId
      },
      selectData:[],
      activeNames: ['1']
    };
  },
  computed:{
    // 表格里边的数据根据选择表头来控制隐藏和显示
    isShowTables() {
      return this.tableSet.clos.filter(item => {
          return item.isShow
      })
    }
    // isShowTables:function() {
    //   let user =  JSON.parse(window.localStorage.getItem("user"))
    //   if(user.userType == 0 || user.userType == 1){
    //      return this.tableSet.clos.filter(item =>{
    //        return item.isShow
    //      })
    //   }else{
    //     return this.tableSet.clos.filter(item => {
    //       return item.isAdmin ? false : item.isShow
    //     })
    //   }
    // },
    // 表单里边的一些条件隐藏和显示
    // isFiltter:function(){
    //   let user =  JSON.parse(window.localStorage.getItem("user"))
    //   if(user.userType == 0 ||  user.userType == 1){
    //     return this.tableSet.filterFrom
    //   }else{
    //     return this.tableSet.filterFrom.filter(item => {
    //       return !item.isAdmin
    //     })
    //   }
    // }
    
  },
  mounted(){
   
  },
  methods: {
    click(){

    },
    handleClick(row, index, name) {
      this.$emit("handleClick", row, index, name);
    },
    handleChange(params, v) {
      this.$emit("handleGetSearchParams", params, v);
    },
    handleChangePage(v) {
      this.$emit("handleGetSearchParams", "pageNum", v);
    },
    handleSizeChange(v){
      this.$emit('handleChangePageNum',v)
    },
    handleSelectionChange(v){
      this.selectData = []
      if(v){
        v.forEach(el => {
          if(el){
            this.selectData.push(el)
          }
        });
      }
      this.$emit("handleSelectionChange",this.selectData)
    },
    // 清空表格多选
    handleClearSelection(){
      this.$refs.table.clearSelection()
    },
    handleChangeSort(param){
      console.log('change')
      this.$emit('handleChangeSort',param)
    },
    handleClear() {
      if (this.$refs) {
        for (var key in this.$refs) {
          if (this.$refs[key] && this.$refs[key][0]) {
            this.$refs[key][0].clear();
            this.$emit("handleClearParams");
          }
        }
      }
    },
    tableRowClassName({row, rowIndex}) {
      if (row.isNewOpen == 2) {
        return 'warning-row';
      }
    }
  }
};
</script>
<style>
   .el-table .warning-row {
    background:  #f0f9eb;
  }
</style>
<style lang="scss" scoped>
.basetable-container {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 25px 0px;
  margin-bottom: 20px;
  border-radius: 8px;
  
  .fliter-from-container {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 8px 8px;
    margin: 0px;
    padding: 20px;
    .fliter-item {
      margin: 15px 10px;
      display: inline-block;
    }
    .Filter-btnList{
      display: flex;
      justify-content:space-between
    }
  }
  .pagination-box {
    width: 100%;
    height: 50px;
    background: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .pagination{
      display: inline-block;
    }
    .el-pagination__total{
      display: inline-block;
      font-size: 13px;
      min-width: 35.5px;
      line-height: 50px;
      margin-right: 0px;
      text-align: center;
      vertical-align: top;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .pagination-Total{
      display: inline-block;
      font-size: 13px;
      line-height: 50px;
      color: #606266;
    }
  }
}
.basetable-container
  /deep/
  .el-table--scrollable-x
  .el-table__body-wrapper::-webkit-scrollbar {
  height: 6px;
  border-radius: 4px;
  background: #eee;
}
.basetable-container
  /deep/
  .el-table--scrollable-x
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
  height: 6px;
  border-radius: 4px;
  background: rgb(112, 112, 112);
}
.basetable-container
  /deep/ .el-table__fixed-right{
  height:calc(100%) !important;
}
.basetable-container
  /deep/ .el-button-group .el-button--primary:last-child {
    height: 32px;
}
.basetable-container
  /deep/ .el-collapse-item__wrap{
    background-color: transparent;
  }
</style>
<style lang="scss" scoped>
.basetable-container /deep/ .el-collapse-item__header{
  border-radius: 8px 8px 0px 0px;
  font-size: 16px;text-indent: 1em;
} 
</style>


