import Card from '@/components/Card';
import { computed, defineComponent } from 'vue-demi';

// @ts-ignore
import IconLevel from '@/assets/icons/detail/level@2x.png';
// @ts-ignore
import IconSource from '@/assets/icons/detail/source@2x.png';
// @ts-ignore
import IconStyle from '@/assets/icons/detail/style@2x.png';

// @ts-ignore
import IconLevel2 from '@/assets/icons/detail/level2@2x.png';
// @ts-ignore
import IconSource2 from '@/assets/icons/detail/source2@2x.png';
// @ts-ignore
import IconStyle2 from '@/assets/icons/detail/style2@2x.png';
// @ts-ignore
import IconTitle from '@/assets/icons/detail/title@2x.png';
// @ts-ignore
import IconList from '@/assets/icons/detail/list@2x.png';
// @ts-ignore
import IconInformation from '@/assets/icons/detail/information@2x.png';


import { useCommonStore, useIncidentStore,useMainStore } from '@/store';

const listss = [
  { label: '事件标题', icon: IconTitle, prop: 'name' as const },
  { label: '事件类型', icon: IconStyle, prop: 'type' as const },
  { label: '事件来源', icon: IconSource, prop: 'source' as const },
  { label: '事件等级', icon: IconLevel, prop: 'level' as const },
];

export default defineComponent({
  name: 'IncidentInfoCard',
  setup(props) {
    const store = useIncidentStore();
    const commonStore = useCommonStore();
    const mainStore = useMainStore();
    const list = computed(() => [
      // {
      //   label: '事件标题',
      //   icon: IconTitle,
      //   prop: 'name' as const,
      //   value: store.incidentDetail?.baseInfo?.name,
      // },
      {
        label: '事件类型',
        icon: IconStyle2,
        prop: 'type' as const,
        dict: 'zhdd_incident_type' as const,
        class: 'normal',
        value:
          (commonStore.globalDict['zhdd_incident_type']?.find(
            (i) =>
              i.dictValue?.toString() ===
              (store.incidentDetail?.baseInfo?.type ?? '').toString(),
          )?.dictLabel ?? '-') +
          '  ' +
          (commonStore.globalDict['zhdd_incident_level']?.find(
            (i) =>
              i.dictValue?.toString() ===
              (store.incidentDetail?.baseInfo?.level ?? '').toString(),
          )?.dictLabel ?? '-') +
          ' 级',
      },
      {
        label: '事件来源',
        icon: IconInformation,
        prop: 'source' as const,
        dict: 'zhdd_incident_source' as const,
        class: 'logtext',
        value: (
          <div style="overflow-y: auto;" class="source">
            <div>
              上报时间：
              {store.incidentDetail?.baseInfo?.createTime ?? ''}
            </div>
            <div>事件地点：{store.incidentDetail?.baseInfo?.addr ?? ''}</div>
            <div>
              上报人员：{store.incidentDetail?.baseInfo?.createBy ?? ''}
            </div>
            <div>联系方式：{store.incidentDetail?.baseInfo?.expr1 ?? '-'}</div>
            <div>
              上报单位：
              <span>
                {commonStore.globalDict['zhdd_org_upload']?.find(
                  (i) =>
                    i.dictValue?.toString() ===
                    (
                      store.incidentDetail?.baseInfo?.createDept ?? ''
                    ).toString(),
                )?.dictLabel ?? '-'}
              </span>
            </div>
            <div>
              事件描述：
              <span style="word-break:normal;white-space:pre-wrap;overflow:hidden;">
                {store.incidentDetail?.baseInfo?.des ?? ''}
              </span>
            </div>
          </div>
        ),
      },
      // {
      //   label: '事件等级',
      //   icon: IconLevel2,
      //   prop: 'level' as const,
      //   dict: 'zhdd_incident_level' as const,
      // },
    ]);
    const showeventlist = () => { 
      mainStore.setEventListshow(true);
    }

    // setTimeout(() => {
    //   console.log(store.incidentDetail?.baseInfo);
    // }, 2000);
    
    // debugger
    return () => (
      <Card cardType="incident-info">
        <div class="event-list" onClick={showeventlist}>
          <img src={IconList} />
        </div>
        <div class="info-title">{store.incidentDetail?.baseInfo?.name}</div>
        <div class="info-container">
          {list.value.map((item, idx) => (
            <div class={`info-item ${item.class}`}>
              <div class="info-item-lebel" data-idx={idx}>
                <img src={item.icon} alt={item.label} />
                {/* <span>{item.label}</span> */}
              </div>
              <div class="info-item-value" >
                {(item.value
                  ? item.value
                  : item.dict &&
                    commonStore.globalDict[item.dict]?.find(
                      (i) =>
                        i.dictValue?.toString() ===
                        ((store.incidentDetail?.baseInfo ?? {})[item.prop] ?? "").toString(),
                    )?.dictLabel) ?? '-'}
              </div>
            </div>
          ))}
        </div>
      </Card>
    );
  },
});