<template>
    <section :class="bem('', hasChosenOptions ? 'has-chosen-options' : '')">
        <header :class="bem('header')">
            <div :class="bem('header-main')">仅需两步，就可获得更精准的模板推荐</div>
            <div :class="bem('header-sub')">您的行业是？</div>
        </header>
        <main>
            <ul :class="bem('option-list')">
                <li
                    v-for="option in transformedOptions"
                    :key="option.id"
                    :class="bem('option-item')"
                    @click="toggleChooseIndustry(option)">
                    <button :class="[option.chosen ? 'chosen' : '', bem('option-btn')]">
                        <span>{{option.name}}</span>
                    </button>
                </li>
            </ul>
        </main>
        <footer :class="bem('footer')" v-if="chosenOptions && chosenOptions.length">
            <button
                @click="showProfessionOptions"
                :class="bem('next-btn')">
                <span>下一步</span>
            </button>
        </footer>
    </section>
</template>

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

import { get } from 'lodash';

export default {
    name: createComponentName('choose-industry'),
    mixins: [componentMixin],
    props: {
        allOptions: {
            type: Array,
            default: () => [],
        },
        chosenOptions: {
            type: Array,
            default: () => [],
        }
    },
    data() {
        return {
            transformedOptions: this.transform(this.allOptions, this.chosenOptions),
        };
    },
    computed: {
        hasChosenOptions() {
            return this.chosenOptions && this.chosenOptions.length;
        }
    },
    watch: {
        chosenOptions(value) {
            this.transformedOptions = this.transform(this.allOptions, value);
        }
    },
    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;
            });
        },
        toggleChooseIndustry(item) {
            let type = '';
            if (item.chosen) {
                type = 'delete';
            }
            else {
                type = this.chosenOptions.length ? 'update' : 'create';
            }
            this.$emit('chooseOption', {
                id: item.id,
                recordId: get(this.chosenOptions, '[0].recordId'),
                chosen: !item.chosen,
                type
            });
        },
        showProfessionOptions() {
            this.$emit('showProfessionOptions');
        }
    }
};
</script>

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

@b: gd-choose-industry;
@width: 135px;
@margin: 14px;
@num: 4;

.@{b} {
    display: block;
    padding-bottom: 60px;
    &--has-chosen-options {
        padding-bottom: 32px;
    }
    &__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;
    }
    &__option-list {
        display: flex;
        flex-wrap: wrap;
        width: calc(@width * @num + @margin * (@num - 1));
        margin: auto;
    }
    &__option-btn, &__next-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;
    }
    &__next-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-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;
    }
}
</style>
