<template>
    <view class="live-export">
        <view class="icon-name-bar">
            <view class="m-icon-doc">
                <c-image
                    has-compress
                    src="https://med-fe.cdn.bcebos.com/zb%2Ficon-doctor.png"
                    width="18px"
                    height="18px"
                    :is-round="false"
                    :hack-white-stroke="false"
                />
            </view>
            <view class="name">诊播专家</view>
        </view>
        <view class="live-export-bottom">
            <c-tabs
                v-if="sectionList.length > 2"
                :data="sectionList"
                :wrap-style="{
                    background: '#F5F5F5',
                }"
                :item-style="{
                    width: '100px'
                }"
                @handleItemTap="handleItemTap"
            ></c-tabs>
            <view v-if="list.length === 0" class="list-desc">当前没有医生</view>
            <view v-if="list.length !== 0">
                <view
                    v-for="(item, index) in list"
                    :key="index"
                    class="item"
                    @tap="jumpPeorSon(item)"
                >
                    <!-- <view class="head-img" :style="{backgroundImage: `url(${item.url})`}"></view> -->
                    <view
                        class="head-img"
                        :style="{'background-image': 'url(' + item.avatar + ')'} | imgCompress('background-image')"
                    ></view>
                    <view class="desc">
                        <view class="name-title">
                            <view class="name">{{ item.expertName }}</view>
                            <view class="title">{{ item.expertLevel }}</view>
                        </view>
                        <view class="descript-hos">
                            <view class="descript">{{ item.department }} {{ item.hospital }}</view>
                            <!-- <view class="hos"></view> -->
                        </view>
                    </view>
                    <!-- <view
                        v-if="item.status !== '1'"
                        class="btn"
                        @tap="jumpUrl(item)"
                        :style="{
                            background: item.status == '1' ? '#555' : item.status !== '0' ? '#00c8c8' : '#FA463F'
                        }"
                        >{{ item.statusWord }}
                    </view> -->
                    <view v-if="item.hospitalLevel === '三甲'" class="btn"></view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
/**
 * @file 9点直播间
 * @author lijiahang
 */
// import Icon from '@baidu/med-ui/components/Icon/Icon';
import Tabs from '@baidu/med-ui/components/Tabs/Tabs.vue';
import * as conf from '../../../utils/conf';
import {request} from '../../../utils/request';
import {navigate} from '../../../utils/navigate';
import {send} from '../../../utils/log';
import CImage from '@components/common/image';

export default {
    config: {
        component: true
    },

    components: {
        // 'c-icon': Icon,
        'c-tabs': Tabs,
        CImage
    },
    props: {
        sectionList: {
            type: Array
        }
    },
    created() {
        const data = this.sectionList && this.sectionList[0] && this.sectionList[0].value;
        this.getData(data);
    },
    data() {
        return {
            list: [],
            configDate: {
                1: '回放',
                0: '直播中',
                '-1': '预告'
            }
        };
    },
    methods: {
        handleItemTap(data) {
            this.getData(data.tab.value);
            send({
                extra: {
                    mod: `doctorbar-${data.tab.value}`
                }
            });
        },
        jumpUrl(item) {
            navigate({
                url: item.url,
                urlType: item.status === '0' ? '4' : '3',
                extra: {
                    mod: 'live-night-doctor-room'
                }
            });
        },
        jumpPeorSon(item) {
            navigate({
                url: item.expertHome,
                urlType: '3',
                extra: {
                    mod: 'live-night-doctor'
                }
            });
        },
        getData(data) {
            request({
                url: conf.operateApihost + '/api/live/video/liveselectedexpertlist',
                method: 'POST',
                data: {
                    pn: '0',
                    dep: data
                },
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            }).then(res => {
                if (res.data) {
                    this.list = (res.data && res.data.consultList.docList) || [];
                } else {
                    this.list = [];
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.live-export {
    .icon-name-bar {
        display: flex;

        .m-icon-doc {
            width: 18px;
            height: 18px;
            margin-top: 1px;
        }

        .name {
            font-family: PingFangSC-Semibold;
            font-size: 19px;
            color: #fff;
            margin-left: 8.5px;
        }
    }

    .live-export-bottom {
        width: 100%;
        // min-height: 345px;
        background: #fff;
        border-radius: 10px;
        padding: 10px 10px 15px 10px;
        box-sizing: border-box;
        margin-top: 15px;

        .list-desc {
            text-align: center;
            width: 100%;
            margin-top: 15px;
            font-size: 14px;
            color: #999;
            margin-bottom: 15px;
        }

        .item {
            display: flex;
            align-items: center;
            position: relative;
            margin-top: 15px;

            .head-img {
                width: 50px;
                height: 50px;
                border-radius: 50px;
                background-size: cover;
                background-repeat: no-repeat;
            }

            .desc {
                margin-left: 10px;

                .name-title {
                    display: flex;

                    .name {
                        font-size: 16px;
                        color: #1b1c1f;
                    }

                    .title {
                        font-size: 12px;
                        color: #1f1f1f;
                        margin-left: 8px;
                    }
                }

                .descript-hos {
                    display: flex;

                    .descript {
                        font-size: 12px;
                        color: #1f1f1f;
                        max-width: 190px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .hos {
                        font-size: 12px;
                        color: #1f1f1f;
                        margin-left: 8px;
                    }
                }
            }

            .btn {
                // background: #00c8c8;
                // border-radius: 15px;
                height: 17px;
                width: 45px;
                color: #fff;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                // height: 28px;
                position: absolute;
                right: 0;
                // font-size: 13px;
                background: url(https://med-fe.cdn.bcebos.com/images%2Fsanjia_new.png?x-bce-process=image/auto-orient,o_1/quality,Q_85);
                background-size: auto 100%;
                background-repeat: no-repeat;
            }

            .tags-sanjia {
                height: 17px;
                width: 45px;
                margin-bottom: 3px;
                border: none;
                padding: 0;
                border-radius: 0;
                background-size: auto 100%;
                background-repeat: no-repeat;
                margin-left: 8px;
                margin-top: 2px;
            }
        }
    }
}
</style>
