<template>
  <div>
    <el-date-picker 
      v-model="date" 
      placeholder="请选择日期" 
      :clearable="false" 
      :editable="false"
      @change="changeDate"
      value-format="yyyy-MM-dd"
      type="date" style="margin-bottom: 30px;">
    </el-date-picker>
    <el-table :data="list" border ref="travelList" >
      <el-table-column label="Entity" prop="Entity" align="center"
      show-overflow-tooltip>
        <template slot-scope="scope" >
          {{scope.row.Entity}}
        </template>
      </el-table-column>
      <el-table-column label="Code" prop="Code" align="center"
      show-overflow-tooltip>
        <template slot-scope="scope" >
          {{scope.row.Code}}
        </template>
      </el-table-column>
      <el-table-column label="指标ID" prop="EdbCode" align="center"
      show-overflow-tooltip>
        <template slot-scope="scope" >
          {{scope.row.EdbCode}}
        </template>
      </el-table-column>
      <el-table-column label="retail_and_recreation" prop="RetailAndRecreation" 
      align="center" width="170px" show-overflow-tooltip >
        <template slot-scope="scope" >
          {{scope.row.RetailAndRecreation}}
        </template>
      </el-table-column>
      <el-table-column label="grocery_and_pharmacy" prop="GroceryAndPharmacy" 
      align="center" width="180px" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.GroceryAndPharmacy}}
        </template>
      </el-table-column>
      <el-table-column label="residential" prop="Residential" 
      align="center"  min-width="100px" show-overflow-tooltip>
        <template slot-scope="scope" >
        {{scope.row.Residential}}
        </template>
      </el-table-column>
      <el-table-column label="transit_stations" prop="TransitStations" 
      align="center" min-width="130px" show-overflow-tooltip>
        <template slot-scope="scope" >
          {{scope.row.TransitStations}}
        </template>
      </el-table-column>
      <el-table-column label="parks" prop="Parks" 
      align="center" show-overflow-tooltip>
        <template slot-scope="scope" >
          {{scope.row.Parks}}
        </template>
      </el-table-column>
      <el-table-column label="workplaces" prop="Workplaces" 
      align="center"  min-width="120px" show-overflow-tooltip>
        <template slot-scope="scope" >
          {{scope.row.Workplaces}}
        </template>
      </el-table-column>
      <el-table-column label="total" prop="Total" 
      align="center" fixed="right" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.Total}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

import { dataInterence } from "@/api/api.js";
export default {
  name:"googleTravel",
  data() {
    return {
      date:new Date(),
      list:[]
    }
  },
  created() {
    this.init()
  },
  methods:{
    async init(){
      let {Data} = await dataInterence.getGoogleTravelLastDate()
      this.date = Data
      dataInterence.getGoogleTravelData({Day:Data}).then(res=>{
        this.list = res.Data
      })
    },
    changeDate(value){
      dataInterence.getGoogleTravelData({Day:value}).then(res=>{
        this.list = res.Data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  
</style>