<template>
  <div class="main-box">
    <div class="total-box">
      <div class="box-title">
        <div class="blue-area mr-12"></div>
        <span class="bold-font">总体情况</span>
      </div>
      <el-row :gutter="20" class="data-box">
        <el-col :span="6" v-for="(item,index) in totalList" :key="index">
          <div class="grid-content mb-12">{{item.label}}</div>
          <h1>{{totalData[item.prop]}}</h1>
        </el-col>
      </el-row>
    </div>
    <div class="person-area">
      <div class="box-title">
        <div class="blue-area mr-12"></div>
        <span class="bold-font">个人绩效情况</span>
      </div>
      <div class="type-box">
        <span class="mr-10">选择统计周期：</span>
        <el-radio-group v-model="periodType">
          <el-radio-button label="month">月度</el-radio-button>
          <el-radio-button label="season">季度</el-radio-button>
          <el-radio-button label="year">年度</el-radio-button>
        </el-radio-group>
      </div>
      <div class="type-box">
        <span class="mr-10">选择统计年份：</span>
        <el-select v-model="yearBtn" placeholder="请选择">
          <el-option v-for="item in yearList" :value="item" :key="item" :label="item"></el-option>
        </el-select>
      </div>
      <el-table :data="tableData" border show-summary class="mt-20">
        <el-table-column
          v-for="(item,index) in tableColumn"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      totalList:[
        {
          label:"累计审核病例数",
          prop:"account"
        },
        {
          label:"累计审核合格病例数",
          prop:"account"
        },
        {
          label:"累计审核驳回修改病例数",
          prop:"account"
        },
        {
          label:"累计审核不合格病例数",
          prop:"account"
        },
      ],
      totalData:{
        account:1600
      },
      periodType:"month",
      yearList: [2021],
      yearBtn:2022,
      tableData:[{
          id: '12987122',
          name: '王小虎',
          season: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          season: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          season: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          season: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          season: '539',
          amount2: '4.1',
          amount3: 15
        }]
    }
  },
  methods: {
    getNow() {
      const nowDate = new Date()
      this.yearBtn = nowDate.getFullYear();
      if(!this.yearList.find((item) => item == this.yearBtn)){
        this.yearList.push(this.yearBtn)
        this.yearList.sort((a, b) => {
          return a - b
        })
      }
      
    },
  },
  mounted() {},
  created() {
    this.getNow();
  },
  watch: {},
  computed:{
      tableColumn(){
        const listM=[
        {
          label:"月份",
          prop:"month"
        },
        {
          label:"审核病例数（例）",
          prop:"count"
        },
      ]
      const listS=[
        {
          label:"季度",
          prop:"season"
        },
        {
          label:"审核病例数（例）",
          prop:"count"
        },
      ]
        if(this.periodType == 'month'){
          return listM
        }
        if(this.periodType == 'season'){
          return listS
        }
      }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .data-box {
    margin: 24px 0px;
    border-bottom: 1px solid #f3f3f3;
  }
  .el-col {
    text-align: center;
    margin: 12px 0px 28px;
    border-right: 1px solid #f3f3f3;
    .grid-content {
      font-size: 16px;
      font-family: AlibabaPuHuiTiR;
      color: #333333;
    }
    h1 {
      color: #4e68ff;
      font-weight: bold;
      font-size: 32px;
    }
  }
  .el-col:last-child {
    border-right: none;
  }
}
.main-box {
  margin: 24px;
}
.box-title {
  display: flex;
  flex-direction: row;
}
.blue-area {
  width: 4px;
  height: 24px;
  background: #4e68ff;
}
.bold-font {
  font-size: 18px;
  font-family: AlibabaPuHuiTiM;
  color: #333333;
  font-weight: bold;
}
.type-box {
  display: flex;
  flex-direction: row;
  margin: 32px 0px 0px;
  line-height: 32px;
}
</style>