import React from 'react';
import { View, Text, Image } from '@tarojs/components';
const detailIcon = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/form/icon-details.png';
import UploadImage from '../../components/upload-image';
import { CompDefault, MetaProps } from '../data-channel';
import connect from '../connect';

export interface Props extends MetaProps {
  // 标签
  label: string;
  // 说明标签
  showIcon?: boolean;
  // 是否必填
  require?: boolean;
  // 数据输出回调
  onChange?: (value: any) => void;
}

export interface State {}

const defaultValue: CompDefault<Props, State> = {
  props: {
    label: '',
    showIcon: false,
    onChange: (_value) => {},
  },
  state: {},
  meta: {
    compName: 'inline',
    output: { tags: ['form-item'] },
    __mergeCb: (props, meta) => {
      meta.output.key = props.formKey;
    },
  },
};

window.token =
  'eyJhbGciOiJIUzI1NiIsInppcCI6IkRFRiJ9.eNpkUL1KxEAQfpetQ9jNZpPddJaCWFkGwv5MjsX8kd0cwnFgY2MjgoVvYKEPIBb3NJ4_b-GccFg4DMMw388MsyFhMaQijCtMjpWShHgdScUKKiTnNM8TYpcQxx7mU4dcqZWxZWELqUoMRxl2EjjLNae00OSPf2LtuAzx34Ijfq57QPD7-fFrt_t8uv-4vX5_e9jfvOzvXg93TAdlmaVMpVmRZlTgMMLc-0F3F-MlDIg7J8DR3HAreGuUpkY5YRiVitvSOEBJ6-cQz8aVR36ruwAJWetugUY7B64JMK-9hYBmmxqR0HiYcBqjH1Y1qWoCgzYd1GSLZnA1_T5H5pnA52x_AAAA__8.9LYY7cWpQeLfQbC5FvfiV7GYpMCTqijkJwc8uF8Pddw';

/**
 * 表单项-图片上传
 */
const FormItemImage: React.FC<Props> = ({
  label,
  showIcon,
  onChange,
  meta,
}) => {
  const url =
    'https://mbff.crmtest6.kstore.shop/common/uploadResource?resourceType=IMAGE';
  return (
    <View className='wm-tpl-form-item'>
      <View className='title-box'>
        <Text className='label'>{label}</Text>
        {showIcon && <Image className='icon' src={detailIcon} />}
      </View>
      <UploadImage
        url={url}
        maxNum={1}
        onChange={(fileList) => {
          onChange({
            value: fileList,
            meta: meta?.output,
          });
        }}
      />
    </View>
  );
};

export default connect(FormItemImage, defaultValue);