<!-- eslint-disable prettier/prettier -->
<!-- eslint-disable prettier/prettier -->
<!-- eslint-disable prettier/prettier -->
<template>
    <transition name="slide-fade">
        <div class="station-types" v-drag>
            <div class="header">
                <div class="title">
                    <div class="title-icon"></div>
                    <div class="title-name">
                        {{ stationName }}
                    </div>

                </div>
                <i class="el-icon-close" @click="cancel"></i>
            </div>
            <div class="content">
                <div v-for="(item, index) in peoPleList" :key="index" style="border-bottom: 1px solid #bdcfde; margin-top: 16px">
                    <div class="circle-style">{{ item.name.substring(0,2) }}</div>

                    <div class="circle-detail">
                        <div class="detail-item">{{ item.name }}</div>
                        <div class="detail-item">
                            <div class="detail-item-label">鑱旂郴鏂瑰紡锛�</div>
                            <div class="detail-item-value">
                                {{ item.isPhone ? item.contact : "***********" }}
                            </div>
                            <!-- <img src="@/assets/images/map/icons/鍙煡鐪�.png" alt="" @click.stop="changeIsphone(index)"
                                v-if="item.isPhone" /> -->
                            <span class="hide-show" @click.stop="changeIsphone(index)" v-if="item.isPhone">闅愯棌</span>
                            <span class="hide-show" @click.stop="changeIsphone(index)" v-if="!item.isPhone">鏄剧ず</span>
                            <!-- <img src="@/assets/images/map/icons/闅愯棌.png" alt="" @click.stop="changeIsphone(index)"
                                v-if="!item.isPhone" /> -->
                        </div>
                        <div class="detail-item">
                            <div class="detail-item-label">鍦ㄥ矖鎯呭喌锛�</div>
                            <div class="detail-item-value">{{ item.dutyStatusText }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>

export default {
    name: "electronicFencePeople",
    props: {
        list: {
            type: Array,
            default() {
                return {};
            },
        },
        stationName: {
            type: String,
            default() {
                return ''
            }
        }
    },
    watch: {
        list: {
            handler(newVal) {
                if (newVal.length !== 0) {
                    this.peoPleList = [];
                    for(let i =0;i<newVal.length;i++) {
                        newVal[i].isPhone = false;
                        this.peoPleList.push(newVal[i])
                    }

                }

            },
            immediate: true,
            deep: true,
        }
    },
    data() {
        return {
            peoPleList: [],
            stationForRail: {}
        };
    },
    methods: {
        changeIsphone(index) {
            console.log(this.peoPleList[index])
            let indexObj =  JSON.parse(JSON.stringify( this.peoPleList[index]))
            indexObj.isPhone = !indexObj.isPhone;
            this.$set(this.peoPleList, index, indexObj)
        },
        cancel() {
            this.$emit("cancel");
        },

    },
    mounted() {
    }
}


</script>
<style lang="scss" scoped>
.station-types {
    width: 370px;
    // height: 610px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px 4px 8px 8px;
    // border: 2px solid #3e8dff;
    position: absolute;
    top: 50%;
    right: calc(10% + 555px);
    transform: translateY(-50%);
    padding: 0 24px;
    z-index: 999;

    .header {
        // height: 54px;
        border-bottom: 1px solid #bdcfde;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding: 16px 0;

        .title {
            display: flex;
            align-items: center;

            &-icon {
                width: 38px;
                height: 38px;
                background: url("~@/assets/images/mapSearch/椹诲嫟鐐瑰浠�.png") no-repeat;
                background-size: 100% 100%;
                margin-right: 8px;
            }

            &-name {
                font-size: 16px;
                font-weight: 500;
                color: #333333;
            }


        }

        i {
            cursor: pointer;
            font-size: 16px;
            color: #999999;
        }
    }

    .content {
        height: 300px;
        overflow-y: auto;
        .top {
            display: flex;
            align-items: stretch;
            justify-content: flex-start;
            margin: 16px 0 19px 0;

            .location {
                width: 22px;
                height: 22px;

            }

            .title {
                font-size: 16px;
                font-weight: 500;
                color: #0e71ff;
            }
        }

        .type-icon {
            width: 16px;
            height: 16px;
        }

        .el-col {
            margin-bottom: 24px;
        }

        ::v-deep .el-radio {
            display: flex;
            align-items: center;

            .el-radio__label {
                display: flex;
                align-items: center;
                padding-left: 8px;
                font-size: 16px;
                color: #666666;
            }
        }

    }

    .circle-style {
        width: 60px;
        height: 60px;
        background: #0e71ff;
        border-radius: 30px 30px 30px 30px;
        opacity: 1;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        float: left;
        text-align: center;
        line-height: 60px;
    }

    .circle-detail {
        margin-left: 65px;

        .detail-item {
            display: flex;
            align-items: center;
            color: #000000;
            font-size: 14px;

            &:nth-last-child(1) {
                margin-bottom: 14px;
            }

            .detail-item-label {
                color: #000000;
            }

            .detail-item-value {}

            img {
                width: 16px;
                height: 16px;
                cursor: pointer;
                margin-left: 8px;
            }
        }
    }

}

.hide-show {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #0E70FF;
    cursor: pointer;
    padding-left: 5px;
}
</style>