import { IncidentListResponse } from '@/api/incident';
import Card from '@/components/Card';
import { useCommonStore, useMarkerStore } from '@/store';
import useIncidentStore from '@/store/useIncidentStore';
import { computed, defineComponent, PropType } from 'vue-demi';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'MessageCard',
  props: {
    incidents: Array as PropType<IncidentListResponse>,
  },
  setup() {
    const store = useIncidentStore();
    const markerStore = useMarkerStore();
    const commonStore = useCommonStore();
    const router = useRouter();

    return () => (
      <Card cardType="message-list" style="display:none">
        <div class="message-card-container">
          {store.incidents.data?.map((item, idx) => (
            <a
              onClick={async (e) => {
                e.preventDefault();
                // @ts-ignore
                markerStore.currentIncident = item;
                item.id && (await store.getIncidentItem(item.id));
                router.push(`/incidentDetail?id=${item.id}`);
              }}>
              <div class="message-item">
                <div class="title">
                  {/* <span class="index"></span> */}
                  <span>
           
                    {(idx + 1)+"、"+item.createTime +
                      '，在' +
                      item.addr +
                      '处发生了' +
                      (commonStore.globalDict['zhdd_incident_type']?.find(
                        (i) => i.dictValue.toString() === `${item.type}`,
                      )?.dictLabel ?? '预警') +
                      '事件'}
                  </span>
                </div>
                <div class="desc">
                  来源：
                  {
                    commonStore.globalDict['zhdd_incident_source']?.find(
                      (i) => i.dictValue.toString() === `${item.source}`,
                    )?.dictLabel
                  }
                </div>
              </div>
            </a>
          ))}
        </div>
      </Card>
    );
  },
});
