<template>
  <div class="callcenter">
    <div class="label">客服</div>
    <div class="div-1">
      <div class="tablecall">
        <table>
          <tr>
            <td class="td-img"><img src="../../../../static/ManageHomePic/图层6.png"></td>
            <td>呼入总数(年)<br/><span>{{datas.phoneyear}}</span></td>
          </tr>
          <tr>
            <td class="td-img"><img src="../../../../static/ManageHomePic/图层7.png"></td>
            <td>接入总数(年)<br/><span>{{datas.inileyear}}</span></td>
          </tr>
        </table>
      </div>
      <div class="tablecall tablecall-1">
        <table>
          <tr>
            <td class="td-img"><img src="../../../../static/ManageHomePic/图层9.png"></td>
            <td>呼入总数(日)<br/><span class="span-fix">{{datas.phoneday}}</span></td>
          </tr>
          <tr>
            <td class="td-img"><img src="../../../../static/ManageHomePic/图层8.png"></td>
            <td>接入总数(日)<br/><span class="span-fix">{{datas.inileday}}</span></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>

  async function geaaa (self) {
    let res = await self.$resetpost('api/af-revenue/sql/getSeatinfo',
      {data: {condition:self.sqlcondition}},
      {resolveMsg: null, rejectMsg: null})
      for(var i=0;i<4;i++){
        if(res.data[i].phoneday>0){
          self.datas.phoneday=res.data[i].phoneday
        }
        if(res.data[i].inileday>0){
          self.datas.inileday=res.data[i].inileday
        }
        if(res.data[i].phoneyear>0){
          self.datas.phoneyear=res.data[i].phoneyear
        }
        if(res.data[i].inileyear>0){
          self.datas.inileyear=res.data[i].inileyear
        }
      }
      console.log("好想下班呀，可是还没改完",res.data)

  }
  export default {
    name: "call-center",
    data(){
      return{
        datas:{
          phoneday:0,
          inileday:0,
          phoneyear:0,
          inileyear:0
        },

        sqlcondition:'1=1',
      }
    },
    async ready(){
      await geaaa(this)
    }
  }
</script>

<style scoped>
  @media screen and (max-width: 1920px) { .label {
    margin-left: 6%;
    font-size: 1.85rem;
    color: #fff;
    height:9%;
    width: auto;
  }

    .div-1 {
      /*height: 236px;*/
      /*width: 576px;*/
      /*padding-left: 80px*/
      width: 100%;
      height: 90%;
      padding: 2% 4%;

    }

    .callcenter {

    }

    .tablecall {
      width: 50%;
      float: left;
    }

    .tablecall-1 {
      /*margin-left: 30px*/
    }
    span {
      font-size: 2.4rem;
      font-weight: normal;
      color: #69d8d2;
    }
    table{
      width: 100%;
      height: 100%;
    }

    td {
      width: 20%;
      height: 50%;
      font-size: 1.4rem;
      padding-left: 4%;
      color: #ffffff;
      text-align: left;
    }

    .span-fix {
      font-size: 2.4rem;
      color: #f7cb32;
      font-weight: normal;
    }

    .td-img {
      width: 20%;
      text-align: right;
    }
    img{
      width: 40%;
      /*height: 50%;*/
    }}
  @media screen and (max-width: 1366px) {
    .label {
    margin-left: 6%;
    font-size: 1.85rem;
    color: #fff;
    height:9%;
    width: auto;
  }

    .div-1 {
      /*height: 236px;*/
      /*width: 576px;*/
      /*padding-left: 80px*/
      width: 100%;
      height: 90%;
      padding: 2% 4%;

    }

    .callcenter {

    }

    .tablecall {
      width: 50%;
      float: left;
    }

    .tablecall-1 {
      /*margin-left: 30px*/
    }
    span {
      font-size: 1.7rem;
      font-weight: normal;
      color: #69d8d2;
    }
    table{
      width: 100%;
      height: 100%;
    }

    td {
      width: 20%;
      height: 50%;
      font-size: 1rem;
      padding-left: 4%;
      color: #ffffff;
      text-align: left;
    }

    .span-fix {
      font-size: 1.7rem;
      color: #f7cb32;
      font-weight: normal;
    }

    .td-img {
      width: 20%;
      text-align: right;
    }
    img{
      width: 40%;
      /*height: 50%;*/
    }
  }

</style>
