<!--
 * @author wangzhuo
 * @update date 2025/9/18 19:38
 * @description 所有人周计划查看
-->
<template>
  <view class="con-body">
    <view class="con-bg">
      <!-- 头部 -->
      <customHeader ref="customHeaderRef" :title="'周计划表'" :leftFlag="true" :rightFlag="true">
        <template #right>
          <!--          <view class="head-right" @click="handleAdd">
                      <uni-icons type="plus" size="24" color="#B7D2FF"></uni-icons>新增
                    </view>-->
        </template>
      </customHeader>

      <!-- 高度来避免头部遮挡 -->
      <view class="top-height"></view>
      <!-- 正文内容 -->
      <view>

        <!-- 搜索 -->
        <view class="search">
          <picker mode="date" :value="defaultDate" :start="startDate" :end="endDate"
                  @change="bindDateChange" class="picker-bg">
            <view class="picker">
              <uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong" size="18"></uni-icons>
              <view>{{ defaultDate }}</view>
              <uni-icons type="down" size="18"></uni-icons>
            </view>
          </picker>
          <picker @change="bindPickerChange" :value="areaIndex" :range="AreaList" class="picker-bg">
            <view class="picker">
              <uni-icons type="person" size="18"></uni-icons>
              <view>{{ AreaList[areaIndex] }}</view>
              <uni-icons type="down" size="18"></uni-icons>
            </view>
          </picker>
<!--          <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>-->
        </view>

        <!-- 分页部分  -->
        <!--        <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"-->
        <!--                      :up="upOption" :down="downOption" :fixed="false" textColor="#ffffff" bgColor="#ffffff"-->
        <!--                      class="scroll-h" :class="{'loading-scroll':cssFlag}">-->
        <view class="white-bg" v-if="list.length">
          <!--v-for="(item, index) in list" :key="index" @click="handleDetail(item)"-->
          <view style="text-align: center; margin-bottom: 30rpx; font-size: 30rpx;">
            {{ (list[0][OrdinalDate[0]] || searchValue.selectDate).substring(5, 7) }}月
            <span class="line"></span>
            {{ (list[0][OrdinalDate[0]] || searchValue.selectDate).substring(0, 4) }}年
          </view>
          <uni-row class="demo-uni-row">
            <uni-col :span="1">
              <view class="demo-uni-col right-radius"></view>
            </uni-col>
            <uni-col :span="2">
              <view class="demo-uni-col left-radius">姓名</view>
            </uni-col>
            <!--日期 星期-->
            <block v-for="(field, i) in OrdinalDate">
              <uni-col :span="3">
                <view class="demo-uni-col mar-left" >
                  <text>{{ WeekShortCN[i] }}</text>
                  <text v-if="list[0][field]" class="font-bold">{{ list[0][field].substring(8) }}</text>
                  <text v-else class="font-bold">{{ getWeek(i) }}</text>
                </view>
              </uni-col>
            </block>
          </uni-row>
          <block v-for="(item, index) in list" :key="index">
            <uni-row class="demo-uni-row">
              <uni-col :span="1">
                <view class="demo-uni-col right-radius">
                  <text>{{ index + 1 }}</text>
                </view>
              </uni-col>
              <uni-col :span="2">
                <view class="demo-uni-col left-radius">
                  <text>{{ item.nickName || item.userName }}</text>
                </view>
              </uni-col>
              <block v-for="(field, i) in WorkType">
                <uni-col :span="3">
                  <view class="demo-uni-col mar-left color-white" @click="handleDetail(index, i)"
                        :style="{ backgroundColor: COLOR_MAP[item[field]] }"
                  ><!--@click="handleView(index, i)"-->
                    <text v-if="item[field]">{{ item[field] }}</text>
                    <text v-else style="font-weight: 300; color: gray">暂无</text>
                  </view>
                </uni-col>
              </block>
            </uni-row>
          </block>
        </view>
        <view v-else style="text-align: center; margin-top: 50%; color: white">
          暂无数据
        </view>
        <!--        </mescroll-uni>-->
      </view>
    </view>
  </view>

  <closeable-modal closeTip=""
                   v-model="modalVisible"
                   :title="modalData.title"
                   :content="modalData.content"
                   :cancelBtn="modalData.showCancel"
                   confirmText="关闭"
                   @success="modalData.success"/>

</template>

<script setup>
import {ref, onMounted} from 'vue'
import customHeader from '@/components/customHeader.vue'
import CloseableModal from "@/components/closeableModal.vue";
import {getNavBarPaddingTop} from '@/utils/system.js'
import {getAllWeekPlanList} from "@/api/crm/plan/getPlan";
import {AreaList, COLOR_MAP, OrdinalDate, WeekShortCN, WorkEvent, WorkType} from "./dataMap";
import {getCurrentWeekNum, getWeek2} from "./dateTimeUtils";
import {getDate} from "@/utils/datetime";
import {getWeekPlanListByDate} from "@/api/crm/plan/getPlan";
import {onPullDownRefresh} from "@dcloudio/uni-app";

// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
  navBarPaddingTop.value = getNavBarPaddingTop() * 2;
  uni.showLoading({})
  getPlanList().then(res => {
    let {total, rows} = res;
    console.log(total, rows, "周计划数据获取成功")
    list.value = rows;
  }).catch((err) => {
    console.warn(err, "周计划数据获取失败")
  }).finally(() => {
    uni.hideLoading();
  })
})

// 开始时间
let startDate = getDate('start');
// 结束时间，间隔10年
let endDate = getDate('end');
let defaultDate = getDate({format: true})
// 区域索引
let areaIndex = ref(0);
// 搜索内容
let searchValue = ref({
  selectDate: defaultDate,
  region: AreaList[areaIndex.value]
});

// 查询列表
let list = ref([]);
// const mescrollRef = ref(null);
onPullDownRefresh(() => {
  uni.showLoading();
  getPlanList().then(res => {
    const {rows} = res;
    list.value = rows;
    console.log(rows,'刷新周计划成功');
  }).finally(()=>{
    uni.stopPullDownRefresh();
    uni.hideLoading();
  })
});

// 查询当前周一周日期
// const currentYear = new Date().getFullYear();
const currentWeekNum = getCurrentWeekNum();
const aweek = getWeek2('本周');
const currentMonth = aweek.month;
console.log(currentWeekNum, '当前周数');
const getWeek = (i) => {
  return aweek[OrdinalDate[i]].substring(7)
}
const queryParams = ref({
  month: currentMonth,
  date: currentWeekNum,
  pageNum: 1,
  pageSize: 10
});
// 获取数据列表
const getPlanList = () => {
  return new Promise(async (resolve) => {
    let {rows, total} = await getAllWeekPlanList(queryParams.value);
    resolve({
      rows,
      total
    });
  });
}

// 搜索日期变更
let bindDateChange = (e) => {
  defaultDate = e.detail.value
  searchValue.value.selectDate = e.detail.value;
  handleSearch();
}

// 查询搜索跳转
let handleSearch = () => {
  console.log(searchValue.value, '查询参数')
  uni.showLoading();
  getWeekPlanListByDate(searchValue.value).then(res => {
    const {total, rows} = res;
    list.value = rows;
    console.log(rows, '查询成功');
  }).catch(err => {
    console.warn(err, '数据获取失败');
  }).finally(() => {
    uni.hideLoading();
  })
}

// 搜索区域变更
const bindPickerChange = (e) => {
  // console.log('picker发送选择改变，携带值为', peopleIndex.value)
  areaIndex.value = e.detail.value
  searchValue.value.region = AreaList[e.detail.value]
  // 查询
  handleSearch();
}
// 模态窗可见性
const modalVisible = ref(false);
// 模态框的配置内容
const modalData = ref({
  title: null,
  content: null,
  showCancel: false,
  success: console.log
});
const showCloseableModal = (param)=>{
  modalVisible.value = true;
  Object.assign(modalData.value, param);
  console.log(modalData.value);
}
// 查看计划详情
const handleDetail = (rowIndex, colIndex) => {
  let detail = list.value[rowIndex];
  let workDate = detail[OrdinalDate[colIndex]];
  let workType = detail[WorkType[colIndex]];
  let workEvent = detail[WorkEvent[colIndex]];
  if (workType && workEvent) {
    showCloseableModal({
      title: `${workType}`,
      content: `姓名：${detail.userName}\n时间：${workDate}\n内容：${workEvent}`
    });
    // uni.showModal({
    //   title: `${workDate}\n${workType}`,
    //   content: `${workEvent}`,
    //   confirmText: '关闭',
    //   showCancel: false,
    //   maskClosable: true, // 允许点击蒙层关闭弹窗
    //   success: console.log
    // })

  } else {
    uni.showToast({
      title: "无计划内容",
      icon: "none",
      duration: 1500
    })
  }
}

</script>

<style lang="scss" scoped>
.demo-uni-row {
  margin-bottom: 4rpx;
  /* QQ、抖音小程序文档写有 :host，但实测不生效 */
  /* 百度小程序没有 :host，需要设置block */
  /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
  display: block;
  /* #endif */
}

/* 支付宝小程序没有 demo-uni-row 层级 */
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
/* #ifdef MP-ALIPAY || MP-WEIXIN */
/deep/ .uni-row {
  margin-bottom: 4rpx;
}

/* #endif */

.search {
  display: flex;
  padding: 0 30rpx;
  height: 68rpx;
  overflow: hidden;
}

.search .btn-search {
  border: none;
  background: none;
  line-height: normal;
  color: #fff;
  /*line-height: 56rpx !important;*/
  padding: 10rpx 0 0;
  text-align: left;
  cursor: pointer;
}

.search .btn-search::after {
  display: none;
}

.search .picker-bg {
  display: flex;
  flex-wrap: nowrap;
  background-color: #6FA2F8;
  border-radius: 25px;
  color: #fff;
  font-size: 28rpx;
  padding: 0rpx 20rpx;
  /* #ifndef APP-PLUS */
  padding: 10rpx 20rpx 0 20rpx;
  /* #endif */
  margin-right: 20rpx;
}

.search .picker-bg .picker {
  display: flex;
  align-items: center;
  /* #ifndef APP-PLUS */
  padding-top: 2rpx;
  /* #endif */
}

.search .picker-bg .picker .uni-icons {
  color: #fff !important;
}

.search .picker-bg .picker .uni-icons:first-child {
  margin-right: 10rpx;
}

.search .picker-bg .picker .uniui-down {
  margin-left: 20rpx;
}

.line {
  display: inline-block;
  width: 10rpx;
  border-right: solid gray 1rpx;
  height: 20rpx;
  margin-right: 10rpx;
}

.demo-uni-col {
  height: 36px;
  border-radius: 4rpx;
  /*background-color: #E7E7E7;*/
  background-color: #e7e7e782;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30rpx;
  line-height: 32rpx;
  padding-top: 10rpx;
  padding-bottom: 13rpx;
  min-height: 130rpx;
  overflow: hidden;
}

.mar-left {
  margin-left: 5rpx;
}

.right-radius {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.left-radius {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.color-white {
  color: white;
}

.white-bg {
  width: 690rpx;
  margin: 20rpx 0 0 0;
  border-radius: 8px 8px 0 0;
  /* #ifdef APP-PLUS */
  min-height: calc(100vh - 160rpx/*.topbar height*/ - 68rpx/*.search height*/ - 40rpx/*.white-bg padding-top*/ - 40rpx /*.white-bg padding-bottom*/
  );
  /* #endif */
  /* #ifndef APP-PLUS */
  min-height: calc(100vh - 116rpx/*.topbar height*/ - 68rpx/*.search height*/ - 40rpx/*.white-bg padding-top*/ - 40rpx /*.white-bg padding-bottom*/
  );
  /* #endif */
}

:deep(.form-con .uni-forms-item) {
  margin-bottom: 22px !important;
}

</style>