<script setup lang="ts">
import banner1 from '@af-mobile-client-vue3/assets/img/banner/appraise-banner-1.png'
import banner2 from '@af-mobile-client-vue3/assets/img/banner/appraise-banner-2.png'

import { formatDate } from '@af-mobile-client-vue3/hooks/useCommon'
import { openApiLogic } from '@af-mobile-client-vue3/services/api/common'
import {
  showDialog,
  Cell as VanCell,
  CellGroup as VanCellGroup,
  Loading as VanLoading,
  NavBar as VanNavBar,
  Row as VanRow,
  Space as VanSpace,
  Swipe as VanSwipe,
  SwipeItem as VanSwipeItem,
} from 'vant'
import { getCurrentInstance, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const xForm = ref()
const xFormInit = ref(false)
const mode = ref('')
const loading = ref(true)
const groupFormItems = ref({})
const formData = ref({})
const id = ref(-1)
const openid = ref('')
const instance = getCurrentInstance()
const route = useRoute()
const serviceName = ref('af-revenue')
const images = ref([banner1, banner2])
const currentEvaluate = {
  id: null,
  f_business_name: '',
  f_evaluate_state: '',
  f_business_agent: '',
  f_business_type: '',
}
onMounted(() => {
  if (instance) {
    id.value = route.params.id as unknown as number
    openid.value = route.params.openid as string
    formInit()
  }
})

async function formInit() {
  if (id.value > 0) {
    queryData()
  }
  else {
    // 没有id 直接提示用户不存在，返回上一级
    await showDialog({ message: '评价信息缺少参数，找不到对应评价信息' })
    closeWindows()
  }
}
function queryData() {
  openApiLogic({
    id: id.value,
  }, 'getEvalConfigById', serviceName.value).then(async (res: any) => {
    if (res.row && res.config) {
      Object.assign(currentEvaluate, res.row)
      if (currentEvaluate.f_evaluate_state === '已评价') {
        mode.value = '预览'
        formData.value = res.row.f_json ? JSON.parse(res.row.f_json) : {}
      }
      groupFormItems.value = res.config
      xFormInit.value = true
      loading.value = false
    }
    else {
      await showDialog({ message: res.msg })
      closeWindows()
    }
  }).catch(() => {
    showDialog({ message: '查询评价信息失败了' })
  })
}
function onSubmit(params) {
  const data = {
    id: currentEvaluate.id,
    f_json: params,
    f_evaluate_date: formatDate(new Date()),
    f_evaluate_state: '已评价',
    f_evaluate_type: '用户评价',
    f_evaluate_userid: openid.value,
  }
  openApiLogic(data, 'saveEvaluate', serviceName.value).then(async (res: any) => {
    if (res.id) {
      await showDialog({ message: '评价成功了' })
      closeWindows()
    }
    else {
      await showDialog({ message: '评价失败了' })
    }
  }).catch(() => {
    showDialog({ message: '评价失败了' })
  })
}
function closeWindows() {
  const ua = window.navigator.userAgent.toLowerCase()
  if (ua.includes('micromessenger') && typeof (window as any).WeixinJSBridge !== 'undefined') {
    (window as any).WeixinJSBridge.call('closeWindow')
  }
  else {
    // 关闭页面
    if (navigator.userAgent.includes('Firefox') || navigator.userAgent.includes('Chrome')) {
      window.open('about:blank', '_self')
      window.close()
    }
    else {
      window.opener = null
      window.open('', '_self')
      window.close()
    }
  }
}
</script>

<template>
  <VanNavBar
    :title="mode === '预览' ? '服务评价纪录' : '服务评价'"
  />
  <VanSwipe class="my-swipe" height="150" :autoplay="3000" lazy-render indicator-color="#7b7c7c">
    <VanSwipeItem v-for="image in images" :key="image">
      <img :src="image">
    </VanSwipeItem>
  </VanSwipe>
  <VanRow v-show="loading" justify="center">
    <VanLoading type="spinner" color="#1989fa" />
  </VanRow>
  <VanSpace v-show="!loading" direction="vertical" fill>
    <VanCellGroup inset>
      <VanCell title="业务办理人" :value="currentEvaluate.f_business_agent" />
      <VanCell title="业务类型" :value="currentEvaluate.f_business_type" />
      <VanCell title="业务名称" :value="currentEvaluate.f_business_name" />
    </VanCellGroup>
    <x-form
      v-if="xFormInit"
      ref="xForm"
      style="margin-bottom: 14px;"
      :group-form-items="JSON.parse(JSON.stringify(groupFormItems))"
      :service-name="serviceName"
      :form-data="formData"
      :mode="mode"
      @on-submit="onSubmit"
    />
  </VanSpace>
</template>

<style scoped>
.van-cell-group--inset .van-cell::after {
  border-bottom: 1px dashed #c0c2c2 !important; /* 虚线 + 颜色 */
  left: 16px; /* 保持 inset 分组缩进 */
  right: 16px;
}
.my-swipe .van-swipe-item {
  border-radius: 8px;
  box-sizing: border-box;
  padding: 8px; /* 让图片和边框有间距 */
}

.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例 */
  border-radius: 4px; /* 可选：图片圆角 */
}
img {
  overflow-clip-margin: content-box;
  overflow: clip;
}
</style>
