<template>
  <div class="page-content tabbar-list top-select-list" ref="pageContent">
    <div class="addDiv success-background-color" v-if="isAuth('calendar:update')"
      @click=" $router.push({ name: 'add-or-update-meeting' , query: { addDay: selectDay } })">
      <div class="text-center addDiv1">新增</div>
      <div class="text-center addDiv2">会议</div>
    </div>
    <div class="top-select border-bottom-1">
      <van-dropdown-menu>
        <van-dropdown-item :title="searchContent" ref="itemRef">
          <van-field v-model="search" placeholder="搜索" :right-icon="search ? 'clear' : ''"
            @click-right-icon.stop="clearSearch" />
          <div style="padding: 5px 16px;">
            <van-button type="primary" size="small" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item v-model="meetingType" :options="meetingTypeList" @change="getMeetingList" />
        <van-dropdown-item v-model="createUser" :options="createUserList" @change="getMeetingList" />
      </van-dropdown-menu>
    </div>
    <van-calendar title="" :poppable="false" :show-confirm="false" switch-mode="year-month" first-day-of-week="1"
      :style="{ height: '410px' }" :formatter="formatter" :default-date="defaultDate" @panel-change="panelChange"
      @select="onDateConfirm">
    </van-calendar>
    <div v-if="list.length > 0">
      <van-cell v-for="item in list" :key="item.meetingId"
        @click="$router.push({ name: 'meeting-detail', query: { meetingId: item.meetingId } })">
        <div class="text-start activeColor sub-title">{{ item.meetingHour }}</div>
        <div class="normal-title text-start balck-text-color mb-5 mt-5">{{ item.meetingTitle }}</div>
        <div class="text-end">
          <van-tag type="primary" size="medium">{{ item.meetingTypeName }}</van-tag>
          <van-tag type="danger" class="ms-10" size="medium">{{ item.meetingByName }}</van-tag>
        </div>
      </van-cell>
    </div>
    <van-empty v-else description="暂无会议" />
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { sysDicListByType, workMeetingList, workMeetingInfo, workStaffLookup } from '@/utils/api'
import { convertToUrl } from '@/utils'
import { scrollList } from '@/mixins/scroll-list'
import { isAuth } from '@/utils/index'

let search = ref('')
let searchContent = ref('搜索')
let itemRef = ref()
const clearSearch = () => {
  search.value = ''
  searchContent.value = '搜索'
}
const onConfirm = () => {
  searchContent.value = search.value || '搜索'
  itemRef.value.toggle()
  getMeetingList()
}

let meetingType = ref('1,2,3,16,17,4,5,15,6,10,11,12,13,14,7')
let meetingTypeList: any = ref([])
const getMeetingTypeList = async () => {
  const { data } = await sysDicListByType({ dicType: 'meeting_type' })
  meetingTypeList.value = data.map((ele: any) => {
    ele.text = ele.dicValue
    ele.value = ele.dicKey
    return ele
  })
  meetingTypeList.value.unshift({ text: '全部类型', value: '1,2,3,16,17,4,5,15,6,10,11,12,13,14,7' })
}
getMeetingTypeList()

let createUser = ref('')
let createUserList: any = ref([])
const getCreateUserList = async () => {
  const { data } = await workStaffLookup()
  createUserList.value = data.map((ele: any) => {
    ele.text = ele.staffName
    ele.value = ele.staffId
    return ele
  })
  createUserList.value.unshift({ text: '全部创建人', value: '' })
}
getCreateUserList()

let defaultDate = ref()
import moment from 'moment'
const panelChange = (e: any) => {
  dateBegin.value = moment(e.date).startOf('month').format('YYYY-MM-DD')
  dateEnd.value = moment(e.date).endOf('month').format('YYYY-MM-DD')
  getMeetingList()
}

const onDateConfirm = (e: any) => {
  defaultDate.value = e
  getList()
}

let list: any = ref([])
let selectDay = ref('')
const getList = () => {
  list.value = []
  selectDay.value = moment(defaultDate.value).format('YYYY-MM-DD')
  meetingList.value.forEach((ele: any) => {
    if (ele.meetingDate === selectDay.value) {
      list.value = ele.list
    }
  })
}

const formatter = computed(() => {
  if (meetingList.value.length === 0) {
    return (day: any) => day
  }
  return (day: any) => {
    let time = moment(day.date).format('YYYY-MM-DD')
    meetingList.value.forEach((ele: any) => {
      if (ele.meetingDate === time) {
        day.topInfo = ele.num
      }
    })
    return day
  }
})

const dateBegin = ref()
const dateEnd = ref()
const meetingList: any = ref([])
const getMeetingList = async () => {
  let url = getMeetingParams()
  const { data } = await workMeetingList(url)
  let map = new Map()
  data.forEach((item: any, index: any, arr: any) => {
    if (!map.has(item.meetingDate)) {
      map.set(
        item.meetingDate,
        arr.filter((a: any) => a.meetingDate == item.meetingDate)
      )
    }
  })
  let res = Array.from(map).map((item) => [...item[1]])
  meetingList.value = []
  res.forEach((ele: any) => {
    meetingList.value.push({ meetingDate: ele[0].meetingDate, num: ele.length, list: ele })
  })
  getList()
}

const getMeetingParams = () => {
  const res = {
    dateBegin: dateBegin.value,
    dateEnd: dateEnd.value,
    createUser: createUser.value,
    cusName: search.value,
    meetingType: meetingType.value
  }
  const url = convertToUrl(res)
  return url
}

let pageContent = ref(null)
const scrollPosition = ref(0)
const refresh = async (type: any, id: any) => {
  if (type === 'delete' || type === 'refresh') {
    let dayIndex = meetingList.value.findIndex((ele: any) => {
      return ele.meetingDate === selectDay.value
    })
    if (dayIndex > -1) {
      let index = meetingList.value[dayIndex].list.findIndex((ele: any) => {
        return Number(ele.meetingId) === Number(id)
      })
      if (type === 'delete') {
        if (index > -1) {
          meetingList.value[dayIndex].list.splice(index, 1)
          meetingList.value[dayIndex].num -= 1
        }
      } else {
        if (index > -1) {
          const { data } = await workMeetingInfo(id)
          meetingList.value[dayIndex].list[index] = data
        }
        getList()
      }
    }
  } else {
    defaultDate.value = new Date()
    dateBegin.value = moment().startOf('month').format('YYYY-MM-DD')
    dateEnd.value = moment().endOf('month').format('YYYY-MM-DD')
    getMeetingList()
  }
}
const { setScrollTop, setScrollPositionAndRefreshFlag } = scrollList(pageContent, scrollPosition, refresh)
setScrollTop()
import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from) => {
  setScrollPositionAndRefreshFlag(to, 'meeting-detail')
})
</script>

<style lang='scss' scoped>
:deep(.van-calendar__header-title) {
  display: none;
}

:deep(.van-calendar__day) {
  border: 1px solid #f2f2f2;
  margin-bottom: 0;
}

:deep(.van-calendar__top-info) {
  width: 14px;
  left: calc(100vw / 7 - 18px);
  border-radius: 100%;
  background-color: #f56c6c;
  color: #fff;

  @media screen and (min-width: 678px) {
    left: 74px;
  }
}

:deep(.van-calendar__selected-day) {
  width: 100%;
  height: 100%;
}

.item {
  width: 100%;
  text-align: center;
}

.meetingList {
  overflow-y: auto;
  height: calc(100vh - 160px);
}
</style>
