<!-- 分组详情 -->
<script name="GroupInfoDetail" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IGroupInfo } from './group-info'
import { detailGroup } from '@/api/basic/group'
import DeviceListEmbedded from '@/views/basic/device/listEmbedded.vue'
import SubscriptionManagement from './subscription.vue'
// 从路由中传过来的参数
const type = ref<string>('')
const id = ref<string>('')

const route = useRoute()
const router = useRouter()
const title = ref('')

const radioItems = ref([
  { name: '设备管理', value: 'group-device' },
  { name: '订阅管理', value: 'group-subscribe' },
])
const current = ref('')
const currentLabel = ref('')

const basicFormRef = ref()

const groupInfo = ref<IGroupInfo>({
  id: '',
  groupNo: '',
  groupName: '',
  deptid: '',
  deptName: '',
  descn: '',
  createUserId: '',
  createTime: '',
})

// 逻辑
const resetForm = () => {
  router.go(-1)
}

// 详情页的各个tab切换操作
const radioChangeHandler = (newVal: string | number | boolean) => {
  const radioTarget = radioItems.value.filter(item => item.name === newVal)
  if (radioTarget.length > 0) {
    currentLabel.value = radioTarget[0].name
    current.value = radioTarget[0].value
  }
  else {
    currentLabel.value = radioItems.value[0].name
    current.value = radioItems.value[0].value
  }
}

// 查询详情
const detailById = (id: string) => {
  detailGroup({ id }).then((res) => {
    if (res.code === 200) {
      groupInfo.value = res.data
      groupInfo.value.createTime = dayjs(groupInfo.value.createTime).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(groupInfo.value.createTime).format('YYYY-MM-DD HH:mm:ss')
    }
  })
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  type.value = params.type
  id.value = params.id !== undefined ? params.id : ''

  // 默认显示第一个tab内容
  current.value = radioItems.value[0].value
  currentLabel.value = radioItems.value[0].name

  switch (params.type) {
    case 'detail':
      title.value = '分组详情'
      id.value = params.id

      detailById(id.value)

      break
    default:
      title.value = ''
      break
  }
}

onMounted(async () => {
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <detail-page :title="`${title}`">
      <template #btns>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>

      <el-form ref="basicFormRef" :model="groupInfo" label-position="right" label-width="110px" stripe>
        <el-row :gutter="24">
          <!-- 第一行 第一列 -->
          <el-col :span="6">
            <el-form-item label="分组编号：">
              {{ groupInfo.groupNo }}
            </el-form-item>
          </el-col>

          <!-- 第一行 第二列 -->
          <el-col :span="6">
            <el-form-item label="分组名称：">
              {{ groupInfo.groupName }}
            </el-form-item>
          </el-col>

          <!-- 第一行 第三列 -->
          <el-col :span="6">
            <el-form-item label="所属组织：">
              {{ groupInfo.deptName }}
            </el-form-item>
          </el-col>

          <!-- 第一行 第四列 -->
          <el-col :span="6">
            <el-form-item label="创建时间：">
              {{ groupInfo.createTime }}
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行 -->
        <el-row :gutter="24">
          <el-col :span="20">
            <el-form-item label="分组描述：">
              {{ groupInfo.descn }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-divider style="margin: 10px 0;" />

      <el-radio-group v-model="currentLabel" style="margin-top: 20px; margin-left: 20px;" @change="radioChangeHandler">
        <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" />
      </el-radio-group>
      <!-- 设备管理 -->
      <template v-if="current === 'group-device'">
        <device-list-embedded :is-embedded="true" :group-id="id" />
      </template>
      <!-- 订阅管理 -->
      <template v-if="current === 'group-subscribe'">
        <!-- <detail-block :need-title="false" title=""> -->
        <subscription-management :group-id="id" />
        <!-- </detail-block> -->
      </template>
    </detail-page>
  </app-container>
</template>