<template>
  <div class="table-list-page">
   <div class="query-area">

        <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="choose"
        >

        </el-date-picker>
     <el-radio-group
         v-model="query.search_time"
         
          @change="ListSearch()"
     >
       <el-radio-button  label="30">全部</el-radio-button>
       <el-radio-button  label="1">昨日</el-radio-button>
       <el-radio-button  label="7">近七日</el-radio-button>
     </el-radio-group>
    <!-- <el-radio-group
         v-model="query.search_time"
         
     >
       <el-radio-button label="">全部</el-radio-button>
       <el-radio-button label="1">昨日</el-radio-button>
       <el-radio-button label="2">近七日</el-radio-button>
     </el-radio-group>-->
    </div>

    <div>
      <el-table :data="tableData"  border>
<!--        <el-table-column label="id" prop="1" align="center"></el-table-column>-->
        <!--渲染账号名称-->
        <el-table-column label="账号名称" prop="name" align="center" ></el-table-column>
        <!--渲染时间-->
        <el-table-column align="center" v-for="item in time" :label="item" :prop="item">
          <!--渲染表格里面的数据-->
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top"  v-for="(row,index) in scope.row[item]" :key="index">
              <p>任务名称: {{ row.name }}</p>
              <p>发布时间: {{ row.start_time }}</p>
              <p>任务状态: {{ row.status_name }}</p>
              <div slot="reference" class="name-wrapper" >
                <el-tag size="medium">{{ row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import CustomTable from "@/component/table/CustomTable";
import {getAction} from "@/api";
export default {
  Prop:["tableData"],
  name: "Task",
  components: {
    CustomTable,
  },
  created() {
    getAction("/task/arrange").then(res=>{
      console.log(res)
      this.tableData=res.data.items
      this.time=res.data.time
    })
  },
  data() {
    return {
      value1:'',
      menus:[],
      status:[],
      /*表头*/
      query:{},
      /*绑定的taskTableData里面的数据*/
      tableData: [
      ],
      time: [],
    };
  },
  methods:{
    choose(){
      console.log(111111)
      console.log(this.value1)
      console.log(this.value1[0].valueOf()/1000)
      console.log(this.value1[1].valueOf())
      getAction("/task/arrange",{
        start_time:this.value1[0].valueOf()/1000,
        end_time:this.value1[1].valueOf()/1000,
      }).then(res=>{
        this.tableData=res.data.items
        this.time=res.data.time
      })
    },
    getNextDate(date, day) {
      var dd = new Date(date);
      dd.setDate(dd.getDate() + day);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
      return y + "-" + m + "-" + d;
    },
    ListSearch(){
      console.log(this.query.search_time)
      var mydata= new Date();
      console.log(mydata.toLocaleDateString());
      console.log(this.getNextDate(mydata.toLocaleDateString(),-1))
     console.log(this.getNextDate(mydata.toLocaleDateString(),-1).valueOf())
      console.log(parseInt((mydata.valueOf()/1000)))
      getAction("/task/arrange",{
        start_time: parseInt((mydata.valueOf()/1000)),
        end_time: parseInt(((mydata.valueOf()+86400000*this.query.search_time)/1000))
      }).then(res=>{
        this.tableData=res.data.items
        this.time=res.data.time
      })
   /*   getAction("/task/arrange",{
        page: 1,
        limit: 10,
        query: {search_time:this.query.search_time}
      })*/
    },

  }
};
</script>

<style lang="scss" scoped>
.el-table .cell {
  white-space: nowrap;
}
@import "@/assets/style/table";
</style>