<route lang="json">
{ "style": { "navigationBarTitleText": "关系报备", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import BottomAppBar from '@/components/bottom-app-bar.vue'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { deleteReportInfo, getReportInfoPage } from '../../../core/libs/agent-requests'
import { ReportInfoReviewStatus } from '../../../core/libs/enums'
import Card from '@designer-hub/app/src/components/card.vue'
import dayjs from 'dayjs'
import { ReportInfo } from '@designer-hub/app/src/core/libs/models'
import { requestToast } from '@designer-hub/app/src/core/utils/common'
import { ComponentExposed } from 'vue-component-type-helpers'

const tab = ref(0)
const tabs = [
  { label: '全部', value: '' },
  { label: '审核中', value: ReportInfoReviewStatus.PendingReview.toString() },
  { label: '未通过', value: ReportInfoReviewStatus.Rejected.toString() },
  { label: '已通过', value: ReportInfoReviewStatus.Approved.toString() },
]
const pageHelperRef = ref<ComponentExposed<typeof PageHelperEvo>>()
const query = computed(() => (tab.value ? { reviewStatus: tabs[tab.value].value } : {}))
const handleAdd = () => {
  uni.navigateTo({ url: '/pages/home/merchant/add-reporting-information' })
}
const handleDelete = async (reportInfo: ReportInfo) => {
  await requestToast(() => deleteReportInfo(reportInfo.id), {
    success: true,
    successTitle: '删除成功',
  })
  pageHelperRef.value?.refresh()
}
</script>
<template>
  <div class="flex-grow flex flex-col">
    <PageHelperEvo ref="pageHelperRef" :request="getReportInfoPage" :query="query">
      <template #top>
        <wd-tabs v-model="tab">
          <template v-for="(it, i) in tabs" :key="i">
            <wd-tab :title="it.label"></wd-tab>
          </template>
        </wd-tabs>
      </template>
      <template #default="{ source }">
        <div class="flex flex-col gap-4 p-4">
          <template v-for="(it, i) in source?.list" :key="i">
            <Card>
              <!-- {{ it.stylistName }} -->
              <div class="flex items-center justify-between">
                <div
                  class="text-center text-black text-sm font-normal font-['PingFang_SC'] leading-normal"
                >
                  报备时间：
                  <!-- 2024-02-21 10:12 -->
                  {{ dayjs(it.createTime).format('YYYY-MM-DD HH:mm') }}
                </div>
                <div
                  class="right-0 top-[15px] text-center text-sm font-normal font-['PingFang_SC'] leading-normal"
                  :class="`${{ [ReportInfoReviewStatus.PendingReview]: 'text-[#2357e9]', [ReportInfoReviewStatus.Approved]: 'text-[#16b032]', [ReportInfoReviewStatus.Rejected]: 'text-[#ff2d2d]' }[it.reviewStatus]}`"
                >
                  {{ it.reviewStatus === ReportInfoReviewStatus.PendingReview ? '审核中' : '' }}
                  {{ it.reviewStatus === ReportInfoReviewStatus.Rejected ? '未通过' : '' }}
                  {{ it.reviewStatus === ReportInfoReviewStatus.Approved ? '已通过' : '' }}
                </div>
              </div>
              <div class="my-3 w-full h-.25 bg-[#f4f4f4]"></div>
              <div class="grid grid-cols-[1fr_2fr] gap-y-2.5">
                <template
                  v-for="(item, index) in [
                    { label: '店面名称', value: it.shopName },
                    { value: it.arrivalTime, label: '到店时间' },
                    { value: it.receptionist, label: '接待人员' },
                    { value: it.contactNumber, label: '联系电话' },
                    { value: it.customerName, label: '客户姓名' },
                    { value: it.customerPhoneNumbe, label: '客户电话' },
                    { value: it.customerAddress, label: '客户地址' },
                    { value: it.stylistName, label: '设计师姓名' },
                  ]"
                  :key="index"
                >
                  <!-- <div class="flex items-center"> -->
                  <div
                    class="left-0 top-0 text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none"
                  >
                    {{ item.label }}
                  </div>
                  <div
                    class="left-[105px] top-0 text-[#3f4c64] text-sm font-normal font-['PingFang_SC'] leading-none"
                  >
                    {{ item.value }}
                  </div>
                  <!-- </div> -->
                </template>
              </div>
              <template v-if="it.reviewStatus === ReportInfoReviewStatus.Rejected">
                <div class="my-3 w-full h-.25 bg-[#f4f4f4]"></div>
                <div class="text-[#ff2d2d] text-sm font-normal font-['PingFang_SC'] leading-none">
                  原因：{{ it.reason }}
                </div>
                <div class="flex justify-end">
                  <div>
                    <wd-button
                      :round="false"
                      icon="delete"
                      size="small"
                      plain
                      @click="handleDelete(it)"
                    >
                      删除
                    </wd-button>
                  </div>
                </div>
              </template>
            </Card>
          </template>
        </div>
      </template>
    </PageHelperEvo>
    <BottomAppBar fixed placeholder>
      <div><wd-button block :round="false" @click="handleAdd">添加报备信息</wd-button></div>
    </BottomAppBar>
  </div>
</template>
