import Card from '@/components/Card';
import authImg from '@/components/AuthImage/index.vue';
import { BaseMediaUrl } from '@/constants/constants';
import { useIncidentStore } from '@/store';
import { time } from 'console';
import {
  computed,
  defineComponent,
  onMounted,
  onUnmounted,
  ref,
  reactive,
} from 'vue-demi';

export default defineComponent({
  name: 'AccidentCard',
  components: {
    authImg
  },
  setup() {
    const store = useIncidentStore();

    const liveRef = ref<HTMLElement>();
    const timer = ref();
    const current = ref(0);

    const carousel = ref(null);

    var rr = (store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).length +
      (store.incidentDetail?.baseInfo?.video?.split(',') ?? []).length;
    const isshow = ref(rr>0);

    onMounted(() => { 
      setTimeout(() => {
        try {
           carousel.value.setActiveItem(0);
        } catch (error) {
          
        }
       
      }, 500);
    })

    onUnmounted(() => {
      clearInterval(timer.value);
    });
    // debugger

    return () => (
      <Card cardType="accident-scene">
        <div>
          <div class="dis"
            v-show={
              (store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).length +
              (store.incidentDetail?.baseInfo?.video?.split(',') ?? []).length<1
            }>
            暂无现场图像
          </div>
          <el-carousel ref={carousel} autoplay={false} arrow={'always'}>
            {(store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).map(
              (item) => (
                <el-carousel-item>
                  {/* <authImg authSrc={BaseMediaUrl+item} /> */}
                  <img
                    style="height:100%;width:100%;"
                    src={BaseMediaUrl + item}
                  />
                </el-carousel-item>
              ),
            )}
            {(store.incidentDetail?.baseInfo?.video?.split(',') ?? []).map(
              (item) => (
                <el-carousel-item>
                  <video
                    style="height:100%;width:100%"
                    src={BaseMediaUrl + item}
                    controls
                  />
                </el-carousel-item>
              ),
            )}
          </el-carousel>
        </div>
      </Card>
    );
  },
});
