<script lang="ts" setup>
import { onMounted } from "vue";

const props =  defineProps({
  data: {
    type: Object as PropType<any>,
    required: true,
  },
  taskTableData: {
    type: Array,
    default: () => [[]],
  },
});
onMounted(()=>{
  console.log(props.taskTableData,'taskTableData')
})
</script>

<template>
  <table class="description">
    <tr v-for="(item, index) in taskTableData" :key="index">
      <th v-if="item&&item[0]">{{ item[0]["label"] }}</th>
      <td v-if="item&&item[0]">{{ item[0]["value"] }}</td>
      <th v-if="item&&item.length>1">{{ item[1]["label"] }}</th>
      <td v-if="item&&item.length>1">{{ item[1]["value"] }}</td>
    </tr>
  </table>
</template>

<style lang="less" scoped>
.description {
  width: 100%;
  font-size: 14px;
}

th {
  width: 20%;
  background-color: #fafafa;
  color: #666666;
}

td {
  width: 30%;
}

th,
td {
  border: 1px solid #ebebeb;
  padding: 10px 24px;
  text-align: left;
}

.blue {
  color: #507afd;
}

.black {
  color: #666666;
}
</style>
