<!--
 * @Descripttion: 不考虑任何扩展性功能，只实现数据动态
 * @version: 1.0.0
 * @Author: Howie
 * @Date: 2022-06-20 20:21:07
 * @LastEditors: howie
 * @LastEditTime: 2022-06-21 10:32:48
-->
<template>
  <div>
    <div class="screen-container">
      <slot name="header">
        <el-radio-group v-model="tab" style="margin-bottom: 30px" size="small">
          <el-radio-button v-for="(item, index) in tabs" :key="index" :label="item.label">{{
            item.text
          }}</el-radio-button>
        </el-radio-group>
      </slot>
    </div>
    <div class="mymain-container">
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        show-summary
        highlight-current-row
        stripe
      >
        <template v-for="col in columns">
          <el-table-column
            align="center"
            :label="col.lable"
            :prop="col.prop"
            :min-width="col.widht"
            show-overflow-tooltip
          >
          </el-table-column>
        </template>
        <!-- <el-table-column
          align="center"
          fixed="right"
          label="操作"
          min-width="160"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="hanleEdit(scope.row)"
              >审批</el-button
            >
            <el-button type="text" size="small" @click="hanleDateil(scope.row)"
              >退订</el-button
            >
            <el-button type="text" size="small" @click="hanleDateil(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <Common />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listLoading: {
      // table 加载loading
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: [] // table 数据
    },
    columns: {
      type: Array,
      default: [] // table的label和prop
    },
    tabs: {
      type: Array,
      default: [
        {
          label: 'details',
          text: '详情'
        },
        {
          label: 'record',
          text: '操作记录'
        }
      ]
    }
  },
  data() {
    return {
      tab: ''
    }
  },
  methods: {
    getList() {}
  }
}
</script>

<style lang="scss" scoped></style>
