import { ref, defineComponent, onMounted, computed, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import './index.scss';
import { useCommonStore, useIncidentStore } from '@/store';
import {
  DropdownItemOption,
  NavBar,
  DropdownMenu,
  DropdownItem,
  Icon,
  PullRefresh,
  Sticky,
  Collapse,
  CollapseItem,
  Loading,
} from 'vant';
/** @ts-ignore */
import icon_communication from '@/assets/icons/incident/communication@2x.png';
/** @ts-ignore */
import icon_detail from '@/assets/icons/incident/detail@2x.png';
/** @ts-ignore */
import icon_information from '@/assets/icons/incident/information@2x.png';
/** @ts-ignore */
import icon_plan from '@/assets/icons/incident/plan@2x.png';
/** @ts-ignore */
import icon_yjck from '@/assets/icons/incident/yjck@2x.png';
/** @ts-ignore */
import icon_yjya from '@/assets/icons/incident/yjya@2x.png';









export default defineComponent({
  name: 'IncidentManagementDetail',
  setup() {
    const router = useRouter();

    const route = useRoute();

    const store = useIncidentStore();

    const commonStore = useCommonStore();

    const activeNames = ref([]);

    const planOptions = computed(
      () =>
        Object.keys(store.incidentDetail?.baseTask ?? {})
          .map((idx) => {
            const item = commonStore.globalDict['zhdd_incident_level']?.find(
              (i) =>
                i.dictValue ===
                store.incidentDetail?.baseTask?.[idx]?.[0].level?.toString(),
            );
            const desc = store.incidentDetail?.baseTask?.[idx]?.map(
              (i) => i.taskDes,
            );

            return {
              ...item,
              desc,
            };
          })
          ?.find(
            (item) =>
              item.dictValue?.toString() ===
              store.incidentDetail?.baseInfo?.level?.toString(),
          )?.desc,
    );

    onMounted(() => {
      commonStore.getGlobalDict('zhdd_incident_level');
      commonStore.getGlobalDict('zhdd_incident_type');
      commonStore.getGlobalDict('zhdd_incident_source');

      route.query.id && store.getIncidentItem(route.query.id as string);
    });
    onUnmounted(() => {
      store.incidentDetail = {};
    });

    return () => (
      <div class="incident-detail-container">
        <NavBar
          title="应急处置"
          left-arrow
          fixed
          onClick-left={() => router.push('/home')}
        />
        <Sticky>
          <div class="title">{store.incidentDetail?.baseInfo?.name}</div>
        </Sticky>
        <Collapse v-model={activeNames.value}>
          <CollapseItem
            title="事件信息"
            name="事件信息"
            v-slots={{ icon: <img class="icon-i" src={icon_information} /> }}>
            <p>
              事件类型：
              {
                commonStore.globalDict['zhdd_incident_type']?.find(
                  (o) =>
                    o.dictValue.toString() ===
                    store.incidentDetail?.baseInfo?.type?.toString(),
                )?.dictLabel
              }
            </p>
            <p>
              事件等级：
              {
                commonStore.globalDict['zhdd_incident_level']?.find(
                  (o) =>
                    o.dictValue.toString() ===
                    store.incidentDetail?.baseInfo?.level?.toString(),
                )?.dictLabel
              }
            </p>
            <p>事件时间：{store.incidentDetail?.baseInfo?.createTime}</p>
            <p>地点：{store.incidentDetail?.baseInfo?.addr}</p>
            <p>事件来源：{ commonStore.globalDict["zhdd_incident_source"]?.find(
                      (i) =>
                        i.dictValue?.toString() ===
                        (
                          store.incidentDetail?.baseInfo["source"]
                        )?.toString()
                    )?.dictLabel ?? "-" }</p>
          </CollapseItem>
          <CollapseItem
            title="应急预案"
            name="应急预案"
            v-slots={{ icon: <img class="icon-i" src={icon_yjya} /> }}>
            {planOptions.value?.map((d,index) => (
              <p>{ index+1 }、{d}</p>
            ))}
          </CollapseItem>
          <CollapseItem
            title="处置方案"
            name="处置方案"
            v-slots={{ icon: <img class="icon-i" src={icon_plan} /> }}>
            123
          </CollapseItem>
          <CollapseItem
            title="处置详情"
            name="处置详情"
            v-slots={{ icon: <img class="icon-i" src={icon_detail} /> }}>
            123
          </CollapseItem>
          <CollapseItem
            title="融合通信"
            name="融合通信"
            v-slots={{ icon: <img class="icon-i" src={icon_communication} /> }}>
            123
          </CollapseItem>
        </Collapse>
      </div>
    );
  },
});