<template>
    <div class="airBlower">
        <el-container class="containerPart">
            <el-header class="headerPart">
                <div class="headerLeft">
                    <div class="selectPart">
                        <span>{{ t('airBlower.status') }}</span>
                        <el-select
                            v-model="airBlowerSelect.a"
                            @change="selectAirBlower('a')"
                            :placeholder="'请选择' + t('airBlower.status')"
                            class="airBlowerSelect"
                        >
                            <el-option v-for="v in airBlowerSelectOptions.a" :key="v.value" :label="v.label" :value="v.value"></el-option>
                        </el-select>
                    </div>
                    <div class="selectPart">
                        <span>{{ t('airBlower.feeder') }}</span>
                        <el-select
                            v-model="airBlowerSelect.b"
                            @change="selectAirBlower('b')"
                            :placeholder="'请选择' + t('airBlower.feeder')"
                            class="airBlowerSelect"
                        >
                        <el-option v-for="v in airBlowerSelectOptions.b" :key="v.value" :label="v.label" :value="v.value"></el-option>
                    </el-select>
                    </div>
                    <div class="selectPart">
                        <span>{{ t('airBlower.airBlowerNumber') }}</span>
                        <el-select
                            v-model="airBlowerSelect.c"
                            @change="selectAirBlower('c')"
                            :placeholder="'请选择' + t('airBlower.airBlowerNumber')"
                            class="airBlowerSelect"
                        >
                            <el-option v-for="item in airBlowerSelectOptions.c" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="headerRight">
                    <el-button type="primary" @click="airBlowerOperate('start')">{{ t('airBlower.start') }}</el-button>
                    <el-button style="color:#0064AA" @click="airBlowerOperate('stop')">{{ t('airBlower.stop') }}</el-button>
                    <el-button style="color:#0064AA" @click="airBlowerOperate('reset')">{{ t('airBlower.reset') }}</el-button>
                    <el-button style="color:#0064AA" @click="airBlowerOperate('verify')">{{ t('airBlower.verify') }}</el-button>
                </div>
            </el-header>
            <el-main class="mainPart">
                <el-table :column="tableColumn" :data="tableData" :header-row-style="tableHaderStyle">
                    <template v-for="item in tableColumn" :key="item.prop">
                        <el-table-column
                            v-if="!item.custom"
                            :prop="item.prop"
                            :label="item.name"
                            :align="item.align"
                            :width="item.width"
                            :type="item.type"
                        />
                        <el-table-column v-else :label="item.name" :align="item.align" :width="item.width">
                            <template v-if="item.custom === 'default'" #default="scope">
                                <div v-if="item.prop === 'c'">
                                    <el-tag v-if="scope.row.c === '1'" color="rgba(0,100,170,0.20)" style="color: #0064aa">并网</el-tag>
                                    <el-tag v-if="scope.row.c === '2'" color="rgba(0,160,150,0.20)" style="color: #00a096">维护</el-tag>
                                    <el-tag v-if="scope.row.c === '3'" color="rgba(255,126,0,0.20)" style="color: #ff7e00">故障</el-tag>
                                    <el-tag v-if="scope.row.c === '4'" color="rgba(153,153,153,0.20)" style="color: #666666">离线</el-tag>
                                    <el-tag v-if="scope.row.c === '5'" color="rgba(6,180,41,0.20)" style="color: #06b429">启动</el-tag>
                                    <el-tag v-if="scope.row.c === '6'" color="rgba(254,55,49,0.20)" style="color: #fe3731">集控停机</el-tag>
                                    <el-tag v-if="scope.row.c === '7'" color="rgba(254,55,49,0.20)" style="color: #fe3731">远程监控停机</el-tag>
                                    <el-tag v-if="scope.row.c === '8'" color="rgba(255,182,0,0.20)" style="color: #ffb600">待机</el-tag>
                                    <el-tag v-if="scope.row.c === '9'" color="rgba(48,89,236,0.20)" style="color: #3059ec">维护</el-tag>
                                    <el-tag v-if="scope.row.c === '10'" color="rgba(153,153,153,0.20)" style="color: #666666">离线</el-tag>
                                </div>
                            </template>
                            <template v-if="item.custom === 'header'" #header="scope">
                                <div>{{ scope.column.label.split(' ')[0] }}</div>
                                <div>{{ scope.column.label.split(' ')[1] }}</div>
                            </template>
                            <template v-if="item.custom === 'header'" #default="scope">
                                <div>{{ scope.row[item.prop] }}</div>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </el-main>
            <el-footer class="footerPart">
                <div class="footerPage">
                    <el-pagination
                        background
                        layout="total,prev, pager, next,sizes,jumper"
                        :total="paginationData.total"
                        :page-sizes="[10, 20, 30]"
                        v-model:current-page="paginationData.currentPage"
                        @change="paginationChange"
                    />
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { SelectTypeObj, SelectTypeKeyUnion } from './type'
import { reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const airBlowerSelect = reactive<SelectTypeObj>({
    a: '',
    b: '',
    c: '',
})

const airBlowerSelectOptions = reactive<{ [K in SelectTypeKeyUnion]: { label: string; value: string }[] }>({
    a: [],
    b: [],
    c: [],
})

const selectAirBlower = (type: SelectTypeKeyUnion) => {
    switch (type) {
        case 'a':
            break
        case 'b':
            break
        case 'c':
            break
    }
}

const airBlowerOperate = (type: 'start' | 'stop' | 'reset' | 'verify') => {
    switch (type) {
        case 'start':
            break
        case 'stop':
            break
        case 'reset':
            break
        case 'verify':
            break
    }
}

const tableHaderStyle = {
    color: '#333',
}

const tableColumn = [
    {
        type: 'selection',
        width: 55,
    },
    {
        name: '风机列表',
        prop: 'a',
        align: 'center',
    },
    {
        name: '风机型号',
        prop: 'b',
        align: 'center',
    },
    {
        name: '风机状态',
        prop: 'c',
        align: 'center',
        custom: 'default',
    },
    {
        name: '线路',
        prop: 'd',
        align: 'center',
    },
    {
        name: '风速 (m/s)',
        prop: 'e',
        align: 'center',
        custom: 'header',
    },
    {
        name: '有功功率 (MW)',
        prop: 'f',
        align: 'center',
        custom: 'header',
    },
    {
        name: '日发电量 (kWh)',
        prop: 'g',
        align: 'center',
        custom: 'header',
    },
    {
        name: '总发电量 (万kWh)',
        prop: 'h',
        align: 'center',
        custom: 'header',
    },
    {
        name: '机舱角度',
        prop: 'i',
        align: 'center',
    },
    {
        name: '叶轮转速 (rmp)',
        prop: 'j',
        align: 'center',
        custom: 'header',
    },
    {
        name: '发电机转速 (rmp)',
        prop: 'k',
        align: 'center',
        custom: 'header',
    },
    {
        name: '机舱温度 (℃)',
        prop: 'l',
        align: 'center',
        custom: 'header',
    },
    {
        name: '主油路压力 (kpa)',
        prop: 'm',
        align: 'center',
        custom: 'header',
    },
    {
        name: '变桨角度',
        prop: 'n',
        align: 'center',
    },
]

const tableData = ref([
    {
        a: 'SC-001',
        b: '-',
        c: '1',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
    {
        a: 'SC-002',
        b: '-',
        c: '2',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
    {
        a: 'SC-003',
        b: '-',
        c: '3',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
    {
        a: 'SC-004',
        b: '-',
        c: '4',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
    {
        a: 'SC-005',
        b: '-',
        c: '5',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
    {
        a: 'SC-006',
        b: '-',
        c: '6',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
    {
        a: 'SC-007',
        b: '-',
        c: '7',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
    {
        a: 'SC-008',
        b: '-',
        c: '8',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
    {
        a: 'SC-009',
        b: '-',
        c: '9',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
    {
        a: 'SC-010',
        b: '-',
        c: '10',
        d: '线路1',
        e: '5',
        f: '-',
        g: '-',
        h: '-',
        i: '-',
        j: '-',
        k: '-',
        l: '-',
        m: '-',
        n: '-',
    },
])

const getTableData = () => {}

const paginationData = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

const paginationChange = () => {}
</script>

<style scoped lang="scss">
.airBlower {
    height: 100%;
    .containerPart {
        height: 100%;
        .headerPart {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .headerLeft {
                display: flex;
                .selectPart {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 40px;
                    margin-right: 20px;
                    span {
                        margin-right: 10px;
                    }
                    .airBlowerSelect {
                        width: 200px;
                        :deep(.el-select__wrapper) {
                            height: 40px;
                        }
                    }
                }
            }
            .headerRight {
                width: 436px;
                display: flex;
                justify-content: space-between;
                .el-button {
                    width: 100px;
                    height: 40px;
                }
            }
        }
        .mainPart {
            height: calc(100% - 120px);
        }
        .footerPart {
            width: 100%;
            .footerPage {
                height: 100%;
                display: flex;
                justify-content: right;
                align-items: center;
            }
        }
    }
}
</style>
