<template>
  <div class="data-table">
    <!--面包 -->
    <el-breadcrumb v-if="breads.length>0" separator="/" style="margin-bottom:30px">
      <el-breadcrumb-item v-for="(item,index) in breads" :key="index">{{ item }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!--条件查询  -->
    <el-form ref="checkData" :size="size" :label-width="labelWidth" :model="objInput" inline> 
      <el-form-item v-for="(item,index) in checklist" :label="item.title" :key="index" :prop="item.model">
        <!-- 输入框 -->
        <el-input v-if="item.type==='input'" v-model.trim="objInput[item.model]" :size="size" :style="{width: item.width}" :disabled="item.disabled" placeholder="请输入" clearable  maxlength="30"></el-input>
        <!-- 下拉框 -->
        <el-select v-if="item.type==='select'" v-model="objInput[item.model]" :style="{width: item.width}" :size="size" placeholder="请选择" clearable @change="item.change(checklist[item.prop])">
          <el-option v-for="op in item.selectlist" :label="op.label" :value="op.value" :key="op.value"></el-option>
        </el-select>
        <!-- 时间范围选择器 -->
        <el-date-picker 
          v-if="item.type=='timeRange'"
          v-model="objInput[item.model]" 
          type="daterange" 
          range-separator="至" 
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <div v-if="checklist.length>0" class="checklist-button">
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="rest('checkData')">重置</el-button>
        <slot name="moreButton"></slot>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" :style="{marginTop: tableTop + 'px'}" border style="width:100%" @selection-change="handleSelectionChange">
      <el-table-column
        v-if="isIndex"
        type="index"
        width="100" 
        label="序号" 
        align="center">
      </el-table-column>
      <template v-for="(col, index) in columns">
        <!-- check -->
        <el-table-column v-if="col.selection" :key="index" align="left" type="selection" width="100"></el-table-column>
        <!-- 操作列/自定义列 -->
        <slot v-else-if="col.slot" :name="col.slot"></slot>
        <!-- 普通列 -->
        <el-table-column 
          v-else 
          :key="index" 
          :prop="col.prop" 
          :label="col.label" 
          :width="col.width" 
          :formatter="col.formatter"
          :sortable="col.sortable" 
          align="center">
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页 -->
    <div v-if="isPageobj" :style="{ marginBottom: marginBottom + 'px', marginTop: marginTop + 'px' }" class="flex-center" >
      <el-pagination 
        :current-page="pageObj.currentPage" 
        :page-sizes="sizes" 
        :page-size="pageObj.size"
        :total="total" 
        layout="total, sizes, prev, pager, next, jumper" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
	import {getTime1} from '@utils/time'
import { getList } from '@api/common/list'
export default {
  name: 'dataTable',
  props: {
    isIndex: {
      type: Boolean,
      default: false    
    },
    isPageobj: {
      type: Boolean,
      default: true  
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    size: {
      type: String,
      default: 'medium'
    },
    // tableData: {
    //   type: Array,
    //   default() {
    //     return []
    //   }
    // },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    sizes: {
      type: Array,
      default() {
        return [10, 15, 20]
      }
    },
    pageObj: {
      type: Object,
      default() {
        return {}
      }
    },
    breads: {
      type: Array,
      default() {
        return []
      }
    },
    checklist: {
      type: Array,
      default() {
        return []
      }
    },
    tableTop: {
      type: Number,
      default: 0
    },
    marginTop: {
      type: Number,
      default: 200
    },
    marginBottom: {
      type: Number,
      default: 100
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      objInput: {},
      ceshi: {},
      tableData: [],
      total: 1
    }
  },
  created() {
	  console.log("分页")
    if (this.checklist.length > 0) {
      const obj = {}
      this.checklist.forEach((item) => {
        obj[item.model] = ''
      })
      this.objInput = obj
    }
    let pageObj = this.pageObj
	console.log(pageObj)
    this.getauditList(pageObj)
  },
  // 
  methods: {
    async getauditList(pageObj) {
      let url = this.url
      const { code, data, total } = await getList(pageObj, url)
      if (code === 200) {
		  for(let item of data){
			  item.createTime=getTime1(item.createTime)
			   item.endTime=getTime1(item.endTime)
		  }
		  console.log(data);
        this.tableData = data
        this.total = total
      }
    },
    async list(pageObj) {
      let url = this.url
      const { code, data } = await getList(pageObj, url)
      if (code === 200) {
		  for(let item of data){
		   item.createTime=getTime1(item.createTime)
		   item.endTime=getTime1(item.endTime)
		  }
        this.tableData = data
      }
    },
    handleSizeChange(val) {
      let pageObj = this.pageObj
      pageObj.size = val
      this.list(pageObj)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      let pageObj = this.pageObj
      pageObj.currentPage = val
      this.list(pageObj)
      console.log(`当前页: ${val}`)
    },
    // 查询
    query() {
		let message=this.objInput;
		Object.assign(message,this.pageObj)
       this.getauditList(message)
    },
    // check选择id
    handleSelectionChange(val) {
      this.$emit('sendSelection', val)
    },
    // 重置
    rest(data) {
      this.$refs[data].resetFields()
	  this.getqueryList();
    },
    handlerelease() {
      console.log('1')
    },
    indexMethod(index) {
      return index + 1
    }
  }
}
</script>

<style scoped>
	.check {
		flex-wrap: wrap;
	}

	.check>div {
		margin-right: 50px;
		margin-bottom: 20px;
	}

	.check {
		margin-bottom: 30px
	}
	.checklist-button{
		display: inline-block;
		margin-left: 50px;
		margin-bottom:30px
	}
</style>
