<template>
    <el-dialog :visible.sync="localVisible" :close-on-click-modal="false" :modal-append-to-body="false"
        :show-close="showClose" @close="handleClose"  :width="width">
        <div slot="title" class="dialog-header">
            <div >
                <img src="../../../../../../assets/images/mount_head.png" />
                <span class="title vas">{{ title }}</span>
            </div>
        </div>
        <div class="stl-timed-task">
            <div class="timed-task-header">
                <div class="header__column flex2">{{ $t('common.序号') }}</div>
                <div class="header__column flex2">{{ $t('common.机库名称') }}</div>
                <div class="header__column status">{{ $t('common.状态') }}</div>
                <div class="header__column flex2">{{ $t('common.距离') }}({{ $t('common.公里') }})</div>
            </div>
            <div class="timed-task-main" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                <div class="row" :class="{ single: i % 2 != 0 }" v-for="(item, i) in taskListAll" :key="item.id">
                    <div class="row__column flex2">
                        <span class="f12">
                            <span class="mr10">
                                <el-checkbox v-model="item.active" :label="item.id"
                                    :disabled="item.type === $t('common.忙碌')"></el-checkbox>
                            </span>{{ i + 1 }}
                        </span>
                    </div>
                    <div class="row__column flex2">
                        <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
                            <span class="f12">{{ item.name }}</span>
                        </el-tooltip>
                    </div>
                    <div class="row__column flex2">
                        <el-tooltip class="item" effect="dark" :content="item.descText" placement="top-start">
                            <span class="f12"
                                :class="{ 'text-red': item.type === $t('common.忙碌'), 'text-green': item.type == $t('common.空闲') }">{{
                                item.type
                                }}</span>
                        </el-tooltip>
                    </div>
                    <div class="row__column status" style="color: rgb(255, 189, 54)">
                        <el-tooltip class="item" effect="dark" :content="String(item.distance)" placement="top-start">
                            <span class="f12">{{ item.distance }}</span>
                        </el-tooltip>
                    </div>

                </div>
            </div>
            <div class="task-add-btn">
                <div class="task-add__btn">{{ $t('common.生成航线') }}</div>
                <div class="task-add__btn">{{ $t('common.一键任务') }}</div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'leapFrogDialog',
    props: {

        title: {
            type: String,
            default: ''
        },
        showClose: {
            type: Boolean,
            default: true
        },
        visible: {
            type: Boolean,
            default: false
        },
        width: {
            type: String,
            default: '30%'
        }
    },
    data() {
        return {
            loading: false,
            taskListAll: [{
                active: true,
                name: "机库1",
                type: this.$t('common.空闲'),
                distance: 10
            },
            {
                active: true,
                name: "机库2",
                type: this.$t('common.忙碌'),
                distance: 12
            }],
            localVisible: this.visible // 根据 prop 初始化本地状态
        };
    },
    watch: {
        visible(newVal) {
            this.localVisible = newVal; // 监听 prop 的变化
        }
    },
    methods: {
        handleClose() {
            this.localVisible = false;
            this.$emit('update:visible', false); // 通知父组件
        },
        confirm() {
            this.$emit('confirm');
            this.handleClose();
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep {
    .el-dialog__header {
        padding: 5px;
    }

    .el-dialog__headerbtn {
        top: 12px;
    }

    .el-dialog__footer {
        text-align: center;
    }
}

.dialog-header {
    .title {
        font-size: 20px;
        font-family: YouSheBiaoTiHei;
        color: #14faff;
        line-height: 26px;
        text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
        background: linear-gradient(135deg, #e3aa77 0%, #f5cda9 38%, #f9ecd3 58%, #fcdbb1 79%, #edb07a 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.dialog-footer {
    .btn {
        color: #fff;
        background-color: #222222;
    }
}

.stl-timed-task {
    height: 230px;
    display: flex;
    flex-direction: column;
    padding: 16px 4px;
    gap: 0px;
    box-sizing: border-box;
    position: relative;

    &::before {
        position: absolute;
        content: "";
        width: calc(100% - 5px);
        height: calc(100% - 24px);
        border-radius: 4px;
        border: 1px solid #4b4b4b;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .timed-task-header {
        display: flex;
        flex-shrink: 0;
        font-size: 14px;
        height: 42px;
        background: #343434;
        font-family: YouSheBiaoTiHei;
        font-size: 16px;
        color: #ebf9ff;

        .header__column {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            &.flex2 {
                flex: 2;
            }

            &.status {
                flex: initial;
                width: 70px;
            }
        }
    }

    .timed-task-main {
        color: #fff;
        overflow-y: auto;
        flex: 1;
        z-index: 1;

        .row {
            display: flex;
            color: #fff;
            min-height: 52px;
            background-color: #222222;
            align-items: center;
            gap: 3px;

            &.single {
                background-color: #343434;
            }

            .row__column {
                font-size: 14px;
                flex: 1;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                .text-red {
                    color: red
                }

                .text-green {
                    color: green;
                }

                &.col-2 {
                    text-overflow: initial;
                    font-size: 14px;
                }

                &.flex2 {
                    flex: 2;
                }

                &.ctrl {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 5px;

                    i {
                        cursor: pointer;
                        font-size: 20px;

                        &.loading {
                            opacity: 0.5;
                        }
                    }
                }

                &.status {
                    flex: initial;
                    width: 70px;
                    font-size: 14px;
                }
            }
        }
    }

    .task-add-btn {
        display: flex;
        z-index: 1;

        .task-add__btn {
            cursor: pointer;
            width: 100px;
            height: 28px;
            background: #3388ff;
            border-radius: 2px;
            text-align: center;
            line-height: 28px;
            margin: 0 auto;
            margin-bottom: 10px;
            color: #fff;
        }
    }
}
</style>