<template>
  <div class="prowler-info">
    <!-- 客户详情 -->
    <el-descriptions border title="代理商详情">
      <el-descriptions-item label="代理商流水号">{{ state.userMessage.agentsid }}</el-descriptions-item>
      <el-descriptions-item label="关联客户id">{{ state.userMessage.agentscustomerid }}</el-descriptions-item>
      <el-descriptions-item label="代理商企业码">{{ state.userMessage.agentsqym }}</el-descriptions-item>
      <el-descriptions-item label="代理商余额">{{ state.userMessage.agentsamount }}</el-descriptions-item>
      <el-descriptions-item label="代理商名称">{{ state.userMessage.agentsname }}</el-descriptions-item>
      <el-descriptions-item label="代理商联系地址">{{ state.userMessage.agentsadress }}</el-descriptions-item>

      <el-descriptions-item label="代理商联系电话">{{ state.userMessage.agentstel }}</el-descriptions-item>
      <el-descriptions-item label="所属省">{{ state.userMessage.agentsprovince }}</el-descriptions-item>
      <el-descriptions-item label="所属市">{{ state.userMessage.agentscity }}</el-descriptions-item>
      <el-descriptions-item label="所属区">{{ state.userMessage.agentsarea }}</el-descriptions-item>
      <el-descriptions-item label="代理商微信二维码内容">{{ state.userMessage.agentwxqymurl }}</el-descriptions-item>
      <el-descriptions-item label="社会统一信用代码">{{ state.userMessage.agentstaxnumber }}</el-descriptions-item>
      <!-- <el-descriptions-item label="代理商证件类型">{{ state.userMessage.agentstzjlx }}</el-descriptions-item> -->
      <el-descriptions-item label="代理商联系电话">{{ state.userMessage.agentstel }}</el-descriptions-item>
      <el-descriptions-item label="代理商身份">{{ state.userMessage.agentssf }}</el-descriptions-item>
      <el-descriptions-item label="代理商法定代表人姓名">{{ state.userMessage.agentfddbrname }}</el-descriptions-item>
      <el-descriptions-item label="法定代表人证件类型">{{ state.userMessage.agentfddbrzjlx }}</el-descriptions-item>
      <el-descriptions-item label="法定代表人证件号码">{{ state.userMessage.agentfddbrzjcode }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ state.userMessage.agentsupdate }}</el-descriptions-item>
      <el-descriptions-item label="是否可用">
        <el-tag size="" v-if="state.userMessage.agentssfky">可用</el-tag>
        <el-tag size="" v-if="!state.userMessage.agentssfky">不可用</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="审核时间">{{ state.userMessage.agentsshdate }}</el-descriptions-item>
      <el-descriptions-item label="审核人">{{ state.userMessage.agentsshuser }}</el-descriptions-item>

      <el-descriptions-item label="审核状态">
        <el-tag size="">{{ state.userMessage.agentsshzt }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="授权文件地址"
        >{{ state.userMessage.agentsqurl }}
        <el-link v-show="state.userMessage.agentsqurl" class="operate-btn-item" type="primary" @click="winOpen(state.userMessage.agentsqurl)">点击下载</el-link>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 代理商余额 -->
    <el-descriptions direction="vertical" border title="代理商钱包" class="mt-10">
      <el-descriptions-item label="代理商余额">{{ state.userMessage.agentsamount }}</el-descriptions-item>
      <el-descriptions-item label="余额充值/扣除">
        <el-button @click="moneyUp('add')">充值</el-button> <el-button @click="moneyUp('del')" type="danger">扣除</el-button></el-descriptions-item
      >
      <el-descriptions-item label="代理商名称">{{ state.userMessage.agentsname }}</el-descriptions-item>
    </el-descriptions>

    <!-- 证件信息 -->
    <el-descriptions direction="vertical" border title="代理商证件信息" class="mt-10">
      <el-descriptions-item label="代理商认证身份类型">
        {{ state.userMessage.agentssf }}
      </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-item label="审核备注" v-if="state.userMessage.agentsshzt !== '待审核'">
        {{ state.userMessage.agentsshms }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 操作 -->
    <div class="flex flex-wrap items-center justify-center mt-10" v-if="state.userMessage.agentsshzt === '待审核'">
      <el-input v-model="state.shTextarea" style="width: 100%" :rows="8" type="textarea" placeholder="审核备注、意见" />

      <el-button type="primary" class="mt-4" @click="shdlsClick('审核通过')">审核通过</el-button>
      <el-button type="danger" class="mt-4" @click="shdlsClick('审核不通过')">审核不通过</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'
import {shdls, increaseamout, decreaseamout} from '@/api/app'
import {useRoute, useRouter} from 'vue-router'

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: {},
  shTextarea: [],
  userMessage: {},
  getParams: {}
})

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 router = useRouter()
const shdlsClick = async (type) => {
  if (!state.shTextarea) {
    proxy.$modal.alertError('请填写审核意见！')
  }
  shdls({agentsid: state.userMessage.agentsid, shzt: type, ms: state.shTextarea})
    .then((res) => {
      proxy.$modal.msgSuccess('审核成功')
      router.push('/dlsmanage/dlsmanage')
    })
    .catch((err) => {})
}

const winOpen = (query) => {
  window.open(query)
}

// 查看详情
const handleDictInfo = async (query) => {
  let params = {}
  params['agentsid.value'] = query.agentsid
  params.pagevalue = 318
  // 客户信息
  let values = await alleApi.view(params)
  state.userMessage = {...values}
  // 身份证照片信息
  let paramsSfz = {}
  paramsSfz['attlsh.value'] = query.agentsid
  paramsSfz.pagevalue = 123
  paramsSfz.pageindex = 1
  paramsSfz.rows = 99
  // paramsSfz['attother1.value'] = 'dlszhengjianhao'

  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.yyzz = arr.filter((filePath) => filePath.attmodel === 'business-yyzz')
  state.sfzfiles.sfzJbrZ = arr.filter((filePath) => filePath.attmodel === 'sfz-jbr-zhengmian')
  state.sfzfiles.sfzJbrF = arr.filter((filePath) => filePath.attmodel === 'sfz-jbr-fanmian')
}

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

const moneyUp = async (type) => {
  try {
    if (type === 'add') {
      proxy.$modal
        .prompt('请输入充值金额')
        .then(({value}) => {
          increaseamout({qyid: state.userMessage.agentsid, qym: state.userMessage.agentsqym, amount: value})
            .then((res) => {
              ElMessage({
                type: 'success',
                message: `成功充值：${value}`
              })
              // 详情
              handleDictInfo(state.getParams)
            })
            .catch((err) => {})
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消充值'
          })
        })
    } else {
      proxy.$modal
        .prompt('请输入扣除金额')
        .then(({value}) => {
          decreaseamout({qyid: state.userMessage.agentsid, qym: state.userMessage.agentsqym, amount: value})
            .then((res) => {
              ElMessage({
                type: 'success',
                message: `成功扣除：${value}`
              })
              // 详情
              handleDictInfo(state.getParams)
            })
            .catch((err) => {})
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消扣除'
          })
        })
    }
  } catch (error) {}
}

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

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

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