<route lang="json">
{ "style": { "navigationBarTitleText": "添加关系报备", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import dayjs from 'dayjs'
import { DataFormSchema } from '../../../components/data-form'
import DataForm from '../../../components/data-form.vue'
import { createReportInfo, getDesignerList } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const formData = ref<any>({
  arrivalTime: dayjs().toDate(),
})
const designerList = ref([])
const stylistIdName = ref('')
const merchantSchema = ref<DataFormSchema>({
  stylistId: {
    type: 'Select',
    label: '设计师:',
    labelWidth: 84,
    required: true,
    props: {
      placeholder: '请选择设计师',
      columns: [],
      // disabled: userAuthInfo.value != null,
      'onUpdate:modelValue': (value) => {
        // console.log(value),
        designerList.value.forEach((item: any) => {
          if (item.id === value) {
            stylistIdName.value = item.name
          }
          console.log(stylistIdName.value)
        })
      },
    },
  },
  arrivalTime: {
    type: 'TimePick',
    label: '到店时间:',
    labelWidth: 84,
    required: true,
    props: {
      placeholder: '请选择到店时间',
    },
  },
  shopName: {
    type: 'TextField',
    label: '店面名称',
    existing: true,
    required: true,
    labelWidth: 84,
    props: {
      placeholder: '店面名称',
    },
  },
  receptionist: {
    type: 'TextField',
    label: '接待人员:',
    required: true,
    labelWidth: 84,
    props: {
      placeholder: '请输入接待人员',
    },
  },
  contactNumber: {
    type: 'TextField',
    label: '联系电话:',
    required: true,
    labelWidth: 84,
    props: {
      placeholder: '请输入联系电话',
    },
  },
})
const customerSchema = ref<DataFormSchema>({
  customerName: {
    type: 'TextField',
    label: '客户姓名:',
    labelWidth: 84,
    props: {
      placeholder: '请输入客户姓名',
    },
  },
  customerPhoneNumbe: {
    type: 'TextField',
    label: '客户电话:',
    labelWidth: 84,
    props: {
      placeholder: '请输入客户电话',
    },
  },
  customerAddress: {
    type: 'TextField',
    label: '客户地址:',
    labelWidth: 84,
    props: {
      placeholder: '请输入客户地址',
    },
  },
})
const SubmitClick = async () => {
  console.log(formData.value)
  formData.value.stylistName = stylistIdName.value
  uni.showLoading()
  const { code, msg } = await createReportInfo(formData.value)
  uni.hideLoading()
  if (code === 0) {
    uni.showToast({
      title: '上报成功',
      icon: 'none',
    })
  }
}
const getDesInfo = async () => {
  const res = await getDesignerList({ brokerId: userInfo.value.userId, pageNo: 1, pageSize: -1 })
  designerList.value = res.data.list
  console.log(res.data.list)

  merchantSchema.value.stylistId.props.columns = res.data.list.map((item) => ({
    value: item.id,
    label: item.name,
  }))
}

onMounted(async () => {
  getDesInfo()
})
</script>

<template>
  <div class="flex-grow bg-white flex flex-col p-2.5 gap-3">
    <div>
      <data-form :schema="merchantSchema" :direction="'horizontal'" v-model="formData" />
    </div>
    <div>客户信息</div>
    <div class="mt-1">
      <data-form :schema="customerSchema" :direction="'horizontal'" v-model="formData" />
    </div>
    <div class="flex-1"></div>
    <div><wd-button block :round="false" @click="SubmitClick">提交</wd-button></div>
  </div>
</template>

<style scoped lang="scss">
.pageclass {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
