<template>
  <div class="list-box">
    <div class="task-box" v-for="(item, index) in lists" :key="index">
      <div class="task-time flex items-center justify-between">
        <div class="flex items-center">
          <div class="circular"></div>
          <span>{{ dayjs(Number(item.time)).format('YYYY年MM月DD日 HH:mm') }}</span>
        </div>
        <div class="task-action"></div>
      </div>

      <div class="task-info">
        <div>
          <div class="task-card">
            <div class="task-name cursor-pointer flex justify-between items-center" @click="toDetail(item)">
              <span class="leading-none truncate color-3" style="width: calc(100% - 30px)" :title="item.name">{{ item.name }}</span>
              <RightOutlined style="color: #666" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { RightOutlined } from '@ant-design/icons-vue';
import { getMeetQuery } from 'apis';

const store = useStore();
const code = computed(() => store.state.task.label); // code
const projectId = computed(() => store.getters['projects/projectId']); // 项目ID
const lists = ref([]);

init();

async function init() {
  if (code.value === 'ZKT_LW' || code.value === 'ZKT_ZL' || code.value === 'ZKT_RZ') {
    await getAchievementsList();
  } else if (code.value === 'ZKT_HYGL') {
    await getMeetList(1);
  } else if (code.value === 'KT_KYHY') {
    await getMeetList(0);
  }
}

// 知识产权列表 （论文、专利、软著）
async function getAchievementsList() {
  const params = {
    param: {
      code: code.value,
      projectId: projectId.value,
    },
  };

  const data = await store.dispatch('task/getIntellectualList', params);
  lists.value = [...data];
}

// 会议列表
async function getMeetList(type) {
  const params = {
    param: {
      type,
      projectId: projectId.value,
    },
  };

  try {
    const data = await getMeetQuery(params);
    data.forEach(item => {
      item.time = item.startTime;
    });
    lists.value = [...data];
  } catch (error) {
    console.log('error', error);
  }
}

function toDetail(item) {
  if (code.value === 'ZKT_HYGL') {
    store.commit('task/setSubMeetId', item.id);
  } else if (code.value === 'KT_KYHY') {
    store.commit('task/setMeetId', item.id);
  } else if (code.value === 'ZKT_LW' || code.value === 'ZKT_ZL' || code.value === 'ZKT_RZ') {
    store.commit('task/setIntellectualId', item.intellectualId);
  }
}
</script>

<style scoped>
.list-box {
  padding: 10px 16px 50px;
  overflow-y: auto;
}

.task-time {
  height: 32px;
}

.task-time .circular {
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #1890ff;
}

.task-time span {
  font-size: 14px;
  color: #595959;
}

.task-info {
  margin: 8px 0;
  padding-left: 8px;
}

.task-info > div {
  padding-left: 15px;
  border-left: 1px solid #d2d2d2;
}

.task-info .task-card {
  padding: 16px;
  border-radius: 8px;
  -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
}

.task-con {
  margin-top: 16px;
}

.task-con > div {
  height: 30px;
}
</style>
