<template>
  <div class="container">
    <div class="top">
      <div>
        <el-date-picker
            v-model="value2"
            type="daterange"
            :shortcuts="shortcuts"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        />
        <el-select v-model="source" placeholder="销售员" style="width: 100px;margin:0 10px">
          <el-option
              v-for="item in sourceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <el-button type="primary" plain>汇总</el-button>
        <el-button type="primary" plain>明细</el-button>
        <el-button type="primary" plain>
          <el-icon>
            <Upload/>
          </el-icon>
          导出
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="销售人" align="center"></el-table-column>
        <el-table-column label="充值次数" align="center"></el-table-column>
        <el-table-column prop="name" label="充值本金" align="center"/>
        <el-table-column prop="zip" label="充值赠金" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
          :page-size="20"
          :current-page="1"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {Upload} from "@element-plus/icons-vue";

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  }
]
const value2 = ref([])
const shortcuts = [
  {
    text: '今天',
    value() {
      const end = new Date()
      const start = new Date()
      return [start, end]
    },
  },
  {
    text: '昨天',
    value() {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 1)
      return [start, end]
    }
  },
  {
    text: '本周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '上个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '前三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
const source = ref('')
const sourceOptions = [
  {
    value: '1',
    label: '门诊',
  },
  {
    value: '2',
    label: '住院',
  },
  {
    value: '3',
    label: '体检',

  }
]
const handleCurrentChange = (val: any) => {
};
</script>
<style scoped lang="scss">
.container {
  width:100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .top{
    height: 60px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .content{
    width: 100%;
    flex: 1;
    overflow: hidden;
  }
  .bottom {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    border-bottom: 1px solid #EEE;
    .page_btn_list {
      position: absolute;
      left: 0;
      top: 10px;
    }
  }
}
</style>