<template>
    <div class="right-item-base">
      <div class="title">{{dealData.title}}</div>
      <div class="number" v-if="dealData.title !== '完成率'">{{dealData.number}}</div>
      <div class="number" v-if="dealData.title === '完成率'" :style="{'color': color}">{{dealData.number}}%</div>
      <div class="icon" :style="{'background':'url('+ dealIcon +') no-repeat','background-size':'100% 100%'}"></div>
    </div>
</template>

<script>
    export default {
      title: "WorkOrderRightItem",
      props:{
        dealIcon:{
          default:require('src/assets/images/客服待处理.png')
        },
        dealData:{
          type:Object,
          default:{
            title:'待处理',
            number:65
          }
        },
        color:{
          type:String,
          default:'#fff'
        }
      }
    }
</script>

<style lang="less" scoped>
  .right-item-base{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgb(13,40,106), rgba(0,65,146,0));
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    color: #fff;
    .title{
      font-size: vw(14);
      width: 100%;
      height: 20%;
    }
    .number{
      font-size: vw(16);
      width: 100%;
      height: 20%;
    }
    .icon{
      width: 30%;
      height: 17%;
      background: url("/src/assets/images/客服待处理.png") no-repeat;
      background-size: 100% 100%;
    }
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      width: vw(10);
      height: vh(10);
      border-top: vw(2) solid #02a6b5;
      border-right: vw(2) solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: vw(10);
      height: vh(10);
      border-bottom: vw(2) solid #02a6b5;
      border-left: vw(2) solid #02a6b5;
    }
  }
  .work-order-right{
    width: 49.3%;
    height: 100%;
    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%;
      }
    }
  }
</style>
