<template>
  <div class="prowler-info">
    <!-- 路由器 -->
    <el-descriptions border title="路由器详情">
      <el-descriptions-item label="路由器id">{{ state.userMessage.routerboxid }}</el-descriptions-item>
      <el-descriptions-item label="关联客户id">{{ state.userMessage.routerboxcustomerid }}</el-descriptions-item>
      <el-descriptions-item label="关联用户id">{{ state.userMessage.routerboxqyid }}</el-descriptions-item>
      <el-descriptions-item label="路由器mac码">{{ state.userMessage.routerboxmac }}</el-descriptions-item>
      <el-descriptions-item label="路由器激活状态">{{ state.userMessage.routerboxsfjh }}</el-descriptions-item>
      <el-descriptions-item label="激活人证件类型">{{ state.userMessage.routerboxzjlx }}</el-descriptions-item>
      <el-descriptions-item label="激活人证件号码">{{ state.userMessage.routerboxzjhm }}</el-descriptions-item>
      <el-descriptions-item label="激活人姓名">{{ state.userMessage.routerboxxm }}</el-descriptions-item>
      <el-descriptions-item label="激活人手机号">{{ state.userMessage.routerboxtel }}</el-descriptions-item>
      <el-descriptions-item label="实名时间">{{ state.userMessage.routerboxsmdate }}</el-descriptions-item>
      <el-descriptions-item label="路由器激活时间">{{ state.userMessage.routerboxjhdate }}</el-descriptions-item>
    </el-descriptions>

    <!-- 证件信息 -->
    <el-descriptions direction="vertical" border title="激活路由器信息" class="mt-10">
      <el-descriptions-item label="激活人证件正面图像">
        <el-image
          style="min-width: 100px; height: 100px"
          :src="`${filePath}/${state.userMessage.routerboxrzzjzmpic}`"
          :preview-src-list="[`${filePath}/${state.userMessage.routerboxrzzjzmpic}`]"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :initial-index="4"
          fit="cover"
        >
          <template #error>
            <div class="image-slot" style="min-width: 100px; height: 100px; color: #a4a4a4; line-height: 100px">暂无</div>
          </template>
        </el-image>
      </el-descriptions-item>
      <el-descriptions-item label="激活人证件背面图像">
        <el-image
          style="min-width: 100px; height: 100px"
          :src="`${filePath}/${state.userMessage.routerboxrzzjbmpic}`"
          :preview-src-list="[`${filePath}/${state.userMessage.routerboxrzzjbmpic}`]"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :initial-index="4"
          fit="cover"
        >
          <template #error>
            <div class="image-slot" style="min-width: 100px; height: 100px; color: #a4a4a4; line-height: 100px">暂无</div>
          </template>
        </el-image>
      </el-descriptions-item>
      <el-descriptions-item label="激活人人脸图像">
        <el-image
          style="min-width: 100px; height: 100px"
          :src="`${filePath}/${state.userMessage.routerboxrzrlpic}`"
          :preview-src-list="[`${filePath}/${state.userMessage.routerboxrzrlpic}`]"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :initial-index="4"
          fit="cover"
        >
          <template #error>
            <div class="image-slot" style="min-width: 100px; height: 100px; color: #a4a4a4; line-height: 100px">暂无</div>
          </template>
        </el-image>
      </el-descriptions-item>

      <!-- <el-descriptions-item v-for="(img, index) in state.sfzfiles" :key="index" :label="img[img.length - 1]?.text ? img[img.length - 1]?.text + '（点击可以放大）' : '暂无'">
        <div class="demo-image__preview">
          <el-image
            style="min-width: 100px; height: 100px"
            :src="img[img.length - 1]?.url"
            :preview-src-list="[img[img.length - 1]?.url]"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="4"
            fit="cover"
          >
            <template #error>
              <div class="image-slot" style="min-width: 100px; height: 100px; color: #a4a4a4; line-height: 100px">没有上传</div>
            </template>
          </el-image>
        </div>
      </el-descriptions-item> -->
    </el-descriptions>
  </div>
</template>

<script setup name="Account">
import _ from 'lodash'
import allStoreApi from '@store/modules/allStoreApi'
import useSystemManageStore from '@store/modules/systemManage'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'
const filePath = import.meta.env.VITE_Hw_File_Path

const {proxy} = getCurrentInstance()
const systemManageStore = useSystemManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)
const {fitWidth} = useFitColumn()
// 接口封装文件
const alleApi = allStoreApi()

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    'customername.value': ''
  },
  sfzfiles: {},
  userMessage: {}
})

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams))
}

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  const {Total, Data} = await alleApi.list(query)
  paginaionConfig.total = Total
  state.tableData = Data
  state.tableLoading = false
}

// 查看详情
const handleDictInfo = async (query) => {
  let params = {}
  params['routerboxyhid.value'] = query.yhinfoid
  params.pagevalue = 324
  // 客户信息
  let values = await alleApi.view(params)
  state.userMessage = {...values}
}

/** 删除 */
const handleDictDel = async (query) => {
  try {
    let params = JSON.parse(JSON.stringify(query))
    params['productid.value'] = state.editView.productid
    params['productid'] = state.editView.productid
    await proxy.$modal.confirm('请问确认删除吗？')
    await alleApi.del(params)
    proxy.$modal.msgSuccess('删除成功！')
    handleQuery()
  } catch (error) {}
}

onMounted((data) => {
  const route = useRoute()
  // 获取路由的get参数
  const getParams = route.query
  console.log(getParams, 'data')

  // 详情
  handleDictInfo(getParams)
})
</script>

<style scoped lang="scss">
.prowler-info {
  padding: 20px;
}
</style>
