<template>
  <div class="flex" style="width: 100%;height: 100%">
    <div style="height:49%;margin-top: 2%;" class="flex-row">
      <div style="width:30%;height:100%">
        <div class=" flex">
          <div class="col-sm-12" style="height: auto;padding-left: 4%;margin:8%">
            <span class="pf-title">热线</span>
          </div>

          <div class="flex-row ">
            <span style="text-align: center" class="text-1 col-sm-6">当年总呼入量</span>
            <span style="text-align: center" class="text-1 col-sm-6">当年总报修量</span>

          </div>
          <div class="flex-row " style="margin-top:1em">
            <p style="color:#35ffff;text-align: center" class="col-sm-6"><span class="hujiao-font-title">{{callData.yearamount}}</span>
            </p>
            <p style="color:#ffc21f;text-align: center" class="col-sm-6"><span class="hujiao-font-title">{{callData.sumsend}}</span>
            </p>

          </div>

          <div class="flex-row hujiao-title">
            <span style="text-align: center" class="text-1 col-sm-6">当年人工接听量</span>
            <span style="text-align: center" class="text-1 col-sm-6">当年总呼出量</span>
          </div>
          <div class="flex-row hujiao-title">
            <p class="col-sm-6" style="color:#e75050;text-align: center"><span class="hujiao-font-title">{{callData.dayamount}}</span>
            </p>
            <p class="col-sm-6" style="color:#2189cf;text-align: center"><span class="hujiao-font-title">{{callData.sumwmm}}</span>
            </p>

          </div>

        </div>

      </div>
      <div style="width:69%;height:100%">
        <!-- <div  style="width: 100%;height: 10%;margin-top:1em">
            <span  :class="[param?'class1':'class2']" style="cursor: pointer;font-size:14px;padding:0 10px;"  @click="getDay">近7天</span>
             <span :class="[param?'class2':'class1']"  style="cursor: pointer;font-size:14px;padding:0 10px;" @click="getMonth">近六个月</span>

        </div> -->
        <div style="width: 100%;height: 100%">
          <bar-chart-line></bar-chart-line>
        </div>
      </div>


    </div>
    <div class="flex-row" style="height:49%;width:100%">
      <div class="call" style="width:55%;height:100%">
        <div class="flex-row scada-title">
          <span class="font-title flex-1"></span>
          <span class="font-title flex-1">{{year-1}}年</span>
          <span class="font-title flex-1">{{year}}年</span>
          <span class="font-title flex-1">较上年同期</span>
        </div>
        <div class="flex-row scada-title" v-for="item in arrs">
          <span class="font-1 flex-1">{{item.name}}</span>
          <span :class="[$index%2===0?'color1': 'color2']" class="flex-1">{{item.lastyear}}</span>
          <span :class="[$index%2===0?'color1': 'color2']" class="flex-1">{{item.year}}</span>
          <span class="font-2 flex-1" v-if="item.addvalue>=0">{{item.addvalue}}%<img
            src="../../../static/NewManageHome/green.png" class="flip" style=";margin-left:5px"></span>
          <span class="font-2 flex-1" v-if="item.addvalue<0">{{Math.abs(item.addvalue)}}%<img
            src="../../../static/NewManageHome/图层527.png" class="flip" style="margin-left:5px;"></span>
        </div>
      </div>
      <div class="call" style="width:45%;height:100%">
        <div class="flex-row scada-title" style="border:1px solid #227ad8">
          <span class="font-title flex-1">营业厅</span>
          <span class="font-title flex-1">昨日派单量</span>
          <span class="font-title flex-1">工单完成率</span>
        </div>
        <div class="flex-row scada-title" style="background:rgba(1,44,69,1)" v-for="item in items">
          <span class="font-14 flex-1" style="color:#35ffff;font-family: pFMedium">{{item.name}}</span>
          <span class="font-14 flex-1" style="color:#35ffff;font-family: pFBold">{{item.value}}</span>
          <span class="font-14 flex-1" style="color:#35ffff;font-family: pFBold">{{item.addvalue}}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {HttpResetClass} from "vue-client";
  // import this.datamanage from './json/this.datamanage.json'
  export default {
    title: '收费',
    data() {
      return {
        callData: {},
        year: 2021,
        param: 1,
        items: [],
        arrs: [
          {name: '昨日呼入量', sum: '2368', in: '4125', current: '50'},
          {name: '昨日派单量', sum: '995', in: '1497', current: '40'}
        ]
      }
    },
    methods: {
      getDay() {
        this.param = 1
      },
      getMonth() {
        this.param = 0
      },
    },
    ready() {
      let dt = new Date()
      this.year = dt.getFullYear()
      console.log("这是测试的")
      let load1 = new HttpResetClass()
      let load2 = new HttpResetClass()
      let load3 = new HttpResetClass()
      if(!this.datamanage.callData){
        load1.load('POST', 'api/af-revenue/sql/getCallSum', {data: {}}, {rejectMsg: null, resolveMsg: null}).then((res) => {
          this.callData = res.data[0]
        })
      } else {
        this.callData = this.datamanage.callData
      }
      if (!this.datamanage.callSum) {
        load2.load('POST', 'api/af-revenue/sql/getCallSumCompare', {data: {}}, {rejectMsg: null, resolveMsg: null}).then((rea) => {
          this.arrs = rea.data
        })
      } else {
        this.arrs = this.datamanage.callSum
      }
      if (!this.datamanage.callSumByUnit) {
        load3.load('POST', 'api/af-revenue/sql/getCallSumByUnit', {data: {}}, {rejectMsg: null, resolveMsg: null}).then((ret) => {
          this.items = []// ret.data
          this.items = ret.data
          this.items.push(ret.data.filter((item) => item.name === "滨河")[0])
          this.items.push(ret.data.filter((item) => item.name === "乌达")[0])
          this.items.push(ret.data.filter((item) => item.name === "海勃湾")[0])
        })
      } else {
        this.items = this.datamanage.callSumByUnit
      }

    },
    props: ['datamanage']
  }
</script>
<style scoped>
  @media screen and (max-width: 1920px) {
    .flip {
      transform: rotate(180deg);
      -ms-transform: rotate(180deg); /* Internet Explorer */
      -moz-transform: rotate(180deg); /* Firefox */
      -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
    }

    .call {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 1em 2em 1em 0;
    }

    .hujiao-title {
      justify-content: space-around;
      flex-direction: row;
      height: auto;
    }

    .hujiao-font-title {
      font-size: 24px;
      font-weight: bolder;
    }

    .font-title {
      font-size: 14px;
      color: white
    }

    .font-14 {
      font-size: 14px;
    }

    .font-12 {
      font-size: 12px;
      color: white
    }

    .class1 {
      background: #012c45;
      color: #01c5ba;
      border: 1px solid #01c5ba
    }

    .class2 {
      background: #011332;
      color: #426164;
      border: 1px solid #013544;
    }

    .flex-1 {
      flex: 1;
      text-align: center;
    }

    .scada-title {
      justify-content: space-around;
      flex-direction: row;
      height: auto;
    }

    .text-1 {
      font-family: pFMedium;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 35px;
      letter-spacing: 0px;
      color: #b8cee4;
    }

    .color1 {
      font-family: pFMedium;
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #00f6ff;
    }

    .color2 {
      font-family: pFMedium;
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #0096ff;
    }

    .font-1 {
      font-family: pFRegular;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #ffffff;
    }

    .font-2 {
      font-family: pFMedium;
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }

  @media screen and (max-width: 1440px) {
    .flip {
      transform: rotate(180deg);
      -ms-transform: rotate(180deg); /* Internet Explorer */
      -moz-transform: rotate(180deg); /* Firefox */
      -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
    }

    .call {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 1em 2em 1em 0;
    }

    .hujiao-title {
      justify-content: space-around;
      flex-direction: row;
      height: auto;
    }

    .hujiao-font-title {
      font-size: 20px;
      font-weight: bolder;
    }

    .font-title {
      font-size: 12px;
      color: white
    }

    .font-14 {
      font-size: 12px;
    }

    .font-12 {
      font-size: 10px;
      color: white
    }

    .class1 {
      background: #012c45;
      color: #01c5ba;
      border: 1px solid #01c5ba
    }

    .class2 {
      background: #011332;
      color: #426164;
      border: 1px solid #013544;
    }

    .flex-1 {
      flex: 1;
      text-align: center;
    }

    .scada-title {
      justify-content: space-around;
      flex-direction: row;
      height: auto;
    }

    .text-1 {
      font-family: pFMedium;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 35px;
      letter-spacing: 0px;
      color: #b8cee4;
    }

    .color1 {
      font-family: pFMedium;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #00f6ff;
    }

    .color2 {
      font-family: pFMedium;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #0096ff;
    }

    .font-1 {
      font-family: pFRegular;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #ffffff;
    }

    .font-2 {
      font-family: pFMedium;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 26px;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }

  /**/
</style>

