<template>
    <div class="text-14 text-center flex items-center blood-pressure-panel" @click="onSelect">
        <doc-icon type="doc-thermometer" class="text-16"/>
        <span v-if="!deviceInfo.data || deviceInfo.type != 3" class="text-center">
            <span class="ml-2">选择设备</span>
        </span>
        <span v-else>
            <span class="mx-2">{{ dataHandle(deviceInfo.data) }}</span>
            <doc-icon type="doc-left-1" style="transform: rotate(180deg);"/>
        </span>
    </div>
</template>

<script>
export default {
    name: 'BloodPressurePanel',
    props: {
        pressureObj: {
            required: true,
            default: () => ({})
        }
    },
    computed: {
        deviceInfo() {
            return this.pressureObj.getDevice()
        }
    },
    methods: {
        onSelect() {
            this.pressureObj.deviceSelect()
        },
        dataHandle(str) {
            if (!str) return ''
            return str.substring(0, 4) + '...' + str.substring(str.length - 4, str.length)
        }
    }
}
</script>

<style lang="less" scoped>
.blood-pressure-panel {
    background-color: var(--van-primary-color);
    color: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    min-width: 114px;
}
</style>