import { FormSchema } from '/@/components/Table';
import { getBaiduAdd, getSprotProject } from '/@/api/common/api';
import { h } from 'vue';
import { JAreaSelect } from '/@/components/Form';
import { InputGroup, Input, Button, message } from 'ant-design-vue';
export const formSchema: FormSchema[] = [
  {
    label: '',
    field: 'id',
    component: 'Input',
    show: false,
  },
  {
    field: 'type',
    label: '业务类型',
    component: 'Select',
    componentProps: {
      options: [
        { label: '学校', value: 0 },
        { label: '体育馆', value: 1 },
      ],
    },
    required: true,
  },
  {
    field: 'name',
    label: '营业名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'province',
    label: '营业地址',
    component: 'JAreaSelect',
    slot: 'address',
    required: true,
  },
  {
    field: 'address',
    label: '详细地址',
    component: 'Input',
    required: true,
    render: ({ model }) => {
      return h(
        InputGroup,
        {
          compact: true,
        },
        () => [
          h(Input, {
            value: model['address'],
            style: 'width: calc(100% - 70px)',
            onChange: (e) => {
              model['address'] = e.target.value;
            },
          }),
          h(
            Button,
            {
              onClick: async () => {
                if (!model['address'] || !model['province']) return message.warning('请输入地址');
                const res = await getBaiduAdd({ address: `${model['province']}${model['city']}${model['area']}${model['address']}` });
                model['latitude'] = res.latitude;
                model['longitude'] = res.longitude;
              },
            },
            () => '定位'
          ),
        ]
      );
    },
  },
  {
    field: 'province',
    label: '',
    component: 'JAreaSelect',
    show: false,
  },
  {
    field: 'city',
    label: '',
    component: 'JAreaSelect',
    show: false,
  },
  {
    field: 'area',
    label: '',
    component: 'JAreaSelect',
    show: false,
  },
  {
    field: 'longitude',
    label: '经度',
    component: 'Input',
    required: true,
    colProps: {
      sm: 8,
    },
    componentProps: {
      placeholder: '输入详细地址后点击定位，自动填充',
    },
  },
  {
    field: 'latitude',
    label: '维度',
    component: 'Input',
    required: true,
    colProps: {
      sm: 8,
    },
    componentProps: {
      placeholder: '输入详细地址后点击定位，自动填充',
    },
  },

  {
    field: 'title1',
    colSlot: 'title1',
    label: '',
    component: 'RangePicker',
    labelWidth: 0,
  },
  {
    field: 'runStatus',
    label: '经营状态',
    component: 'RadioGroup',
    required: true,
    componentProps: {
      options: [
        { label: '营业', value: 0 },
        { label: '休息', value: 1 },
      ],
    },
    defaultValue: 0,
  },
  {
    field: 'runType',
    label: '营业时间',
    component: 'RadioGroup',
    required: true,
    componentProps: {
      options: [
        { label: '全天', value: 0 },
        { label: '自定义', value: 1 },
      ],
    },
    ifShow(model) {
      return model.model['runStatus'] == 0;
    },
    defaultValue: 0,
    colProps: { span: 8 },
  },
  {
    label: '',
    component: 'RangeTime',
    field: 'Time',
    colProps: { span: 6 },
    ifShow(renderCallbackParams) {
      return renderCallbackParams.model['runType'] == 1;
    },
  },
  {
    field: 'phone',
    label: '客服电话',
    component: 'Input',
    required: true,
    slot: 'phone',
  },
  {
    field: 'facility',
    label: '设施/服务',
    component: 'JCheckbox',
    required: true,
    componentProps: {
      dictCode: 'facilities_service',
    },
  },
  {
    field: 'categoryId',
    label: '运动项目',
    component: 'ApiSelect',
    required: true,
    componentProps: {
      api: getSprotProject,
      params: {
        pageSize: 50,
      },
      labelField: 'name',
      valueField: 'id',
      resultField: 'records',
      mode: 'multiple',
      // options: sportList.records.map((it) => {
      //   return {
      //     label: it.name,
      //     value: it.id,
      //   };
      // }),
    },
  },
  {
    field: 'title3',
    colSlot: 'title3',
    label: '',
    component: 'RangePicker',
    labelWidth: 0,
  },
  {
    field: 'video',
    label: '视频',
    component: 'Input',
    slot: 'VideoUpload',
  },
  {
    field: 'cover',
    label: '图片',
    component: 'JImageUpload',
    required: true,
    componentProps: {
      tipText: '支持单张上传；宽高比为5:4，且宽高均大于480px，大小5M以内。',
    },
  },
  {
    field: 'title4',
    colSlot: 'title4',
    label: '',
    component: 'RangePicker',
    labelWidth: 0,
    ifShow(renderCallbackParams) {
      return renderCallbackParams.model.type == 1;
    },
  },
  {
    field: 'before',
    label: '图片（前）',
    component: 'JImageUpload',
    colProps: { xl: 12 },
    componentProps: {
      tipText: '支持单张上传；宽高比为5:4，且宽高均大于480px，大小5M以内。',
    },
    ifShow(renderCallbackParams) {
      return renderCallbackParams.model.type == 1;
    },
  },
  {
    field: 'after',
    label: '图片（后）',
    component: 'JImageUpload',
    colProps: { xl: 12 },
    componentProps: {
      tipText: '支持单张上传；宽高比为5:4，且宽高均大于480px，大小5M以内。',
    },
    ifShow(renderCallbackParams) {
      return renderCallbackParams.model.type == 1;
    },
  },
  {
    field: 'left',
    label: '图片（左）',
    component: 'JImageUpload',
    colProps: { xl: 12 },
    componentProps: {
      tipText: '支持单张上传；宽高比为5:4，且宽高均大于480px，大小5M以内。',
    },
    ifShow(renderCallbackParams) {
      return renderCallbackParams.model.type == 1;
    },
  },
  {
    field: 'right',
    label: '图片（右）',
    component: 'JImageUpload',
    componentProps: {
      tipText: '支持单张上传；宽高比为5:4，且宽高均大于480px，大小5M以内。',
    },
    colProps: { xl: 12 },
    ifShow(renderCallbackParams) {
      return renderCallbackParams.model.type == 1;
    },
  },
  {
    field: 'up',
    label: '图片（上）',
    component: 'JImageUpload',
    componentProps: {
      tipText: '支持单张上传；宽高比为5:4，且宽高均大于480px，大小5M以内。',
    },
    colProps: { xl: 12 },
    ifShow(renderCallbackParams) {
      return renderCallbackParams.model.type == 1;
    },
  },
  {
    field: 'down',
    label: '图片（下）',
    component: 'JImageUpload',
    componentProps: {
      tipText: '支持单张上传；宽高比为5:4，且宽高均大于480px，大小5M以内。',
    },
    colProps: { xl: 12 },
    ifShow(renderCallbackParams) {
      return renderCallbackParams.model.type == 1;
    },
  },
];