<!--
 * @Author: PoJun
 * @Date: 2023-09-14 13:43:13
 * @LastEditors: PoJun
 * @LastEditTime: 2023-09-27 16:22:18
 * @Message: 天赋页面
-->
<template>
    <view class="content">
        <view class="content-nav uv-flex">
            <view v-for="(item, index) in layouts" :key="index" class="content-nav-item uv-flex">
                <uv-button @click="tabClick(index)" :type="activeIndex == index ? 'primary' : ''">
                    <uv-avatar shape="square" :src="item.icon" size="18"></uv-avatar>
                    <text class="content-nav-name">{{ item.name }}</text>
                    <text class="content-nav-num">({{ $cur && $cur.tabPoints[index] }})</text>
                    <uv-icon
                        v-if="activeIndex == index"
                        :color="activeIndex == index ? '#fff' : ''"
                        name="close"
                        size="12"
                        top="1"
                        class="content-nav-close"
                    ></uv-icon>
                </uv-button>
            </view>
        </view>

        <!-- 内部制定下天赋的规则, 让遍历起来方便, 图片考虑也直接用定位的方式直接获取 -->
        <view class="content-talent" :style="[getTalentBgImage]">
            <view class="content-talent-inner">
                <view class="content-talent-row uv-flex" v-for="(row, rowIndex) in getTalentsTree" :key="rowIndex">
                    <view class="content-talent-col uv-flex" v-for="(col, colIndex) in row" :key="colIndex">
                        <!-- 为了减少循环, 给布局数据写在data本身 -->
                        <view v-if="col" class="content-talent-item">
                            <view
                                class="content-talent-icon"
                                @tap="colClick(col, 'plus', $event)"
                                :class="[getColClass(col.id)]"
                            >
                                <uv-avatar shape="square" :src="col.icon" size="36"></uv-avatar>
                            </view>
                            <view class="content-talent-point" :class="[getColClass(col.id)]">
                                {{ $computedCur(col.id) }}
                            </view>
                            <view class="content-talent-check" v-if="activeTalentId == col.id" @tap="checkTalent(col)">
                                查看
                            </view>
                            <view
                                class="content-talent-trash"
                                v-if="activeTalentId == col.id"
                                @tap="colClick(col, 'minus')"
                            >
                                遗忘
                            </view>
                        </view>
                        <!-- 连线管理 start -->
                        <view
                            v-if="col && col.arrowDown"
                            :class="[col.arrowDown.class]"
                            :style="[getColStyle(col.arrowDown.style), getLineStyle(col.id)]"
                        ></view>

                        <view
                            v-if="col && col.lineStyle"
                            :class="[col.lineStyle.class]"
                            :style="[getColStyle(col.lineStyle.style), getLineStyle(col.id)]"
                        ></view>
                        <!-- 连线管理 end -->
                    </view>
                </view>
            </view>
        </view>

        <uv-overlay :show="show" @click="show = false">
            <view class="detail-wrap uv-flex" v-if="showCol">
                <view class="detail-cont" @tap.stop>
                    <view class="uv-flex">
                        <view class="detail-cont-avatar">
                            <uv-avatar shape="square" :src="showCol.icon" size="36"></uv-avatar>
                        </view>
                        <view class="uv-m-l-20">
                            <view class="detail-cont-title">{{ showCol.name }}</view>
                            <view class="detail-cont-lev">等级 {{ $computedCur(showCol.id) }}</view>
                        </view>
                    </view>

                    <!-- 满级或者是可增可减 -->
                    <view v-if="showCol.cur != 0" class="uv-m-t-30 uv-font-26">
                        <view>当前等级</view>
                        <view class="detail-cont-des">{{ showCol.des[showCol.cur - 1] }}</view>
                    </view>

                    <!-- 不可增加, 考虑000时, -->
                    <view v-if="showNextLevel(showCol)" class="uv-m-t-30 uv-font-26">
                        <view class="detail-cont-next">下一等级</view>
                        <view class="detail-cont-des">{{ showCol.des[showCol.cur] }}</view>
                    </view>

                    <!-- 禁用并且不能是第一层 -->
                    <view
                        v-if="showCol.state == '000' && notFirstLayer(showCol.id) && showCol.cur == 0"
                        class="detail-cont-limit uv-m-t-30"
                    >
                        <!-- 禁用时可能存在上层限制 -->
                        <view v-if="showCol.limit">{{ showCol.limit }}</view>
                        <!-- 满足当前天赋tab点 -->
                        <view>{{ $computedNeed(showCol.id) }}</view>
                    </view>
                </view>
            </view>
        </uv-overlay>
    </view>
</template>

<script>
import talentsMixin from "@/utils/talentsMixin.js";
export default {
    mixins: [talentsMixin],
    props: {
        currentObj: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {
            activeIndex: 0, // 当前的天赋树
            activeTalentId: "-100", //当前激活的某个天赋,查看和遗忘用
            simpleDsq: null, // 天赋激活后的自动取消
            layouts: [], //布局信息
            showCol: null,
            show: false,
        };
    },
    computed: {
        getTalentBgImage() {
            let style = {};
            if (this.currentObj?.id) {
                const u = require(`@/static/img/${this.currentObj.id}_bg_${this.activeIndex}.jpg`);
                style["background-image"] = `url(${u})`;
            }
            return style;
        },
        getTalentsTree() {
            return this.layouts.length ? this.layouts[this.activeIndex].t : [];
        },
        // 微信小程序必须通过计算的方式
        getColStyle() {
            return function (style = {}) {
                return style;
            };
        },
        getLineStyle() {
            return function (id) {
                let style = {};
                const item = this.$cur.items[id];
                if (item.state != "000") {
                    style["filter"] = "grayscale(0)";
                } else {
                    if (item.cur != 0) {
                        style["filter"] = "grayscale(0)";
                    } else {
                        style["filter"] = "grayscale(1)";
                    }
                }
                return style;
            };
        },
        getColClass() {
            return function (id = "") {
                const { items } = this.$cur;
                if (items) {
                    const { state, cur } = items[id];
                    if (state == "101") {
                        return "ok";
                    } else if (state == "110" || state == "111") {
                        return "canuse";
                    } else if (state == "000") {
                        // 需要加点内容, 这里需要判断他下是否完全不可用还是因为下层限制不让取消
                        if (cur != 0) {
                            return "ok";
                        } else {
                            return "disabled";
                        }
                    }
                } else {
                    return "disabled";
                }
            };
        },
        $computedNeed() {
            return function (id) {
                const name = this.layouts[this.activeIndex].name;
                const i = parseInt(id.charAt(2));
                return `需要 ${(i - 1) * 5} 点 ${name} 天赋`;
            };
        },
    },
    methods: {
        // 父组件调用使用v-if, 所以随便用
        initRefreshData() {
            this.activeIndex = 0;
            const { layout = [], model = [] } = this.currentObj;
            this.layouts = JSON.parse(JSON.stringify(layout));
            // 区分mixin方法、变量, 所有的方法增加一个$
            this.$models = JSON.parse(JSON.stringify(model));
            this.$init();
        },
        tabClick(index) {
            if (this.activeIndex == index) {
                this.$clearTab(index + 1);
            } else {
                this.activeIndex = index;
            }
        },
        colClick(col, type) {
            this.activeTalentId = col.id;
            clearTimeout(this.simpleDsq);

            if (type == "plus") {
                this.$add(col.id, 1);
            } else if (type == "minus") {
                this.$subtract(col.id, 1);
            }

            this.simpleDsq = setTimeout(() => {
                this.activeTalentId = -1;
            }, 3000);
        },
        checkTalent(col) {
            this.show = true;
            // 合并下需要展示的操作对象
            const { items } = this.$cur;
            this.showCol = Object.assign({}, col, items[col.id]);
        },
        notFirstLayer(id) {
            const i = parseInt(id.charAt(2));
            return i == 1 ? false : true;
        },
        showNextLevel(col) {
            if (col.state === "000" && col.cur != 0) {
                return false;
            } else if (col.state != "101") {
                return true;
            }
            return false;
        },
    },
    watch: {
        currentObj: {
            deep: true,
            immediate: true,
            handler: function () {
                this.initRefreshData();
            },
        },
    },
};
</script>
<style scoped lang="scss">
@import "./talentDetail.scss";
</style>
