<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form :model="data.form" inline>
      <el-form-item label="升级标题：">
        <el-input v-model="data.form.title" placeholder="请输入升级标题" clearable />
      </el-form-item>
      <el-form-item label="设备型号：">
        <el-select v-model="data.form.clientTypeId" placeholder="请选择设备型号" filterable clearable>
          <el-option v-for="item in deviceOptions" :key="item.clientTypeId" :label="item.name"
            :value="item.clientTypeId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getSearch">搜索</el-button>
        <el-button icon="Refresh" @click="getRefresh">重置</el-button>
        <el-button type="primary" icon="Plus" plain @click="getChange()"
          v-hasPermi="['device:version:add']">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="data.tableData" v-loading="loading">
      <el-table-column prop="id" label="型号ID" align="center" />
      <el-table-column prop="title" label="升级标题" align="center" show-overflow-tooltip />
      <el-table-column prop="deviceTypeName" label="设备名称" align="center" show-overflow-tooltip />
      <el-table-column prop="type" label="设备模式" align="center" :formatter="typeFormatter" />
      <el-table-column prop="version" label="版本号" align="center" />
      <el-table-column label="下载路径" align="center" show-overflow-tooltip>
        <template #default="scope">
          <el-link :href="scope.row.url" :underline="false">{{ scope.row.url }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="userTypeValue" label="升级对象" align="center" />
      <el-table-column prop="enforcementValue" label="APP强制升级" align="center" />
      <el-table-column prop="deviceIsEnforcement" label="设备强制升级" align="center" />
      <el-table-column prop="updateTimeStr" label="更新时间" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="getChange(scope.row.id)" v-hasPermi="['device:version:edit']">
            编辑
          </el-button>
          <el-button type="danger" link @click="getDelete(scope.row.id)" v-hasPermi="['device:version:delete']">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="data.form.pageNum" v-model:limit="data.form.pageSize"
      @pagination="getList" />
  </div>
</template>

<script setup>
import { getPageList, getVersionDelete } from '@/api/device/version'
import { useDeviceList } from '@/hooks/index'
import { useDeviceMode } from '../hooks/index'
const { deviceOptions } = useDeviceList()
const { devModeOptions } = useDeviceMode()

const { proxy } = getCurrentInstance()

// 遮罩层
const loading = ref(false)

const data = reactive({
  // 表单
  form: {
    pageIndex: 1,
    pageSize: 10
  },
  // 列表
  tableData: []
})

// 总数
const total = ref(0)

// 列表
const getList = () => {
  loading.value = true
  getPageList(data.form).then(res => {
    if (res.code === 0) {
      data.tableData = []
      res.data.records.forEach(i => {
        data.tableData.push({
          ...i,
          deviceIsEnforcement: i.deviceIsEnforcement ? i.deviceIsEnforcement : '否',
          enforcementValue: i.enforcementValue ? i.enforcementValue : '否'
        })
      })
      total.value = res.data.total
      loading.value = false
    }
  })
}
getList()

// 搜索
const getSearch = () => {
  data.form.pageIndex = 1
  getList()
}

// 重置
const getRefresh = () => {
  data.form = {
    pageIndex: 1,
    pageSize: 10
  }
  getList()
}

// 新增
const getChange = (id) => {
  proxy.$router.push({
    path: `/device/version/detail`,
    query: {
      id: id
    }
  })
}

// 删除
const getDelete = (id) => {
  getVersionDelete({ id: id }).then(res => {
    if (res.code === 0) {
      proxy.$modal.msgSuccess("删除成功！")
      getList()
    }
  })
}

// 字典翻译
const typeFormatter = (row) => {
  return proxy.selectDictLabel(devModeOptions, row.type)
}
</script>