<template>
    <q-dialog v-model="visible" persistent>
        <q-card style="max-width: 80vw">
            <q-card-section class="no-padding">
                <q-card-actions class="bg-light-blue-10 text-white">
                    <q-card-actions class="text-h6">选择设备</q-card-actions>
                    <q-space />
                    <q-btn dense flat round icon="close" v-close-popup>
                        <q-tooltip content-class="bg-amber text-black shadow-4">{{
                            $t('index.close')
                        }}</q-tooltip>
                    </q-btn>
                </q-card-actions>
            </q-card-section>
            <q-card-section>
                <div class="row q-col-gutter-md items-center">
                    <!-- 刷新 查询 -->
                    <div class="col-xl-2 col-lg-2 col-sm-12">
                        <q-btn-group push glossy>
                            <q-btn push label="刷新" icon="refresh" @click="reFresh()">
                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                    content-style="font-size: 12px">清空所有条件并，刷新数据</q-tooltip>
                            </q-btn>
                            <q-btn push label="查询" icon="search" @click="getPage()">
                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                    content-style="font-size: 12px">按条件查询数据</q-tooltip>
                            </q-btn>
                        </q-btn-group>
                    </div>
                    <!-- 搜索条件 -->
                    <div class="col-xl-2 col-lg-2 col-sm-12">
                        <q-input dense label="设备编码" outlined v-model="equipmentSearchEntity.equipmentCode" />
                    </div>
                    <div class="col-xl-2 col-lg-2 col-sm-12">
                        <q-input dense label="设备名称" outlined v-model="equipmentSearchEntity.equipmentName" />
                    </div>
                    <div class="col-xl-2 col-lg-2 col-sm-12">
                        <q-select dense outlined v-model="equipmentSearchEntity.equipmentType" :options="equipmentTypeList"
                            emit-value map-options label="设备类型" />
                    </div>
                    <div class="col-xl-2 col-lg-2 col-sm-12">
                        <q-select dense outlined v-model="equipmentSearchEntity.activated" :options="activatedList"
                            emit-value map-options label="设备启停用" />
                    </div>
                </div>
            </q-card-section>
            <q-separator />
            <q-card-section style="width: 80vw" class="scroll">
                <!-- <div class="text-subtitle1 q-pb-md">
                    TIPS：双击行自动带出物料凭证
                    TIPS：选中行后<kbd>双击</kbd>
                </div> -->
                <!-- @rowDblclick="rowDoubleClick" -->
                <q-table class="my-sticky-header-column-table" :rows="tableData" row-key="id" separator="cell"
                    :loading="loading" :columns="columns" :rows-per-page-options="[50, 100]"
                    :table-style="{ height: '520px' }" flat bordered>
                    <template v-slot:body="props">
                        <q-tr :props="props" class="tr_hover">
                            <q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
                            }}</q-td>
                            <q-td key="equipmentCode" :props="props">{{ props.row.equipmentCode }}</q-td>
                            <q-td key="equipmentName" :props="props">{{ props.row.equipmentName }}</q-td>
                            <q-td key="equipmentType" :props="props">{{ props.row.equipmentType }}</q-td>
                            <q-td key="state" :props="props">
                                <q-badge style="font-size: 18px;height:30px;"
                                    :color="helper.getEquipmentState(props.row.state).color"
                                    :label="helper.getEquipmentState(props.row.state).text" />
                            </q-td>
                            <q-td style="font-size: 16px;" key="activated" :props="props">
                                <q-badge size="" style="font-size: 18px;height:30px;"
                                    :color="props.row.activated == true ? 'green' : 'red'"
                                    :label="props.row.activated == true ? '启用' : '停用'" />
                            </q-td>
                            <q-td key="remark" :props="props">{{ props.row.remark }}</q-td>
                            <q-td key="action" :props="props" style="width: 100px, position:sticky">
                                <q-btn round flat push color="positive" icon="done" @click="select(props.row)">
                                    <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                        content-style="font-size: 12px">选择</q-tooltip>
                                </q-btn>
                            </q-td>
                        </q-tr>
                    </template>
                </q-table>
            </q-card-section>
            <q-separator />
            <q-card-actions align="right">
                <q-btn color="white" text-color="black" v-close-popup>关闭</q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { EquipmentSearchEntity } from 'src/api/equipment/model/equipment';
import { equipmentApi } from 'src/api/equipment/equipmentApi';
import helper from 'src/Utils/helper';

const emit = defineEmits(['returnEquipment']);

//公共变量
const equipmentTypeList = ref([
    { label: 'Ionbond', value: 'Ionbond' },
    { label: 'Balzers', value: 'Balzers' },
    { label: 'CemeCon', value: 'CemeCon' },
])
const activatedList = ref([
    { label: '启用', value: true },
    { label: '停用', value: false }
])
const visible = ref(false);
let loading = ref(false);
let tableData: any = ref();
const columns: any = ref([
    {
        name: 'index',
        label: '序号',
        field: 'index',
        align: 'center',
        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
    },
    { name: 'equipmentCode', align: 'center', label: '设备编码', field: 'equipmentCode', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'equipmentName', align: 'center', label: '设备名称', field: 'equipmentName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'equipmentType', align: 'center', label: '设备类型', field: 'equipmentType', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'state', align: 'center', label: '设备状态', field: 'state', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'activated', align: 'center', label: '设备启停用', field: 'activated', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'remark', align: 'center', label: '备注', field: 'remark', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'action', align: 'center', label: '操作', field: 'action', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' }
]);
const equipmentSearchEntity = ref(new EquipmentSearchEntity());

//公共变量

const clickForm = () => {
    visible.value = true;
    getPage();
}

const rowDoubleClick = (evt, row, index) => {
    // if (row.executeFlag == 1) {
    //     Notify.create({
    //         position: 'top',
    //         message: '该物料凭证已被冲销过，请重新选择！',
    //         icon: 'close',
    //         color: 'negative',
    //     })
    //     return
    // }
    visible.value = false;
    emit('returnEquipment', row)
}


const select = (row: any) => {
    // if (row.executeFlag == 1) {
    //     Notify.create({
    //         position: 'top',
    //         message: '该物料凭证已被冲销过，请重新选择！',
    //         icon: 'close',
    //         color: 'negative',
    //     })
    //     return
    // }
    visible.value = false;
    emit('returnEquipment', row)
}

const getPage = () => {
    loading.value = true;
    equipmentApi.getEquipmentList(equipmentSearchEntity.value).then((res) => {
        tableData.value = res;
    }).finally(() => {
        loading.value = false;
    });
};

const reFresh = () => {
    equipmentSearchEntity.value = new EquipmentSearchEntity();
    getPage();
};

defineExpose({
    clickForm
})
</script>
<style scoped>
/* .tr_hover {
      background: #aaaaaa;
    } */

.tr_hover:hover {
    background: #e8e8e8;
}

.click-hover {
    cursor: pointer;
    color: #1976d2;
}

.click-hover:hover {
    color: #2196f3;
    /* background-color: yellow; */
}

kbd {
    white-space: nowrap;
    display: inline-block;
    padding: 2px 4px 4px;
    line-height: 1;
    font-size: 0.8em;
    color: #616161;
    background: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
    border-radius: 4px;
    box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff,
        0 1px 2px 1px #1e235a66;
    margin: 0 0.2em;
}
</style>