<template>
    <div class="table">
        <div class="table-title">
            <span v-for="item in titleList" :key="item.key">
                {{ item.name }}
            </span>
        </div>
        <div
            class="wrapper"
            @click="handleSectionClick($event)"
            v-if="listData.length !== 0"
        >
            <vue-seamless-scroll
                :class-option="optionSingleHeightTime"
                :data="listData"
                class="warp"
            >
                <ul class="item">
                    <li v-for="(item, index) in listData" :key="index">
                        <!-- v-text="item[i.key] || 0"  @click="handleItem(item)"-->
                        <span
                            class="hideLengthText"
                            :class="i.color"
                            v-for="i in titleList"
                            :key="i.key"
                        >
                            <!-- <el-tooltip
                                class="item"
                                effect="dark"
                                :content="myToString(item[i.key])"
                                placement="top"
                            > -->
                            <span :data-name="item.name" :data-id="item.id">
                                <template v-if="i.key === 'warnType'">
                                    <i class="blue" v-if="item[i.key] == 1"> 蓝色预警 </i>
                                    <i class="yellow" v-if="item[i.key] == 2">
                                        黄色预警
                                    </i>
                                    <i class="red" v-if="item[i.key] == 3"> 红色预警 </i>
                                </template>
                                <template v-else-if="i.key === 'state'">
                                    <i class="green" v-if="item[i.key] == 1">
                                        <b class="icon icon-green"></b>
                                        基本完好
                                    </i>
                                    <i class="blue" v-if="item[i.key] == 2">
                                        <b class="icon icon-blue"></b>
                                        轻微异常
                                    </i>
                                    <i class="yellow" v-if="item[i.key] == 3">
                                        <b class="icon icon-yellow"></b>
                                        中等异常
                                    </i>
                                    <i class="red" v-if="item[i.key] == 4">
                                        <b class="icon icon-red"></b>
                                        严重异常
                                    </i>
                                </template>
                                <template v-else-if="i.key === 'status'">
                                    <i class="red" v-if="item[i.key] == 0">
                                        <!-- <b class="icon icon-green"></b> -->
                                        <img
                                            src="@/views/bigScreen/img/icon-device-offline.png"
                                            alt=""
                                        />
                                        离线
                                    </i>
                                    <i class="green" v-if="item[i.key] == 1">
                                        <!-- <b class="icon icon-blue"></b> -->
                                        <img
                                            src="@/views/bigScreen/img/icon-device-online.png"
                                            alt=""
                                        />
                                        在线
                                    </i>
                                </template>
                                <!-- <template v-else-if="i.key === 'type'">
                                        <i v-if="item[i.key] == 1">上行</i>
                                        <i v-if="item[i.key] == 2">下行</i>
                                    </template> -->
                                <template v-else>
                                    {{ item[i.key] || 0 }}
                                </template>
                            </span>
                            <!-- </el-tooltip> -->
                        </span>
                    </li>
                </ul>
            </vue-seamless-scroll>
        </div>
        <el-empty
            v-else
            :image-size="50"
            :image="require('../img/emity-box.png')"
            description="暂无数据"
        ></el-empty>
    </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
    name: 'Example01Basic',
    props: {
        titleList: {
            type: Array,
            default: () => [
                {key: 'type', name: '类型'},
                {key: 'num', name: '数量'},
                {key: 'online', name: '在线'},
                {key: 'offine', name: '离线', color: 'red'},
                {key: 'fault', name: '故障', color: 'green'},
            ],
        },
        listData: {
            type: Array,
            default: () => [
                {
                    type: '车辆载荷',
                    num: '50',
                    online: '20',
                    offine: '20',
                    fault: '10',
                },
                {
                    type: '风速/风向',
                    num: '50',
                    online: '20',
                    offine: '20',
                    fault: '10',
                },
                {
                    type: '地震',
                    num: '50',
                    online: '20',
                    offine: '20',
                    fault: '10',
                },
                {
                    type: '结构温度',
                    num: '50',
                    online: '20',
                    offine: '20',
                    fault: '10',
                },
                {
                    type: '钢结构件温度',
                    num: '50',
                    online: '20',
                    offine: '20',
                    fault: '10',
                },
                {
                    type: '地震',
                    num: '50',
                    online: '20',
                    offine: '20',
                    fault: '10',
                },
            ],
        },
    },
    components: {
        vueSeamlessScroll,
    },
    data() {
        return {}
    },
    computed: {
        optionSingleHeightTime() {
            return {
                step: 0.2,
                // loop: false,
                limitMoveNum: 6,
                // singleHeight: 1,
                // pause: false,
            }
        },
    },
    methods: {
        myToString(val) {
            if (typeof val == 'String') return val
            if (val == 0) val = '0'
            return val && val.toString()
        },
        handleItem(key, type) {
            let item = this.listData.filter((item) => item[type] == key)[0]
            this.$emit('handleScollItem', item)
        },
        handleSectionClick(e) {
            let target = e.target
            if (target.tagName == 'SPAN') {
                // 根据事件捕获  捕获目标元素节点，执行点击事件
                if (target.dataset.id) {
                    this.handleItem(target.dataset.id, 'id')
                } else {
                    this.handleItem(target.dataset.name, 'name')
                }
            }
        },
        // ScrollEnd() {
        //     this.$refs.scrollWrapper.scrollTop = 0
        // },
    },
}
</script>

<style lang="scss" scoped>
i {
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}
p {
    margin: 0;
    padding: 0;
    width: 100%;
}
li {
    padding: 5px;
    border-top: 1px solid #1d3a56;
    border-bottom: 1px solid #1d3a56;
}
li:hover {
    cursor: pointer;
}
.icon {
    display: block;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    margin-right: 8px;
}
.hideLengthText {
    //   width: 400px; /*要显示文字的宽度*/
    text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
    white-space: nowrap; /*让文字不换行*/
    overflow: hidden; /*超出要隐藏*/
}
.warp ul span[data-v-05ffe0ce] {
    text-align: start;
}
.table {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    .table-title {
        display: flex;
        padding: 10px 5px;
        background: linear-gradient(
            90deg,
            rgba(10, 31, 51, 0.2) 0%,
            #003366 50%,
            rgba(10, 31, 51, 0.2) 100%
        );
        border: 1px solid;
        border-image: linear-gradient(
                90deg,
                rgba(51.00000075995922, 153.00000607967377, 255, 0),
                rgba(178.49999696016312, 216.75006687641144, 255, 0.20000000298023224),
                rgba(51.00000075995922, 153.00000607967377, 255, 0)
            )
            1 1;
        span {
            flex: 1;
            line-height: 18px;
            font-size: 14px;
            text-align: center;
            color: #afd1f1;
        }
    }
}
.wrapper {
    flex: 1;
    width: 100%;
    margin: 0 auto;
}
.warp {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        li,
        a {
            display: block;
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
            font-size: 15px;
        }
        span {
            flex: 1;
            color: #afd1f1;
            text-align: center;
            font-size: 14px;
        }
        .red {
            color: #ef0f2e;
        }
        .icon-red {
            background-color: #ef0f2e;
        }
        .green {
            color: #1affd9;
        }
        .icon-green {
            background-color: #1affd9;
        }
        .yellow {
            color: #ff9a00;
        }
        .icon-yellow {
            background-color: #ff9a00;
        }
        .blue {
            color: #ffea80;
        }
        .icon-blue {
            background-color: #ffea80;
        }
    }
}
</style>
