<template>
    <div class="bestsellerShop">
        <div class="item">
            <div class="canvas">
                <canvas class="hotSales" style="width: 50vw;height:170px;position: fixed;left:100%" canvas-id="hotSales" id="hotSales"/>
                <image v-if="img1" style="width: 50vw;height: 170px" :src="img1"/>
            </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 style="width: 50vw;height:170px;position: fixed;left:100%" class="unsalableGoods" canvas-id="unsalableGoods" id="unsalableGoods"/>
              <image v-if="img2" style="width: 50vw;height: 170px" :src="img2"/>
            </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:[],
          img1:'',
          img2:''
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
            handler(value) {
                this.shopList = value
                this.handleCarData(value)
            },
            immediate: true
        }
    },
    methods: {
        // 处理传入的数据
        handleCarData(value) {
          let res = value
          if (res && res.length>0){
            this.drawCharts1('hotSales', res[0],{color:["#1E80FF","#E5E8EF"],title:'39.8%',subTitle:'热销商品'})
            this.drawCharts2('unsalableGoods', res[1],{color:["#00C2FF","#E5E8EF"],title:'21.6%',subTitle:'滞销商品'})
          }
        },
        drawCharts1(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: false,
                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"
                    }
                }
            });
          setTimeout( ()=>{
            _this.canvasToTempImage1('hotSales')
          },500)
        },
      drawCharts2(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: false,
          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"
            }
          }
        });
        setTimeout( ()=>{
          _this.canvasToTempImage2('unsalableGoods')
        },500)
      },
      canvasToTempImage1(id){
        uni.canvasToTempFilePath({
          canvasId:id,
          complete:(res)=>{
            if (res.tempFilePath){
              uni.getFileSystemManager().readFile({
                filePath: res.tempFilePath,
                encoding: 'base64',
                success: res => {
                  let base64 = 'data:image/png;base64,' + res.data;
                  this.img1 = base64
                }
              })
            }
          }
        },this)
      },
      canvasToTempImage2(id){
        uni.canvasToTempFilePath({
          canvasId:id,
          complete:(res)=>{
            if (res.tempFilePath){
              uni.getFileSystemManager().readFile({
                filePath: res.tempFilePath,
                encoding: 'base64',
                success: res => {
                  let base64 = 'data:image/png;base64,' + res.data;
                  this.img2 = base64
                }
              })
            }
          }
        },this)
      },
    }
}
</script>

<style scoped lang="scss">
.bestsellerShop{
  width: 100%;
  display: flex;
  .item{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
      position: relative;
      .canvas{
          width: 100%;
          height: 170px;
          overflow: hidden;
          .hotSales{
              position: absolute;
          }
      }
      .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>
