import Card from '@/components/Card';
import { useIncidentStore, useCommonStore } from '@/store';
import { ClickOutside as vClickOutside } from 'element-plus';
import { defineComponent, ref, onMounted,unref } from 'vue-demi';

// @ts-ignore
import Icondownload from '@/assets/icons/detail/download@2x.png';


export default defineComponent({
  name: 'EmergencyCard',
  setup(props) {
    const store = useIncidentStore();
    const commonStore = useCommonStore();

    const types = ref([]);
    // const dpropc = ref();
    // const download = ref();
    // onMounted(() => { 
    //   download.value.addEventListener("click", () => { 
    //     // debugger
    //     dpropc.value?.popperRef?.delayHide?.();
    //   });
    // });

    const onClickOutside = () => {

      // unref(dpropc).popperRef?.delayHide?.();
    };



    return () => (
      <Card cardType="emergency-plan">
        <div class="plan-container">
          <div class="toph">
            <div class="djcc">
              <div class="dj">等级</div>
              <div class="djc">
                {commonStore.globalDict['zhdd_incident_level']?.find(
                  (i) =>
                    i.dictValue?.toString() ===
                    (store.incidentDetail?.baseInfo ?? {})['level']?.toString(),
                )?.dictLabel ?? '-'}
              </div>
            </div>

            {/* <div class="dl" ref={download}>
              <img src={Icondownload} />
              下载附件
            </div>

            <el-popover
              trigger="click"
              title="With title"
              virtual-triggering
              virtual-ref={download}
              ref={dpropc}>
              <span> Some content </span>
            </el-popover> */}
          </div>

          <div class="content">
            {store.incidentDetail.baseTask != undefined
              ? (store.incidentDetail?.baseTask[
                  store.incidentDetail.baseInfo?.level
                ] ?? []) .map((i, index) => <div>{index + 1 + '、' + i.taskName}</div>)
              : ''}
          </div>
        </div>
      </Card>
    );
  },
});
