<template>
  <div class="container">
    <ProjectList 
      :list="list" 
      :dataTypeFilters="dataTypeFilters" 
      :tagFilters="tagFilters" 
      :sortBy="sortBy"
      :viewMode="viewMode"
      @on-sort="sortChange"
      @on-filter="filterChange"
      @on-mode-change="viewModeChange"
      @on-create="createProject"
    ></ProjectList>
  </div>
</template>

<script>
import moment from 'moment'
const types = ['normal', 'multispectral', 'infrared']
const tags = ['农业', '采矿', '形变监测', '气象监测', '灾害预警']
export default {
  methods: {
    getProjectList() {
      let list = []
      for(let i = 0; i < 13;i++) {
        list.push({
          createdAt: this.randomDate(),
          updatedAt: this.randomDate(),
          project_id: i,
          dataTypes: [types[Math.floor(Math.random() * 2.99)]],
          tags: [tags[Math.floor(Math.random() * 4.99)]],
          name: '项目_'+(i+1),
          tips: ['Running', 'Error', 'Waiting', 'Uploading', 'AT'],
          thumbnail: 'http://mapcatch.synology.me:9966/api/factory/v1/projects/ee67ca62-66fa-4ad9-b996-03d3da8b7d3c/thumbnail?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICAgInJvbGUiOiAiYW5vbiIsCiAgICAiaXNzIjogInN1cGFiYXNlIiwKICAgICJpYXQiOiAxNjg0NDI1NjAwLAogICAgImV4cCI6IDE4NDIyNzg0MDAKfQ.5E3AnM1DM955UKnQYUur54wK4snBwebs3aUSx9reO_Q'
        })
      }
      this.list = list
    },
    sortChange(value) {
      this.sortBy = value
    },
    filterChange(data) {
      let {type, value} = data
      if (type === 'data_type') {
        this.dataTypeFilters = value
      } else if (type === 'tag') {
        this.tagFilters = value
      }
    },
    randomDate() {
      return moment(new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * Math.floor((Math.random()*10000))).getTime()).format('YYYY-MM-DD HH:mm:ss')
    },
    viewModeChange(mode) {
      this.viewMode = mode
    },
    createProject(name) {
      this.list.push({
          createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
          updatedAt: moment().format('YYYY-MM-DD HH:mm:ss'),
          project_id: this.list.length,
          dataTypes: [types[Math.floor(Math.random() * 2.99)]],
          tags: [tags[Math.floor(Math.random() * 4.99)]],
          name,
          tips: ['Running', 'Error', 'Waiting', 'Uploading', 'AT'],
          thumbnail: 'http://mapcatch.synology.me:9966/api/factory/v1/projects/ee67ca62-66fa-4ad9-b996-03d3da8b7d3c/thumbnail?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICAgInJvbGUiOiAiYW5vbiIsCiAgICAiaXNzIjogInN1cGFiYXNlIiwKICAgICJpYXQiOiAxNjg0NDI1NjAwLAogICAgImV4cCI6IDE4NDIyNzg0MDAKfQ.5E3AnM1DM955UKnQYUur54wK4snBwebs3aUSx9reO_Q'
        })
    }
  },
  mounted() {
    this.getProjectList()
  },
  data() {
    return {
      list: [],
      sortBy: 'updatedAt',
      dataTypeFilters: [],
      tagFilters: [],
      viewMode: 'card'
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 500px;
}
</style>