<template>
  <Card v-bind="$attrs" :bodyStyle="{ padding: 0, overflow: 'hidden', 'margin-top': '15px' }">
    <!-- <template #extra v-if="title !== '更多内容'">
      <a-button type="link" size="small" @click="more">更多</a-button>
    </template> -->
    <template #title>
      <div class="title">
        <span class="title-hd">{{ props.title }}</span>
        <span class="title-hd title-move" @click="more">更多</span>
      </div>
    </template>
    <VScroll :itemHeight="41" :items="dynamicInfoItems" :height="650">
      <template #default="{ item }">
        <a-row @click="toPage(item)" class="listBox">
          <a-col :span="2" class="listItem">
            <span class="listRadio"></span>
          </a-col>
          <a-col :span="9" class="listItem listBody" :title="item.wrdkmc">{{ item.wrdkmc }}</a-col>
          <a-col :span="4" class="listItem" :title="item.scjdmc" style="text-align: left">{{ item.scjdmc }}</a-col>
          <a-col :span="3" class="listItem" :title="item.tbjdmc">{{ item.tbjdmc }}</a-col>
          <a-col :span="6" class="listItem listTime" :title="item.createTsamp" style="text-align: left">{{
            item.createTsamp ? item.createTsamp : '暂无时间'
          }}</a-col>
        </a-row>
      </template>
    </VScroll>
  </Card>
</template>
<script lang="ts" setup>
  import { defineProps, defineEmits, ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { VScroll } from '/@/components/VirtualScroll/index';
  import { useRouter } from 'vue-router';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getMenus } from '/@/router/menus';
  import menusStore from '/@/store/menu';
  // import titleBg from '/@/assets/images/title_bg.png';

  let router = useRouter();
  const { createMessage } = useMessage();

  const emit = defineEmits(['moreClck']);
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    urls: {
      type: String,
      default: '',
    },
    dynamicInfoItems: {
      type: Object,
      default: () => {},
    },
  });
  function more() {
    emit('moreClck', props.urls);
  }
  // function toPage(val) {
  //   if (val.scjdmc == '地块调查') {
  //     const url = router.resolve({
  //       path: `dkgl/investigate/modal/DataFilling?wrdkid=${val.wrdkid}`,
  //     })
  //     window.open(url.href, '_blank')
  //   }
  //   if (val.scjdmc == '风险评估') {
  //     const url = router.resolve({
  //       path: `dkgl/fxpg/UpFilling?wrdkid=${val.wrdkid}`,
  //     })
  //     window.open(url.href, '_blank')
  //   }
  //   if (val.scjdmc == '风险管控') {
  //     if (!val.tbjdmc && !val.tbjdbm) {
  //       createMessage.info('暂未开展调查');
  //     }
  //     const url = router.resolve({
  //       path: `dkgl/fxgk/DetailList?wrdkid=${val.wrdkid}&type=${val.tbjdmc}&jdnzt=${val.tbjdbm}`,
  //     })
  //     window.open(url.href, '_blank')
  //   }
  //   if (val.scjdmc == '风险管控效果评估') {
  //     if (!val.tbjdmc && !val.tbjdbm) {
  //       createMessage.info('暂未开展调查');
  //     }
  //     const url = router.resolve({
  //       path: `dkgl/gkpg/DetailList?wrdkid=${val.wrdkid}&type=${val.tbjdmc}&jdnzt=${val.tbjdbm}`,
  //     })
  //     window.open(url.href, '_blank')
  //   }
  //   if (val.scjdmc == '修复') {
  //     if (!val.tbjdmc && !val.tbjdbm) {
  //       createMessage.info('暂未开展调查');
  //     }
  //     const url = router.resolve({
  //       path: `dkgl/repair/DetailList?wrdkid=${val.wrdkid}&type=${val.tbjdmc}&jdnzt=${val.tbjdbm}`,
  //     })
  //     window.open(url.href, '_blank')
  //   }
  //   if (val.scjdmc == '修复效果评估') {
  //     if (!val.tbjdmc && !val.tbjdbm) {
  //       createMessage.info('暂未开展调查');
  //     }
  //     const url = router.resolve({
  //       path: `dkgl/xfpg/DetailList?wrdkid=${val.wrdkid}&type=${val.tbjdmc}&jdnzt=${val.tbjdbm}`,
  //     })
  //     window.open(url.href, '_blank')
  //   }
  //   if (val.scjdmc == '风险管控及修复') {
  //     if (!val.tbjdmc && !val.tbjdbm && !val.scjdmc) {
  //       createMessage.info('暂未开展调查');
  //     }
  //     const url = router.resolve({
  //       path: `dkgl/gkxf/DetailList?wrdkid=${val.wrdkid}&type=${val.tbjdmc}&scjdmc=${val.scjdmc}&jdnzt=${val.tbjdbm}`,
  //     })
  //     window.open(url.href, '_blank')
  //   }
  //   if (val.scjdmc == '风险管控及修复效果评估') {
  //     if (!val.tbjdmc && !val.tbjdbm) {
  //       createMessage.info('暂未开展调查');
  //     }
  //     const url = router.resolve({
  //       path: `dkgl/gkxfpg/DetailList?wrdkid=${val.wrdkid}&type=${val.tbjdmc}&jdnzt=${val.tbjdbm}`,
  //     })
  //     window.open(url.href, '_blank')
  //   }
  // }
  // 获取所有菜单
  const dkMenus = ref();
  async function genMenus() {
    const res = await getMenus();
    res.forEach((v: any) => {
      if (v.title == '地块管理') {
        dkMenus.value = v;
      }
    });
  }
  genMenus();
  const menus = menusStore();
  function toPage(val) {
    const actions = {
      地块调查: {
        path: `/dkgl/investigate/modal/ViewData`,
        condition: (val) => !!val.wrdkid,
        query: {
          wrdkid: val.wrdkid,
        },
      },
      风险评估: {
        path: `/dkgl/fxpg/ViewDetail`,
        condition: (val) => !!val.wrdkid,
        query: {
          wrdkid: val.wrdkid,
        },
      },
      风险管控: {
        path: `/dkgl/fxgk/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
      风险管控效果评估: {
        path: `/dkgl/gkpg/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
      修复: {
        path: `/dkgl/repair/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
      修复效果评估: {
        path: `/dkgl/xfpg/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
      管控及修复: {
        path: `/dkgl/gkxf/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm && !!val.scjdmc,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
          scjdmc: val.scjdmc,
        },
      },
      管控及修复效果评估: {
        path: `/dkgl/gkxfpg/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
      土壤外运: {
        path: `/dkgl/soil/transferReception`,
        condition: (val) => !!val.wrdkid,
      },
      处置完成: {
        path: `/dkgl/soil/dispose`,
        condition: (val) => !!val.wrdkid,
      },
    };

    const action = val.scjdmc;
    if (actions[action]) {
      if (actions[action].condition(val)) {
        // const url = router.resolve({
        //   path: actions[action].path,
        //   query: actions[action].query,
        // });
        // window.open(url.href, '_blank');

        // 在当前项目打开
        menus.setMenus(dkMenus.value);
        router.push({
          path: actions[action].path,
          query: actions[action].query,
        });
      } else {
        createMessage.info('暂未开展调查');
      }
    } else {
      createMessage.info('暂未开展调查');
    }
  }
</script>
<style lang="less" scoped>
  :deep(.ant-card-head) {
    padding: 0;
  }

  :deep(.ant-card-head-title) {
    padding: 0;
  }

  .title {
    width: 100%;
    height: 55px;
    background: rgba(255, 255, 255, 0.5);
    background: url('/@/assets/images/title_bg.png') no-repeat;

    .title-hd {
      position: absolute;
      left: 30px;
      top: 15px;
      font-size: 18px;
      font-weight: bold;
      color: @white;
    }

    .title-move {
      margin-left: 80%;
      color: @primary-color;
      cursor: pointer;
    }
  }

  .listBox:nth-child(2) {
    background: rgba(232, 232, 232, 0.27);
  }

  .listBox:hover {
    background: rgba(232, 232, 232, 0.27);
  }

  .listItem {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    color: #272727;
    cursor: pointer;
    padding: 10px 0;
  }

  .listRadio {
    display: inline-block;
    background-color: @primary-color;
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .listBody {
    text-align: left;
  }

  .listTime {
    color: #999999;
  }
</style>
