<template>
  <div class="project-container">
    <!-- 项目关联标题 -->
    <h2 class="section-title">项目关联</h2>

<!--    &lt;!&ndash; 主项目 &ndash;&gt;-->
<!--    <div class="main-project">-->
<!--      <div class="project-info">-->
<!--        <div class="project-name">主项目</div>-->
<!--        <span>高效DMDS精馏工艺智能控制与自主分离技术研发</span>-->
<!--      </div>-->

<!--      &lt;!&ndash; 子项目列表 &ndash;&gt;-->
<!--      <div class="sub-projects">-->
<!--        <div v-for="(subProject, index) in subProjects" :key="subProject.id" class="sub-project">-->
<!--          <div  class="sub-project-info">子项目</div>-->
<!--          <span>{{ subProject.code }} / {{ subProject.name }}</span>-->
<!--          <el-icon class="remove-icon" @click="removeSubProject(index)"><Minus /></el-icon>-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash; 添加子项目 &ndash;&gt;-->
<!--      <div class="add-sub-project" @click="showAddSubProjectDialog">-->
<!--        <div class="dashed-box">-->
<!--          <el-icon><Plus /></el-icon>-->
<!--          <span>添加子项目</span>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 是否研发 -->
    <h2 class="section-title">是否研发</h2>
    <div class="research-option">
      <el-radio-group v-model="isResearch" @change="handleResearchChange">
        <el-radio :label="false">否</el-radio>
        <el-radio :label="true">是</el-radio>
      </el-radio-group>
    </div>

    <!-- 删除项目 -->
    <h2 class="section-title">删除项目</h2>
    <div class="delete-project">
      <el-button type="primary" class="delete-btn" @click="confirmDelete">删除项目</el-button>
    </div>

<!--    &lt;!&ndash; 添加子项目对话框 &ndash;&gt;-->
<!--    <el-dialog-->
<!--        v-model="addSubProjectDialogVisible"-->
<!--        title="添加子项目"-->
<!--        width="600px"-->
<!--    >-->
<!--      <el-table-->
<!--          :data="availableSubProjects"-->
<!--          style="width: 100%"-->
<!--          @selection-change="handleSelectionChange"-->
<!--      >-->
<!--        <el-table-column type="selection" width="55" />-->
<!--        <el-table-column prop="name" label="项目名称" />-->
<!--        <el-table-column prop="code" label="项目编号" />-->
<!--      </el-table>-->
<!--      <template #footer>-->
<!--        <el-button @click="addSubProjectDialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="addSubProjects">确认</el-button>-->
<!--      </template>-->
<!--    </el-dialog>-->
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
import {get, del, getStruct, update} from "@/api/public/basic.js";
import {useRouter} from "vue-router";
const router = useRouter()
const props = defineProps({
  projectId: {
    type: String,
    required: true
  }
})
const state = reactive({
  // 弹出层标题
  title: '',
  // 是否显示弹出层
  open: false,
  loading: false,
  // 总条数
  total: 0,
  currentProject: {},
  leaderOptions: [],
  queryParams: {
    // 页码
    pageNum: 1,
    // 每页大小
    pageSize: 10,
    projectId: '',
  },
  queryParamsStaff: {
    // 页码
    pageNum: 1,
    // 每页大小
    pageSize: 10,
  },
  projectIdmain: '',
})
const handleQuery = () => {
  state.loading = true;
  get(props.projectId, 'i1XuaQDK9zw').then((response: any) => {
    state.currentProject = response.data[0];
    console.log(response.data[0].name)
    console.log(state.currentProject.name + ",,,,,,,,,,," + state.currentProject.code+",,,"+state.currentProject.planFile)
   if(state.currentProject.status==='实施中') {
     console.log(state.currentProject.status)
     isResearch.value=true
   }else{
     console.log(state.currentProject.status)
     isResearch.value=false
   }
    state.loading = false;
    //Object.assign(form, state.currentProject);
  });
};
onMounted(() => {
 handleQuery()
})
// 确认删除项目
const confirmDelete =  () => {
  ElMessageBox.confirm(
      '确定要删除该项目吗？删除后无法恢复',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(async () => {

    const id=state.currentProject.id
    await del({id:[id]},'i1XuaQDK9zw');
    ElMessage.success('项目已删除')
    // 这里可以添加实际删除项目的逻辑
    router.push({
      path: '/myproject',  // 使用路由名称
    })
  }).catch(() => {
    // 取消删除
  })
}
function handleResearchChange() {
  let updatestatus='';
  if (state.currentProject) {
    if (state.currentProject.status==='实施中') {
      updatestatus='研发完成'
      isResearch.value=false
      console.log("11111111111")
    }
    else {// 将已完成项目改为未完成
      updatestatus= '实施中'
      isResearch.value=true
      console.log("1222222")
    }
    update(state.currentProject.id, {status:updatestatus}, 'i1XuaQDK9zw').then((response) => {
      ElMessage.success('修改成功');
      state.loading = false;
      router.push({
        path: '/myproject',  // 使用路由名称
      })
    });
  }
}
// // 主项目数据
// const mainProject = ref({
//   name: '高效DMDS精馏工艺智能控制与自主分离技术研发',
//   id: '100001'
// })
//
// // 子项目数据
// const subProjects = ref([
//   { id: '1', code: '250001', name: 'DMS醚化酯化工序无人化智能控制技术研发' }
// ])
//
// // 可选的子项目
// const availableSubProjects = ref([
//   { id: '2', code: '250002', name: '高纯氮气协同机械搅拌的二甲基二硫生产技术研发' },
//   { id: '3', code: '250003', name: '硫酸二甲酯尾气回收增效技术研发' },
//   { id: '4', code: '250004', name: '硫酸二甲酯生产原料预处理技术研发' },
//   { id: '5', code: '250005', name: '硫化碱转炉环节热能充分利用技术研发' }
// ])

// 是否研发
const isResearch = ref(true)

// 对话框控制
const addSubProjectDialogVisible = ref(false)
const selectedSubProjects = ref([])

// 显示添加子项目对话框
const showAddSubProjectDialog = () => {
  addSubProjectDialogVisible.value = true
}

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedSubProjects.value = selection
}

// 添加子项目
const addSubProjects = () => {
  if (selectedSubProjects.value.length === 0) {
    ElMessage.warning('请至少选择一个子项目')
    return
  }

  // 过滤掉已经添加的子项目
  const newSubProjects = selectedSubProjects.value.filter(
      project => !subProjects.value.some(sp => sp.id === project.id)
  )

  subProjects.value = [...subProjects.value, ...newSubProjects]
  addSubProjectDialogVisible.value = false
  selectedSubProjects.value = []
  ElMessage.success('子项目添加成功')
}

// 移除子项目
const removeSubProject = (index) => {
  subProjects.value.splice(index, 1)
  ElMessage.success('子项目已移除')
}


</script>

<style scoped>
.project-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin: 20px 0 10px;
}

.main-project {
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.project-info {
  margin-bottom: 15px;
}

.project-name {
  font-size: 10px;
  width: 60px;
  height: 20px;
  float: left;
  background-color: rgba(255, 229, 143, 0.3); /* 浅黄色半透明背景 */
  text-align: center;
  margin-right: 20px;
  line-height: 20px;
}
.project-name span{
  font-size: 16px;
  font-weight: 500;
  float: left;
  margin: 20px;
}

.sub-projects {
  margin-top: 10px;
}

.sub-project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.sub-project-info{
  font-size: 10px;
  width: 60px;
  height: 20px;
  float: left;
  background-color: rgba(144, 238, 144, 0.3); /* 浅绿色半透明背景 */
  text-align: center;
  margin-right: 2px;
  line-height: 20px;
}
.sub-project-info span{
  font-size: 14px;
  float: left;
  text-align: left;
}

.remove-icon {
  color: #f56c6c;
  cursor: pointer;
  font-size: 16px;
}

.remove-icon:hover {
  color: #f78989;
}

.add-sub-project {
  margin-top: 10px;
  cursor: pointer;
}

.dashed-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  color: #606266;
}

.dashed-box:hover {
  border-color: #409eff;
  color: #409eff;
}

.dashed-box .el-icon {
  margin-right: 5px;
}

.research-option {
  margin-bottom: 20px;
}

.delete-btn {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.delete-btn:hover {
  background-color: #f78989;
  border-color: #f78989;
}
</style>
