<template>
  <div class="prowler-info">
    <!-- 客户详情 -->
    <el-descriptions border title="用户详情">
      <el-descriptions-item label="用户状态">{{ state.userMessage.yhinfozt }}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{ state.userMessage.yhinfoproductname }}</el-descriptions-item>

      <el-descriptions-item label="关联企业ID">{{ state.userMessage.yhinfoqyid }}</el-descriptions-item>
      <el-descriptions-item label="关联订单ID">{{ state.userMessage.yhinfoproductorderid }}</el-descriptions-item>
      <el-descriptions-item label="用户帐号">{{ state.userMessage.yhinfozh }}</el-descriptions-item>
      <el-descriptions-item label="关联路由器设备">{{ state.userMessage.yhinfoboxid }}</el-descriptions-item>
      <el-descriptions-item label="用户手机号">{{ state.userMessage.yhinfotel }}</el-descriptions-item>
      <el-descriptions-item label="用户创建时间">{{ state.userMessage.yhinfocreatedate }}</el-descriptions-item>
    </el-descriptions>

    <!-- 客户详情 -->
    <el-descriptions border title="客户订单详细" class="mt-10">
      <el-descriptions-item label="订单是否开通">
        <el-tag size="" v-if="state.userMessage.payordersfkt">已开通</el-tag>
        <el-tag size="" v-if="!state.userMessage.payordersfkt">未开通</el-tag>{{}}
      </el-descriptions-item>

      <el-descriptions-item label="订单id">{{ state.userMessage.payorderid }}</el-descriptions-item>
      <el-descriptions-item label="关联支付方式id">{{ state.userMessage.payorderpaysortid }}</el-descriptions-item>
      <el-descriptions-item label="关联客户id">{{ state.userMessage.payordercustomerid }}</el-descriptions-item>
      <el-descriptions-item label="客户openid">{{ state.userMessage.payorderopenid }}</el-descriptions-item>
      <el-descriptions-item label="关联企业id">{{ state.userMessage.payorderqyid }}</el-descriptions-item>

      <el-descriptions-item label="关联客户企业码">{{ state.userMessage.payorderqym }}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{ state.userMessage.payorderproductname }}</el-descriptions-item>
      <el-descriptions-item label="关联产品id">{{ state.userMessage.payorderproductid }}</el-descriptions-item>
      <el-descriptions-item label="产品时长类型">{{ state.userMessage.payorderproductlimittype }}</el-descriptions-item>
      <el-descriptions-item label="产品时长">{{ state.userMessage.payorderproductlimit }}</el-descriptions-item>
      <el-descriptions-item label="产品赠送时长">{{ state.userMessage.payorderproductzslimit }}</el-descriptions-item>
      <el-descriptions-item label="产品原始金额">{{ state.userMessage.payorderproductprice }}</el-descriptions-item>
      <el-descriptions-item label="产品实付金额">{{ state.userMessage.payorderproductprice1 }}</el-descriptions-item>
      <el-descriptions-item label="下行平均速度">{{ state.userMessage.payorderradiusxxpj }}</el-descriptions-item>
      <el-descriptions-item label="下行最大速度">{{ state.userMessage.payorderradiusxxmax }}</el-descriptions-item>
      <el-descriptions-item label="上行平均速度">{{ state.userMessage.payorderradiussxpj }}</el-descriptions-item>
      <el-descriptions-item label="上行最大速度">{{ state.userMessage.payorderradiussxmax }}</el-descriptions-item>
      <el-descriptions-item label="支付标题">{{ state.userMessage.payorderpaytitle }}</el-descriptions-item>
      <el-descriptions-item label="支付金额">{{ state.userMessage.payorderprice }}</el-descriptions-item>
      <el-descriptions-item label="支付账号">{{ state.userMessage.payorderzfzh }}</el-descriptions-item>
      <el-descriptions-item label="支付状态">{{ state.userMessage.payorderstatus }}</el-descriptions-item>
      <el-descriptions-item label="支付结果返回时间">{{ state.userMessage.payorderreturndate }}</el-descriptions-item>
      <el-descriptions-item label="支付流水号">{{ state.userMessage.payorderlsh }}</el-descriptions-item>
      <el-descriptions-item label="支付时间">{{ state.userMessage.payorderfkdate }}</el-descriptions-item>
      <!-- <el-descriptions-item label="订单是否开通">{{ state.userMessage.payordersfkt }}</el-descriptions-item> -->
      <el-descriptions-item label="支付创建时间">{{ state.userMessage.payordercreatedate }}</el-descriptions-item>
      <!-- <el-descriptions-item label="审核人">{{ state.userMessage.payordershuser }}</el-descriptions-item>
      <el-descriptions-item label="审核状态">{{ state.userMessage.payordershzt }}</el-descriptions-item>
      <el-descriptions-item label="审核描述">{{ state.userMessage.payordershms }}</el-descriptions-item> -->
    </el-descriptions>

    <!-- 证件信息 -->
    <el-descriptions direction="vertical" border title="用户证件信息" class="mt-10">
      <el-descriptions-item label="客户证件类型">
        {{ state.userMessage.customerzjlx === '港澳台/外籍人员' ? '护照（港澳台/外籍人员）' : '' }}
        {{ state.userMessage.customerzjlx === '中国大陆人员' ? '身份证（中国大陆人员）' : '' }}
      </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 class="flex items-center justify-center mt-10">
      <el-button type="primary">审核通过</el-button>
    </div> -->
  </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['yhinfoid.value'] = query.yhinfoid
  params.pagevalue = 332
  // 客户信息
  let values = await alleApi.view(params)
  state.userMessage = {...values}
  // 身份证照片信息
  let paramsSfz = {}
  paramsSfz['attlsh.value'] = query.yhinfoid
  paramsSfz.pagevalue = 123
  paramsSfz.pageindex = 1
  paramsSfz.rows = 99
  paramsSfz['attother1.value'] = 'zhengjianhao'

  let sfzInfo = await alleApi.list(paramsSfz)
  const arr = []
  sfzInfo.Data.forEach((item) => {
    arr.push({
      name: item.attname,
      url: filePath + '/' + item.attpath + item.attname + '.' + item.atttype,
      uid: item.attid,
      id: item.attid,
      attmodel: item.attmodel,
      text: item.attother2
    })
  })
  // 身份证-正面
  state.sfzfiles.sfzZm = arr.filter((filePath) => filePath.attmodel === 'sfz-zhengmian')
  state.sfzfiles.sfzFm = arr.filter((filePath) => filePath.attmodel === 'sfz-fanmian')
  state.sfzfiles.fzZm = arr.filter((filePath) => filePath.attmodel === 'hz-zhengmian')
  state.sfzfiles.fzFm = arr.filter((filePath) => filePath.attmodel === 'hz-fanmian')
  state.sfzfiles.pleZm = arr.filter((filePath) => filePath.attmodel === 'ple-renlian')

  console.log(state.sfzfiles, 'data1111')
}

/** 删除 */
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>
