<template>
    <view class="sort-word">
        <view class="sort-word__content">
            <view
                v-for="(label, index) in labels"
                :key="index"
                :class="{
                    'sort-word__content__item__active': label.select,
                }"
                class="sort-word__content__item"
                @tap="onSelectLabel(label)"
            >
                <view class="sort-word__content__item__inner">
                    <text class="c-line-clamp1">{{ label.text }}</text>
                    <view v-if="label.select && iconName" class="sort-word__content__item__inner__icon"/>
                </view>
            </view>
            <b-navigate
                v-if="more && more.url"
                :url="more.url + queryStr"
                :extra="{
                    mod: 'labels-showmore',
                }"
            >
                <view
                    class="sort-word__content__more c-gap-top-ll c-gap-bottom-ll"
                >
                    <text class="c-gap-right-small">{{ more.text }}</text>
                    <c-icon name="right"/>
                </view>
            </b-navigate>
            <login-btn
                v-if="customized && customized.url"
                @onLoginSuccess="customizedLables"
                @onTapStart="onTapBtn"
            >
                <view
                    :class="{
                        'sort-word__content__submit--not': notSend,
                    }"
                    class="sort-word__content__submit"
                >
                    {{ customized.text }}
                </view>
            </login-btn>
        </view>
    </view>
</template>

<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import BNavigate from '../../../components/common/navigate';
import LoginBtn from '@components/common/login-btn';
import {request} from '../../../utils/request';
import {toLoginPage} from '../../../utils/login';
import {send} from '../../../utils/log';

/**
 * @file 特征词
 * @author yantingxi
 * @categories 业务组件
 * @tags [component]
 */

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
        * x
        */
        labels: {
            type: Array,
            default: () => []
        },
        /**
        * x
        */
        more: {
            type: Object,
            default: () => {}
        },
        /**
        * x
        */
        customized: {
            type: Object,
            default: () => {}
        },
        /**
        * x
        */
        content: {
            type: Object,
            default: () => {}
        },
        /**
        * x
        */
        page: {
            type: String,
            default: 'component'
        },
        /**
        * x
        */
        isLogin: Number,
        /**
        * x
        */
        iconName: String
    },
    watch: {
        labels(list) {
            if (list && Array.isArray(list)) {
                this.select = list.reduce((select, item) => {
                    if (item.select) {
                        select.push(item);
                    }
                    return select;
                }, []);
                if (this.more && this.more.url) {
                    /* eslint-disable max-len */
                    this.queryStr = `${this.more.url.indexOf('?') > 0 ? '&' : '?'}select=${JSON.stringify(this.select)}`;
                    /* eslint-enable max-len */

                    this.queryStr += `&from=${this.page}more`;
                }
                this.notSend = this.select.length < 1;
            }
        }
    },
    data() {
        return {
            select: [],
            queryStr: '',
            notSend: true
        };
    },
    components: {
        CIcon,
        LoginBtn,
        BNavigate
    },
    methods: {
        onSelectLabel(label) {
            /**
             * 选中标签
             */
            this.$emit('selectLabel', label);
        },
        onTapBtn() {
            send({
                type: 't',
                action: 'click',
                extra: {
                    action: 'click',
                    mod: this.page + '-customized-label'
                }
            });
            if (process.env.MARS_ENV === 'h5') {
                if (this.isLogin !== 1) {
                    toLoginPage();
                }
                else {
                    this.customizedLables();
                }
            }
        },
        customizedLables() {
            /**
             * 定制标签
             */
            this.$emit('customizedLables', this.content);
            request({
                url: this.customized.url,
                data: {
                    recTablist: JSON.stringify(this.select)
                },
                isNeedLogin: false,
                isFirstScreen: true
            });
        }
    }
};
</script>

<style lang="less" scoped>
.sort-word {
    &__title {
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .15rem 0 .1rem;
        font-weight: bold;
    }
    &__content {
        &__item {
            display: inline-block;
            width: calc((100% - 20px) / 3);
            text-align: center;
            height: 45px;
            margin-right: .1rem;
            background: #FFFFFF;
            border: 1px solid #F1F1F1;
            box-shadow: 0 2px 10px 0 rgba(0,0,0,0.05);
            border-radius: 25px;
            box-sizing: border-box;
            overflow: hidden;

            &__inner {
                display: flex;
                margin: 0 5px;
                justify-content: center;
                align-items: center;
                height: 42px;

                &__icon {
                    margin-left: 5px;
                    width: 16px;
                    height: 16px;
                    background: url(https://medical-kg.cdn.bcebos.com/boutique%2Ffeed_label_store.png);
                    background-size: 100% 100%;
                }
            }

            &:nth-child(3n) {
                margin-right: 0;
            }

            &:nth-child(n+4) {
                margin-top: 15px;
            }

            &__active {
                color: rgb(1, 199, 201);
                // border: 2px solid rgb(1, 199, 201);
                box-shadow: 0 0 0 2px rgb(1, 199, 201) inset;
                font-weight: 700;
                overflow: hidden;
            }
        }

        &__more {
            font-size: .14rem;
            color: #999;
            text-align: center;
        }

        &__submit {
            font-size: 17px;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
            line-height: 44px;
            background-image: linear-gradient(-134deg, #00D3EA 0%, #05CFCD 61%, #00CFA3 100%);
            border-radius: 22px;

            &--not {
                opacity: .4;
                pointer-events: none;
            }
        }
    }
}
</style>
