<template>
  <div style="background-color: darkblue">
    <div class="left-order-body row" style="background-color: darkblue">
      <div class="body-up">
        <div class="up-item"><work-order-item :work-order="workOrderData[0]"
                                              :work-oder-icon="workOrderIcon1"
                                              :color="workOrderColors[0]"></work-order-item></div>
        <div class="up-item"><work-order-item :work-order="workOrderData[1]"
                                              :work-oder-icon="workOrderIcon2"
                                              :color="workOrderColors[1]"></work-order-item></div>
        <div class="up-item"><work-order-item :work-order="workOrderData[2]"
                                              :work-oder-icon="workOrderIcon3"
                                              :color="workOrderColors[2]"></work-order-item></div>
      </div>
      <div class="body-down">
        <div class="down-item"><work-order-item :work-order="workOrderData[3]"
                                                :work-oder-icon="workOrderIcon4"
                                                :color="workOrderColors[3]"></work-order-item></div>
        <div class="down-item"><work-order-item :work-order="workOrderData[4]"
                                                :work-oder-icon="workOrderIcon5"
                                                :color="workOrderColors[4]"></work-order-item></div>
        <div class="down-item"><work-order-item :work-order="workOrderData[5]"
                                                :work-oder-icon="workOrderIcon6"
                                                :color="workOrderColors[5]"></work-order-item></div>
      </div>
    </div>
    <div class="work-order-right row" style="background-color: darkblue">
      <div class="right-up">
        <div class="up-item"><work-order-right-item :deal-data="dealData[0]"
                                                    :deal-icon="dealIcon1"></work-order-right-item></div>
        <div class="up-item"><work-order-right-item :deal-data="dealData[1]"
                                                    :deal-icon="dealIcon2"></work-order-right-item></div>
        <div class="up-item"><work-order-right-item :deal-data="dealData[2]"
                                                    :deal-icon="dealIcon3"></work-order-right-item></div>
        <div class="up-item"><work-order-right-item :deal-data="dealData[3]"
                                                    :deal-icon="dealIcon4" :color="completeColor"></work-order-right-item></div>
      </div>
      <div class="right-down">
        <div class="down-item"><work-order-right-down-item :content-bg="contentBgs[0]"
                                                           :down-item-data="downItemDatas[0]"></work-order-right-down-item></div>
        <div class="down-item"><work-order-right-down-item :content-bg="contentBgs[1]"
                                                           :down-item-data="downItemDatas[1]"></work-order-right-down-item></div>
        <div class="down-item"><work-order-right-down-item :content-bg="contentBgs[2]"
                                                           :down-item-data="downItemDatas[2]"></work-order-right-down-item></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  title:"GongdanContentPage",
  data(){
    return {
      dealIcon1:require('src/assets/images/客服待处理.png'),
      dealIcon2:require('src/assets/images/客服处理中.png'),
      dealIcon3:require('src/assets/images/客服已完成.png'),
      dealIcon4:require('src/assets/images/客服完成率.png'),
      contentBgs:[[9,40,115],[67,51,77],[18,61,115]],
      downItemDatas:[{title:'昨日工单',number:154,name:'日环比',percentage:'+44.18%'},
        {title:'月度工单量',number:5149,name:'月环比',percentage:'+71.12%'},
        {title:'年度工单量',number:145784,name:'同比',percentage:'+95.07%'}],
      dealData: [{title:'总工单',number:90},{title:'待处理',number:30},{title:'已完成',number:60},{title:'完成率',number:67}],
      workOrderIcon:require('src/assets/images/客服今日工单.png'),
      workOrderIcon1:require('src/assets/images/客服工单量.png'),
      workOrderIcon2:require('src/assets/images/客服在线处理.png'),
      workOrderIcon3:require('src/assets/images/客服派单量.png'),
      workOrderIcon4:require('src/assets/images/客服工单量.png'),
      workOrderIcon5:require('src/assets/images/客服在线处理.png'),
      workOrderIcon6:require('src/assets/images/客服网厅预约派单量.png'),
      workOrderColors:['#FFF000','#FF8500','#00FFEF','#FFF000','#FF8500','#00D3FF'],
      workOrderData:[{name:'工单量',number:8740},
        {name:'在线处理',number:5487},
        {name:'派单量',number:8740},
        {name:'电话派单量',number:8740},
        {name:'微信客服派单量',number:5487},
        {name:'网厅预约派单量',number:4723}],
    }
  }
}
</script>
<style lang="less" scoped>
.work-order-right{
  width: 100%;
  height: 60%;
  background: rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .right-up{
    width: 90%;
    height: 44%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .up-item{
      width: 23%;
      height: 90%;
    }
  }
  .right-down{
    width: 90%;
    height: 40%;
    margin-bottom: 4%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .down-item{
      width: 100%;
      height: 25%;
    }
  }
}
.left-order-body{
  width: 100%;
  margin-bottom: 4%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .body-up{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .up-item{
      width: 100%;
      height: 33%;
    }
  }
  .body-down{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .down-item{
      width: 100%;
      height: 33%;
    }
  }
}
</style>
