classroom-instruments/src/components/layout/modals/suggestion-option.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './suggestion-option.module.less';
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  useMessage,
  NUpload,
  UploadFileInfo,
  NImage,
  UploadCustomRequestOptions,
  NModal,
  NBadge
} from 'naive-ui';
import { useUserStore } from '/src/store/modules/users';
import bgLine from '../images/bg-line.png';
import chioseAdd from '../images/chioseAdd.png';
import CSelect from '../../CSelect';
import suggestClose from '../images/suggestClose.png';
import inFront from '../images/inFront.png';
import inBack from '../images/inBack.png';
import submitBtn from '../images/submitBtn.png';
import sealing from '../images/sealing.png';
import boxBg from '../images/boxBg.png';
import {
  addSuggestion,
  getSuggestionList,
  sysParamConfigPage
} from '../modals/api';
import { getUploadSign, onFileUpload } from '/src/helpers/oss-file-upload';
import SuggestionList from './suggestion-list';
import { suggestMessageUnread } from '/src/api/user';
import { modalClickMask } from '/src/state';

export default defineComponent({
  name: 'suggestion-option',
  emits: ['close', 'submit'],
  setup(props, { emit, expose }) {
    const message = useMessage();
    const userStore = useUserStore();
    const forms = reactive({
      suggestionTypeId: null,
      clientType: 'TEACHER',
      content: '',
      attachmentUrls: '',
      type: 'APP',
      mobileNo: userStore.getUserInfo.phone
    });
    const state = reactive([]) as any;
    const isubmit = ref(false);

    const showSuggestion = ref(false);
    const suggestionTypeList = ref([] as any);
    const ossUploadUrl = `https://gyt.ks3-cn-beijing.ksyuncs.com/`;
    const uploadRef = ref();
    const fileListRef = ref<UploadFileInfo[]>([]);
    const formsRef = ref();
    const btnLoading = ref(false);
    const tempFiileBuffer = ref();
    const email = ref('');
    const phone = ref('');
    const isLoading = ref(false);
    const ishidden = ref(false);
    const onSubmit = async () => {
      // if (!forms.suggestionTypeId) {
      //   message.error('请选择反馈类型');
      //   return;
      // }
      // if (!forms.content) {
      //   message.error('请填写反馈信息');
      //   return;
      // }
      formsRef.value?.validate(async (err: any) => {
        if (err) {
          return;
        }
        const attachmentUrlsList = fileListRef.value.map((item: any) => {
          // console.log(item, 'item');
          // const name = item.name;
          // // const suffix = name.slice(name.lastIndexOf('.'));
          // const fileName = `${item.id + name}`;
          // const url = ossUploadUrl + fileName;
          return item.url;
        });
        const attachmentUrls = attachmentUrlsList.join(',');
        try {
          const res = await addSuggestion({ ...forms, attachmentUrls });
          isubmit.value = true;
          // message.success('提交成功');
          setTimeout(() => {
            onReset();
            ishidden.value = true;
            emit('close');
          }, 3000);
        } catch (e) {
          console.log(e);
        }
        console.log('onSubmit');
      });
    };
    const onReset = () => {
      ishidden.value = false;
      isubmit.value = false;
      forms.suggestionTypeId = null;
      forms.clientType = 'TEACHER';
      forms.content = '';
      forms.attachmentUrls = '';
      fileListRef.value = [];
      forms.type = 'APP';
      forms.mobileNo = userStore.getUserInfo.phone;
    };
    expose({ onReset });
    const onBeforeUpload = async (options: any) => {
      console.log(options, 'onBeforeUpload');
      const file = options.file;
      // 文件大小
      let isLt2M = true;

      const size = 2;
      if (size) {
        isLt2M = file.file.size / 1024 / 1024 < size;
        if (!isLt2M) {
          message.error(`文件大小不能超过${size}M`);
          return false;
        }
      }

      if (!isLt2M) {
        return isLt2M;
      }
      // 是否裁切
      try {
        btnLoading.value = true;
        const name = file.file.name;
        const fileName = `${file.id + name}`;
        const obj = {
          filename: fileName,
          bucketName: 'gyt',
          postData: {
            filename: fileName,
            acl: 'public-read',
            key: fileName,
            unknowValueField: []
          }
        };
        // const { data } = await policy(obj);
        const { data } = await getUploadSign(obj);
        state.push({
          id: file.id,
          tempFiileBuffer: file.file,
          policy: data.policy,
          signature: data.signature,
          acl: 'public-read',
          key: fileName,
          KSSAccessKeyId: data.kssAccessKeyId,
          name: fileName
        });
      } catch {
        //
        // message.error('上传失败')
        btnLoading.value = false;
        return false;
      }
      return true;
    };
    const onCustomRequest = ({
      file,
      // data,
      // headers,
      // withCredentials,
      action,
      onFinish,
      onError,
      onProgress
    }: UploadCustomRequestOptions) => {
      const item = state.find((c: any) => {
        return c.id == file.id;
      });

      item.file = file;
      onFileUpload({ file, action, data: item, onProgress, onFinish, onError });
    };
    const onFinish = (options: any) => {
      // const url =
      const name = options.file.name;
      // const suffix = name.slice(name.lastIndexOf('.'));
      const fileName = `${options.file.id + name}`;
      const url = ossUploadUrl + fileName;
      // urlList.value.push(url);
      // onFinishAfter(options);
    };
    const onRemove = async (event: any) => {
      console.log(event);
      btnLoading.value = false;
    };

    const getTypeList = async () => {
      try {
        const res = await getSuggestionList({ rows: 9999, page: 1 });
        suggestionTypeList.value = res.data.rows || [];
      } catch (e) {
        console.log(e);
      }
    };

    const getPhoneInfo = async () => {
      try {
        const { data } = await sysParamConfigPage({
          page: 1,
          rows: 999,
          group: 'OTHER'
        });
        const rows = data.rows || [];
        email.value = rows.find((item: any) => {
          return item.paramName == 'customer_service_email';
        }).paramValue;
        phone.value = rows.find((item: any) => {
          return item.paramName == 'customer_service_phone';
        }).paramValue;

        console.log(email.value, phone.value);
      } catch (e) {
        console.log('请求报错');
        console.log(e);
      }
    };

    const imglist = [inFront, inBack, submitBtn, sealing, boxBg];
    const loadImg = (imgList: any) => {
      for (let i = 0; i < imgList.length; i++) {
        const img = new Image();
        // let currentSrc = ''
        img.src = imgList[i];
        img.onload = function (e) {
          // console.log('加载完毕', e, img.complete);
        };
        img.onerror = function (e) {
          // console.log('加载错误', e);
        };
      }
    };
    loadImg(imglist);

    const suggestionStatus = ref(false);
    const getSuggestMessageUnread = async () => {
      try {
        const { data } = await suggestMessageUnread();
        const temp = data || [];
        temp.forEach((item: any) => {
          if (item.group === 'SYSTEM') {
            suggestionStatus.value = item.number > 0 ? true : false;
          }
        });
      } catch {
        //
      }
    };

    onMounted(() => {
      // getSuggestMessageUnread();
      getTypeList();
      getPhoneInfo();
    });
    return () => (
      <div class={[styles.suggestOption]}>
        <div
          class={[
            styles.updatePassword,
            isubmit.value ? styles.isAni : '',
            ishidden.value ? styles.isend : null
          ]}>
          <div class={[styles.formWrap, isubmit.value ? styles.isAni : '']}>
            <NImage
              class={styles.closeBtn}
              src={suggestClose}
              previewDisabled
              onClick={() => {
                onReset();
                emit('close');
              }}></NImage>
            <NImage class={styles.bgLine} src={bgLine} previewDisabled></NImage>
            <h2 class={styles.formTitle}>
              意见反馈
              {/* suggestionStatus */}
              <NBadge
                dot={suggestionStatus.value}
                color={'#FF1036'}
                offset={[-5, 4]}
                class={styles.suggestionBtnDot}>
                <NButton
                  type="primary"
                  round
                  secondary
                  class={styles.suggestionBtn}
                  onClick={() => (showSuggestion.value = true)}>
                  反馈记录
                </NButton>
              </NBadge>
            </h2>

            <div class={styles.formWrapInfo}>
              <NForm
                labelAlign="right"
                labelPlacement="left"
                labelWidth={'auto'}
                ref={formsRef}
                model={forms}
                requireMarkPlacement="left">
                {/* <NFormItem
            path="currentClass"
            label=""
            class={styles.phoneContainer}>
            <p class={styles.phone}>{forms.mobile}</p>
          </NFormItem> */}

                <NFormItem
                  rule={[
                    {
                      required: true,
                      message: '请选择反馈类型'
                    }
                  ]}
                  path="suggestionTypeId">
                  <CSelect
                    class={styles.suggestSelect}
                    value-field="id"
                    label-field="name"
                    style={{ width: '227px!important' }}
                    {...({
                      options: suggestionTypeList.value,
                      placeholder: '反馈类型(必选)',
                      clearable: true,
                      inline: true
                    } as any)}
                    v-model:value={forms.suggestionTypeId}></CSelect>
                </NFormItem>
                <NFormItem
                  path="content"
                  rule={[
                    {
                      required: true,
                      message: '请输入反馈内容'
                    }
                  ]}>
                  <NInput
                    class={styles.countInput}
                    type="textarea"
                    rows={5}
                    placeholder={'请输入反馈内容'}
                    maxlength={200}
                    resizable={false}
                    showCount
                    v-model:value={forms.content}></NInput>
                </NFormItem>
                <NFormItem>
                  <NUpload
                    list-type="image-card"
                    accept=".jpg,jpeg,.png"
                    v-model:fileList={fileListRef.value}
                    ref={uploadRef}
                    multiple={true}
                    max={5}
                    // data={(file: any) => {
                    //   const item = state.find((c: any) => {
                    //     return c.id == file.file.id;
                    //   });
                    //   const { id, tempFiileBuffer, ...more } = item;
                    //   return { ...more };
                    // }}
                    showPreviewButton
                    action={ossUploadUrl}
                    customRequest={onCustomRequest}
                    onBeforeUpload={(options: any) => onBeforeUpload(options)}
                    onRemove={(options: any) => onRemove(options)}
                    onFinish={(options: any) => onFinish(options)}>
                    <div class={styles.addInput}>
                      <NImage previewDisabled src={chioseAdd}></NImage>
                      <p> 点击上传图片</p>
                      <p>(最多五张)</p>
                    </div>
                  </NUpload>
                </NFormItem>
                {/* {phone.value || email.value ? (
                <NFormItem>
                  <div class={styles.messageWrap}>
                    {phone.value ? <p>客服电话：{phone.value}</p> : null}
                    {email.value ? <p>邮箱：{email.value}</p> : null}
                  </div>
                </NFormItem>
              ) : null} */}

                {/* <NSpace class={styles.updateBtnGroup}>
                <NButton
                  strong
                  type="default"
                  round
                  onClick={() => emit('close')}>
                  取消
                </NButton>
                <NButton strong type="primary" round onClick={() => onSubmit()}>
                  确认
                </NButton>
              </NSpace> */}
              </NForm>
            </div>
          </div>
          <div class={[styles.inBack, isubmit.value ? styles.isAni : '']}></div>
          {/* <div class={styles.inBackBottom}></div>  boxBg */}
          <NImage
            src={boxBg}
            class={styles.inBackBottom}
            previewDisabled></NImage>
          <NImage src={inFront} class={styles.inFront} previewDisabled></NImage>
          <NImage
            src={sealing}
            class={[styles.sealing, isubmit.value ? styles.isAni : '']}
            previewDisabled></NImage>
          {!isubmit.value ? (
            <>
              <NImage
                src={submitBtn}
                onClick={() => {
                  onSubmit();
                }}
                class={styles.submitBtn}
                previewDisabled></NImage>
              <div class={styles.messageWrap}>
                {phone.value ? <p>客服电话：{phone.value}</p> : null}
                {email.value ? <p>邮箱：{email.value}</p> : null}
              </div>
            </>
          ) : null}
        </div>

        <NModal
          maskClosable={modalClickMask}
          v-model:show={showSuggestion.value}
          class={['modalTitle background']}
          title={'反馈记录'}
          preset="card"
          closeOnEsc={false}
          style={{ width: '758px' }}>
          <SuggestionList typeList={suggestionTypeList.value} />
        </NModal>
      </div>
    );
  }
});