import { defineComponent, reactive } 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 RadioGroup from '@/components/custom/RadioGroup.vue';
export default defineComponent({
  props: {
    list: Object as any,
    SelectImageGroup: Object as any,
    status: String,
    page_module: Number,
    edit_image: String,
  },
  emits: ['update:page_module', 'update:status', 'update:edit_image', 'submit'],
  setup(props, { emit }) {
    // 按钮组
    const SplitImage = reactive({
      // 选择切割第几张图片
      value: '1',
      image: '',
    });
    // 提交图片
    const SubmitImage = () => {
      emit('submit', SplitImage.value);
    };
    // 为空时展示的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 narrow-scrollbar">
            {props.list
              ? props.list.map((item: any) => (
                  <div class="result-img">
                    <img class="img" src={item} alt="" />
                  </div>
                ))
              : ''}
          </div>
          {Object.keys(props.SelectImageGroup).length ? (
            <RadioGroup
              v-model={SplitImage.value}
              list={props.SelectImageGroup.options}
              class="chose-img-group"
            ></RadioGroup>
          ) : (
            ''
          )}
          <div class="download-img-box">
            <CustomResetButton
              class="reset-down-load-btn"
              onClick={SubmitImage}
            >
              提交
            </CustomResetButton>
          </div>
        </div>
      );
    };

    // 判断当前展示的模块--第一个模块
    const CurrentModule = () => {
      // return LoadSuccessHTML();
      const { status, page_module } = props;
      if (page_module == 1) {
        if (status == '') {
          // 未开始
          return EmptyHTML();
        } else if (status == 'loading') {
          return LoadingHTML();
        } else {
          return LoadSuccessHTML();
        }
      } else if (page_module == 2) {
        if (status == 'loading') {
          return LoadingHTML();
        }
      }
    };
    return () => <div class="img-res-status">{CurrentModule()}</div>;
  },
});
