<template>
  <div class="page">
    <tab >
      <tab-item @on-item-click="onItemClick" v-for="(item ,pos) in list" :key="pos" :selected="pos==index" :class="{'vux-1px-r': pos===0}">{{item}}</tab-item>
    </tab>
    <div class="line_style">
    </div>

    <div v-if="index==0">

      <div class="score_left">
          <div class="left">
              <p class="left_text">
                {{name}}
              </p>
              <p class="left_text_2">
                {{currentYear.getFullYear()}}年度得分平均分数
              </p>
          </div>

        <div class="right">
           {{avgScore}}
        </div>
      </div>

      <p class="chart_title">本年度各月走势</p>

      <v-chart :data="datas" v-if="show"
                 ref="chart">
        <v-scale x y :tick-count="0" />
        <v-tooltip :show-item-marker="true" show-x-value />
        <v-line />
      </v-chart>

    </div>

    <div v-if="index==1" class="top">

      <div class="score_record" v-for="(item,index) in infos" :key="index">
        <p class="text_16">
          {{item.fbName}}
        </p>
        <p class="text_14 common_margin">
            提交时间：{{item.operateTime}}
        </p>
        <p class="text_14 common_margin">
          评分人员：{{item.creator}}
        </p>

        <p class="text_14 common_margin">
          评分成绩：{{item.scoreResult}}
        </p>

        <div class="common_margin common_flex" style="color: rgb(105,162,244);font-size: 14px" @click="toDetail(item)">
            <p>查看详情</p>  <p>></p>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
  import {getScoreRecord} from './service/getData'
    import { Tab, TabItem,VChart, VTooltip, VLine, VScale } from 'vux';
    export default {
        name: "scoreDetail",
        components:{
            Tab, TabItem,VChart, VTooltip, VLine, VScale
        },
        data(){
            return{
              list:['评分统计','评分记录'],
                isShow:false,
                index:0,
                fbId:'',
                name:"",
                currentYear:new Date(),
                datas: [],
                show:false,
                infos:[],
                avgScore:0
            }
        },
        created(){
            try {
                EbeiPlugins.setNavigationItemTitle("评分详情");
            }catch (e) {

            }

            this.index = localStorage.getItem('scoreDetailIndex')?localStorage.getItem('scoreDetailIndex'):0
            this.fbId = this.$route.query.id?this.$route.query.id:''
            this.name = this.$route.query.name?this.$route.query.name:''
            localStorage.removeItem('scoreDetailIndex')
        },

        mounted(){
            this.$nextTick(()=> {
                this.getScoreDetail()
            })
        },
        methods:{
            onItemClick(index){
              if (this.index != index){
                  this.isShow = !this.isShow
              }
              this.index = index
                localStorage.setItem('scoreDetailIndex',this.index)
            },
            toDetail(item){
                localStorage.setItem('scoreDetailIndex',1)
                this.$router.push({
                    path:'/recordDetailPage',
                    query:{
                        obj:item
                    }
                })
            },
            getScoreDetail(){
                let self = this
                let params = {
                    fbId:self.fbId
                }
                self.$Spin.show()
                getScoreRecord(params).then(res=>{
                    console.log(res)
                    self.$Spin.hide()
                    if (res.status==200){
                        self.datas = res.data.statisticsData
                        // self.$refs.chart.rerender()
                        // self.$refs.chart.repaint()
                        self.infos = res.data.fbScoreRecords
                        this.show = true
                        self.avgScore = res.data.avgScore
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/center.less';

  .common_flex{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .page{
    background: white;
    height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: auto;
  }

  .line_style{
    background: rgb(249,249,249);height: 10px
  }

  .score_left{
    display: flex;flex-direction: row;
    align-items: center;margin-top: 30px;

    .left{
      flex: 1;
      margin-left: 24px;
    }

    .right{
      flex: 1;
      color: black;
      font-weight: bold;
      font-size: 28px;
      text-align: center;
    }

    .left_text{
      color: #333333;
      font-size: 16px;
    }

    .left_text_2{
      margin-top: 5px;
      color: #333333;
      font-size: 14px;
    }
  }

  .chart_title{
    text-align: center;margin-top: 20px;color: black;font-size: 12px
  }

  .top{
    margin: 20px 15px 10px 15px;
    overflow: auto;
    flex: 1;
  }

  .score_record{

    .common_margin{
      margin-top: 2px;
    }

    .text_16{
      font-size: 16px;
      color: #333333;
    }

    .text_14{
      font-size: 14px;
      color: #6e6e6e;
    }
  }
</style>
