<route lang="json">
{ "style": { "navigationBarTitleText": "其他销售信息", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import {
  getOtherSalesPage,
  saveOtherSales,
  deleteOtherSales,
  updateOtherSales,
} from '@/core/libs/agent-requests'
import dayjs from 'dayjs'
import Card from '@/components/card.vue'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import DataForm from '@/components/data-form.vue'
import { DataFormSchema } from '@/components/data-form'
import { DesignerOrderSaleOther } from '@designer-hub/app/src/core/libs/models'
import { ComponentExposed } from 'vue-component-type-helpers'
import { requestToast } from '@designer-hub/app/src/core/utils/common'
import { messages } from '@/core/libs/messages'

const id = ref()
const actionSheetStatus = ref(false)
const formData = ref({})
const schema = ref<DataFormSchema<Omit<DesignerOrderSaleOther, 'id' | 'createTime' | 'userId'>>>({
  saleTime: {
    type: 'TimePick',
    label: messages.objects.designerOrderSaleOther.saleTime,
    required: true,
    props: {
      defaultValue: new Date(),
      type: 'date',
    },
  },
  supplierName: {
    type: 'TextField',
    label: messages.objects.designerOrderSaleOther.supplierName,
    required: true,
  },
  brandName: {
    type: 'TextField',
    label: messages.objects.designerOrderSaleOther.brandName,
    required: true,
  },
  projectName: {
    type: 'TextField',
    label: messages.objects.designerOrderSaleOther.projectName,
    required: true,
  },
  customerName: {
    type: 'TextField',
    label: messages.objects.designerOrderSaleOther.customerName,
    required: true,
  },
  customerPhone: {
    type: 'TextField',
    label: messages.objects.designerOrderSaleOther.customerPhone,
  },
  orderAmount: {
    type: 'TextField',
    label: messages.objects.designerOrderSaleOther.orderAmount,
    required: true,
  },
})
const rules = ref({
  supplierName: [{ required: true, message: '请输入材料商' }],
  brandName: [{ required: true, message: '请输入品牌' }],
  projectName: [{ required: true, message: '请输入项目名称' }],
  customerName: [{ required: true, message: '请输入客户姓名' }],
  // customerPhone: [{ required: true, message: '请输入客户电话' }],
  orderAmount: [{ required: true, message: '请输入订单金额' }],
  saleTime: [{ required: true, message: '请输入销售时间' }],
})
const formRef = ref<ComponentExposed<typeof DataForm>>()
const pageHelperRef = ref<ComponentExposed<typeof PageHelperEvo>>()
const query = computed(() => ({ userId: id.value }))
const handleSubmit = async () => {
  const { valid } = await formRef.value!.validate()
  if (!valid) return
  if (Object.keys(formData.value).includes('id')) {
    await requestToast(() => updateOtherSales(formData.value), {
      success: true,
      successTitle: '保存成功',
    })
  } else {
    await requestToast(
      () =>
        saveOtherSales({
          ...formData.value,
          userId: Number(id.value),
        }),
      { success: true, successTitle: '保存成功' },
    )
  }
  actionSheetStatus.value = false
  formData.value = {}
  await pageHelperRef.value?.reload()
}
const handleEdit = (item: DesignerOrderSaleOther) => {
  formData.value = item
  actionSheetStatus.value = true
}
const handleDelete = async (item: DesignerOrderSaleOther) => {
  await requestToast(() => deleteOtherSales(item.id), { success: true, successTitle: '删除成功' })
  await pageHelperRef.value?.reload()
}
onLoad((query?: Record<string | 'id', string>) => {
  id.value = query?.id
})
</script>

<template>
  <div class="flex-grow flex flex-col">
    <PageHelperEvo
      ref="pageHelperRef"
      :request="getOtherSalesPage"
      :query="query"
      class="flex-grow"
    >
      <template #default="{ source }">
        <div class="flex flex-col gap-4 p-4">
          <template v-for="(it, index) in source?.list" :key="index">
            <Card>
              <div class="grid grid-cols-[90px_1fr] gap-2.5">
                <template
                  v-for="(item, i) in [
                    { label: '材料商', value: it.supplierName },
                    { label: '品牌', value: it.brandName },
                    { label: '项目名称', value: it.projectName },
                    { label: '客户姓名', value: it.customerName },
                    { label: '客户电话', value: it.customerPhone },
                    { label: '订单金额', value: it.orderAmount + '元' },
                  ]"
                  :key="i"
                >
                  <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
                    {{ item.label }}
                  </div>
                  <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none">
                    {{ item.value }}
                  </div>
                </template>
              </div>
              <div class="bg-[#f4f4f4] h-.25 my-4"></div>
              <div class="flex justify-between">
                <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
                  {{ dayjs(it.createTime).format('YYYY-MM-DD HH:mm') }}
                </div>
                <div class="flex gap-4">
                  <wd-button plain :round="false" size="small" @click="handleEdit(it)">
                    修改
                  </wd-button>
                  <wd-button
                    type="error"
                    plain
                    :round="false"
                    size="small"
                    @click="handleDelete(it)"
                  >
                    删除
                  </wd-button>
                </div>
              </div>
            </Card>
          </template>
        </div>
      </template>
    </PageHelperEvo>
    <div class="py-2 bg-[#f0f4ff]">
      <div
        class="text-center text-[#2357e9] text-xs font-normal font-['PingFang_SC'] leading-normal"
      >
        其他销售信息不参与线上销售统计
      </div>
    </div>
    <BottomAppBar fixed placeholder>
      <div class="w-full">
        <wd-button block :round="false" @click="((actionSheetStatus = true), (formData = {}))">
          添加
        </wd-button>
      </div>
    </BottomAppBar>
    <wd-action-sheet v-model="actionSheetStatus">
      <div class="p-4">
        <DataForm
          ref="formRef"
          :rules="rules"
          :schema="schema"
          :direction="'horizontal'"
          v-model="formData"
        ></DataForm>
        <wd-button :round="false" block @click="handleSubmit">保存</wd-button>
      </div>
    </wd-action-sheet>
  </div>
</template>

<style scoped lang="scss"></style>
