<!--
    @param name 表头文案
    @param isSelected 是否显示前一级的完成
    @param renderData 数据
    @param infosKey  dom中显示renderData中的某个字段
-->

<template>
    <div class="select-own-one saga-border">
        <p>{{name}}</p>
        <ul v-if="renderData.length">
            <li v-for="(item,index) in renderData" :key="index">
                <div @click="checkItem(item,index)" :class="{'saga-active-select': index == active,'disabled':item.RelationStatus=='Waiting'||item.RelationStatus=='Pending'}" class="select-item border-bottom pointer">
                    <!-- <span v-if="isSelected" :class="{'is-checked': item[isCheckInfo]}" class="el-checkbox__input">
                        <span class="el-checkbox__inner"></span>
                    </span> -->
                    <span v-if="isSelected" :class="item.RelationStatus=='Waiting'||item.RelationStatus=='Pending'?'iconfont icon-shenglvehao load-color':item[isCheckInfo] ? 'el-icon-success success-color' : 'el-icon-error error-color'">
                    </span>
                    {{overString(item[infosKey])}}
                    <i v-if="isDel" @click.stop="delItem(item)" class="el-icon-error saga-delete pointer"></i>
                </div>
            </li>
        </ul>
        <div v-else class="center" style="padding-top: 50px;box-sizing:border-box;">
            <i class="icon-wushuju iconfont"></i> 暂无数据
        </div>
    </div>
</template>
<script>
    export default {
        name: "select_one",
        props: {
            name: {
                default: "原始点位描述"
            },
            isSelected: {
                default: false
            },
            isCheckInfo: {
                default: ""
            },
            renderData: {
                default: function() {
                    return []
                }
            },
            infosKey: {
                default: "name"
            },
            isDel: {
                default: false
            }
        },
        data() {
            return {
                active: 0,
            }
        },
        created() {},
        mounted() {},
        methods: {
            checkItem(item, index) {
                if(item.RelationStatus=='Waiting'||item.RelationStatus=='Pending'){
                    this.$message('正在执行')
                    return
                }
                this.$emit("check", item)
                this.active = index
            },
            delItem(item) {
                this.$emit('deleteItem', item)
            },
            change() {
                this.$emit("check", this.renderData[this.active])
            },
            overString(val) {
                if (val.length > 13) {
                    return val.substring(0, 13) + '...'
                } else {
                    return val
                }
            }
        },
        watch: {
            renderData: {
                deep: true,
                handler: function() {
                    this.change()
                    //do something
                    console.log("change")
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .saga-active-select {
        background-color: #9FC5F8;
    }
    .select-own-one {
        display: inline-block;
        height: 340px;
        width: 230px;
        overflow: hidden;
        p {
            line-height: 40px;
            height: 40px;
            padding-left: 10px;
            box-sizing: border-box;
        }
        ul {
            height: 300px;
            max-height: 300px;
            overflow-y: auto;
            li {
                // padding-left: 10px;
                box-sizing: border-box;
                div {
                    padding-left: 10px;
                }
            }
        }
    }
    .border-bottom {
        border-bottom: 1px solid #ccc;
    }
    .select-item {
        height: 30px;
        line-height: 30px;
        &.disabled{
            background-color: #ccc;
        }
        .success-color{
            color: #409EFF;
        }
        .error-color{
            color: #F56C6C;
        }
        .load-color{
            color: #909399;
        }
    }
    .saga-delete {
        display: none;
        float: right;
        line-height: 31px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .select-item:hover {
        background-color: #9FC5F8;
        .saga-delete {
            display: inline;
        }
    }
</style>
