//setup语法糖不可以使用beforeRouteEnter

<!-- //setup语法糖不可以使用beforeRouteEnter,
所以要添加vue2的script来实现路由跳转前的事件处理。 -->
<!-- vue3中如果使用vue2的语法 也要使用vue2的方法 -->

<template>
    <!-- <span style="font-style:initial;font-size:12px;color: #303133;">我的工作</span> -->
    <!-- <el-button @click="onAddArticle">项目管理</el-button> -->
    <div class="worktable-header">
        <div class="worktable-header__left"><span class="worktable-header__title" style="">我的工作</span></div>
        <div class="worktable-header__right">
            <div class="worktable-tab-right">
                <div class="worktable-tab__group"><span class="group__label"><span class="label-icon tapd-icon-group-v2" style=""></span><span class="label-text">分组</span></span>
                    <ul class="tab-select">
                        <li class="tab-select__item "><span class="tab-select__item-label"><span class="tab-select__item-icon tapd-icon-space-v2"></span>空间</span></li>
                        <li class="tab-select__item"><span class="tab-select__item-label"><span class="tab-select__item-icon tapd-icon-clock-v2"></span>时间</span></li>
                        <li class="tab-select__item"><span class="tab-select__item-label"><span class="tab-select__item-icon tapd-icon-type-v2"></span>类别</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <el-row style="padding-top: 10px;
    border-bottom: 1px solid #e8e9ec;margin-bottom: 10px;padding-bottom: 10px; ">
        <!-- 添加工作按钮 -->
        <el-button style="padding: 0px 20px;"  @click="onAddWork"> 添加工作</el-button> 
        <span style="padding-right:10px;font-style:solid;font-size:20px;color: #303133;">|</span>

        <router-link to="/project/manage/mywork">
          <el-button ref="myWorkButtonRef" @click="toDo" round >待办</el-button>
        </router-link>
        <router-link to="/project/manage/mywork1">
          <el-button @click="Done" round>已办</el-button>
        </router-link>
        <router-link to="/project/manage/mywork2">
          <el-button round>已创建</el-button>
        </router-link>
        <router-link to="/project/manage/mywork">
        <el-button round>已加入</el-button>
        </router-link>
    </el-row>
    <router-view></router-view>  
    <AddWorkDraw  @success="onSuccess" ref="addWorkRef"></AddWorkDraw>
    <Drawer @success="onSuccess" ref="articleRef" />
</template>


<!-- //setup语法糖不可以使用beforeRouteEnter,因为setup语法糖会在组件渲染之前执行，
而beforeRouteEnter是在路由跳转前执行，所以会导致路由跳转失败。
所以要添加vue2的script来实现路由跳转前的事件处理。 -->
<!-- vue3中如果使用vue2的语法 也要使用vue2的方法 -->
<script lang="ts">
    // @ts-ignore
    import AddWorkDraw from '@/views/projectManage/mywork/components/addWork.vue'
    // @ts-ignore
    import { artDelService, GetArtList } from '@/api/article.js'
    // @ts-ignore
    import { formatTime } from '@/utils/format.js'
    import { nextTick, onMounted, ref, toRef, watch} from 'vue'
    import Drawer from '../../Drawer.vue'
    import { Delete, Edit } from '@element-plus/icons-vue'
    import router from '../../../router'
    import { onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'


   export default {
        data() {
            return {
            articleList: [],
            articleRef: null,
            clickState:ref(false)
            };
        },
        components: {
            AddWorkDraw,
            Drawer,
            Delete,
            Edit
        },

        // 路由进入之前this未定义
        // beforeRouteEnter(to, from, next) {
        //     console.log('beforeRouteEnter');
        //     this.refreshTheDefaultClickEvent();
        //     next();
        // },

        // beforeRouteLeave(to, from, next) {
        //         console.log('beforeRouteleave');
        //         this.refreshTheDefaultClickEvent();
        //         next();
        // },

        mounted() {
            console.log(this); 
            this.refreshTheDefaultClickEvent();
        },

        watch: {
            clickState(newValue, oldValue) {
                if (!newValue) {
                    // console.log('点击事件状态改变为：未点击',this.$refs.myWorkButtonRef.$el);
                    this.$refs.myWorkButtonRef.$el.style.removeProperty('background-color'); // 移除颜色样式
                }
            }
        },
        methods: {
            refreshTheDefaultClickEvent() {
                this.$nextTick(() => {
                    const dom = this.$refs.myWorkButtonRef.$el;
                    dom.click(); // 点击事件
                    dom.style.cssText = "background-color:#ecf5ff;"; // 改变颜色样式
                });
            },


            onAddWork() {
                this.clickState = !this.clickState;
                this.$refs.addWorkRef.open();
            },

            toDo() {
                this.clickState = !this.clickState;
            },
            Done() {
                this.clickState = !this.clickState;
            },
            onEditArticle(row) {
            this.articleRef.open(row);
            },
            onSuccess() {
            const res = GetArtList(); // 假设 GetArtList 是全局定义的获取文章列表的方法
            res.then((res) => {
                this.articleList = res.data.data;
            });
            }
        }
    };
</script> 


<!-- <script lang = 'ts' setup>
// @ts-ignore
import AddWorkDraw from '@/views/projectManage/mywork/components/addWork.vue'
// @ts-ignore
import { artDelService, GetArtList } from '@/api/article.js'
// @ts-ignore
import { formatTime } from '@/utils/format.js'
import { nextTick, onMounted, ref, toRef, watch} from 'vue'
import Drawer from '../../Drawer.vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import router from '../../../router'
import { onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'

const articleList = ref([

])
const articleRef = ref()

const myWorkButtonRef = ref();

//获取路由实例router.currentRoute.value
//组件加载完成使用刷新页面默认点击方法
onMounted(() => {
    refreshTheDefaultClickEvent();
    // console.log('vm',router.currentRoute);
    
})


//刷新页面默认点击待办事件
const refreshTheDefaultClickEvent = () => {
    nextTick()
    const dom = myWorkButtonRef.value.$el
    dom.click() //点击事件
    dom.style.cssText = "background-color:#ecf5ff;" // 改变颜色样式
//  console.log('myWorkButtonRef.value.$el',myWorkButtonRef.value.$el);
}


//监听其他点击事件 取消刷新页面默认点击事件
const clickState = ref(false);
watch(clickState, (newValue, oldValue) => {
  //如果新的值为false，则执行点击事件
  if (!newValue) {
    console.log('点击事件状态改变为：未点击');
    myWorkButtonRef.value.$el.style.removeProperty('background-color'); // 移除颜色样式
  }
});

//绑定子组件dom对象
const addWorkRef = ref()
//调用addWorkRef组件的open方法打开抽屉
const onAddWork = () => {
  clickState.value = !clickState.value;
  addWorkRef.value.open()
}

const toDo = () => {
  clickState.value = !clickState.value;
    
}

const Done = () => {
  clickState.value = !clickState.value;

}


const onEditArticle = (row) => {
  articleRef.value.open(row)

}
const onSuccess = () => {
 
  const res = GetArtList()
  res.then((res) => {
      articleList.value = res.data.data
  })
}



// const onDeleteArticle = async (row) => {
//   await ElMessageBox.confirm('你确认删除该文章信息吗？', '温馨提示', {
//       type: 'warning',
//       confirmButtonText: '确认',
//       cancelButtonText: '取消'
//   })
//   console.log("row is", row);

//   await artDelService(row)
//   ElMessage({ type: 'success', message: '删除成功' })
//   const res = GetArtList()
//   res.then((res) => {
//       articleList.value = res.data.data
//   })
// }
</script> -->