<template>
  <div class="prowler-info">
    <!-- 用户详情 -->
    <el-descriptions border title="用户详情">
      <el-descriptions-item label="用户姓名">{{ state.userMessage.customername }}</el-descriptions-item>
      <el-descriptions-item label="用户ID">{{ state.userMessage.customerid }}</el-descriptions-item>
      <el-descriptions-item label="账号类型">{{ state.userMessage.customertype }}</el-descriptions-item>
      <el-descriptions-item label="用户类型">{{ state.userMessage.customertype1 }}</el-descriptions-item>
      <el-descriptions-item label="用户联系方式">{{ state.userMessage.customertel }}</el-descriptions-item>
      <!-- <el-descriptions-item label="用户性别">{{ state.userMessage.customersex }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="微信openid">{{ state.userMessage.customerwxopenid }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="用户是否可用">{{ state.userMessage.customersfky }}</el-descriptions-item> -->

      <el-descriptions-item label="用户证件类型">
        {{ state.userMessage.customerzjlx === '港澳台/外籍人员' ? '护照（港澳台/外籍人员）' : '' }}
        {{ state.userMessage.customerzjlx === '中国大陆人员' ? '身份证（中国大陆人员）' : '' }}
      </el-descriptions-item>
      <el-descriptions-item label="用户证件号码">{{ state.userMessage.customerzjhm }}</el-descriptions-item>
      <el-descriptions-item label="用户证件有效期">{{ state.userMessage.customerzjyxq }}</el-descriptions-item>
      <!-- <el-descriptions-item label="用户所在城市">{{ state.userMessage.customercity }}</el-descriptions-item>
      <el-descriptions-item label="用户所在省">{{ state.userMessage.customerprovince }}</el-descriptions-item>
      <el-descriptions-item label="用户所在国家">{{ state.userMessage.customercountry }}</el-descriptions-item> -->
      <el-descriptions-item label="用户推荐人id">{{ state.userMessage.customertjrid }}</el-descriptions-item>
      <el-descriptions-item label="用户企业码">{{ state.userMessage.customerqym }}</el-descriptions-item>
      <el-descriptions-item label="用户是否认证">
        <el-tag size="" v-if="state.userMessage.customersfrz">已认证</el-tag>
        <el-tag size="" v-if="!state.userMessage.customersfrz">未认证</el-tag>{{}}
      </el-descriptions-item>
      <el-descriptions-item label="用户是否关注公众号">
        <el-tag size="" v-if="state.userMessage.customerissubscribe">已关注</el-tag>
        <el-tag size="" v-if="!state.userMessage.customerissubscribe">未关注</el-tag>{{}}
      </el-descriptions-item>
      <el-descriptions-item label="用户取消关注时间">{{ state.userMessage.customerunsubscribetime }}</el-descriptions-item>
      <el-descriptions-item label="用户账号创建时间">{{ state.userMessage.customercreatedate }}</el-descriptions-item>
      <el-descriptions-item label="用户账号最后活动时间">{{ state.userMessage.customerupdate }}</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.customerrzzjzmpic}`"
          :preview-src-list="[`${filePath}/${state.userMessage.customerrzzjzmpic}`]"
          :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.customerrzzjbmpic}`"
          :preview-src-list="[`${filePath}/${state.userMessage.customerrzzjbmpic}`]"
          :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.customerrzrlpic}`"
          :preview-src-list="[`${filePath}/${state.userMessage.customerrzrlpic}`]"
          :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 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['customerid.value'] = query.customerid
  params.pagevalue = 313
  // 客户信息
  let values = await alleApi.view(params)
  state.userMessage = {...values}
  // 身份证照片信息
  let paramsSfz = {}
  paramsSfz['attlsh.value'] = query.customerid
  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>
