import { defineComponent } 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';
export default defineComponent({
  props: {
    list: Object as any,
    status: String,
  },
  setup(props, ctx) {
    // 为空时展示的html
    const EmptyHTML = () => {
      return <OnWait></OnWait>;
    };

    // 加载时的html
    const LoadingHTML = () => {
      return <OnLoading></OnLoading>;
    };
    // 加载完成展示的html
    const LoadSuccessHTML = () => {
      return (
        <div class="load-success-box">
          <div class="result-img-box">
            {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 CurrentModule = () => {
      // return LoadSuccessHTML();
      const { status } = props;
      if (status == '') {
        // 未开始
        return EmptyHTML();
      } else if (status == 'loading') {
        return LoadingHTML();
      } else {
        return LoadSuccessHTML();
      }
    };

    return () => <div class="img-res-status">{CurrentModule()}</div>;
  },
});
