<template>
    <el-container>
      <el-header>
      <el-form style="margin: 10px 0" :inline="true">
        <el-form-item label="选择年份：">
          <el-date-picker
            v-model="yearTime"
            value-format="yyyy"
            type="year"
            placeholder="请选择年份"
            :clearable="false"
            @change="setYear"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        height="calc(100% - 200px)"
        :data="list"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px',border: '1px solid #ccc' }"
        :cell-style="{ 'text-align': 'center', padding: '2px', border: '1px solid #ccc',height:'60px' }"
        style="width: 100%, overflow:auto"
      >
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            <span> {{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="演习计划名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.planName }}</span>
          </template>
        </el-table-column>

        <el-table-column v-for="(item, index) in month" :key="index" :label="item" align="center">
          <template slot-scope="scope">
            <span class="text" v-show="scope.row.data[index].type === '0'"></span>
            <span class="text" style="background: green;" v-show="scope.row.data[index].type === '1'"></span>
            <span class="text" style="background: red;" v-show="scope.row.data[index].type === '2'"></span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    </el-container>
</template>

<script>
import { statistics } from '@/api/emergencies'
export default {
  name: 'RuoyiStatistics',

  data() {
    return {
      yearTime: new Date().getFullYear() + '',
      list: [],
      month: ['1月', '2月', '3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    };
  },

  mounted() {
    this.statistics()
  },

  methods: {
    setYear () {
      this.statistics()
    },
    statistics(){
      statistics({ year: this.yearTime }).then((res) => {
     if (res.code === 200) {
      console.log(res)
      this.list = res.data
     }
    })
    }
  },
};
</script>

<style lang="scss" scoped>
.text{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 10px;
}
</style>
