<template>
    <div class="bestsellerShop">
        <div class="item">
            <div class="canvas">
                <canvas class="hotSales" canvas-id="hotSales" id="hotSales"/>
            </div>
            <div class="list">
                <div class="shopItem" v-for="(item,index) in shopList[0].series[0].list" :key="index">
                    <p class="title">{{item.name}}</p>
                    <p class="value">{{item.value}}%</p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="canvas">
                <canvas class="unsalableGoods" canvas-id="unsalableGoods" id="unsalableGoods"/>
            </div>
            <div class="list" style="float: right">
                <div class="shopItem" v-for="(item,index) in shopList[1].series[0].list" :key="index">
                    <p class="title">{{item.name}}</p>
                    <p class="value">{{item.value}}%</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "bestsellerShop",
    data() {
        return {
            width:0,
            shopList:[]
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
            handler(value) {
                this.shopList = value
                this.handleCarData(value)
            }
        }
    },
    methods: {
        // 处理传入的数据
        handleCarData(value) {
            let res = value
            this.drawCharts('hotSales', res[0],{color:["#1E80FF","#E5E8EF"],title:'39.8%',subTitle:'热销商品'})
            this.drawCharts('unsalableGoods', res[1],{color:["#00C2FF","#E5E8EF"],title:'21.6%',subTitle:'滞销商品'})
        },
        drawCharts(id, data,config) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width =  phoneInfo.screenWidth - 32
            uChartsInstance[id] = new uCharts({
                type: "ring",
                context: ctx,
                width: _this.width / 2,
                height: 165,
                series: data.series,
                animation: true,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: config.color,
                padding: [5, 5, 5, 5],
                dataLabel: false,
                enableScroll: false,
                title: {
                    name: config.title,
                    fontSize: 16,
                    color: "#160002"
                },
                subtitle: {
                    name: config.subTitle,
                    fontSize: 12,
                    color: "#786B6C",
                },
                legend: {
                    show: false,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                extra: {
                    ring: {
                        ringWidth: 12,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: -90,
                        labelWidth: 15,
                        border: false,
                        borderWidth: 3,
                        borderColor: "#FFFFFF"
                    }
                }
            });
        },
    }
}
</script>

<style scoped lang="scss">
.bestsellerShop{
  width: 100%;
  display: flex;
  .item{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
      .canvas{
          width: 100%;
          height: 170px;
      }
      .list{
          width: 90%;
          .shopItem{
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-bottom: 1px solid #EFEFEF;
              padding: 10px 0;
              .title{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 20px;
                  width: 75%;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
              }
              .value{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 20px;
              }
          }
      }
  }
}
</style>
