<template>
  <div class="flex flex-col h-full bg-gray-50 w-full">
    <a-breadcrumb class="mt-6 ml-6">
      <a-breadcrumb-item>我管理的</a-breadcrumb-item>
      <a-breadcrumb-item><a href="">梁溪区纪委大数据管理平台项目</a></a-breadcrumb-item>
    </a-breadcrumb>
    <div class="flex space-x-[10vw] ml-96">
      <div class="inline-flex rounded-md ml-6" role="group">
        <button

            :class="buttonClass('DisableSelection')"
            class="w-16 h-8 flex justify-center items-center"
            type="button"
            @click="toggleSelectionDisabled"
        >
          全部
        </button>
        <button
            :class="buttonClass('web')"
            class="w-16 h-8 flex justify-center items-center"
            type="button"
            @click="toggleSelection('web')"
        >
          Web
        </button>
        <button
            :class="buttonClass('Ai')"
            class="w-16 h-8 flex justify-center items-center"
            type="button"
            @click="toggleSelection('Ai')"
        >
          Ai
        </button>
        <button
            :class="buttonClass('App')"
            class="w-16 h-8 flex justify-center items-center"
            type="button"
            @click="toggleSelection('App')"
        >
          App
        </button>
        <button
            :class="buttonClass('大数据')"
            class="w-20 h-8 flex justify-center items-center"
            type="button"
            @click="toggleSelection('大数据')"
        >
          大数据
        </button>
      </div>
      <div class="flex space-x-8">
        <label class="inline-flex items-center space-x-2 hover:text-blue-600">
          <input
              v-model="selectedStatus.weikaishi"
              class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"
              type="checkbox"
          />
          <span class="text-sm">未开始</span>
        </label>
        <label class="inline-flex items-center space-x-2 hover:text-blue-600">
          <input
              v-model="selectedStatus.jinxingzhong"
              class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"
              type="checkbox"
          />
          <span class="text-sm">进行中</span>
        </label>
        <label class="inline-flex items-center space-x-2 hover:text-blue-600">
          <input
              v-model="selectedStatus.yiwancheng"
              class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white"
              type="checkbox"
          />
          <span class="text-sm">已完成</span>
        </label>
        <label class="inline-flex items-center space-x-2 hover:text-blue-600">
          <input
              v-model="selectedStatus.stop"
              class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white "
              type="checkbox"
          />
          <span class="text-sm ">暂停</span>
        </label>
      </div>
    </div>
      <div class="mt-12 ml-12 flex space-x-16 h-full">
        <div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8">
          <p class="text-lg">项目名称：梁溪区纪委大数据管理平台项目</p>
          <p>项目周期：3个月</p>
          <p>项目开始日期：2024/3/2</p>
          <div class="space-y-2">
            <p>技术选型：</p>
            <p>前端：vue3</p>
            <p>后端：java,springboot</p>
          </div>
          <p>完成情况：进行中</p>
          <p>是否发布：未发布</p>
          <p>负责人：张三</p>
        </div>
        <div class="flex space-x-9">
          <a-card v-for="(ChildProject, index) in ChildProjects" :key="index" class="transition-transform transform-gpu hover:scale-105 relative w-96 h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img23.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
            <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
              <p class="ml-6 mt-4 text-2xl font-bold tracking-tight text-gray-900">{{ChildProject.name}}</p>
              <div class="flex mt-7 space-x-3">
                <p class="ml-14 text-lg">剩余</p>
                <p class="text-xl text-green-400 font-bold">10天</p>
              </div>
              <div class="ml-auto mr-10">
                <button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="$router.push('/WorkLoad/I_Manage/Back')">
                  <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                  </svg>
                </button>
              </div>
            </div>
          </a-card>
        </div>
      </div>
    </div>
</template>


<script setup>
import {onMounted, reactive, ref, watch} from 'vue';
import request from "@/js/request.js";

const showButton = reactive([]);
const token = window.localStorage.getItem('token')
const ChildProjects = ref([]); // 使用ref创建响应式数据
const id = ref(13);

onMounted(() =>{
  request.projectWorkGet(id, token).then((res) => {
   ChildProjects.value = res.data.data;
  })
})


const toggleSelectionDisabled = () => {
  selectionDisabled.value = !selectionDisabled.value;
  if (selectionDisabled.value) {
    // 清空选中的按钮
    selectedButtons.value = [];
  }
};

const toggleSelection = (button) => {
  // 如果禁止选择，直接返回
  if (selectionDisabled.value) {
    return;
  }
  //选择其他按钮
  const index = selectedButtons.value.indexOf(button);
  if (index > -1) {
    selectedButtons.value.splice(index, 1); // 如果已选中，再次点击时移除
  } else {
    selectedButtons.value.push(button); // 如果未选中，点击时添加
  }
};

const buttonClass = (button) => ({
  'px-4 py-2 text-sm font-medium border focus:z-10 focus:ring-1': true,
  'text-gray-900 bg-white border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-blue-100 focus:text-blue-700 outline-none ':  (!selectedButtons.value.includes(button) && !selectionDisabled.value) || (button === 'DisableSelection' && !selectionDisabled.value),
  'bg-blue-400 text-white': selectedButtons.value.includes(button) || (button === 'DisableSelection' && selectionDisabled.value), // 选中状态的样式
});

// @click="selectedTags.web = !selectedTags.web"

// 根据选择的按钮过滤项目列表
const filteredProjects = ref([]);
// 根据选择的按钮过滤项目列表
const selectedButtons = ref(['web','ai','大数据']);
const selectionDisabled = ref('');
const selectedStatus = reactive({
  weikaishi:true,       //1
  jinxingzhong:true,    //2
  yiwancheng:true,    //0
  stop:true             //-1
}); // 选择的完成进度
const select = reactive({

})
const data = reactive({
  tags:[],
  isFinish:[]
})
const  clickedButton= ref(null)
// 根据选择的完成进度过滤项目列表
watch(() => selectedButtons.value, (clickedButton) => {
  if (selectedButtons.value === 1){

  }

});

watch(selectedStatus, async (newValue, oldValue) => {
  if (newValue.stop === true) {
    data.isFinish.push(-1)
  }
  if (newValue.jinxingzhong === true) {
    data.isFinish.push(2)
  }
  if (newValue.weikaishi === true ) {
    data.isFinish.push(1)
  }
  if (newValue.yiwancheng === true) {
    data.isFinish.push(0)
  }

  request.projectWorkGet(data)

  data.isFinish = []
})

</script>
