/*
 *@description:提货预约
 *@author: hudw
 *@date: 2022-07-07 14:02:01
*/
<template>
  <div class="pages">
    <a-page-header style="background-color: #fff; margin-bottom: 10px" :bordered="false">
      <a-space slot="title"> <a-icon type="arrow-left" @click="onBack" :style="{ color: '#08c' }" />提货预约</a-space>
      <p-grid-form ref="grid" layout="inline" style="margin-bottom: 10px" selfUpdate>
        <p-grid-form-item label="仓库名称" style="padding-right: 20px">
          {{ branchName }}
        </p-grid-form-item>
        <p-grid-form-item label="日期">
          {{ $moment().format('LL dddd') }}
        </p-grid-form-item>
        <p-grid-form-item label="">
          <a-alert message="提示：请选择日期，将显示当日可预约时间段" type="info" show-icon />
        </p-grid-form-item>
      </p-grid-form>
    </a-page-header>
    <a-card :loading="loading" :bordered="false">
      <a-space>
        <div :class="['date-item', targetIndex === i && 'date-item-active']" v-for="(item, i) in sysConfig" :key="i" @click="handelClick($event, i, item)">
          <div class="week">
            {{ item.aptWeek }}
          </div>
          <div class="month">
            {{ $moment(item.aptDate).format('MM月DD日') }}
          </div>
        </div>
      </a-space>
    </a-card>
    <a-card v-show="!togglePage" :loading="loading" :bordered="false">
      <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 6 }" :data-source="currentTimeItem" style="margin-top: 20px">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card>
            <div slot="title" style="text-align: center; font-size: 16px">
              <a-badge :color="item.appAliCnt === 0 ? 'pink' : 'cyan'" />
              {{ item.appDura }}
            </div>
            <div style="padding: 0 10px 10px">
              <a-statistic class="statistic-flex" title="可预约:" :value="item.appAliCnt" />
              <a-statistic class="statistic-flex" title="已预约:" :value="item.appedCnt" />
            </div>
            <p-button type="primary" style="width: 100%" @click="yueClick($event, item)" :disabled="item.appAliCnt === 0">{{ item.appAliCnt === 0 ? '约满' : '预约' }}</p-button>
          </a-card>
        </a-list-item>
      </a-list>
    </a-card>
    <a-card v-show="togglePage" :bordered="false" title="预约信息">
      <a-space slot="extra">
        <p-button
          type="link"
          :icon="toggleTable ? 'up' : 'down'"
          @click="
            () => {
              toggleTable = !toggleTable
            }
          "
          >{{ toggleTable ? '展开' : '收缩' }}</p-button
        >
        <p-button
          style="width: 100px"
          @click="
            () => {
              togglePage = false
            }
          "
          >取消预约</p-button
        >
        <p-button type="primary" style="width: 100px" @click="appointmentConfirm">预约确认</p-button>
      </a-space>
      <a-row style="margin-bottom: 10px">
        <a-col :span="12">
          <p-grid-form ref="grid2" :items="paiCeItems" selfUpdate />
        </a-col>
        <a-col :span="12">
          <a-alert message="提示" type="info" show-icon>
            <p slot="description" style="padding-top: 10px">
              1、请核对您的预约信息，以免造成预约失败！
              <br />
              2、预约确认后，请等待预约审核，您可以在【园区管理】-【预约管理】界面跟踪预约信息。
              <br />
              3、提货当天，请出示证件给门卫。
              <br />
              4、请在提货当天预约时间段内配合门卫取号（门卫处）。
              <br />
              5、如需取消预约，请在提货之前**之内在 【园区管理】-【我的预约】界面取消。
              <br />
              6、预约优先，按号提货。
              <br />
              7、未在预约时间内获取排队号将不再享受优先提货。
            </p>
          </a-alert>
        </a-col>
      </a-row>
      <shipbillTable v-show="toggleTable" autoColWidth ref="shipbillTable" @view="handleView" rowKey="_row_count" :url="confirmShipbillTableUrl" :autoLoad="false" :options="options" :tableExtendedField="[]" />
    </a-card>
  </div>
</template>
<script>
import { queryAppointment, confirmShipbillTableUrl, appointment_confirm, goodsTableUrl, packageTableUrl } from '../api.js'

import { setPaiCeItems } from './config.js'
const goods = {
  url: goodsTableUrl,
}
const parcel = {
  url: packageTableUrl,
}
export default {
  components: {
    shipbillTable: () => import(/* webpackChunkName: "[request]" */ '@/views/TMS/transportation/$common/shipbillTable/index.shipbillTable.vue'),
  },
  props: {
    st: {
      type: Number,
      default: 0,
    },
    options: {
      type: null,
    },
    record: {
      type: null,
    },
    portName: {
      type: String,
      default: 'waitLoadingAndUnloading',
    },
  },
  watch: {
    st(value) {
      if (value === 5 && this.record) {
        let { appointmentWeeks, branchName, form, params } = this.record
        this.sysConfig = appointmentWeeks
        this.branchName = branchName
        this.formData = form
        this.params = params
      }
    },
  },
  data() {
    return {
      parcel,
      goods,
      confirmShipbillTableUrl,
      branchName: '',
      formData: null,
      paiCeItems: setPaiCeItems(this),
      sysConfig: null,
      targetIndex: 0,
      loading: false,
      togglePage: false,
      toggleTable: true,
      params: null,
      viewShow: false,
    }
  },
  mounted() {},
  computed: {
    currentTimeItem() {
      if (this.sysConfig?.length > 0 && this.targetIndex > -1) {
        return this.sysConfig[this.targetIndex]?.appointmentTimes
      }
      return []
    },
  },
  methods: {
    viewBack() {},
    handleView(record) {
      this.$emit('view', 3, record)
    },
    form() {
      return this.$refs.grid.form
    },
    handelClick(event, i) {
      this.loading = true
      return queryAppointment(this, this.params).then((result) => {
        this.loading = false
        if (result.success) {
          this.targetIndex = i
          this.togglePage = false
        }
      })
    },
    appointmentConfirm() {
      return appointment_confirm(this, this.formData)
    },
    onBack(...args) {
      this.togglePage = false
      this.$refs.shipbillTable.tData = []
      this.formData = null
      this.branchName = ''
      this.sysConfig = null
      this.params = null
      this.targetIndex = 0
      this.$parent.currentMainData = null
      this.$emit('back', ...args)
    },
    yueClick(event, item) {
      let data = this.sysConfig[this.targetIndex]
      this.formData.appointmentDate = data.aptDate
      this.formData.appointmentTime = item.appDura
      let form = this.$refs.grid2.form
      form.setFieldsValue({ ...this.formData, dateTime: data.aptDate + '\n\n' + item.appDura })
      this.$refs.shipbillTable.reload({ data: { shipbillIds: this.formData.shipbillIds?.split(',') } })
      this.togglePage = true
    },
  },
}
</script>
<style lang='less'>
@import '~ant-design-vue/es/style/themes/default.less';
.statistic-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}
.date-item {
  cursor: pointer;
  &&-active {
    background: @primary-color;
    .week {
      color: #ffffff;
    }
    .month {
      color: rgba(255, 255, 255, 0.6);
    }
  }
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  width: 90px;
  line-height: 2;
  .week {
    font-size: 14px;
  }
  .month {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.3);
  }
  //height: 80px;
}
</style>
