import { useAddressData } from '/@/hooks/common'
import { ref } from 'vue'
import dayjs, { Dayjs } from 'dayjs'
import { FormSchema } from '/@/components/Form'
import { genderList, followTypeList, followStageList } from '/@/enums/customerEnum'
import {
  getIncomeList,
  getNationList,
  getEducationList,
  getFamilyTiesList,
  getOccupationList,
  getBodilyFormList,
  getPropertyPermits,
  getAccountTypeList,
  getIdentityTypeList,
  getMaritalStatusList,
  getConstellationList,
  getCarPurchaseSituation,
} from '/@/api/essentialData'

// 基础信息的额外数据
export const basicInfoMoreData = ref<any>({})
// 获取地区数据
const { addressList, domicilePlaceList } = useAddressData()

// 获取职业列表
export const occupationList = ref<any>([])
getOccupationList().then((res) => {
  handleOccupationList(res)
  occupationList.value = res || []
})
function handleOccupationList(data: any, ifFirst = true) {
  data?.forEach?.((item: any) => {
    const { industry, industryCode, occupation, occupationCode, occupationList } = item
    item.label = ifFirst ? industry : occupation
    item.value = ifFirst ? industryCode : occupationCode
    if (occupationList?.length) {
      item.children = occupationList
      handleOccupationList(occupationList, false)
    }
  })
}

// 基本信息
export const basicSchema: FormSchema[] = [
  {
    field: 'genderCode',
    label: '性别',
    component: 'Select',
    colProps: { span: 8 },
    componentProps: ({ formModel }) => {
      return {
        options: genderList,
        disabled: !!formModel.name && formModel.name !== -1,
        onChange: (_: any, v: any) => {
          basicInfoMoreData.value.genderValue = v?.label
        },
      }
    },
  },
  { field: 'age', label: '年龄', component: 'InputNumber', colProps: { span: 8 }, },
  { field: 'height', label: '身高(cm)', component: 'InputNumber', colProps: { span: 8 }, },
  { field: 'weight', label: '体重(kg)', component: 'InputNumber', colProps: { span: 8 }, },
  {
    field: 'educationCode',
    label: '学历',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      labelField: 'desc',
      api: getEducationList,
      getPopupContainer: () => document.body,
      onChange: (_: any, v: any) => {
        basicInfoMoreData.value.education = v?.label
      },
    },
  },
  {
    field: 'incomeCode',
    label: '月收入',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      labelField: 'desc',
      api: getIncomeList,
      getPopupContainer: () => document.body,
      onChange: (_: any, v: any) => {
        basicInfoMoreData.value.income = v?.label
      },
    },
  },
  {
    field: 'maritalStatusCode',
    label: '婚姻状况',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      labelField: 'desc',
      api: getMaritalStatusList,
      getPopupContainer: () => document.body,
      onChange: (_: any, v: any) => {
        basicInfoMoreData.value.maritalStatusName = v?.label
      },
    },
  },
  // { field: 'name', label: '姓名', component: 'Input', componentProps: { disabled: true }, colProps: { span: 8 }, },
  {
    field: 'constellationCode',
    label: '星座',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      labelField: 'desc',
      api: getConstellationList,
      getPopupContainer: () => document.body,
      onChange: (_: any, v: any) => {
        basicInfoMoreData.value.constellation = v?.label
      },
    },
  },
  { field: 'childrenNum', label: '孩子数量', component: 'InputNumber', colProps: { span: 8 }, },
  {
    field: 'address',
    label: '居住地',
    component: 'Cascader',
    colProps: { span: 8 },
    componentProps: {
      options: addressList,
      onChange: (_: any, v: any) => {
        basicInfoMoreData.value.provinceName = v?.[0]?.label
        basicInfoMoreData.value.cityName = v?.[1]?.label
        basicInfoMoreData.value.districtName = v?.[2]?.label
      },
    },
  },
  {
    field: 'domicilePlace',
    label: '户口所在地',
    component: 'Cascader',
    colProps: { span: 8 },
    componentProps: () => {
      return {
        options: domicilePlaceList.value,
        onChange: (_: any, v: any) => {
          basicInfoMoreData.value.domicilePlaceProvinceName = v?.[0]?.label
          basicInfoMoreData.value.domicilePlaceCityName = v?.[1]?.label
        },
      }
    },
  },
  {
    field: 'hometown',
    label: '家乡',
    component: 'Cascader',
    colProps: { span: 8 },
    componentProps: () => {
      return {
        options: domicilePlaceList.value,
        onChange: (_: any, v: any) => {
          basicInfoMoreData.value.hometownProvinceName = v?.[0]?.label
          basicInfoMoreData.value.hometownCityName = v?.[1]?.label
        },
      }
    },
  },
  // {
  //   field: 'identityType',
  //   label: '身份',
  //   component: 'ApiSelect',
  //   colProps: { span: 8 },
  //   componentProps: {
  //     labelField: 'desc',
  //     api: getIdentityTypeList,
  //     getPopupContainer: () => document.body,
  //     onChange: (_: any, v: any) => {
  //       basicInfoMoreData.value.identityTypeName = v?.label
  //     },
  //   },
  // },
  {
    field: 'nationCode',
    label: '民族',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      labelField: 'cn',
      valueField: 'id',
      api: getNationList,
      getPopupContainer: () => document.body,
      onChange: (_: any, v: any) => {
        basicInfoMoreData.value.nation = v?.label
      },
    },
  },
  // {
  //   field: 'bodilyFormCode',
  //   label: '体型',
  //   component: 'ApiSelect',
  //   colProps: { span: 8 },
  //   componentProps: {
  //     labelField: 'desc',
  //     api: getBodilyFormList,
  //     getPopupContainer: () => document.body,
  //     onChange: (_: any, v: any) => {
  //       basicInfoMoreData.value.bodilyForm = v?.label
  //     },
  //   },
  // },
  // {
  //   field: 'accountTypeCode',
  //   label: '户口',
  //   component: 'ApiSelect',
  //   colProps: { span: 8 },
  //   componentProps: {
  //     labelField: 'desc',
  //     api: getAccountTypeList,
  //     getPopupContainer: () => document.body,
  //     onChange: (_: any, v: any) => {
  //       basicInfoMoreData.value.accountTypeName = v?.label
  //     },
  //   },
  // },
  {
    field: 'nativePlaceCode',
    label: '籍贯',
    component: 'Select',
    colProps: { span: 8 },
    componentProps: {
      options: domicilePlaceList,
      getPopupContainer: () => document.body,
      onChange: (_: any, v: any) => {
        basicInfoMoreData.value.nativePlaceName = v?.label
      },
    },
  },
  {
    label: '职业',
    field: 'occupationList',
    component: 'Cascader',
    colProps: { span: 8 },
    componentProps: {
      options: occupationList,
      getPopupContainer: () => document.body,
      onChange: (_: any, v: any) => {
        const industry = v?.[0] || {}
        const occupation = v?.[1] || {}
        basicInfoMoreData.value.industry = industry.label
        basicInfoMoreData.value.industryCode = industry.value
        basicInfoMoreData.value.occupation = occupation.label
        basicInfoMoreData.value.occupationCode = occupation.value
      },
    },
  },
  {
    field: 'onlyChild',
    label: '是否独生子女',
    component: 'Select',
    colProps: { span: 8 },
    componentProps: {
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
  },
  {
    field: 'housePurchase',
    label: '购房情况',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      labelField: 'desc',
      api: getPropertyPermits,
      getPopupContainer: () => document.body,
      onChange: (_: any, v: any) => {
        basicInfoMoreData.value.propertyPermits = v?.label
      },
    },
  },
  {
    field: 'carPurchase',
    label: '购车情况',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      labelField: 'desc',
      api: getCarPurchaseSituation,
      getPopupContainer: () => document.body,
      onChange: (_: any, v: any) => {
        basicInfoMoreData.value.carPurchaseSituation = v?.label
      },
    },
  },
 
  {
    field: 'describeInfo',
    label: '个人描述',
    component: 'InputTextArea',
    colProps: { span: 24 },
    componentProps: ({ formModel }) => {
      return {
        autoSize: {
          minRows: 4,
        },
        disabled: formModel?.describeAudit,
      }
    },
  },
  { field: 'empty1', label: '', slot: 'empty1', component: 'Input' },
]

const dateComProps = {
  showTime: true,
  style: { width: '100%' },
}

export const modalFormSchema: FormSchema[] = [
  {
    field: 'datingClueFollowType',
    label: '线索跟进方式',
    component: 'Select',
    required: true,
    componentProps: {
      options: followTypeList,
    },
  },
  {
    field: 'datingClueFollowStage',
    label: '线索跟进阶段',
    required: true,
    component: 'Select',
    componentProps: {
      options: followStageList,
    },
  },
  // {
  //   label: '下次跟进时间',
  //   component: 'DatePicker',
  //   field: 'nextFollowTime',
  //   componentProps: {
  //     ...dateComProps,
  //   },
  // },
  {
    field: 'remark',
    label: '备注',
    required: false,
    component: 'InputTextArea',
    componentProps: {
      autosize: {
        minRows: 4,
      },
    },
  },
]