<template>
    <view class="wrap">
        <view class="row">
            <scroll-view
                class="scroll"
                scroll-x
                scroll-with-animation
                :scroll-into-view="curTagIdx"
            >
                <view
                    :style="{
                        'height': hei + 'px',
                    }"
                >
                    <view
                        v-if="hasHorGap"
                        id="tag0"
                        class="scroll-gap"
                    />
                    <text
                        v-for="(t, i) in tags"
                        :id="'tag' + i"
                        :key="i"
                        class="tag c-font-13 c-gap-inner-left c-gap-inner-right c-span-middle"
                        :class="{
                            'select': isEnableSelected && t[valueKey] === curTagKey,
                            'c-gap-left': i !== 0,
                        }"
                        :style="t[valueKey] === curTagKey ? seletedStyle : defaultStyle"
                        @tap="onTapTag(t, i)"
                    >{{ t[displayKey] }}</text>
                    <view
                        v-if="hasHorGap"
                        id="tag999"
                        class="scroll-gap"
                        :style="{
                            'width': isShowMore ? '50px' : '17px',
                        }"
                    />
                </view>
            </scroll-view>
            <!-- 更多按钮 -->
            <view
                v-if="isShowMore"
            >
                <view
                    v-if="isOpenMore"
                    class="info c-color c-gap-inner-left-boundary"
                >请选择</view>
                <view
                    class="more"
                    @tap="onTapMore"
                >
                    <view
                        class="icon"
                        :class="isOpenMore ? 'up' : ''"
                        :style="{
                            'top': (hei / 2 - 5) + 'px',
                        }"
                    />
                </view>
            </view>
        </view>
        <!-- 展开层 -->
        <view v-if="isOpenMore">
            <view class="panel c-gap-inner-bottom c-gap-inner-left-boundary c-gap-inner-right-boundary">
                <view
                    v-for="(row, i) in panel"
                    :key="i"
                    class="c-gap-inner-top c-row"
                >
                    <view
                        v-for="(t, j) in row"
                        :key="j"
                        class="c-span4"
                        @tap="onTapTag(t, i)"
                    >
                        <view
                            v-if="t !== 'empty'"
                            class="ptag c-font-13 c-gap-inner-left c-gap-inner-right c-span-middle c-line-clamp1"
                            :class="{
                                'select': t[valueKey] === curTagKey,
                            }"
                            :style="t[valueKey] === curTagKey ? seletedStyle : defaultStyle"
                        >{{ t[displayKey] }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

import * as core from '../../utils/core';
import * as log from '../../utils/log';
/**
 * @author haoyan
 * @file 横滑tag
 * @categories 通用组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    props: {
        /**
         * tag数组
         */
        tags: {
            type: Array,
            default() {
                return [];
            }
        },
        /**
         * 是否显示展开按钮
         */
        isShowMore: {
            'type': Boolean,
            'default': false
        },
        /**
         * 选中后是否展现选中效果
         */
        isEnableSelected: {
            'type': Boolean,
            'default': true
        },
        /**
         * 选中项的valueKey
         */
        selected: {
            'type': String,
            'default': ''
        },
        /**
         * 横滑高度
         */
        height: {
            'type': String,
            'default': ''
        },
        /**
         * 用于展现的字段名
         */
        displayKey: {
            'type': String,
            'default': 'value'
        },
        /**
         * 用于数据处理的字段名
         */
        valueKey: {
            'type': String,
            'default': 'key'
        },
        /**
         * 默认tag样式
         */
        defaultStyle: {
            type: Object,
            default() {
                return {};
            }
        },
        /**
         * 选中tag样式
         */
        seletedStyle: {
            type: Object,
            default() {
                return {};
            }
        },
        /**
         * gap
         */
        hasHorGap: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            curTagIdx: '',
            curTagKey: '',
            isOpenMore: false,
            hei: 0,
            panel: []
        };
    },
    watch: {
        selected(v) {
            this.curTagKey = v;
            this.curTagIdx = this.key2Idx(v);
        },
        tags(v) {
            this.panel = core.equal(v, 3, 'empty');
        }
    },
    lifetimes: {
        attached() {
            this.curTagKey = this.selected;
            this.curTagIdx = this.key2Idx(this.selected);
            this.hei = parseFloat(this.height);
            this.panel = core.equal(this.tags, 3, 'empty');
        }
    },
    methods: {
        key2Idx(key) {
            let idx = 0;
            this.tags.map((t, i) => {
                if (t.dir === key) {
                    idx = i;
                }
            });
            return `tag${idx}`;
        },
        // 点击tag
        onTapTag(item, i) {
            if (this.isEnableSelected) {
                this.curTagIdx = `tag${i}`;
                this.curTagKey = item[this.valueKey];
            }
            log.send({
                type: 'b',
                action: 'hospital-detail-nav',
                extra: {
                    key: item.key || '',
                    index: i
                }
            });
            /**
             * tag点击
            */
            this.$emit('tapTag', {
                tag: item,
                index: i
            });
            this.isOpenMore = false;
        },
        // 点击更多
        onTapMore() {
            this.isOpenMore = !this.isOpenMore;
            /**
             * 点击更多
            */
            this.$emit('tapMore', this.isOpenMore);
        }
    }
};
</script>
<style lang="less" scoped>
.wrap {
    .row {
        overflow: hidden;
        position: relative;
        z-index: 2;
    }
    .info {
        background-color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding-top: 4px;
    }
    .more {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50px;
        z-index: 10;
        background:linear-gradient(270deg, #fff 70%, rgba(255, 255, 255, 0) 100%);
        .icon {
            width: 0;
            height: 0;
            position: absolute;
            top: 17px;
            right: .17rem;
            border-top: 5px solid #555;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            transition: transform .16s cubic-bezier(.46, 0, 1, 1);
            transform-origin: center center;
        }
        .up {
            transform: rotate(180deg);
        }
    }
    .panel {
        background-color: #fff;
        position: relative;
        z-index: 5;
        .prow {
            display: flex;
            align-items: center;

        }
        .pcol {
            flex: auto;
        }
        .ptag {
            text-align: center;
            background-color: #f6f6f6;
            color: #555;
            border-radius: .15rem;
            height: 30px;
            line-height: 30px;
            &.select {
                background-color: #E3FAF8;
                color: #00C8C8;
                font-weight: bold;
            }
        }
    }
    .mask {
        background-color: rgba(0, 0, 0, .4);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
}
.scroll {
    white-space: nowrap;
}
.scroll-gap {
    width: 17px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.tag {
    background-color: #f6f6f6;
    color: #555;
    border-radius: .09rem;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &.select {
        background-color: #E3FAF8;
        color: #00C8C8;
        font-weight: bold;
    }
}
</style>



