import Card from '@/components/Card';
import { useIncidentStore,useCommonStore } from '@/store';
import { defineComponent, ref } from 'vue-demi';
// @ts-ignore
import IconStyle from '@/assets/icons/detail/direct1@2x.png';

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

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



export default defineComponent({
  name: 'EmexCard',
  setup(props) {
    const store = useIncidentStore();
    const commonStore = useCommonStore();
    const activeindex = ref(1);

    const types = ref([]);

    return () => (
      <Card cardType="em-ex">
        <div class="headerbutton">
          <div
            class={`yjya ${activeindex.value == 1 ? 'active' : ''}`}
            onClick={() => {
              activeindex.value = 1;
            }}>
            <img src={Iconczfa} />
          </div>
          <div
            class={`czfa ${activeindex.value == 2 ? 'active' : ''}`}
            onClick={() => {
              activeindex.value = 2;
            }}>
            <img src={Iconyjya} />
          </div>
        </div>
        <div class="content-c">
          <div
            class="plan"
            style={activeindex.value == 1 ? 'display:block' : 'display:none'}>
            <div class="plan-container">
              {/* <el-checkbox-group v-model={types.value}> */}
              {store?.incidentDetail?.task?.map((t) => (
                <div class="plan-content">
                  <div class="plan-title">
                    <img src={IconStyle} />
                    {t.taskName}
                  </div>
                  {/*<div class="plan-c">
                    <div class="plan-comm">
                      <div class="pt">指挥：</div>
                      <div class="pc">
                        {t.taskPersonVos
                          ?.map((i) => (i.person ?? '') + (i.position ?? ''))
                          .join('、')}
                      </div>
                    </div>
                    <div class="plan-cmd">
                      <div class="pt">指令：</div>
                      <div class="pc">
                        {t.taskCommandVos?.map((i) => (
                          <div>{i.command}</div>
                        ))}
                      </div>
                    </div>
                  </div>*/}
                </div>
                // <el-checkbox disabled class="plan-item" label={t.taskName} />
              ))}
              {/* </el-checkbox-group> */}
            </div>
          </div>
          <div
            class="exc"
            style={activeindex.value == 2 ? 'display:block' : 'display:none'}>
            <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>
          </div>
        </div>
      </Card>
    );
  },
});
