<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.id" :key="op.id"></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>
</template>

<script>
import {  queryList } from '@api/common/list'
export default {
  name: 'dataTable',
  props: {
    isIndex: {
      type: Boolean,
      default: false    
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    size: {
      type: String,
      default: 'medium'
    },
    // tableData: {
    //   type: Array,
    //   default() {
    //     return []
    //   }
    // },
    columns: {
      type: Array,
      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: ''
    },
	sendData:{
		type: Object,
		default() {
		  return {}
		}
	}
  },
  data() {
    return {
      objInput: {},
      ceshi: {},
	  tableData:[]
    }
  },
  created() {
    if (this.checklist.length > 0) {
      const obj = {}
      this.checklist.forEach((item) => {
        obj[item.model] = ''
      })
      this.objInput = obj
    };
	this.getqueryList();
  },
  // 
  methods: {
    // 查询
    query() {
      this.getqueryList();
    },
    // check选择id
    handleSelectionChange(val) {
      this.$emit('sendSelection', val)
    },
    // 重置
    rest(data) {
      this.$refs[data].resetFields()
	  this.getqueryList();
    },
	//
	async getqueryList() {
	    try {
			let message={};
			let sendData=this.sendData
			 Object.assign(sendData,this.objInput)
	      const {
	        data,
	        code
	      } = await queryList(sendData,this.url)
	      if (code === 200) {
			  console.log(data);
	        this.tableData = data
	      }
	    } catch (e) {
	      console.log(e)
	    }
	  }
  }
}
</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>
