<template>

    <a-breadcrumb>
        <a-breadcrumb-item>我负责的</a-breadcrumb-item>
        <!-- <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
        <a-breadcrumb-item>An Application</a-breadcrumb-item> -->
    </a-breadcrumb>
    <div class="flex flex-row justify-between">
        <div>
            <!-- 第一个是 全部 所以独立出来 -->
            <a-checkable-tag
            v-model:checked="tagAll"
            @change="checked => handleClickAll(checked)"
            >
            全部
            </a-checkable-tag>
            <a-checkable-tag
            v-for="(tag, index) in tagsData"
            :key="tag.id"
            v-model:checked="selectTags[index]"
            @change="checked => handleChange(tag, checked)"
            >
            {{ tag.name }}
            </a-checkable-tag>
        </div>
        <div>
            <a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
        </div>
    </div>
    <div>
        <a-card hoverable style="width: 240px">
          <template #cover>
            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
          </template>
          <a-card-meta title="Europe Street beat">
            <template #description>www.instagram.com</template>
          </a-card-meta>
        </a-card>

    </div>
    <a-tooltip title="添加" class="fixed bottom-0 right-0 m-16">
      <!-- 这里显示错位 只好用flex  -->
        <a-button
         size="large"
         class="bg-sky-300 flex flex-row items-center justify-center"
         shape="circle"
         @click="open = true"
         >
         <template #icon>
          <PlusOutlined class=""/>
        </template>
        </a-button>
        <a-modal v-model:open="open" title="添加项目" @ok="handleOk">
          <a-form
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            layout="horizontal"
            style="max-width: 600px"
          >
            <a-form-item label="项目名称">
              <a-input />
            </a-form-item>
            <a-form-item label="周期">
              <a-input />
            </a-form-item>   
            <a-form-item label="工作量">
              <a-input />
            </a-form-item>          
            <a-form-item label="Checkbox">
              <a-checkbox>checkbox</a-checkbox>
            </a-form-item>
            <a-form-item label="Radio">
              <a-radio-group v-model:value="radioValue">
                <a-radio value="apple">Apple</a-radio>
                <a-radio value="pear">Pear</a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item label="Select">
              <a-select>
                <a-select-option value="demo">Demo</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="TreeSelect">
              <a-tree-select :tree-data="treeData" />
            </a-form-item>
            <a-form-item label="Cascader">
              <a-cascader :options="options" />
            </a-form-item>
            <a-form-item label="DatePicker">
              <a-date-picker />
            </a-form-item>
            <a-form-item label="RangePicker">
              <a-range-picker />
            </a-form-item>
            <a-form-item label="InputNumber">
              <a-input-number />
            </a-form-item>
            <a-form-item label="TextArea">
              <a-textarea :rows="4" />
            </a-form-item>
            <a-form-item label="Switch">
              <a-switch v-model:checked="checked" />
            </a-form-item>
            <a-form-item label="Upload">
              <a-upload action="/upload.do" list-type="picture-card">
                <div>
                  <PlusOutlined />
                  <div style="margin-top: 8px">Upload</div>
                </div>
              </a-upload>
            </a-form-item>
            <a-form-item label="Button">
              <a-button>Button</a-button>
            </a-form-item>
          </a-form>
        </a-modal>
    </a-tooltip>
</template>
<script setup lang="">
import { reactive, ref ,computed,onMounted} from 'vue';
import { h } from 'vue';
import { SearchOutlined,StarOutlined,PlusOutlined } from '@ant-design/icons-vue';

import request from '@/js/request';

const tagsData = ref([]);
const selectTags = ref([false, false, false, false]);

const projStatus = ref();
const tagAll=ref(true)

const token = window.localStorage.getItem('token')

const projList=ref([])




//当选中全部时，其他的都不选中
const handleClickAll=(checked)=>{
  if(checked){
    selectTags.value.forEach((item,index)=>{
      selectTags.value[index]=false
    })
    // 发送获取全部数据的请求
    request.projectGet(token).then(res=>{
      console.log(res.data.data)
    })
  }

}
// 当选中其他的时候， 全部 不选中
const handleChange = (tag, checked) => {
  if(checked){
    tagAll.value=false
  }
  else{
    let flag=true
    selectTags.value.forEach((item,index)=>{
      if(item){
        flag=false
      }
    })
    if(flag){
      tagAll.value=true
    }
  }
};

// 当组件挂载时 请求tag数据
onMounted(
  ()=>{
  
    // 设置标签
    request.getTagsProjectList(token).then(res=>{
      console.log(res.data.data)
      tagsData.value=res.data.data
    })
    // 默认获取全部数据
    request.projectGet(token).then(res=>{
      console.log(res)

    })
  }
)
</script>