<template>
  <div>
    <div class="basicHeader">
      <span class="demonstration">选择时间:</span>
      <el-date-picker
        v-model="timeValue"
        type="month"
        placeholder="请选择时间"
        style="margin:0 15px"
      ></el-date-picker>
      <el-button
        class="search-button"
        icon="el-icon-plus"
        type="success"
        @click="Touch()"
      >
        生成
      </el-button>
    </div>
    <div style="margin: 0 15px">
      <el-table
        :data="tableData"
        border
        stripe
        :header-cell-style="headClass"
        height="42rem"
      >
        <el-table-column
          prop="reportName"
          label="报告名称"
          width=""
        ></el-table-column>
        <el-table-column
          prop="reportDate"
          label="报告统计时间"
          width=""
        ></el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="preview(scope.row)"
            >
              预览
            </el-button>
            <el-button
              @click="download(scope.$index, scope.row)"
              type="text"
              size="small"
              style="color: #409eff"
            >
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// import { useStore } from "vuex";
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'basicTable',
  components: {},
  props: {},
  setup() {
    const Touch = () => {
      console.log('')
    }

    const download = () => {
      console.log('')
    }

    const preview = () => {
      console.log('')
    }

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }

    return {
      timeValue:ref(''),
      headClass,
      Touch, //生成事件
      download, //下载时间
      preview, //预览
      tableData: [
        {
          reportName: '钦江路333号月度用电报告_2021年6月',
          reportDate: '2021-06-01 00:00:00-2021-06-30 24:00:00',
        },
        {
          reportName: '钦江路333号月度用电报告_2021年6月',
          reportDate: '2021-06-01 00:00:00-2021-06-30 24:00:00',
        },
      ],
    }
  },
})
</script>