<script lang="ts" setup>
import { ref, watch } from "vue";
import * as XLSX from 'xlsx';

defineProps({
  data: {
    type: Object as PropType<any>,
    required: true,
  },
  taskTableData: {
    type: Array as any,
    default: () => [[]],
  },
});
const emit = defineEmits(["showModal","getrowValue"]);
function showActionsModal() {
  emit("showModal");
}

function getrowvalue(row){
  emit("getrowValue",row);
}
</script>

<template>
  <div class="info-header">
    <div class="left_box">
      <div class="title">填报信息</div>
    </div>
    <div class="right_box" @click="showActionsModal">
      自定义设置
      <SvgIcon class="icon" size="16" name="edit" />
    </div>
  </div>
  <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]" :class="item[0].blue ? 'blue' : ''" @click="getrowvalue(item[0])">
        {{ item[0].value }}
      </td>
      <th v-if="item && item.length > 1">
        {{ item[1].label }}
      </th>
      <td v-if="item && item.length > 1" :class="item[1].blue ? 'blue' : ''" @click="getrowvalue(item[1])"> 
        {{ item[1].value }}
      </td>
    </tr>
  </table>
</template>

<style lang="less" scoped>
.info-header {
  display: flex;
  padding: 6px 0 15px 0;
  align-items: center;
  justify-content: space-between;
  .left_box {
    display: flex;
    align-items: center;
    .title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #333333;

      &:before {
        content: "";
        width: 4px;
        height: 12px;
        background: #507afd;
        border-radius: 3px;
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
  .right_box {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    color: #666666;

    .icon {
      margin-left: 7px;
    }
  }
}
.description {
  width: 100%;
  font-size: 14px;
}

th {
  width: 20%;
  background-color: #fafafa;
  color: #666666;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  line-height: 22px;
}

td {
  width: 30%;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  color: #666666;
}

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

.blue {
  color: #507afd;
}

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