<template>
  <div class="layout-pd">
    <el-row>
      <el-col >
        <el-card class="mt8" shadow="hover" >
          <el-form :model="groupLogoKeyOnQuery.filter" :inline="true" @submit.stop.prevent>
            <el-form-item prop="name" style="width:100%">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                <el-form-item label="GUID">
                  <el-input v-model="groupLogoKeyOnQuery.filter.keyGuid" placeholder="请输入GUID" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                <el-form-item label="团标状态">
                  <el-select  v-model="groupLogoKeyOnQuery.filter.state" placeholder="请选择部件类型" >
                    <el-option v-for="(value, key) in groupKeyGroupStatus" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                <el-form-item label="密钥类型">
                  <el-select  v-model="groupLogoKeyOnQuery.filter.deviceType" placeholder="请选择部件类型" >
                    <el-option v-for="(value, key) in groupLogoKeyKeyType" :key="key" :label="value[1].name"  :value="value[1].value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                <el-form-item label="厂商">
                  <el-input v-model="groupLogoKeyOnQuery.filter.manufacturer" placeholder="请输入厂商" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                <el-form-item>
                  <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
                  <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :xs="24">
        <el-card class="mt8" shadow="hover" >
          <el-table v-loading="state.loading" stripe :data="state.list" row-key="id" style="width: 100%">
            <el-table-column prop="keyGuid" label="GUID"  />
            <el-table-column prop="state" label="状态"  >
              <template #default="{ row }">
                {{ getState(row.state).name}}
              </template>
            </el-table-column>
            <el-table-column prop="deviceType" label="密钥类型"  >
              <template #default="{ row }">
                {{ getDeviceType(row.deviceType).name}}
              </template>
            </el-table-column>
          
            <el-table-column prop="lastUpdate" label="最近同步时间" />
            <el-table-column prop="applicationTime" label="申请时间" />
            <el-table-column prop="recordTime" label="备案时间" />
            <el-table-column prop="manufacturer" label="厂商" />
            <el-table-column prop="remark" label="备注"  />
          </el-table>
          <div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="state.pageInput.currentPage"
              v-model:page-size="state.pageInput.pageSize"
              :total="state.total"
              :default-page-size="5"
              :page-sizes="[5, 10, 20, 50, 100]"
              small
              background
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">/**团标密钥数据对象*/

import {onMounted, reactive} from "vue";
import {
  groupLogoKeyFilterModel,
  groupLogoKeyPageInput, groupLogoKeyRequestBody,
} from "/@/api/admin/productionManagement/groupLogoKeyDto";
import {ref} from "vue-demi";
import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
import {GroupLogoKeyApi} from "/@/api/admin/productionManagement/groupLogoKeyApi";

/**
 * 团标密钥查询时需要的参数
 * */
const groupLogoKeyOnQuery = reactive({
  filter:{
    keyGuid:'',
    deviceType:'',
    lastUpdate:'',
    applicationTime: '',
    recordTime: '' ,
  } as groupLogoKeyFilterModel,
})

/**
 * 团标密钥数据对象
 */
const state = reactive({
  loading: false,
  list:  [] as Array<groupLogoKeyFilterModel>,
  pageInput:{
    currentPage: 1,
    pageSize: 10,
  } as groupLogoKeyPageInput,
  total: 0
})

/**获取全局缓存*/
const globalCacheStore = useGlobalCacheStore()

/**生产管理 - 团标密钥 - 团标状态*/
const groupKeyGroupStatus = ref(globalCacheStore.getGlobalStore().get('groupKeyGroupStatus'))

/**生产管理 - 团标密钥 - 密钥类型*/
const groupLogoKeyKeyType = ref(globalCacheStore.getGlobalStore().get('groupLogoKeyKeyType'))

/**获取团标状态*/
const getState = (val) => {
  val = String(val)
  if(groupKeyGroupStatus.value.has(val)){
    return groupKeyGroupStatus.value.get(val)
  }else{
    return val
  }
}

/**获取密钥类型*/
const getDeviceType = (val) => {
  val = String(val)
  if(groupLogoKeyKeyType.value.has(val)){
    return groupLogoKeyKeyType.value.get(val)
  }else{
    return val
  }
}

/**
 * 页条变化
 * @param val
 */
const onSizeChange = (val: number) => {
  state.pageInput.pageSize = val
  onQuery()
}

/**
 * 页数 变化
 * @param val
 */
const onCurrentChange = (val: number) => {
  state.pageInput.currentPage = val
  onQuery()
}


const onQuery = async () => {
  state.loading = true
  const { data } = await new GroupLogoKeyApi().getPage({...state.pageInput, filter:groupLogoKeyOnQuery.filter} as groupLogoKeyRequestBody).catch(() => state.loading = false)
  state.list = data?.list ?? []
  state.total = data?.total ?? 0
  state.loading = false
}


onMounted(() => {
  onQuery()
})

const onReset = () => {
  groupLogoKeyOnQuery.filter = {
    keyGuid:'',
    deviceType:'',
    lastUpdate:'',
    applicationTime: '',
    recordTime: '' ,
  }
  state.pageInput.currentPage = 1
  onQuery()
}

</script>

<style scoped lang="scss">
.el-input, .el-select {
  width: 220px;
}
</style>
