<template>
  <el-card class="hl-card">
    <template #header>
      <span>零件进程管理</span>
    </template>
    <ContentWrap class="borderxx">
      <!-- 搜索工作栏 -->
      <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="120px">
        <el-form-item label="项目编号" prop="projectCode">
          <el-input v-model="queryParams.projectCode" placeholder="项目编号" clearable @keyup.enter="handleQuery" class="!w-250px" />
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="queryParams.projectName" placeholder="项目名称" clearable @keyup.enter="handleQuery" class="!w-250px" />
        </el-form-item>
        <el-form-item label="子项目名称" prop="projectSubName">
          <el-input v-model="queryParams.projectSubName" placeholder="请输入子项目名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input
            v-model="queryParams.customerName"
            class="!w-240px"
            clearable
            placeholder="请输入客户名称"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item style="margin-left:15px">
          <el-button @click="handleQuery" type="primary">
            <Icon icon="ep:search" class="mr-5px" /> 搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" /> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <el-form>
    <el-card class="hl-card-info">
      <template #header>
        <div class="hl-card-info-icona"></div><span class="hl-card-info-text">项目信息</span>
      </template>
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="项目名称" prop="projectName" label-width="150">
            <el-input class="!w-265px" placeholder="项目名称" v-model="formData.projectName" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目结束日期" prop="projectEndTime">
            <el-date-picker
              readonly class="!w-265px" v-model="formData.projectEndTime" type="date" value-format="x"
              placeholder="项目结束日期" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目进度" prop="projectProgress">
            <el-input class="!w-265px" placeholder="项目进度" v-model="formData.projectProgress" readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行 -->
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="工艺负责人" prop="craftOwnerName" label-width="150">
            <el-input class="!w-265px" placeholder="工艺负责人" v-model="formData.craftOwnerName" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工艺结束日期" prop="craftEndDate">
            <el-date-picker
              readonly class="!w-265px" v-model="formData.craftEndDate" type="date" value-format="x"
              placeholder="工艺结束日期" />
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item label="工艺进度" prop="processProgress" >
            <el-input  class=" !w-265px"   :class="{ 'red-background': formData.processFlag == '1' }"    placeholder="工艺进度" v-model="formData.processProgress" readonly
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    </el-form>
    <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 >
      <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="projectName"  />
        <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-column fixed="right" label="操作" align="center" width="190">
          <template #default="scope">
            <el-row>
              <el-col>
                <el-button link type="primary" @click="openForm(scope.row)">
                  详情
                </el-button>
              </el-col>
            </el-row>

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

  </el-card>


</template>

<script setup lang="ts">

import {ref} from "vue";
import routeParamsCache from "@/utils/routeParamsCache";
import * as PlanApi from '@/api/heli/plan'
defineOptions({ name: 'partprocess' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const router = useRouter()
const  insert= ref()

const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  planNo: undefined,
  projectCode: undefined,
  customerName: undefined,
  projectName: undefined,
  businessManName: undefined,
  businessLine: undefined,
  property: undefined,
  projectOwner: undefined,
  projectSubName: undefined,
})
const formData = ref({
  projectName: undefined,
  projectTime: undefined,
  endTime:undefined,
  craftOwnerName:undefined,
  projectEndTime:undefined,
  projectProgress:undefined,
  craftEndDate:undefined,
  processProgress:undefined,
  processFlag:undefined
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
  if ((queryParams.projectCode==null||queryParams.projectCode=='')&&(queryParams.projectSubName==null||queryParams.projectSubName=='')&&(queryParams.projectName==null ||queryParams.projectName=='')&&(queryParams.customerName==null ||queryParams.customerName=='')) {
    message.error("必须输入查询条件查询")
    return
  }
  loading.value = true
  try {
    const data = await PlanApi.getPartProcess(queryParams)
    list.value = data.list.list
    total.value = data.list.total
    formData.value=data
  } finally {
    loading.value = false
  }
}

const cellClassName = ({ row,column }) => {
  if (column.label === '设计任务' && row.designTaskFlag) {
    return row.designTaskFlag === '1'&&row.designTask!='已完成' ? 'warning-row1' :"";
  }
  if (column.label === '外协任务' && row.outsourcingTasksFlag) {
    return row.outsourcingTasksFlag === '1'&&row.outsourcingTasks!='已完成'? 'warning-row1' :"";
  }
  if (column.label === '加工任务' && row.processingTaskFlag) {
    return row.processingTaskFlag === '1'&&row.processingTask!='已完成' ? 'warning-row1' :"";
  }
  if (column.label === '过程检任务' && row.processInspectionFlag) {
    return row.processInspectionFlag === '1'&& row.processInspection!='已完成'? 'warning-row1' :"";
  }
  if (column.label === '装配任务' && row.assemblyTaskFlag) {
    return row.assemblyTaskFlag === '1'&& row.assemblyTask!='已完成'? 'warning-row1' :"";
  }
  // return '';
}


const handleQuery = () => {
  queryParams.pageNo = 1
    getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
/** 添加/修改操作 */
const openForm = (row) => {
  router.push({ path: '/production/partprocessdetail', query: { ...row} })
}


const userInit = ref()


const route = useRoute()
const routeValue = ref('')
onMounted(async () => {
  let params = routeParamsCache.get(route.path);
  routeValue.value = route.path
  if (params ) {
    Object.assign(queryParams, params);
  }
  routeValue.value = route.path
  // await getList()
});

onBeforeUnmount(() => {
   console.log(route.path)
  const plainParams = JSON.parse(JSON.stringify(queryParams));
  routeParamsCache.set(routeValue.value, plainParams);
});

window.addEventListener('beforeunload', () => {
  const plainParams = JSON.parse(JSON.stringify(queryParams));
  routeParamsCache.set(routeValue.value, plainParams);
});
</script>
<style scoped>

:deep(.warning-row1) {
  background-color:#F08080 !important;
}
:deep(.warning-row2) {
  background-color: #1E90FF !important; /* 道奇蓝 */
}

.red-background :deep(.el-input__wrapper) {
  background-color: #F08080 !important;
}
</style>
