<template>
    <div>
        <el-rate
            :value="currentVal"
            :disabled="disabled"
            :max="maxItem"
            @change="change"
            :colors="colors"
            :show-text="showText"
            :texts="texts"
        >
        </el-rate>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import CodeListService from "@codelist/codelist-service";

@Component({})
export default class AppRate extends Vue {
    /**
     * 传入值
     * @type {any}
     * @memberof AppRate
     */
    @Prop() public value?: any;

    /**
     * 是否禁用
     * @type {boolean}
     * @memberof AppRate
     */
    @Prop() public disabled?: boolean;

    /**
     * 下发数据
     * @type {number}
     * @memberof AppRate
     */
    @Prop() public data?: any;

    /**
     * 代码表服务对象
     *
     * @type {CodeListService}
     * @memberof AppRate
     */
    public codeListService: CodeListService = new CodeListService();

    /**
     * 传递最大值
     * @type {*}
     * @memberof AppRate
     */
    @Prop({ default: 5 }) public max!: number;

    /**
     * 应用上下文
     * @type {*}
     * @memberof AppRate
     */
    @Prop() context: any;

    /**
     * 视图参数
     * @type {*}
     * @memberof AppRate
     */
    @Prop() viewparams: any;

    /**
     * 临时上下文
     * @type {*}
     * @memberof AppRate
     */
    @Prop() localContext: any;

    /**
     * 临时参数
     * @type {*}
     * @memberof AppRate
     */
    @Prop() localParam: any;

    /**
     * 代码表标识
     * @type {string}
     * @memberof AppRate
     */
    @Prop() tag?: string;

    /**
     * 代码表类型
     * @type {string}
     * @memberof AppRate
     */
    @Prop() codelistType?: string;

    /**
     * 代码表值分隔符
     * @type {string}
     * @memberof AppRate
     */
    @Prop({ default: "," }) valueSeparator?: string;

    /**
     * 数据名称
     * @type {*}
     * @memberof AppRate
     */
    @Prop() name: any;

    /**
     * 辅助说明文本
     * @type {*}
     * @memberof AppRate
     */
    @Prop() texts?: any[];

    /**
     * 是否显示辅助说明文本
     * @type {boolean}
     * @memberof AppRate
     */
    @Prop() showText?: boolean;

    /**
     * 自定义颜色
     * @type {*}
     * @memberof AppRate
     */
    @Prop() colors?: Object | string[3];

    /**
     * 最大值
     * @type {number}
     * @memberof AppRate
     */
    public maxItem: number = 5;

    /**
     * 监听数据变化
     *
     * @memberof AppRate
     */
    @Watch("data", { immediate: true, deep: true })
    onDataChange(newVal: any, oldVal: any) {
        if (newVal) {
            if (this.tag && this.codelistType == "DYNAMIC") {
                // 公共参数处理
                let data: any = {};
                this.handlePublicParams(data);
                // 参数处理
                let _context = data.context;
                let _param = data.param;
                this.codeListService
                    .getItems(this.tag, _context, _param)
                    .then((res: any) => {
                        const items = res;
                        //  获取最大值
                        const maxItem = Math.max.apply(
                            Math,
                            items.map((item: any) => {
                                return item.value;
                            })
                        );
                        this.maxItem = maxItem > 5 ? 5 : maxItem;
                    })
                    .catch((error: any) => {
                        console.log(
                            `----${this.tag}----$t('components.appCheckBox.notExist')`
                        );
                    });
            }
        }
    }

    /**
     * 当前值
     *
     * @memberof AppRate
     */
    get currentVal() {
        return Number(this.value);
    }

    /**
     * 值改变
     * @memberof AppRate
     */
    public change(val: any) {
        this.$emit("change", val);
    }

    /**
     * Vue生命周期
     * @memberof AppRate
     */
    public created() {
        if (this.max) {
            this.maxItem = this.max;
        }
        this.handleCodelist();
    }

    /**
     * 公共参数处理
     *
     * @param {*} arg
     * @returns
     * @memberof AppRate
     */
    public handlePublicParams(arg: any) {
        // 合并表单参数
        arg.param = this.viewparams
            ? JSON.parse(JSON.stringify(this.viewparams))
            : {};
        arg.context = this.context
            ? JSON.parse(JSON.stringify(this.context))
            : {};
        // 附加参数处理
        if (this.localContext && Object.keys(this.localContext).length > 0) {
            let _context = this.$util.computedNavData(
                this.data,
                arg.context,
                arg.param,
                this.localContext
            );
            Object.assign(arg.context, _context);
        }
        if (this.localParam && Object.keys(this.localParam).length > 0) {
            let _param = this.$util.computedNavData(
                this.data,
                arg.param,
                arg.param,
                this.localParam
            );
            Object.assign(arg.param, _param);
        }
    }

    /**
     * 根据代码表获取最大值
     * @memberof AppRate
     */
    public handleCodelist() {
        if (this.tag && Object.is(this.codelistType, "STATIC")) {
            const codelist = this.$store.getters.getCodeList(this.tag);
            if (codelist) {
                const items = [...JSON.parse(JSON.stringify(codelist.items))];
                //  获取最大值
                const maxItem = Math.max.apply(
                    Math,
                    items.map((item: any) => {
                        return item.value;
                    })
                );
                this.maxItem = maxItem > 5 ? 5 : maxItem;
            } else {
                console.log(
                    `----${this.tag}----$t('components.appCheckBox.notExist')`
                );
            }
        } else if (this.tag && Object.is(this.codelistType, "DYNAMIC")) {
            // 公共参数处理
            let data: any = {};
            this.handlePublicParams(data);
            // 参数处理
            let _context = data.context;
            let _param = data.param;
            this.codeListService
                .getItems(this.tag, _context, _param)
                .then((res: any) => {
                    const items = res;
                    //  获取最大值
                    let maxItem = Math.max.apply(
                        Math,
                        items.map((item: any) => {
                            return item.value;
                        })
                    );
                    this.maxItem = maxItem > 5 ? 5 : maxItem;
                })
                .catch((error: any) => {
                    console.log(
                        `----${this.tag}----$t('components.appCheckBox.notExist')`
                    );
                });
        }
    }
}
</script>

<style lang="less">
@import "./app-rate.less";
</style>