<template>
    <van-row class="recordList">
      <van-row class="titleWrap">
        <span class="line"></span>
        <span class="title">餐饮管理</span>
      </van-row>
      <van-row class="type">
        <van-col span="11" class="bgc5">
          <van-row class="textTop" v-loading="loading">{{ data.yingyee || 0 }}</van-row>
          <van-row class="textBottom">今日营业额(元)</van-row>
        </van-col>
        <van-col span="11" class="bgc6" offset="2">
          <van-row class="textTop" v-loading="loading">{{ data.renci || 0 }}</van-row>
          <van-row class="textBottom">今日销售人/次</van-row>
        </van-col>
      </van-row>
      <van-row class="dishes">
        <van-col span="5" class="bgc7 left">
          <van-row class="text">最受欢迎菜品</van-row>
        </van-col>
        <van-col span="19" class="dishesList right" v-loading="loading">
          <van-row class="one" v-for="(item,index) in data.zuori" :key="index">
              <van-col span="4" class="img" >
                    <el-image
                    :src="item.img"
                    ></el-image>
              </van-col>
              <van-col span="20" class="name" >{{item.name}}<span :class=" index == '0' ? 'color1' : index == '1' ? 'color2' : 'color3' " id="num">{{item.countPid}}份</span></van-col>
          </van-row>
        </van-col>
      </van-row>
      
    </van-row>
</template>
<script>
import { getWeekDate } from "@/assets/js/dataFormate.js";
export default {
  props:["resInfo"],
  data() {
    return {
        loading:true,
        num1:require('@/assets/image/组41@3x.png'),
        num2:require('@/assets/image/组41拷贝@3x.png'),
        num3:require('@/assets/image/组41拷贝2@3x.png'),
        data:[]
    };
  },
  created(){
    //this.init()
  },
  watch:{
    resInfo(val,old){
      val.zuori[0].img = this.num1
      val.zuori[1].img = this.num2
      val.zuori[2].img = this.num3
      this.data = val
      this.loading= false
    }
  },
  mounted() {},
  methods: {
    init(){
      this.loading = true
      axios({
        method: 'get',
        url: 'https://smartpark.caih.com/zhcy/api/thirdparty/v1/open/getCanYinData',
        timeout: 3000,
      }).then(res =>{
        this.data = res.data.data
        if(this.data.countTheTopThree.length>0){
          this.data.countTheTopThree[0].img= this.num1
          this.data.countTheTopThree[1].img= this.num2
          this.data.countTheTopThree[2].img= this.num3
        }else{
          this.data.countTheTopThree[0] = {img:this.num1,name:"暂未营业",countPid:0}
          this.data.countTheTopThree[1] = {img:this.num2,name:"暂未营业",countPid:0}
          this.data.countTheTopThree[2] = {img:this.num3,name:"暂未营业",countPid:0}
        }
        this.loading= false
      })
    },
    timing(){
      setInterval(() =>{
        this.init()
      },1000 * 60 * 5)
    },
  },
};
</script>

<style lang="scss" scoped>
.dishes{
    font-size: 14px;
    margin-top:15px;
    .left{
        height:100px;
        border-radius: 6px;
        color:#fff;
        .text{
            width:50%;
            text-align: center;
            letter-spacing: 2px;
            display: block;
            line-height: 25px;
            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
            margin-top: -40px;
        }
    }
    .right{
        height:100px;
        border:1px solid #F0F0F0;
        padding-top:15px;
        .van-row{
            margin: -6px 0 15px 15px;
            .img{
                width:18px;
                vertical-align: middle;
            }
            .name{
                color:#000;
                margin-left:15px;
                margin-top:-2px;
                #num{
                    margin-left:15px;
                }
            }
        }
    }
}
</style>
