<template>
  <n-card>
    <div class="card__title">
      <p class="card__title--left">待飞行任务</p>
      <p class="card__title--right" @click="handlePreviewMore">查看更多<SvgIcon icon-class="arrow" /></p>
    </div>
    <div class="card__table">
      <n-data-table
        :bordered="false"
        :single-column="true"
        :columns="columns"
        :data="tableData"
        :pagination="false"
        :max-height="340"
      >
        <template #empty>
          <img src="@/assets/images/no-task.png" alt="">
        </template>
      </n-data-table>
    </div>
  </n-card>
</template>

<script>
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { getTaskList } from '@/api/task/index.js'
import { reactive, toRefs } from 'vue'

export default {
  name: 'TaskCard',
  components: { SvgIcon },
  setup() {
    const router = useRouter()
    const data = reactive({
      tableData: [],
      columns: [
        {
          title: '任务名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '待飞行时间',
          key: 'executionStartTime',
          align: 'center'
        },
        {
          title: '创建人',
          key: 'createUser',
          align: 'center'
        }
      ]
    })

    /**
     * @description: 加载表格数据
     * @param {*} res
     * @return {*}
     */
    const loadDataTable = (async function() {
      const res = await getTaskList({ page: 1, limit: 6, status: 1 })
      if (res.code === 0) {
        data.tableData = res.data.records
      }
    })()

    function handlePreviewMore() {
      router.replace('/taskManage/all')
    }

    return {
      ...toRefs(data),
      loadDataTable,
      handlePreviewMore
    }
  }
}

</script>
<style scoped lang='scss'>
.card__title{
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  .card__title--left{
    font-size: 18px;
    padding-left: 8px;
    border-left: 4px solid rgba(24, 144, 255, 1);
  }
  .card__title--right{
    font-size: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    svg{
      font-size: 24px;
    }
    &:hover{
      color: rgba(24, 144, 255, 1);
    }
  }
}
.card__table{
  height: calc(100% - 40px);
}
::v-deep(.n-data-table){
  .n-data-table-tr{
    .n-data-table-th{
      padding: 8px 12px;
      background: rgba(191, 223, 255, 1);
    }
    .n-data-table-td--last-row{
      border-bottom: none;
    }
  }
}
</style>
