<template>
  <el-card class="content" :style="{height:height}">
    <div class="remind">
      <div class="remindHeader topLine">
        <img src="/static/img/remind.png" alt srcset />
        <span class="headerTitle">重要提醒</span>
        <span >{{nowDate}}</span>
      </div>
      <div class="toadyAd">
        <div>
          <span>今日广告量</span>
          <span class="line"></span>
          <span>{{advertisement}}</span>
        </div>
        <div>
          <span>营销活动量</span>
          <span class="line"></span>
          <span>{{marketing}}</span>
        </div>
      </div>
    </div>
    <div class="remind plan_content">
      <div class="remindHeader">
        <img src="/static/img/plan.png" alt srcset />
        <span class="headerTitle">计划相关</span>
        <router-link class="inlineBlock" to="/todoManagement/todoList">查看更多>></router-link>
      </div>
      <ul class="plan">
        <li v-for="(item,index) in planData" :key="index" :title="item.key">
          <el-checkbox :checked="item.value==0?false:true" disabled></el-checkbox>{{item.key.length>10?item.key.substring(0,10)+'...':item.key}}
        </li>
      </ul>
    </div>
    <div class="remind">
      <div class="remindHeader">
        <img src="/static/img/daiban.png" alt srcset />
        <span class="headerTitle">待办事项</span>
      </div>
      <div class="order">
        <div>订单相关</div>
        <ul class="clearfix">
          <li>
            <router-link :to="{name:'orderListCustomerService',params:{id:'1'}}">待审核订单：{{tobeexamine}}</router-link>
          </li>
          <li>
            <router-link to="/customerServiceManagement/orderListCustomerServiceJingdong">待分配物流订单：{{tobedistribution}}</router-link>
          </li>
          <li>
            <router-link :to="{name:'orderTransactionList',params:{id:'2'}}">待回款订单：{{tobecollected}}</router-link>
          </li>
          <li>
            <router-link to="/customerServiceManagement/afterSaleRefundList">待理赔订单：{{pendingclaims}}</router-link>
          </li>
          <li>
            <router-link :to="{name:'orderList',params:{id:'2'}}">审核退回订单：{{reviewreturn}}</router-link>
          </li>
          <li>
            <router-link to="/afterSaleManagement/afterSaleList">售后订单：{{aftersale}}</router-link>
          </li>
          <li>
            <router-link :to="{name:'consolidateOrderList',params:{id:'2'}}">合并退回订单：{{toberefunded}}</router-link>
          </li>
        </ul>
      </div>
      <div class="order">
        <div>客户相关</div>
        <ul>
          <li>
            <router-link to="/todoManagement/todoList">待联系客户：{{tobecontacted}}</router-link>
          </li>
        </ul>
      </div>
    </div>
  </el-card>
</template>
<script>
import { getRemindData,getTodolistData } from '@/api/dashboard/orderDatas'
export default {
  props: {
    height: {
      type: String,
      default: "1000px"
    },
    nowDate: {
      type: String,
      default: ""
    },
  },
  created() {
      this.getRemindList();
      this.getTodokist();
  },
  data() {
    return {
      marketing:'',//营销活动
      advertisement:'',//广告量
      tobeexamine:'',//待审核
      reviewreturn:'',//审核退回
      tobedistribution:'',//待分配
      aftersale:'',//售后
      tobecollected:'',//待回款
      toberefunded:'',//待退款
      pendingclaims:'',//待理赔
      tobecontacted:'',//待联系客户
      planData:[],//计划相关数据
    };
  },
  methods: {
      getRemindList(){
          return new Promise(resolve=>{
              const params={
                  time:this.nowDate
              }
              getRemindData(params).then(response=>{
                  if(response.state=='success'){
                      this.advertisement=response.advertisement
                      this.marketing=response.marketing
                  }
              }).catch(resolve=>{
                  console.log(resolve)
              })
          })
      },
      //获取待办事项数据
      getTodokist(){
          return new Promise(resolve=>{
              const params={
                  time:this.nowDate
              }
              getTodolistData(params).then(response=>{
                  if(response.state=='success'){
                      this.tobeexamine=response.tobeexamine;//待审核
                      this.reviewreturn=response.reviewreturn;//审核退回
                      this.tobedistribution=response.tobedistribution;//待分配
                      this.aftersale=response.aftersale;//售后
                      this.tobecollected=response.tobecollected;//待回款
                      this.toberefunded=response.toberefunded;//待退款
                      this.pendingclaims=response.pendingclaims;//待理赔
                      this.tobecontacted=response.tobecontacted;//待联系客户
                      this.planData=response.tobetask;//计划相关
                  }
              })
          })
      },
  },
};
</script>
<style lang="scss" scoped>
ul {
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.content {
  min-width: 325px;
  margin-left: 12px;
  padding: 0 28px;
  .plan_content{
    padding-bottom: 0 !important;
  }
  .remind {
    padding-bottom: 22px;
    .remindHeader {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      img {
        vertical-align: middle;
      }
      span:nth-child(3){
          font-size: 15px;
          color: #939393;
          float: right;
      }
      .headerTitle{
        font-weight: 600;
        color: #666666;
        font-size: 16px;
      }
      .inlineBlock {
        float: right;
        font-size: 12px;
        color: #4cb9ff;
      }
    }
    .plan{
        height: 200px;
        overflow: hidden;
    }
    .topLine {
      border-top: none;
    }
    ul {
      padding: 0;
      margin-bottom: 0;
      li {
        width: 100%;
        height: 38px;
        line-height: 38px;
        margin: 10px 0;
        font-size: 15px;
        background-color: #ebebeb;
        cursor: pointer;
        .el-checkbox {
          padding: 0 5px;
        }
      }
    }
    .order {
      margin-top: 24px;
      div {
        font-size: 17px;
        color: #000a12;
        font-weight: 700;
      }
      ul {
        padding: 0;
        margin: 0;
        li {
          margin: 0;
          margin-top: 7px;
          float: left;
          width: 50%;
          background-color: #fff;
          font-size: 14px;
          color: #4e8bc6;
          font-weight: 600;
        }
      }
    }
  }
  .toadyAd {
    width: 100%;
    div {
      width: 100%;
      height: 36px;
      border: 1px solid #ccc;
      margin-top: 16px;
      font-size: 16px;
      border-radius: 7px;
      line-height: 36px;
      padding-left: 17px;
      .line {
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        display: inline-block;
        width: 45%;
        height: 12px;
        background-image: linear-gradient(to right, #598bf6, #4cb8ff);
      }
      span{
        font-weight: 400;
      }
    }
  }
}
</style>