<template>
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="queryParams.remark"
          placeholder="请输入备注"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="启用状态" prop="state">
        <el-select
          v-model="queryParams.state"
          placeholder="请选择启用状态"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="openCreateDialog">
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap>
    <div class="dashboard-card-list">
      <el-empty v-if="!loading && list.length === 0" description="暂无数据" />
      <el-row v-else :gutter="16">
        <el-col
          v-for="item in list"
          :key="item.id"
          :xl="6"
          :lg="8"
          :md="12"
          :sm="24"
          :xs="24"
          class="mb-16px"
        >
          <el-card shadow="hover" class="dashboard-card" :body-style="{ padding: '0' }">
            <div class="dashboard-card-image-wrapper" @click="handlePreview(item)">
              <img
                class="dashboard-card-image"
                :src="item.indexImage || defaultImage"
                alt="封面图"
              />
              <div class="dashboard-card-state">
                <el-tag v-if="item.state === 1" type="success" size="small">
                  启用
                </el-tag>
                <el-tag v-else type="info" size="small">
                  禁用
                </el-tag>
              </div>
            </div>
            <div class="dashboard-card-body">
              <div class="dashboard-card-main">
                <div class="dashboard-card-title" :title="item.name">
                  {{ item.name || '-' }}
                </div>
                <div class="dashboard-card-remark" :title="item.remark">
                  {{ item.remark || '暂无描述' }}
                </div>
              </div>
              <div class="dashboard-card-actions">
              <el-popover placement="bottom-end" trigger="click" width="140">
                <div class="dashboard-card-menu">
                  <el-button type="primary" text @click="openEditDialog(item)">
                    编辑
                  </el-button>
                  <el-button type="danger" text @click="handleDelete(item)">
                    删除
                  </el-button>
                </div>
                <template #reference>
                  <el-button text circle>
                    <Icon icon="ep:more" />
                  </el-button>
                </template>
              </el-popover>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <Pagination
        v-if="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </ContentWrap>

  <el-dialog
    v-model="createDialogVisible"
    :title="dialogMode === 'create' ? '新增数据大屏' : '编辑数据大屏'"
    width="600px"
    draggable
  >
    <el-form :model="createForm" ref="createFormRef" label-width="80px" :rules="createFormRules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="createForm.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="大屏类型" prop="type">
        <el-select v-model="createForm.type" placeholder="请选择大屏类型" class="!w-240px">
          <el-option
            v-for="dict in getStrDictOptions('mes_goview_type')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="产线" prop="orgId">
        <el-tree-select
          v-model="createForm.orgId"
          :data="organizationTree"
          :props="lineTreeProps"
          filterable
          clearable
          class="!w-240px"
          placeholder="请选择产线"
          @change="handleOrgChange"
        />
      </el-form-item>
      <el-form-item label="设备" v-if="createForm.type === '1'">
        <el-select
          v-model="selectedDeviceIds"
          multiple
          :multiple-limit="8"
          collapse-tags
          collapse-tags-tooltip
          placeholder="请选择设备（必须选择8个）"
          clearable
          filterable
          class="!w-240px"
        >
          <el-option
            v-for="item in deviceList"
            :key="item.id"
            :label="item.deviceName"
            :value="String(item.id)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="内容">
        <el-input
          v-model="createForm.content"
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="createForm.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="启用状态">
        <el-switch
          v-model="createForm.state"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="createDialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="createLoading" @click="submitDialog">
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import request from '@/config/axios'
import defaultImage from '@/assets/imgs/logo.png'
import { OrganizationApi } from '@/api/mes/organization'
import { handleTree } from '@/utils/tree'
import { DeviceApi } from '@/api/iot/device'

defineOptions({ name: 'DashboardList' })

const router = useRouter()
const message = useMessage()

interface DashboardItem {
  id: number
  name: string
  remark: string
  state: number
  indexImage?: string
  route?: string
  content?: string
  type?: string
  orgId?: number | string
  orgName?: string
  deviceIds?: string
}

const loading = ref(false)
const list = ref<DashboardItem[]>([])
const total = ref(0)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined as string | undefined,
  remark: undefined as string | undefined,
  state: undefined as string | undefined
})

const queryFormRef = ref()

const createDialogVisible = ref(false)
const createLoading = ref(false)
const createFormRef = ref()
const dialogMode = ref<'create' | 'edit'>('create')
const editingId = ref<number | null>(null)
const createForm = reactive({
  name: '',
  remark: '',
  state: 1,
  type: '',
  orgId: undefined as number | string | undefined,
  orgName: '',
  deviceIds: '',
  indexImage: '',
  route: '',
  content: ''
})

const createFormRules = reactive({
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '大屏类型不能为空', trigger: 'change' }],
  orgId: [{ required: true, message: '产线不能为空', trigger: 'change' }]
})

const organizationTree = ref<any[]>([])
const lineTreeProps = {
  label: 'name',
  children: 'children',
  value: 'id'
}

const deviceList = ref<any[]>([])
const selectedDeviceIds = ref<string[]>([])

const getList = async () => {
  loading.value = true
  try {
    const data = await request.get({
      url: '/mes/goview/page',
      params: queryParams
    })
    list.value = (data?.list || []) as DashboardItem[]
    total.value = data?.total || 0
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const resetQuery = () => {
  queryFormRef.value?.resetFields?.()
  handleQuery()
}

const handlePreview = (item: DashboardItem) => {
  const typeRoute = getRouteByType(item.type)
  const route = typeRoute || item.route || ''
  if (!route) {
    message.error('未配置预览路由')
    return
  }
  const path = route.startsWith('/') ? route : `/${route}`
  const queryParams = new URLSearchParams()
  if (item.orgId) queryParams.append('orgId', String(item.orgId))
  if (item.type === '1' && item.deviceIds) queryParams.append('deviceIds', item.deviceIds)
  const queryString = queryParams.toString()
  const url = router.resolve(path + (queryString ? `?${queryString}` : '')).href
  window.open(url, '_blank')
}

const resetCreateForm = () => {
  createForm.name = ''
  createForm.remark = ''
  createForm.state = 1
  createForm.type = ''
  createForm.orgId = undefined
  createForm.orgName = ''
  createForm.deviceIds = ''
  createForm.indexImage = ''
  createForm.route = ''
  createForm.content = ''
  selectedDeviceIds.value = []
}

const openCreateDialog = () => {
  dialogMode.value = 'create'
  editingId.value = null
  resetCreateForm()
  createDialogVisible.value = true
}

const openEditDialog = (item: DashboardItem) => {
  dialogMode.value = 'edit'
  editingId.value = item.id
  createForm.name = item.name || ''
  createForm.remark = item.remark || ''
  createForm.state = item.state
  createForm.type = item.type || ''
  createForm.orgId = item.orgId || undefined
  createForm.orgName = item.orgName || ''
  createForm.deviceIds = item.deviceIds || ''
  createForm.indexImage = item.indexImage || ''
  createForm.route = item.route || ''
  createForm.content = item.content || ''
  selectedDeviceIds.value = createForm.deviceIds
    ? createForm.deviceIds.split(',').filter((v) => v)
    : []
  createDialogVisible.value = true
}

const getRouteByType = (type?: string) => {
  if (type === '1') return 'iot/report/dashboardPage/Dashboard1'
  if (type === '2') return 'iot/report/dashboardPage/Dashboard8'
  return ''
}

const submitDialog = async () => {
  try {
    await createFormRef.value?.validate()
  } catch {
    return
  }
  if (createForm.type === '1') {
    if (!selectedDeviceIds.value.length) {
      message.error('设备不能为空')
      return
    }
    if (selectedDeviceIds.value.length !== 8) {
      message.error('设备必须选择8个')
      return
    }
    createForm.deviceIds = selectedDeviceIds.value.join(',')
  } else {
    createForm.deviceIds = ''
  }
  if (createForm.orgId) {
    const org = findOrgNode(organizationTree.value || [], createForm.orgId)
    createForm.orgName = org?.name || ''
  } else {
    createForm.orgName = ''
  }
  const route = getRouteByType(createForm.type)
  if (route) {
    createForm.route = route
  }
  if (dialogMode.value === 'edit' && !editingId.value) {
    message.error('缺少数据编号，无法编辑')
    return
  }
  createLoading.value = true
  try {
    if (dialogMode.value === 'create') {
      await request.post({
        url: '/mes/goview/create',
        data: createForm
      })
      message.success('新增成功')
    } else {
      await request.put({
        url: '/mes/goview/update',
        data: {
          id: editingId.value,
          ...createForm
        }
      })
      message.success('编辑成功')
    }
    createDialogVisible.value = false
    handleQuery()
  } finally {
    createLoading.value = false
  }
}

const handleDelete = async (item: DashboardItem) => {
  if (!item.id) return
  try {
    await message.delConfirm()
    await request.delete({
      url: `/mes/goview/delete?id=${item.id}`
    })
    message.success('删除成功')
    await getList()
  } catch {}
}

const loadOrganizationTree = async () => {
  const data = await OrganizationApi.getOrganizationList()
  organizationTree.value = handleTree(data, 'id', 'parentId')
}

const findOrgNode = (nodes: any[], id: any): any | undefined => {
  for (const node of nodes) {
    if (String(node.id) === String(id)) return node
    const children = Array.isArray(node.children) ? node.children : []
    const found = findOrgNode(children, id)
    if (found) return found
  }
  return undefined
}

const handleOrgChange = () => {
  if (!createForm.orgId) {
    createForm.orgName = ''
    return
  }
  const org = findOrgNode(organizationTree.value || [], createForm.orgId)
  createForm.orgName = org?.name || ''
}

const loadDeviceList = async () => {
  deviceList.value = await DeviceApi.getDeviceList()
}

onMounted(() => {
  getList()
  loadOrganizationTree()
  loadDeviceList()
})
</script>

<style scoped>
.dashboard-card-list {
  min-height: 200px;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
}

.dashboard-card-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}

.dashboard-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #0f172a;
}

.dashboard-card-state {
  position: absolute;
  right: 8px;
  bottom: 8px;
}

.dashboard-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.dashboard-card-main {
  min-width: 0;
}

.dashboard-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-card-remark {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-card-actions {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.dashboard-card-menu {
  min-width: 120px;
}
</style>
