<!--
 * @Author: PoJun
 * @Date: 2023-09-14 13:43:13
 * @LastEditors: PoJun
 * @LastEditTime: 2023-10-07 11:06:56
 * @Message: 天赋页面
-->
<template>
    <view class="content">
        <view class="content-title" :style="[getCurrentImage]">
            <view class="uv-flex" @click="openPicker">
                <uv-avatar :src="currentObj.icon" size="36"></uv-avatar>
                <text class="content-title-text">{{ currentObj.name }}</text>
                <uv-icon name="arrow-down-fill" size="12px" color="#fff"></uv-icon>
            </view>
            <view class="content-title-point">
                <view class="uv-flex">
                    剩余:
                    <text class="content-title-residue">{{ pointsTotal - pointsUsed }}</text>
                </view>
                <view class="uv-flex uv-m-t-12">
                    已用:
                    <text class="content-title-used">{{ pointsUsed }}</text>
                </view>
            </view>
        </view>

        <talent-detail
            ref="talent"
            v-if="currentObj && currentObj.id"
            :currentObj="currentObj"
            @change="talentChange"
        ></talent-detail>

        <view class="resetting uv-flex" @tap="resetTalentChange" hover-class="uv-hover-class">
            <uv-icon color="#fff" name="reload" size="24"></uv-icon>
        </view>

        <uv-picker ref="picker" keyName="name" :columns="[Classes]" @confirm="confirm"></uv-picker>
    </view>
</template>

<script>
import { Classes } from "@/static/js/constant.js";
import talentDetail from "./components/talentDetail.vue";
import { getRunConfsInfo } from "@/config/http.js";
export default {
    components: { talentDetail },
    data() {
        return {
            Classes, //职业
            currentObj: {}, //选中渲染对象
            selectIndex: 0, // 当前选中的第几位
            pointsUsed: 0, //已用点数
            pointsTotal: 51, //总点数
        };
    },
    computed: {
        getCurrentImage() {
            let style = {};
            // 微信小程序只能支持网络图片或者引入的方式, 先随意用着后面改
            if (this.currentObj?.id) {
                const u = require(`@/static/img/${this.currentObj.id}.jpeg`);
                style["background-image"] = `url(${u})`;
            }
            return style;
        },
    },
    onLoad() {
        // 这里可能存在从已有天赋进来, 到时候直接赋值选中就可以
    },
    onReady() {
        this.refreshPage(0);
    },
    methods: {
        openPicker() {
            this.$refs.picker.open();
        },
        confirm({ indexs }) {
            this.selectIndex = indexs[0];
        },
        refreshPage(index) {
            const item = this.Classes[index];
            this.pointsUsed = 0;
            this.currentObj = {};
            uni.showLoading({ mask: true });
            getRunConfsInfo(item.id).then(res => {
                // 没办法直接使用json方法, 所以
                let obj = JSON.parse(res.key);
                this.currentObj = Object.assign({}, item, obj);
                uni.hideLoading();
            });
        },
        talentChange(item) {
            this.pointsTotal = item.total;
            this.pointsUsed = item.used;
        },
        resetTalentChange() {
            this.$refs.talent.$init();
        },
    },
    watch: {
        selectIndex: {
            handler: function (index) {
                // 选项改变, 重新渲染界面
                this.refreshPage(index);
            },
        },
    },
};
</script>
<style scoped lang="scss">
.content {
    &-title {
        padding: 56rpx 24rpx;
        color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        background-color: rgb(156, 154, 154);
        &-text {
            font-size: 44rpx;
            font-weight: bold;
            margin: 0 6px 0 8px;
        }
        &-point {
            margin-top: 24rpx;
            font-size: 28rpx;
        }
        &-residue {
            margin-left: 10px;
            color: $uv-success;
        }
        &-used {
            margin-left: 10px;
            color: $uv-wow-main-color;
        }
    }
    .resetting {
        position: fixed;
        z-index: 996;
        right: 20px;
        bottom: 100px;
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.9);
        border-radius: 6px;
        justify-content: center;
    }
}
</style>
