/*
 *@description:运单日历
 *@author: hudw
 *@date: 2023-06-28 15:45:50
*/
<template>

    <p-button  class="calendarBtn" type="primary" @click="handClick">
      <!-- <a-icon type="carry-out" /> -->
      计划日历

      <a-modal
      :closable="true"
      :width="'80%'"
      v-model="show"
      :footer="null"
    >
    <p-calendar
      class="plan-calendar"
      mode="week"
      :spinning="loading"
      @panelChange="onPanelChange"
      @change="change"
    >
    <template slot="dateCellRender" slot-scope="value">
      <div :class="s_mode=='week'&&'plan-block'" v-for="item,index in resultItem(value)" size="small" :key="index" @click="handleItemClick($event,item)">
        <template v-if="s_mode=='week'">
          <p style="margin-bottom: 5px;" v-if="item.isTransfiniteName"> <a-badge :numberStyle="{boxShadow:'none'}" :count="item.isTransfiniteName" :overflowCount="Infinity"/> </p>
          <p><label>计划单: </label> {{ item.planBillNo }}</p>
          <p><label>订单号: </label> {{ item.orderNo }}</p>
          <p> <label>箱数(计划/实际): </label>{{ item.totalPcs }}</p>
          <p><label>车数(计划/实际): </label> {{ item.totalVehicleNumber }}</p>
          <p> <label>待发运情况:</label> {{ item.deliveryDescription }}</p>
          <p> <label>超限提交日期:</label> {{ item.transfiniteCommitDate }}</p>
          <p> <label>超限说明:</label> {{ item.transfiniteDescription }}</p>

        </template>

        <template v-else-if="s_mode=='month'">
          <p><label>计划车数: </label> {{ item.planTotalVehicleNumber }}</p>
          <p> <label>实到车数: </label>{{ item.actualTotalVehicleNumber }}</p>
          <p> <label>计划箱数:</label> {{ item.planTotalPcs }}</p>
          <p> <label>实发箱数:</label> {{ item.actualTotalPcs }}</p>
        </template>
      </div>
    </template>

    </p-calendar>
    </a-modal>
    </p-button>





</template>

<script>
import { getWee ,getMonth} from './api';
export default {
  name: 'plan-calendar',
  data() {
    this.dateCellList = [];

    return {
      s_mode: 'week',
      loading: false,
      contentList: {},
      show:false
    };
  },
  watch: {
    show(v) {

    }
  },
  mounted() {},
  methods: {
    handClick() {
      this.show = true;
      this.onPanelChange(null,this.s_mode)
    },
    handleItemClick($event, item) {
      let { planDate } = item
         planDate= this.moment(planDate).format('YYYY-MM-DD')
      let planDeliveryStartDate=planDate,planDeliveryEndDate= planDate
        let routeUrl = this.$router.resolve({
          path: '/localDetails',
          query: {planDeliveryStartDate,planDeliveryEndDate,messageType:'planOrder'},
        });
        return window.open(routeUrl.href, '_blank');

    },
    resultItem(moment) {
     let str= moment.format('YYYY-MM-DD')
      this.dateCellList.push(str);
      let planBillDTOS = this.contentList[str]?.planBillDTOS??[]

      return planBillDTOS


    },
    onPanelChange(val, mode) {
      this.s_mode = mode;
      this.dateCellList = [];
      this.contentList={}
      this.$nextTick(() => {
        let fn
        if (this.s_mode == 'week') {
          fn= getWee
        } else {
          fn= getMonth
        }
        let [planStartDate] = this.dateCellList;
        let _this= this;

        fn(this, { planStartDate: planStartDate, planEndDate: this.dateCellList[this.dateCellList.length-1]}).then((list) => {
          if (list) {
                let contentList ={}
                list.forEach(data => {
                  contentList[data.planDate]=data
                })
                _this.contentList=contentList

            }
          });
      });
    },
    select(date) {
      console.log('select', date.format('yyyy-MM-dd'));
    },
    change(date) {
      console.log('date', date.format('yyyy-MM-dd'));
    },
    monthFullCellRender(moment) {
      console.log('monthFullCellRender', moment.format('yyyy-MM-dd'));
    },
    toggleWeek(dataList) {
      if (this.s_mode == 'week') {
      }
      //console.log('toggleWeek',dataList);
    },
  },
};
</script>
<style lang='less'>
.plan-calendar {
  // position: fixed;
  // background: #fff;
  // z-index: 6;
  // width: 920px;
  // height: calc(100vh - 153px);
  // right: 0;
  // border: 1px solid #e8e8e8;
  // box-shadow: 6px 6px 6px -4px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;

  .ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value,
  .ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-value {
    background: transparent;
  }
  p{
    margin-bottom:0;
    label{
        color:rgba(0,0,0,.5);

      }
  }

  .plan-block{
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    margin-bottom: 5px;
    padding:5px;

    &:hover{
      label{
        color:rgba(255,255,255,.8);

      }
      background-color: #2b80ff;
      color: #fff;
    }

  }
}
.calendarBtn {
  position: fixed;
  z-index: 5;
  letter-spacing: 0.3em;
  height: 100px;
  writing-mode: vertical-rl;
  right: 0;
  top: 40%;
  padding: 0 6px;
  span{
    writing-mode: vertical-lr;
  }
}
</style>
