<template>
  <ContentWrap>
    <!--    顶部标题-->
    <div class="topTitle">
      <span class="tab-title">SOP名称：{{route.query.sopName}}</span>
      <div class="set-btn" @click="goBack">
        <img src="../../../assets/images/返回.png" alt="" />
        返回
      </div>
    </div>
  </ContentWrap>

  <ContentWrap>
    <el-table v-loading="loading" :data="jobList" >
      <el-table-column label="ID" prop="id" align="center" width="100"/>
      <el-table-column label="作业名称" prop="ticketName" />
      <el-table-column label="作业类型" prop="ticketType" width="180">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.TICKET_TYPE" :value="scope.row.ticketType" />
        </template>
      </el-table-column>
      <el-table-column label="作业状态" prop="ticketStatus" width="180">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.TICKET_STATUS" :value="scope.row.ticketStatus" />
        </template>
      </el-table-column>
      <el-table-column label="所属区域" prop="workstationName" :show-overflow-tooltip="true" width="210"/>
      <el-table-column label="设备/工艺" prop="machineryName" align="center" />
    </el-table>

    <!-- 分页组件 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>

</template>

<script setup lang="ts">
import {DICT_TYPE} from "@/utils/dict";
import * as JobApi from '@/api/job/index'
import {ref} from 'vue'

const router = useRouter()
const route = useRoute()
const loading = ref(true) // 列表的加载中
const jobList=ref([])
const total = ref(0) // 总条数
const queryParams = reactive(
  {
    pageNo: 1,
    pageSize: -1,
    sopId: route.query.id,
  }
)



onMounted(()=>{
  getList()
})
// 返回
const goBack = () => {
  router.push('/sopm/sop')
}

/** 查询作业列表 */
const getList = async () => {
  loading.value = true

  try {
    const data = await JobApi.getJobTicketPage(queryParams)
    jobList.value = data.list
    console.log(jobList,'作业列表')
    total.value = data.total
  } finally {
    loading.value = false
  }
}
</script>



<style scoped lang="scss">
.topTitle {
  width: 100%;
  line-height: 40px;
}

.set-btn {
  width: 60px;
  height: 30px;
  border: 1px solid black;
  border-radius: 6px;
  text-align: center;
  line-height: 30px;
  float: right;
  cursor: pointer;
  margin: 10px 0;

  img {
    width: 14px;
    height: 14px;
  }
}
</style>
