<template>
	<el-card class="hl-card" style="position: relative">
		<template #header>
		  <span>详情页</span>
		</template>
		  <el-card class="hl-card-info">
		    <template #header>
		      <div class="hl-card-info-icona"></div><span class="hl-card-info-text">子项目信息</span>
          <label style="display: inline-flex; align-items: center; margin-left: 40px;">
            <el-checkbox class="large-checkbox" v-model="formData.flag" style="order: 1;"  />
            <span style="order: 2; margin-left: 10px;">不显示已完成</span>
          </label>
		    </template>
      </el-card>
        <ContentWrap>
          <el-table v-loading="loading" :data="list"  :show-overflow-tooltip="true" class="hl-table" height="300" border :cell-class-name="cellClassName">
            <el-table-column type="index" width="100" fixed label="序号" align="center" />
            <el-table-column label="子项目名称" align="center" prop="projectSubName"  />
            <el-table-column  label="任务" align="center" prop="designTask"  />
            <el-table-column  label="预计开始时间" align="center" prop="outsourcingTasks" :formatter="dateFormatter2" />
            <el-table-column label="预计结束时间" align="center" prop="processingTask" :formatter="dateFormatter2" />
            <el-table-column label="工单状态" align="center" prop="processInspection" />
            <el-table-column label="生产进度" align="center" prop="assemblyTask" />
          </el-table>
        </ContentWrap>



    <el-card class="hl-card-info">
      <template #header>
        <div class="hl-card-info-icona"></div><span class="hl-card-info-text">工单信息</span>
      </template>
    </el-card>
    <ContentWrap v-if="type=='设计'">
      <el-table v-loading="loading" :data="list"  :show-overflow-tooltip="true" class="hl-table" height="500" border :cell-class-name="cellClassName">
        <el-table-column type="index" width="100" fixed label="序号" align="center" />
        <el-table-column label="子项目名称" align="center" prop="projectSubName"  />
        <el-table-column  label="任务" align="center" prop="designTask"  />
        <el-table-column  label="预计开始时间" align="center" prop="outsourcingTasks"  />
        <el-table-column label="预计结束时间" align="center" prop="processingTask"  />
        <el-table-column label="工单状态" align="center" prop="processInspection" />
        <el-table-column label="生产进度" align="center" prop="assemblyTask" />
      </el-table>
    </ContentWrap>

		<div class="text-center hl-footer">
		  <el-button @click="() => router.back()" size="large">取 消</el-button>
		</div>
	</el-card>

</template>

<script setup lang="ts">
import {inject, ref} from 'vue'
import {dateFormatter2} from "@/utils/formatTime";
import * as PlansubdetailApi from '@/api/heli/plansubdetail'

const loading = ref(false) // 列表的加载中
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { query } = useRoute()
const router = useRouter()
const reload = inject('reload')
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const list = ref([]) // 设计数据
const type = ref('sheji')
const formData = reactive({
  id:undefined,
  projectSubId:undefined,
  flag:true
})
	//初始化方法
	onMounted(async () => {
    console.log(query)
		formData.projectSubId = query.projectSubId
	})

/** 查询设计列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await PlansubdetailApi.getPartProcess(formData)
    list.value = data
  } finally {
    loading.value = false
  }
}

</script>

<style>
	.hl-card .alter-class {
	  position: relative;
	  border: solid 1px orange;
	  outline: solid 1px orange;
	}
  .large-checkbox {
    transform: scale(1.5); /* 方法1：使用scale放大 */
    /* 或者 */
    /* 方法2：通过调整字体大小 */
    /* font-size: 18px; */
  }
</style>
