<script setup>
import { ref, reactive,toRefs,onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { Icon, Toast,TreeSelect,Popup,Cascader } from 'vant';
import moment from 'moment';
import 'moment/dist/locale/zh-cn';
moment.locale('zh-cn');

import { sellerEvents,sellerList} from '@/api/ssbg/api';
import Calendar from '../components/calendar.vue';


const route = useRoute();
localStorage.setItem('ssbg-token',route.query.token ||  '5e532bc5fa7281aebaa6d89960b54c4ab22f1ab18e969258c634a7940fdb0922');

const actionsList = ref([
  {
    label: '今天',
    key: 'weeknow',
    img: import("@/assets/ssbg/calendar_ico.png"),
  },
  {
    label: '选择销售员',
    key: 'choose',
    img: import("@/assets/ssbg/choose_ico.png"),
  },
]);

const calendarRef = ref(null);

const state = reactive({
  selectResearcher: '', // 选中的研究员
  eventList: [],//日程信息
});

/* 获取日历日程列表 */
const getEventList = async () => {
  if(!selectUserValue.value) return

  const { currentStart } = calendarRef.value.calendarApi.view;

  const { code,data } = await sellerEvents({
    StartDate: moment(currentStart).format('YYYY-MM-DD'),
    EndDate: moment(currentStart).format('YYYY-MM-DD'),
    SellerId: Number(selectUserValue.value)
  })

  if(code !== 200) return

  state.eventList = [
    ...(data.CalendarList || []),
    ...(data.RsMattersList || []),
  ].map((item, index) => ( { ...item, id: index }));
};

/* 点击日历表格添加活动 */
const cellClickHandle = (date) => {
    //啥也不干
};

/* 底部操作 */
const dealActionHandler = (type) => {
  const deal_methods_handles = {
    add: addActivityHandleByBtn,
    weeknow: toogeCurrentWeek,
    choose: selectSellerHandle,
  };
  deal_methods_handles[type]();
};

/* 点击按钮添加活动 */
const addActivityHandleByBtn = () => {
  wx.miniProgram.navigateTo({
    url: '/pages-roadshow/addActivity/index',
  });
};

/* 切换为今天 */
const toogeCurrentWeek = () => {
  calendarRef.value.toogeCurrentWeek();
};

// 选择用户
const userFieldNames=ref({
    text: 'AdminName',
    value: 'AdminId',
    children: 'Child',
})
let selectUserValue=ref('')
let isSellerPicker=ref(false)
let userOpts=ref([])
// 获取系统中所有用户’
const getSellerList = ()=>{
    sellerList().then(res=>{
        if(res.code==200){
            userOpts.value=res.data.List||[]
            userOpts.value = userOpts.value.map(i=>{
                if(!i.AdminName){
                    i.AdminName = i.GroupName
                }
                if(!i.AdminId){
                    i.AdminId = i.GroupId
                }
                return i
                })
        }
    })
}
const selectSellerHandle = ()=>{
    isSellerPicker.value = true
}

const onFinish = (e)=>{
    getEventList()
    isSellerPicker.value=false
}
onMounted(() => {
    getSellerList()
})

const { eventList } = toRefs(state);

document.title = '销售员日历';
</script>

<!--  -->
<template>
  <div class="rs-container">
    <Calendar 
      ref="calendarRef"
      :eventList="eventList"
      :selectUserValue="Number(selectUserValue)"
      @dateChange="getEventList" 
      @cellClick="cellClickHandle" 
    />
    <!-- v-if="isWxprogram()" -->
    <div class="fix-action" >
      <ul class="action-ul">
        <li
          v-for="item in actionsList"
          key="item.key"
          @click="dealActionHandler(item.key)"
        >
          <Icon :name="item.icon" class="item-icon" v-if="item.icon" />
          <img
            class="item-img"
            src="@/assets/ssbg/calendar_ico.png"
            alt=""
            v-else-if="item.key === 'weeknow'"
          />
          <img
            class="item-img"
            src="@/assets/ssbg/choose_ico.png"
            alt=""
            v-else-if="item.key === 'choose'"
          />
          {{ item.label }}
        </li>
      </ul>
    </div>
    <!-- 选择销售员 -->
    <Popup v-model:show="isSellerPicker" position="bottom">
        <Cascader
            v-model="selectUserValue"
            title="请选择用户"
            :options="userOpts"
            :field-names="userFieldNames"
            active-color="#3385FF"
            @close="isSellerPicker = false"
            @finish="onFinish"
        />
    </Popup>
  </div>
</template>

<style scoped lang="scss">
.rs-container {
  .fix-action {
    height: 160px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: #fff;
    box-shadow: 0px -3px 6px rgba(172, 172, 172, 0.16);
    padding-top: 20px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .action-ul {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #3385ff;
      li:hover {
        opacity: 0.8;
      }
      .item-icon {
        font-size: 52px;
        display: block;
        text-align: center;
        margin: 0 auto 10px;
      }
      .item-img {
        display: block;
        width: 46px;
        height: 46px;
        margin: 0 auto 10px;
      }
    }
  }

  .select-rs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;

    .cancel {
      color: #969799;
    }

    .ensure {
      color: #576b95;
    }
  }

  .van-tree-select {
		::v-deep(.van-sidebar-item--select:before) {
			background-color: #1989fa;
		}

		::v-deep(.van-tree-select__item--active) {
			color: #1989fa;
		}

    ::v-deep(.van-tree-select__selected) {
      position: absolute !important;
    }

	}
}
</style>
