import { defineComponent, ref, watch } from 'vue';
import './index.less';
import CustomResetButton from '@/components/custom/resetbutton.vue';
import OnWait from '@/components/custom/ImgLoadingStatus/OnWait.vue';
import OnLoading from '@/components/custom/ImgLoadingStatus/OnLoading.vue';
import ImageEditVue from '@/components/custom/ImageEdit.vue';
import { ModelStatus } from '@/utils/api/Task';
export default defineComponent({
  props: {
    list: Object as any,
    status: String,
    backgroundImage: String,
    config: Object as any,
    OverlayImages: Object as any,
    module_status: Number,
  },
  emits: ['submit'],
  setup(props, { emit }) {
    const cur_module_status = ref(ModelStatus.wait);
    watch(
      () => props.module_status,
      (v) => {
        if (v) {
          cur_module_status.value = v;
        }
      }
    );
    // 为空时展示的html
    const EmptyHTML = () => {
      return <OnWait></OnWait>;
    };

    // 加载时的html
    const LoadingHTML = () => {
      return <OnLoading></OnLoading>;
    };
    // 修改图片时的html
    const EditHTML = () => {
      return '';
    };
    // 加载完成展示的html
    const LoadSuccessHTML = () => {
      return (
        <div class="load-success-box">
          <div class="result-img-box narrow-scrollbar">
            {props.list
              ? props.list.map((item: any) => (
                  <div class="result-img">
                    <img class="img" src={item} alt="" />
                  </div>
                ))
              : ''}
          </div>
          <div class="download-img-box">
            <CustomResetButton>下载</CustomResetButton>
          </div>
        </div>
      );
    };
    const onSubmit = (url: string) => {
      // 提交图片
      emit('submit', url);
    };

    // 判断当前展示的模块
    const CurrentModule = () => {
      // return LoadSuccessHTML();
      const { status } = props;
      if (status == '') {
        // 未开始
        return EmptyHTML();
      } else if (status == 'loading') {
        return LoadingHTML();
      } else if (status == 'edit') {
        return EditHTML();
      } else {
        return LoadSuccessHTML();
      }
    };

    return () => (
      <div class="img-res-status">
        {CurrentModule()}
        <ImageEditVue
          v-show={props.status == 'edit'}
          module_status={cur_module_status.value}
          list={props.OverlayImages}
          edit_image={props.backgroundImage}
          config={props.config}
          onSubmit={onSubmit}
        ></ImageEditVue>
      </div>
    );
  },
});
