<template>
  <div class="default-rank-box cube-common-box" v-if="dataBody.length>0 && params!='{}'">
    <ul class="list-ul">
      <template v-for="(item,index) in dataBody">
        <li class="list-li" v-if="index<proxy_nums" :key="index">
          <div class="left">
            <img :src="item[0]" alt="">
          </div>
          <div class="right">
            <p class="product-code">{{item[1]}}</p>
            <p class="product-name">{{item[2]}}</p>
            <p class="product-price">
              <template v-for="(names,idx) in (dataHeaders.slice(proxy_params.sliceIndex))">
                <span :key="idx">
                  {{names}} : <font v-html="proxy_dataSource(item.slice(proxy_params.sliceIndex)[idx],idx)"></font>
                </span>
              </template>
            </p>
          </div>
        </li>
      </template>
      <p class="show-btn" v-if="!proxy_params.showAll" :class="flag ? 'up-icon' :'down-icon'" @click="flag=!flag;">
        {{flag ? '展开全部':'收起全部'}}
      </p>
    </ul>
  </div>
</template>
<script>
import _ from 'lodash'
import myMixin from '../../mixin'
export default {
  name: 'cube-rank',
  mixins:[myMixin],
  props: {
    params: {
      default() {
        return {
          limit: 5,
          sliceIndex: 3,
          showAll: true,
          values: [],
          valueObj: {
            format: 'original',
            fixed: 2,
            addColor: false,
            colorNumber: 0
          }

        }
      }
    }
  },
  data() {
    return {
      flag: true,
    }
  },
  computed: {
    proxy_nums: function () {
      return (this.proxy_params.showAll ? this.dataBody.length : (this.flag ? this.proxy_params.limit : this.dataBody.length));
    },
    proxy_dataSource: function () {
      if(this.proxy_params.values && this.proxy_params.values.length == 0){
        this.dataHeaders.slice(this.proxy_params.sliceIndex).forEach(() => {
          this.proxy_params.values.push(_.cloneDeep(this.proxy_params.valueObj))
        })
      }
      return function (value, idx) {
        return this.filterValue(value,this.proxy_params.values[idx])
      }
      
    },
  },
}
</script>
<style lang="scss" scoped>
.default-rank-box {
  font-size: 1.2em;
  background: #fff;
  padding: 1em 0;
  .list-ul {
    margin: 1em;
    .list-li {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 0.5em 0;
      .left {
        width: 30%;
        height: 8em;
        img {
          width: 100%;
          height: 100%;
          background-image: url('../../assets/imgs/img_default@2x.png');
          background-repeat: no-repeat;
          background-size: 50%;
          background-position: center;
        }
      }
      .right {
        width: 60%;
        .product-code {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .product-name {
          margin: 0.5em 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .product-price {
          font-weight: 700;
          display: flex;
          justify-content: left;
          flex-wrap: wrap;
          span {
            padding-right: 0.5em;
          }
        }
      }
    }
    .show-btn {
      text-align: center;
      color: #4c85ca;
      &::after {
        content: "";
        height: 1.2em;
        width: 1.2em;
        background-repeat: no-repeat;
        background-position: right center;
        background-size: contain;
        display: inline-block;
        vertical-align: text-top;
      }
    }
    .up-icon {
      &::after {
        background-image: url('../../assets/imgs/down.png');
      }
    }
    .down-icon {
      &::after {
        background-image: url('../../assets/imgs/up.png');
      }
    }
  }
}
</style>
