<template>
    <view v-if="list && list.length" class="department-info">
        <template v-if="hasTag === true">
            <view
                v-for="(item, index) in viewList"
                :key="index"
                class="department-item c-gap-top-large c-line-clamp1"
                @tap.stop="navigateTo(item, 0)"
            >
                <!-- 科室图片 -->
                <c-image
                    v-if="item.icon"
                    has-compress
                    class="icon c-radius c-bg-color-white"
                    :src="item.icon"
                    :extra="{column: 2}"
                    width="0.55rem"
                    height="auto"
                    mode="widthFix"
                    :hack-white-stroke="false"
                    :is-round="false"
                    radius="0.06rem"
                />
                <!-- 科室信息 -->
                <view class="info c-gap-left-middle c-line-clamp1">
                    <view v-if="item.name" class="name c-color-333 c-font-normal c-line-clamp1">
                        {{ item.name }}
                    </view>
                    <view
                        v-for="(tag, index) in item.tags"
                        :key="index"
                        class="level c-font-13 c-line-clamp1"
                    >
                        {{ tag }}
                    </view>
                </view>
            </view>
        </template>
        <template v-else>
            <view
                v-for="(item, index) in viewList"
                :key="index"
                class="department-item-column c-gap-top-large"
                @tap.stop="navigateTo(item, 0)"
            >
                <!-- 科室图片 -->
                <image
                    v-if="item.icon"
                    :src="item.icon"
                    mode="widthFix"
                    class="icon c-radius c-bg-color-white"
                />
                <!-- 科室信息 -->
                <view class="info">
                    <view v-if="hospitalName === '北京清华长庚医院' && item.name === '肝胆胰中心'">
                        <view>
                            肝胆胰
                        </view>
                        <view>
                            中心
                        </view>
                    </view>
                    <view v-else class="name c-color-333 c-font-normal c-line-clamp2">
                        {{ item.name }}
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
/**
 * @file 医院主页第二版/医院科室
 * @author chenyang28
 * @categories 医院主页
 * @tags [sub-component]
 */
import CImage from '@components/common/image';
import {navigate} from '@utils/navigate';
import * as Log from '../../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 科室列表
         */
        list: {
            type: Array,
            default: () => []
        },
        hospitalName: String
    },
    data() {
        return {
            maxLength: 4
        };
    },
    components: {
        CImage
    },
    computed: {
        viewList() {
            return this.list.slice(0, this.maxLength);
        },
        hasTag() {
            let tag = false;
            this.viewList.forEach(el => {
                if (el.tags.length > 0) {
                    tag = true;
                }
            });
            return tag;
        }
    },
    methods: {
        navigateTo(item, type = 0) {
            let link = item.link;
            if (!link) {
                return;
            }
            Log.send({
                type: 'l',
                action: 'click',
                extra: {
                    name: 'department'
                }
            });
            navigate({
                url: link,
                urlType: type,
                log: {
                    type: 'clk',
                    value: item.tracedata
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.department-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .department-item {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex: 0 0 49%;
        width: 49%;
        height: 67px;
        padding: 6px;
        background: #f5f5f5;
        border-radius: 9px;
        overflow: hidden;

        .icon {
            flex: 0 0 55px;
            width: 55px;
            height: 55px;
        }

        .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .info .name {
            line-height: 20px;
        }

        .info .level {
            line-height: 18px;
            color: #858585;
        }
    }

    .department-item:nth-child(odd) {
        margin-right: 1%;
    }

    .department-item:nth-child(even) {
        margin-left: 1%;
    }

    .department-item-column {
        padding: 6px;
        background: #f5f5f5;
        border-radius: 9px;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        flex: 0 0 24%;
        align-items: center;
        text-align: center;
        margin-right: 1%;

        .icon {
            flex: 0 0 55px;
            width: 55px;
            height: 55px;
        }

        .info .name {
            width: 68px;
            line-height: 20px;
        }

        .info {
            margin-top: 5px;
        }

        &:last-child {
            margin-right: 0;
        }
    }
}
</style>
