<template>
  <div class="generalstaff">
    <div class="generalstaff_title">
      <i class="dots" />{{deptName == null ? "--" : deptName}}装置RC总览
    </div>
    <div class="card">
      <div class="card_left">
        <div class="card_title"><img src="../assets/images/index/yushen.png" alt=""></div>
        <div class="card_timeBg">
          <div class="day"><div class="fontElec1">{{preAuditTimeCountDown == null ? "--" : preAuditTimeCountDown}}</div><div class="dayword">天</div></div>
          <div class="hourglass"><img src="../assets/images/index/hourglass.png" alt=""></div>
        </div>
        <div class="time">
          <div class="time1">{{preAuditTimeString1 == null ? "--" :  preAuditTimeString1}}</div>
          <div class="time2">{{preAuditTimeString2 == null ? "--" :  preAuditTimeString2}}</div>
        </div>
      </div>
      <div class="card_right">
        <div class="card_title"><img src="../assets/images/index/shenji.png" alt=""></div>
        <div class="card_timeBg">
          <div class="day"><div class="fontElec1">{{auditTimeCountDown == null ? "--" : auditTimeCountDown}}</div><div class="dayword">天</div></div>
          <div class="hourglass"><img src="../assets/images/index/hourglass.png" alt=""></div>
        </div>
        <div class="time">
          <div class="time1">{{auditTimeString1 == null ? "--" :  auditTimeString1}}</div>
          <div class="time2">{{auditTimeString2 == null ? "--" :  auditTimeString2}}</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="echartsBox">
      <!-- 柱状图 -->
      <div class="echartsBox_Barchart">
        <div id="barChart" style="width: 600px;height: 400px;"></div>
      </div>
      <!-- 饼图 -->
      <div class="echartsBox_Piechart">
        <div id="pieChart" style="width: 600px;height: 400px;"></div>
      </div>
    </div>
  </div>

</template>

<script>
import { getCurrent, getBar, getPie } from "@/api/rc/audit";
import { getDept } from "@/api/system/dept";

export default {
  data() {
    return {
      deptName: null,
      auditTime: null,
      auditTimeString1: null,
      auditTimeString2: null,
      preAuditTime: null,
      preAuditTimeString1: null,
      preAuditTimeString2: null,
      auditTimeCountDown: null,
      preAuditTimeCountDown: null,
      barChart: null,
      pieChart: null,
    }
  },
  created() {
    this.getCurrent();
    this.getBar();
    this.getPie();
  },
  methods: {
    getCurrent() {
      getCurrent().then(response => {
        if (response.data) {
          let data = response.data;
          getDept(data.deptId).then(response => {
            this.deptName = response.data.deptName;
          });
          this.auditTime = data.auditTime;
          this.preAuditTime = data.preAuditTime;
          let date = new Date();
          let auditTime = new Date(data.auditTime);
          let preAuditTime = new Date(data.preAuditTime);
          this.auditTimeString1 = this.getString1(auditTime);
          this.auditTimeString2 = this.getString2(auditTime);
          this.preAuditTimeString1 = this.getString1(preAuditTime);
          this.preAuditTimeString2 = this.getString2(preAuditTime);
          if (date <= auditTime) {
            this.auditTimeCountDown = Math.ceil((auditTime - date) / (1000 * 60 * 60 * 24));
          }
          if (date <= preAuditTime) {
            this.preAuditTimeCountDown = Math.ceil((preAuditTime - date) / (1000 * 60 * 60 * 24));
          }
        }
      });
    },
    getBar() {
      getBar().then(response => {
        let data = response.data;
        this.barChart = this.echarts.init(document.getElementById('barChart'));
        this.barChart.setOption({
          title: {
            left: 'center',
            text: 'RC审计CODE完成率'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          yAxis: {
            type: 'category',
            data: ['CODE 0', 'CODE 1', 'CODE 2', 'CODE 3', 'CODE 5', 'CODE 6', 'CODE 7', 'CODE 8', 'CODE 9', 'CODE 10'],
            axisTick: {
              alignWithLabel: true
            },
          },
          xAxis: {
            type: 'value',
            name: '%',
          },
          series: [
            {
              itemStyle: {borderRadius: [20, 20, 20, 20]},
              data: [
                {value: data.code0 * 100, itemStyle: {color: '#91CC75'}},
                {value: data.code1 * 100, itemStyle: {color: '#91CC75'}},
                {value: data.code2 * 100, itemStyle: {color: '#91CC75'}},
                {value: data.code3 * 100, itemStyle: {color: '#91CC75'}},
                {value: data.code5 * 100, itemStyle: {color: '#91CC75'}},
                {value: data.code6 * 100, itemStyle: {color: '#91CC75'}},
                {value: data.code7 * 100, itemStyle: {color: '#91CC75'}},
                {value: data.code8 * 100, itemStyle: {color: '#91CC75'}},
                {value: data.code9 * 100, itemStyle: {color: '#91CC75'}},
                {value: data.code10 * 100, itemStyle: {color: '#91CC75'}},
              ],
              // data: [
              //   {value: data.code0 * 100, itemStyle: {color: '#5470C6'}},
              //   {value: data.code1 * 100, itemStyle: {color: '#91CC75'}},
              //   {value: data.code2 * 100, itemStyle: {color: '#FAC858'}},
              //   {value: data.code3 * 100, itemStyle: {color: '#EE6666'}},
              //   {value: data.code4 * 100, itemStyle: {color: '#73C0DE'}},
              //   {value: data.code5 * 100, itemStyle: {color: '#3BA272'}},
              //   {value: data.code6 * 100, itemStyle: {color: '#FC8452'}},
              //   {value: data.code7 * 100, itemStyle: {color: '#9A60B4'}},
              //   {value: data.code8 * 100, itemStyle: {color: '#5470C6'}},
              //   {value: data.code9 * 100, itemStyle: {color: '#91CC75'}},
              // ],
              type: 'bar',
            }
          ]
        });
      });
    },
    getPie() {
      getPie().then(response => {
        let data = response.data;
        this.pieChart = this.echarts.init(document.getElementById('pieChart'));
        this.pieChart.setOption({
          series: [
            {
              name: 'Pressure',
              type: 'gauge',
              // startAngle: 360,
              // endAngle: 0,
              progress: {
                show: true,
                width: 30,
                roundCap: true,
                itemStyle: {
                  color: '#91CC75',
                //   // 渐变色
                //   color: {
                //     type: 'linear',
                //     x: 1,
                //     y: 1,
                //     x2: 0,
                //     y2: 1,
                //     colorStops: [
                //       {
                //         offset: 0,
                //         color: '#91CC75' // 0% 处的颜色
                //       },
                //       {
                //         offset: 1,
                //         color: '#5470C6' // 100% 处的颜色
                //       }
                //     ],
                //     global: false // 缺省为 false
                //   }
                }
              },
              pointer: {
                show: false,
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  width: 30,
                },
                roundCap: true,
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}%'
              },
              data: [
                {
                  value: Math.floor(response.data * 100),
                  name: '审计开项完成率'
                }
              ]
            }
          ]
        });
      });
    },
    getString1(date) {
      return Number(date.getYear() + 1900) + "年" + Number(date.getMonth() + 1) + "月" + date.getDate() + "日";
    },
    getString2(date) {
      let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
      return "星期" + weekdays[date.getDay()] + " " + "0时0分0秒";
    },
  },
}
</script>

<style scoped>
  .fontElec1 {
    font:30px/15px 'ds-digitalbold';
    /* background: url(../assets/images/index/888.png) no-repeat; */
    width: 215px;
    height: 82px;
    background-size: 100% 100%;
    font-size: 120px;
    color: #fff;
    padding-top: 35px;
    padding-left: 0;
    letter-spacing: 21px;
  }

.generalstaff{
  padding: 20px 50px 90px 49px;
}

  .generalstaff_title{
    /* width: 289px;
    height: 43px; */
    font-family: Alibaba PuHuiTi 3.0;
    font-weight: normal;
    font-size: 46px;
    color: #333333;
    margin-left: 16px;
  }
  .dots{
    width: 25px;
    height: 25px;
    /* background: #4d86ff; */
    /* 背景色渐变 */
    background: linear-gradient(45deg, #4d86ff, #5489f9);
    display: inline-block;
    border-radius: 100%;
    margin-right: 10px;
  }

  .card{
    display: flex;
    justify-content: center;
  }
  .card_left ,.card_right{
    background: url(../assets/images/index/cardBg.png) no-repeat ;
    background-size: 100% 100%;
    width: 672px;
    height: 334px;
    padding: 40px 30px 30px 50px;
    margin: 0 20px;
  }

  .card_title{
    width: 268px;
    height: 49px;
  }

  .card_timeBg{
    width: 550px;
    height: 208px;
    background: url(../assets/images/index/cardBg-2.png) no-repeat;
    background-size: 100% 100%;
    margin-left: -45px;
    margin-top: -25px;
    padding-top: 0px;
    padding-left: 60px;
    display: flex;
    align-items: center;
  }

  .day{
    display: flex;
    font-size: 50px;
    color: #fff;
    font-weight: bold;
  }
  .dayword{
    margin: 16px 0 0 10px;
  }
  .hourglass{
    margin-left: 75px;
  }
  .time{
    font-family: MiSans;
    font-weight: 400;
    font-size: 21px;
    color: #FFFFFF;
    margin-top: -30px;
  }

  .echartsBox{
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }

  .echartsBox_Barchart,.echartsBox_Piechart{
    margin: 0 20px;
  }
</style>
