
<template>
    <div class="obpm-content mt-2" v-if="initVisible">
      <div class="search">
        <el-form ref="form" :inline="true" class="demo-form-inline" size="mini" @submit.native.prevent>
          <el-form-item v-for="(item,ind) in mainData.params" :key="ind">
            <el-input v-model="item.value"
              :placeholder="'请输入'+item.label"
              @keyup.enter.native="getData"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-input v-model="mainData.params.name"
              :placeholder="$t('placeholder.name')"
              @keyup.enter.native="getData"
            ></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button @click="getData" type="primary" plain>{{$t("btns.query")}}</el-button>
            <el-button @click="resetField">{{$t("btns.reset")}}</el-button>
            <el-button @click="delField" type="danger" v-if="showDelBtn">{{$t("btns.delete")}}</el-button>
            <el-button @click="back"  v-if="showBackBtn">{{$t("btns.exit")}}</el-button>
          </el-form-item>
        </el-form>
      </div>
            

      <div class="obpm-content-table">
        <template>
          <el-table
            v-if="mainData.data"
            ref="tableList"
            :data="mainData.data.datas"
            :height="mainData.tableHeight"
            @row-click="onRowClick"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            size='small'>
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <template v-for="(column,ind) in mainData.columns">
                <el-table-column
                    v-bind:key="ind"
                    :prop="column.prop"
                    :label="column.label">
                </el-table-column>
            </template>
            
          </el-table>
        </template>
        <el-pagination
          v-if="mainData.data"
          class="text-right pt-1"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="mainData.data.pageNo"
          :page-sizes="[10, 25, 50, 100]"
          :page-size="10"
          background
          layout="total, prev, pager, next, sizes"
          :total="mainData.data.rowCount">
        </el-pagination>
      </div>
    </div>
</template>
<script>
export default {
    name: 'publictable',
    props:{
      showDelBtn:{ // 显示删除按钮
        type: Boolean,
        default: false
      },
      showBackBtn: { // 显示返回按钮
        type: Boolean,
        default: false
      }
    },
    data(){
      return{
        initVisible:false,
        mainData:{
          data:{
            datas: [],
            pageNo: 1
          }
        },
      }
    },
    methods:{
      /**
       * 删除
       */
      delField(){
        this.$emit('delete')
      },
      /**
       * 返回上一页面
       */
      back(){
        this.$emit('back')
      },
      resetField(){
        let obj={};
        this.mainData.params.forEach(elm=>{
          elm.value='';
          obj[elm.name]=elm.value;
        })
        this.$emit('updataParams',obj);
        this.$emit('getData');

      },
      //查询
      getData(){
        let obj={};
        this.mainData.params.forEach(elm=>{
          obj[elm.name]=elm.value;
        })
        this.$emit('updataParams',obj);
        this.$emit('getData');

      },
      //当前页改变事件
      handleCurrentChange(val){
        this.$emit('handleCurrentChange',val);
        // this.$emit('getData');

      },
      //页码大小改变事件
      handleSizeChange(val){
        this.$emit('handleSizeChange',val);
        // this.$emit('getData');

      },
      //表格点击
      onRowClick(row){
          this.$emit('onRowClick',row);
      },
      //选中的表格数据
      handleSelectionChange(val){
          this.$emit('handleSelectionChange',val);
      },
      //初始化数据
      init(tableData){
        this.initVisible=true;
        this.$nextTick(() => {
          this.mainData=tableData;
          console.log('mainData.data.datas', this.mainData)
          this.$forceUpdate();
          if(this.mainData.checkedRows && this.mainData.checkedRows.length>0){
            this.setCheckedRow();
          }
        })
      },
      //初始化设置选中的行
      setCheckedRow(){
        let that=this;
        this.mainData.checkedRows.forEach(elm=>{
          this.mainData.data.datas.forEach(el=>{
            if(elm.id==el.id){
              this.$nextTick(() => that.$refs.tableList.toggleRowSelection(el,true))
            }
          })
        })
      },
      //清除所选数据
      clearSelection(){
        this.$refs.tableList.clearSelection();
      },
    }
}
</script>