<!-- 分组详情 -->
<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: '',
  deviceCount: '',
  subscribeCount: '',

})

// 逻辑
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) => {
  const data = JSON.parse(route.query.row as string)
  // console.log(data, 'route')
  groupInfo.value = data
  // 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)
})

const countDevice = (number: string) => {
  groupInfo.value.deviceCount = number
}
const countSubscribe = (number: string) => {
  groupInfo.value.subscribeCount = number
}
</script>

<template>
  <app-container>
    <detail-page :title="`${title}`">
      <template #btns>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>
      <!-- 描述列表 -->
      <div class="descriptions">
        <div class="descriptions-item">
          <div class="item-label">分组名称</div>
          <div class="item-value" :title="groupInfo.groupName">{{ groupInfo.groupName }}</div>
        </div>
        <div class="descriptions-item">
          <div class="item-label">分组编号</div>
          <div class="item-value" :title="groupInfo.groupNo">{{ groupInfo.groupNo }}</div>
        </div>
        <div class="descriptions-item">
          <div class="item-label">所属组织</div>
          <div class="item-value" :title="groupInfo.deptName">{{ groupInfo.deptName }}</div>
        </div>
        <div class="descriptions-item">
          <div class="item-label">创建时间</div>
          <div class="item-value" :title="groupInfo.createTime">{{ groupInfo.createTime }}</div>
        </div>
        <div class="descriptions-item">
          <div class="item-label" style="border-top: none;">设备数量</div>
          <div class="item-value" style="border-top: none;" :title="groupInfo.deviceCount">{{ groupInfo.deviceCount }}
          </div>
        </div>
        <div class="descriptions-item">
          <div class="item-label" style="border-top: none;">订阅数量</div>
          <div class="item-value" style="border-top: none;" :title="groupInfo.subscribeCount">{{
            groupInfo.subscribeCount }}
          </div>
        </div>
        <div class="descriptions-item" style="width: 50%;">
          <div class="item-label" style="width: 20%; border-top: none;">分组描述</div>
          <div class="item-value" style="width: 80%; border-top: none;" :title="groupInfo.descn">{{ groupInfo.descn }}
          </div>
        </div>
      </div>
      <!-- <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> -->
    </detail-page>
    <detail-block>
      <el-radio-group v-model="currentLabel" @change="radioChangeHandler">
        <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" />
      </el-radio-group>
    </detail-block>
    <detail-block>
      <!-- 设备管理 -->
      <template v-if="current === 'group-device'">
        <device-list-embedded :is-embedded="true" :group-id="id" @count="countDevice" />
      </template>
      <!-- 订阅管理 -->
      <template v-if="current === 'group-subscribe'">
        <!-- <detail-block :need-title="false" title=""> -->
        <subscription-management :group-id="id" @count="countSubscribe" />
        <!-- </detail-block> -->
      </template>
    </detail-block>
  </app-container>
</template>

<style scoped lang="scss">
// .fixed-content {
//   display: block;
//   width: 100px; /* 固定宽度 */
//   overflow: hidden;
//   text-overflow: ellipsis;
//   white-space: nowrap;
// }
.descriptions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .descriptions-item {
    width: 25%;
    display: flex;

    .item-label {
      width: 40%;
      text-align: center;
      border: 1px solid #ebeef5;
      padding: 8px 11px;
      font-weight: bold;
      color: #606266;
      font-size: 14px;
      background-color: #f5f7fa;
    }

    .item-value {
      width: 60%;
      text-align: center;
      border: 1px solid #ebeef5;
      padding: 8px 11px;
      color: #303133;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>