<template>
    <div class="test">
        <h4>机构选择</h4>
        <div class="flex items-center">
            <van-button type="primary" size="small" @click="unitData.visible = true">选择机构</van-button>
            <span class="ml-2">{{unitData.value}}</span>
        </div>
        <DocUnit v-model:show="unitData.visible" v-model:value="unitData.value"/>
        <div class="flex items-center">
            <h4>多选/单选按键</h4>
            <span>{{ checkData }}</span>
        </div>
        <CheckBtn :options="checkOptions" v-model:value="checkData" column-1 text-align="center"/>
        
        <h4>upload</h4>
        <DocImageUpload />

        <h4>work-tab</h4>
        <div class="work-tab">
            <div class="back"></div>
            <div class="flex work-tab-inner">
                <div class="item">工作记录</div>
                <div class="item" active>待筛查记录</div>
                <div class="item" >慢病待随访</div>
            </div>
        </div>

        <h4>tab</h4>
        <van-tabs shrink type="card" class="doc-tab-round">
            <van-tab v-for="index in 4" :title="'标签 ' + index" :key="index"></van-tab>
        </van-tabs>

        <h4>button</h4>
        <van-button round size="small" class="doc-btn-primary">修改</van-button>
        <van-button round size="small" class="doc-btn-red">删除</van-button>

        <h4>MP4</h4>
        <Mp4 :files="mp4Data" remove/>

        <h4 @click="mp3Show">MP3</h4>
        <Mp3 v-for="item in mp3Data" :file="item" :key="item.annexId" remove/>
    </div>
</template>

<script>
import DocUnit from '@/doctor/components/docUnit/DocUnit.vue'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
import DocImageUpload from '@/doctor/components/docImageUpload/DocImageUpload.vue'
import Mp4 from '@/doctor/components/mediaPlay/Mp4.vue'
import Mp3 from '@/doctor/components/mediaPlay/Mp3.vue'

export default {
    components:{
        DocUnit,
        CheckBtn,
        DocImageUpload,
        Mp4,
        Mp3
    },
    data(){
        return {
            unitData: {
                visible: false,
                value: undefined
            },
            checkData: undefined,
            checkOptions: [
                { name: '血常规', value: 1, disabled: true },
                { name: '尿常规', value: 2 },
                { name: '肝功能', value: 3 },
                { name: '肾功能', value: 4 },
                { name: '电解质', value: 5 }
            ],
            mp4Data: [{ annexId: 1, annexUrl: 'https://beta-tumour.zmnyjk.com/chronic-admin/file-proxy/tumour/20241025/1729847263522306995.mp4?e=1733300684&token=yrkyCAltqk1WVrw1ZNWUl5F5gLxE0O8LJ0Vq4hzi:xukYHUsfX6OuAXIagBuHMCJ8XNg=', annexFileName: 'kanna.mp4' }],
            mp3Data: []
        }
    },
    created() {
        sessionStorage.setItem('token', 'dd16fd27-4cfc-492e-a772-c817033133bb')
    },
    methods: {
        mp3Show() {
            this.mp3Data = [{ annexId: 2, annexUrl: 'https://beta-tumour.zmnyjk.com/chronic-admin/file-proxy/tumour/20241025/1729847336798585370.mp3?e=1733300684&token=yrkyCAltqk1WVrw1ZNWUl5F5gLxE0O8LJ0Vq4hzi:RTqkJZsScil9rGf9kdA0Lq1TEOs=', annexFileName: 'Never Gonna Give You Up-Rick Astley.mp3'}]
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.doc-tab-round) {
    .van-tabs__nav--card {
        column-gap: 10px;
        border: 0;
        margin: 0;
    }
    .van-tab--card {
        border: 0;
        border-radius: 40px;
        background: #fff;
        color: #262626;
        font-size: 14px;
        line-height: 28px;
        padding: 0 10px;
        transition: all .2s;
    }
    .van-tab--card.van-tab--active {
        color: #fff;
        background: var(--van-primary-color);
        font-weight: 500;
    }
}

.doc-btn {
    border: 0;
    padding: 4px 12px;
    height: 26px;
}
.doc-btn-primary {
    .doc-btn();
    color: var(--van-primary-color);
    background: #F0F3FF;
}
.doc-btn-red {
    .doc-btn();
    color: #FF4D4F;
    background: #FFF3F0;
}

.work-tab {
    background: #C6DBF9;
    padding-top: 10px;
    position: relative;
    .work-tab-inner {
        align-items: flex-end;
        position: relative;
    }
    .back {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 42px;
        background-color: #E7F1FF;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    .item {
        // flex-grow: 1;
        position: relative;
        padding: 0 16px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        &:first-child {
            border-top-left-radius: 12px;
        }
        &:last-child {
            border-top-right-radius: 12px;
        }
    }
    .item:first-child[active] {
        border-top-left-radius: 12px;
        &::before {
            display: none;
        }
    }
    .item:last-child[active] {
        border-top-right-radius: 12px;
        &::after {
            display: none;
        }
    }
    .item[active] {
        background-color: #F8FAFC;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        font-size: 16px;
        height: 46px;
        line-height: 46px;
        &::after {
            content: '';
            display: inline-block;
            position: absolute;
            right: -26px;
            bottom: 0;
            background: url('@/assets/image/doctor/tab-bg.png') no-repeat;
            background-size: auto 100%;
            background-position-x: -20px;
            height: 100%;
            width: 34px;
            z-index: 1;
        }
        &::before {
            content: '';
            display: inline-block;
            position: absolute;
            left: -26px;
            bottom: 0;
            background: url('@/assets/image/doctor/tab-bg.png') no-repeat;
            background-size: auto 100%;
            background-position-x: -20px;
            height: 100%;
            width: 34px;
            z-index: 1;
            transform: rotateY(180deg);
        }
    }
}
</style>