<template>
  <div class="index">
    <el-form ref="searchFrom" :model="searchFrom" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="时间">
            <el-date-picker
              v-model="searchFrom.watchTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item style="float: right">
            <el-button type="primary" @click="getList">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        v-for="(data, index) in tableHead"
        :key="data"
        :label="data"
      >
        <template slot-scope="scope">
          {{ scope.row[index]}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {getWatchListApi} from "../../service/api";
  export default {
    name: "index",
    data(){
      return {
        searchFrom: {
          watchTime: []
        },
        tableData: [],
        tableHead:[]
      }
    },
    methods: {
      defaultTime(){
        let date = new Date();
        let year = date.getFullYear();
        let Month = date.getMonth()+1;
        if(Month < 10){
          Month = `0${Month}`
        }
        let Day = date.getDate();
        if(Day<10)Day = `0${Day}`
        let star = `${year}-${Month}-01`;
        let end = `${year}-${Month}-${Day}`
        this.searchFrom.watchTime = [star,end]
      },
      getList(){
        let json = {
        };
        if(this.searchFrom.watchTime && this.searchFrom.watchTime.length > 0){
          json.start_at = this.searchFrom.watchTime[0]
          json.end_at = this.searchFrom.watchTime[1]
        }
        getWatchListApi(json).then((res)=>{
          this.tableHead = res[0]
          this.tableData = res.slice(1);
        })
      },
    },
    mounted(){
      this.defaultTime();
      this.getList();
    }
  }
</script>

<style scoped>
  .index {
    padding: 20px 0;
  }
</style>
