<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="objInput[item.model]" :size="size" :style="{width: item.width}" :disabled="item.disabled" placeholder="请输入" clearable></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="center" 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="pageObj.sizes" 
        :page-size="pageObj.size"
        :total="pageObj.total" 
        layout="total, sizes, prev, pager, next, jumper" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
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 []
      }
    },
    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
    }
  },
  data() {
    return {
      objInput: {},
      ceshi: {}
    }
  },
  created() {
    if (this.checklist.length > 0) {
      const obj = {}
      this.checklist.forEach((item) => {
        obj[item.model] = ''
      })
      this.objInput = obj
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.$emit("sendSize",val)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.$emit("sendCurrent",val)
    },
    // 查询
    query() {
      console.log(this.objInput)
    },
    // check选择id
    handleSelectionChange(val) {
      this.$emit('sendSelection', val)
    },
    // 重置
    rest(data) {
      this.$refs[data].resetFields()
    },
    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>
