<template>
    <view class="live-calender-box">
        <view class="icon-name-bar">
            <view
                class="m-icon-data"
            >
                <c-image
                    has-compress
                    width="18px"
                    height="18px"
                    src="https://med-fe.cdn.bcebos.com/zb%2Ficon-data.png"
                    :hack-white-stroke="false"
                    :is-round="false"
                />
            </view>
            <view class="name">诊播日历</view>
        </view>
        <view class="live-calender-bottom">
            <c-tabs
                v-if="dateList.length > 0"
                :data="dateList"
                :selected="indexDay"
                :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 in list"
                    :key="item.name"
                    class="item"
                >
                    <view class="time">{{ item.timeLeap }}</view>
                    <view class="name">{{ item.expertName }}</view>
                    <view class="title">{{ item.expertLevel }}</view>
                    <view class="despect">{{ item.department }}</view>
                    <view
                        class="status"
                        :style="{
                            background: item.status == '1' ? '#555' : item.status !== '0' ? '#00c8c8' : '#FA463F'
                        }"
                        @tap="jumpUrl(item)"
                    >{{ item.statusWord }}</view>
                </view>
                <view class="more-box" @tap="jumpMore">
                    查看更多
                    <view class="more-icon">
                        <c-image
                            has-compress
                            width="16px"
                            height="16px"
                            src="https://med-fe.cdn.bcebos.com/zb%2Ficon-more.png"
                            :hack-white-stroke="false"
                            :is-round="false"
                        />
                    </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 {send} from '../../../utils/log';
import {request} from '../../../utils/request';
import {navigate} from '@baidu/med-utils/lib/Mars/navigate';
import CImage from '@components/common/image';
export default {
    config: {
        component: true
    },

    components: {
        // 'c-icon': Icon,
        'c-tabs': Tabs,
        CImage
    },
    props: {
        dateList: {
            type: Array
        },
        calendarUrl: {
            type: String
        },
        indexDay: {
            type: Number
        },
        day: {
            type: String
        }
    },

    created() {
        const data = this.day;
        this.getData(data);
    },
    mounted() {},
    data() {
        return {
            list: [],
            select: 1,
            configDate: {
                1: '回放',
                0: '直播中',
                '-1': '预告'
            }
        };
    },
    methods: {
        onClick() {},
        // 直播日历的跳转
        jumpUrl(item) {
            navigate({
                url: item.url,
                urlType: item.status === '0' ? '4' : '3',
                extra: {
                    mod: 'live-night-room-rili'
                }
            });
        },
        jumpMore() {
            navigate({
                url: this.calendarUrl,
                extra: {
                    mod: 'live-night-room-rili-more'
                }
            });
        },
        handleItemTap(data) {
            this.getData(data.tab.date);
            send({
                extra: {
                    mod: `rilibar-${data.tab.date}`
                }
            });
        },
        // 获取日历对应的信息
        getData(date) {
            request({
                url: conf.operateApihost + '/api/live/video/liveselectedexpertday',
                method: 'POST',
                data: {
                    date: date
                },
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            }).then(res => {
                if (res.data) {
                    this.list = (res.data && res.data.calendar && res.data.calendar.liveList) || [];
                } else {
                    this.list = [];
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.live-calender-box {
    .icon-name-bar {
        display: flex;
        // .icon {
        //     font-size: 25px;
        //     color: #fff;
        // }
        .m-icon-data {
            margin-top: 1px;
            width: 18px;
            height: 18px;
        }

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

    .live-calender-bottom {
        width: 100%;
        min-height: 178px;
        background: #fff;
        border-radius: 10px;
        padding: 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;
        }

        .more-box {
            font-size: 14px;
            color: #1f1f1f;
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 15px;
            justify-content: center;
            // display: flex;
            .more-icon {
                width: 16px;
                height: 16px;
                margin-left: 6px;
            }
        }

        .item {
            display: flex;
            // justify-content: space-between;
            align-items: center;
            margin-top: 15px;

            .time {
                font-size: 14px;
                color: #555;
                width: 87px;
                overflow: hidden;
                white-space: nowrap;
                // overflow: hidden;
                text-overflow: ellipsis;
            }

            .name {
                font-size: 14px;
                color: #555;
                margin-left: 6px;
                width: 48px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .title {
                font-size: 14px;
                color: #555;
                width: 70px;
                margin-left: 6px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .despect {
                font-size: 14px;
                color: #555;
                width: 66px;
                margin-left: 6px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .status {
                background: #fa463f;
                border-radius: 15px;
                width: 60px;
                color: #fff;
                height: 28px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 13px;
            }
        }
    }
}
</style>
