<template>
  <div class="container">
    <ProjectList :list="list" :isReadOnly="true" :viewMode="viewMode" @on-mode-change="viewModeChange"></ProjectList>
  </div>
</template>

<script>
export default {
  methods: {
    getProjectList() {
      let list = []
      for(let i = 0; i < 13;i++) {
        list.push({
          updatedAt: '2023-08-01 12:54:12',
          project_id: i,
          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
    },
    viewModeChange(mode) {
      this.viewMode = mode
    }
  },
  mounted() {
    this.getProjectList()
  },
  data() {
    return {
      list: [],
      viewMode: 'card'
    }
  }
}
</script>

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