<template>
    <section :class="bem()">
        <header :class="bem('header')">
            <div :class="bem('header-main')">仅需两步，就可获得更精准的模板推荐</div>
            <div :class="bem('header-sub')">您的职业是？
            <span :class="bem('header-sub-tip')">最多选择3个职业</span>
            </div>
        </header>
        <main>
            <ul :class="bem('option-list')">
                <li
                    v-for="option in transformedOptions"
                    :key="option.id"
                    :class="bem('option-item')"
                    @click="toggleChooseProfession(option)">
                    <button :class="[option.chosen ? 'chosen' : '', isDisabled(option.chosen) ? 'disabled' : '', bem('option-btn')]">
                        <span>{{option.name}}</span>
                    </button>
                </li>
            </ul>
        </main>
        <footer :class="bem('footer')">
            <button
                @click="showIndustryOptions"
                :class="bem('previous-btn')">
                <span>上一步</span>
            </button>
            <button
                @click="comfirmChoose"
                :class="[chosenOptionsNow.length ? '' : 'disabled', bem('complete-btn')]">
                <span>完成定制</span>
            </button>
        </footer>
    </section>
</template>

<script>
import { createComponentName, componentMixin } from '../../_utils/component';

const MAX_NUM = 3;

export default {
    name: createComponentName('choose-profession'),
    mixins: [componentMixin],
    props: {
        allOptions: {
            type: Array,
            default: () => [],
        },
        chosenOptions: {
            type: Array,
            default: () => [],
        }
    },
    data() {
        return {
            transformedOptions: this.transform(this.allOptions, this.chosenOptions)
        };
    },
    computed: {
        chosenOptionsNow() {
            return this.transformedOptions.filter(option => option.chosen);
        }
    },
    methods: {
        transform(all, chosen) {
            return all.map(option => {
                const value = chosen.find(chosenOption => chosenOption.preference_id === option.id);
                if (value) {
                    option.chosen = true;
                }
                return { ...option };
            });
        },
        toggleChooseProfession(item) {
            if (this.chosenOptionsNow.length >= MAX_NUM && !item.chosen) return;
            this.$set(item, 'chosen', !item.chosen);
        },
        comfirmChoose() {
            if (this.chosenOptionsNow.length === 0) return;

            const chosenOptionsNow = this.chosenOptionsNow;
            const chosenOptions = this.chosenOptions;
            let params = {};

            const updateRecords = chosenOptions.map((option, index) => {
                if (chosenOptionsNow[index]) {
                    return { id: option.recordId, preference_id: chosenOptionsNow[index].id, type: 'profession' };
                }
                return { id: option.recordId, deleted: 1, type: 'profession' };
            });
            params.update = updateRecords;

            if (chosenOptionsNow.length > chosenOptions.length) {
                const createRecords = chosenOptionsNow.slice(chosenOptions.length).map(option => ({ preference_id: option.id, type: 'profession' }));
                params.create = createRecords;
            }

            this.$emit('chooseOption', params);
        },
        showIndustryOptions() {
            this.$emit('showIndustryOptions');
        },
        isDisabled(chosen) {
            if (!chosen && this.chosenOptionsNow.length >= MAX_NUM) {
                return true;
            }
            return false;
        }
    }
};
</script>

<style lang="less" scoped>
@import '../../_styles/base.less';

@b: gd-choose-profession;
@width: 135px;
@margin: 14px;
@num: 4;
@btn-disabled: #BEC3C9;

.@{b} {
    display: block;
    &__header {
        text-align: center;
    }
    &__header-main {
       font-size: 20px;
       margin-bottom: @margin-base;
       color: @color-black;
       font-weight: 600;
    }
    &__header-sub {
       font-size: @font-size-lg;
       margin-bottom: @margin-xxxlg;
       color: @color-black;
    }
    &__header-sub-tip {
        color: #666;
        font-size: 14px;
    }
    &__option-list {
        display: flex;
        flex-wrap: wrap;
        width: calc(@width * @num + @margin * (@num - 1));
        margin: auto;
    }
    &__option-btn, &__previous-btn, &__complete-btn {
        display: inline-block;
        width: @width;
        height: 44px;
        line-height: 42px;
        text-align: center;
        padding: 0;
        border: 1px solid @color-stroke;
        border-radius: @border-radius-base;
        cursor: pointer;
    }
    &__previous-btn {
        font-weight: 600;
        color: #444950;
    }
    &__option-btn.chosen {
        border-color: @color-primary;
        color: @color-primary;
        background: rgba(236,243,255,1);
        font-weight: 500;
    }
    &__option-btn.disabled {
        color: @color-disable;
        cursor: not-allowed;
    }
    &__option-item {
        margin-right: @margin;
        &:nth-child(4n) {
            margin-right: 0;
        }
        &:nth-child(n + 5) {
            margin-top: @margin;
        }
    }
    &__footer {
        display: flex;
        justify-content: center;
        margin-top: 64px;
        padding-bottom: @margin-xxxlg;
    }
    &__complete-btn {
        margin-left: @margin;
        color: @color-white;
        background-color: @color-primary;
        font-weight: 600;
        &.disabled {
            background-color: @btn-disabled;
            cursor: not-allowed;
        }
    }
}
</style>
