<template>
    <b-navigate
        :url="url"
        :extra="extra"
    >
        <view id="circlesBox" class="circles--box">
            <view class="circles">
                <view v-if="title" class="circles__title">{{title}}</view>
                <view
                    v-for="(value, index) in list"
                    :key="index"
                    :class="[
                        'circles__item',
                        'circles__item--' + index
                    ]"
                >
                    {{value}}
                </view>
                <view
                    v-for="(res, resIndex) in empty"
                    :key="resIndex + list.length"
                    :class="[
                        'circles__empty',
                        'circles__empty--' + resIndex
                    ]"
                ></view>
            </view>
            <!-- <canvas v-if="show" :width="width" :height="height" :canvas-id="idx" class="circles__canvas"></canvas> -->
        </view>
    </b-navigate>
</template>

<script>
/**
 * @file 精选
 * @author yantingxi
*/
import BNavigate from '../../../components/common/navigate';
import {getPixelRatio, Circles} from '../../../utils/canvas';
import * as core from '../../../utils/core';
export default {
    config: {
        component: true
    },
    props: {
        title: String,
        url: String,
        list: {
            type: Array,
            default: () => []
        },
        module: {
            type: String,
            default: 'feeds'
        },
        log: String
    },
    data() {
        return {
            idx: 'canvas_' + core.rand(3),
            width: 375,
            height: 197,
            ratio: 1,
            ctx: null,
            show: false,
            colors: ['#f00', '#0f0', '#00f', '#eee'],
            texts: ['糖尿病', '新塘放放', 'asdada', '训狗钢结构苦咖啡'],
            empty: Array(10).fill(1)
        };
    },
    computed: {
        extra() {
            return {
                mod: this.module + '-circles',
                logStr: encodeURIComponent(this.log)
            };
        }
    },
    components: {
        BNavigate
    },
    mounted() {
        // this.init();
    },
    methods: {
        init() {
            this.$api.createSelectorQuery()
                .in(this)
                .select('#circlesBox')
                .boundingClientRect(rect => {
                    const {width = 300, height = 197} = rect;
                    [this.width, this.height] = [this.getRealValue(width), this.getRealValue(height)];

                    this.show = true;
                    this.$mpUpdated().then(() => {
                        if (!this.ctx) {
                            this.ctx = this.$api.createCanvasContext(this.idx);
                        }
                        this.ratio = getPixelRatio(this.ctx);
                        this.draw(this.ctx);
                    });
                })
                .exec();
        },
        draw(ctx) {
            this.drawCircle(ctx);
            ctx.draw(false, this.drawCb);
        },
        drawCircle(ctx) {
            new Circles({
                ctx,
                width: this.width,
                height: this.height,
                texts: ['慢性病', '男性', '育儿知识', '辟谣', '急救', '皮肤病', '抑郁症', '新冠肺炎', '女性妇科', '', '', ''],
                max: 13,
                fontSize: [15, 14, 13, 12, 11, 10, 16, 17, 18, 9],
                ratio: this.ratio
            }).init();
        },
        drawCb() {
        },
        getRealValue(v) {
            return v * this.ratio;
        }
    }
};
</script>

<style lang="less" scoped>
.realLeft(@value) {
    @left: percentage(@value / 375);
}

.circles {
    position: relative;
    width: 100%;
    height: 243px;
    margin-top: 15px;
    z-index: 0;

    &__title {
        position: relative;
        text-align: center;
        font-size: .19rem;
        color: #333;
        z-index: 1;
    }

    &__canvas {
        width: 100%;
        height: 197px;
    }

    &__item {
        position: absolute;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;

        &--0 {
            background: #00C8C8;
            top: 46px;
            .realLeft(122);
            left: @left;
            width: 80px;
            height: 80px;
            font-size: 17px;
        }

        &--1 {
            top: 64px;
            .realLeft(233);
            left: @left;
            width: 65px;
            height: 65px;
            font-size: 12px;
            background: #44D7B6;
        }

        &--2 {
            top: 120px;
            .realLeft(180);
            left: @left;
            width: 57px;
            height: 57px;
            font-size: 12px;
            background: #FF768A;
        }

        &--3 {
            top: 99px;
            .realLeft(310);
            left: @left;
            width: 53px;
            height: 53px;
            font-size: 12px;
            background: #E1AE6D;
        }

        &--4 {
            top: 132px;
            .realLeft(69);
            left: @left;
            width: 52px;
            height: 52px;
            font-size: 12px;
            background: #FFA442;
        }

        &--5 {
            top: 61px;
            .realLeft(61);
            left: @left;
            width: 45px;
            height: 45px;
            font-size: 12px;
            background: #32C369;
        }

        &--6 {
            top: 139px;
            .realLeft(260);
            left: @left;
            width: 50px;
            height: 50px;
            font-size: 12px;
            background: #32C369;
        }

        &--7 {
            top: 166px;
            .realLeft(142);
            left: @left;
            width: 48px;
            height: 48px;
            font-size: 12px;
            background: #628CFF;
        }

        &--8 {
            top: 126px;
            .realLeft(13);
            left: @left;
            width: 42px;
            height: 42px;
            font-size: 12px;
            background: #42C9FF;
        }
    }

    &__empty {
        position: absolute;
        border-radius: 50%;

        &--0 {
            top: 87px;
            .realLeft(33);
            left: @left;
            width: 10px;
            height: 10px;
            opacity: 0.4;
            background: #A2EFDE;
        }

        &--1 {
            top: 102px;
            .realLeft(55);
            left: @left;
            width: 27px;
            height: 27px;
            opacity: 0.3;
            background: #C3E5FE;
        }

        &--2 {
            top: 184px;
            .realLeft(65);
            left: @left;
            width: 10px;
            height: 10px;
            background: #C3FAFE;
        }

        &--3 {
            top: 144px;
            .realLeft(135);
            left: @left;
            width: 20px;
            height: 20px;
            background: #FFE6DB;
        }

        &--4 {
            top: 106px;
            .realLeft(107);
            left: @left;
            width: 12px;
            height: 12px;
            opacity: 0.47;
            background: #C3FEE4;
        }

        &--5 {
            top: 58px;
            .realLeft(203);
            left: @left;
            width: 13px;
            height: 13px;
            background: #E8F5FF;
        }

        &--6 {
            top: 174px;
            .realLeft(227);
            left: @left;
            width: 19px;
            height: 19px;
            opacity: 0.39;
            background: #FEC3F3;
        }

        &--7 {
            top: 188px;
            .realLeft(310);
            left: @left;
            width: 11px;
            height: 11px;
            opacity: 0.4;
            background: #C3E5FE;
        }

        &--8 {
            top: 48px;
            .realLeft(309);
            left: @left;
            width: 8px;
            height: 8px;
            background: #C3FEF8;
        }

        &--9 {
            top: 30px;
            .realLeft(137);
            left: @left;
            width: 10px;
            height: 10px;
            background: #C3FDFE;
        }
    }
}
</style>