<template>
  <view class="page">
    <scroll-view class="scroll" scroll-y>
      <view class="detail-page">
        <view class="section">
          <text class="row company">{{ form.customerName }}</text>
          <view :class="['status', `status_${form.status}`]" />
          <view class="row"><text class="label">原发货日期</text><text class="value">{{ form.shipmentsDate }}</text></view>
          <view class="row"><text class="label">实际发货日期</text><text class="value">{{ form.newShipmentDate }}</text></view>
          <view class="row"><text class="label">生产厂</text><text class="value">{{ form.workshopName }}</text></view>
          <view class="row"><text class="label">办事处</text><text class="value">{{ form.deptName }}</text></view>
          <view class="row"><text class="label">区域</text><text class="value">{{ form.regionName }}</text></view>
          <view class="row"><text class="label">交货方式</text><text class="value">{{ form.deliveryType }}</text></view>
          <view class="row"><text class="label">目的地</text><text class="value">{{ form.destination }}</text></view>
          <view class="row"><text class="label">是否当日发货</text><text class="value">{{ form.onTimeShipment === true ? '是' : (form.onTimeShipment === false ? '否' : '') }}</text></view>
        </view>

        <!-- 产品 -->
        <view class="section2">
          <Product mode="view" :status="form.status" :list="form.detailList" @applyDelay="applyDelayFun"
            @split="splitFun" />
        </view>
        <view class="section">
          <view class="row"><text class="label">签收单据</text><text class="value act" @click="downloadFile(form.fileId, form.fileName)">{{ form.fileName }}</text></view>
        </view>
      </view>
    </scroll-view>
    <detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
    <uni-popup ref="uploadPopup" type="bottom" :mask-click="false">
      <view class="dialog">
        <view class="dialog_header">
          <text>上传签收单据</text>
          <view class="dialog_close" @click="closeUploadInfo"></view>
        </view>
        <view class="dialog_body">
          <view class="dialog_row">
            <text class="dialog_label">签收单据</text>
            <FileUpload v-model="uploadFile" />
          </view>
        </view>
        <view class="dialog_footer">
          <button class="btn confirm" type="primary" @click="onUploadSave">保存</button>
        </view>
      </view>
    </uni-popup>
    <!-- 填写日期 -->
    <uni-popup ref="fillDatePopup" type="bottom" :mask-click="false">
      <view class="dialog">
        <view class="dialog_header">
          <text>填写日期</text>
          <view class="dialog_close" @click="closeFillDateInfo"></view>
        </view>
        <view class="dialog_body fill-data_body">
          <uni-list>
            <uni-list-item title="原发货日期">
              <template v-slot:footer>
                <view class="value">{{ fillDateForm.shipmentsDate }}</view>
              </template>
            </uni-list-item>
            <uni-list-item>
              <template v-slot:body>
								<view class="item-title"><text class="required">*</text><text>实际发货日期</text></view>
							</template>
              <template v-slot:footer>
                <uni-datetime-picker type="date" :start="todayDate"
                  v-model="fillDateForm.newShipmentDate" />
              </template>
            </uni-list-item>
          </uni-list>
        </view>
        <view class="dialog_footer">
          <button class="btn confirm" type="primary" @click="onFillDateSave">保存</button>
        </view>
      </view>
    </uni-popup>
    <!-- 申请延期 -->
    <uni-popup ref="applyDelayPopup" type="bottom" :mask-click="false">
      <view class="dialog">
        <view class="dialog_header">
          <text>申请延期</text>
          <view class="dialog_close" @click="closeApplyDelay"></view>
        </view>
        <view class="dialog_body">
          <uni-list>
            <uni-list-item title="订单编号">
              <template v-slot:footer>
                <view class="value">{{ applyDelayForm.orderNo }}</view>
              </template>
            </uni-list-item>
            <uni-list-item title="原订单计划发货日期">
              <template v-slot:footer>
                <view class="value">{{ applyDelayForm.shipmentsDate }}</view>
              </template>
            </uni-list-item>
            <uni-list-item title="现申请发货日期">
              <template v-slot:footer>
                <uni-datetime-picker type="date" :start="getStartDate(applyDelayForm.shipmentsDate)"
                  v-model="applyDelayForm.applyShipmentDate" />
              </template>
            </uni-list-item>
            <uni-list-item title="延期原因">
              <template v-slot:footer>
                <uni-easyinput v-model="applyDelayForm.delayReason" placeholder="请输入延期原因" :inputBorder="false" />
              </template>
            </uni-list-item>
            <uni-list-item title="申请次数">
              <template v-slot:footer>
                <view class="value">{{ applyDelayForm.applyCount }}</view>
              </template>
            </uni-list-item>
            <uni-list-item title="订单类型">
              <template v-slot:footer>
                <view class="value">{{ applyDelayForm.orderType }}</view>
              </template>
            </uni-list-item>
            <uni-list-item title="所属分厂">
              <template v-slot:footer>
                <view class="value">{{ applyDelayForm.workshopName }}</view>
              </template>
            </uni-list-item>
            <uni-list-item title="客户名称">
              <template v-slot:footer>
                <view class="value">{{ applyDelayForm.customerName }}</view>
              </template>
            </uni-list-item>
            <uni-list-item title="发货数量">
              <template v-slot:footer>
                <view class="value">{{ applyDelayForm.quantity }}</view>
              </template>
            </uni-list-item>
          </uni-list>
        </view>
        <view class="dialog_footer">
          <button class="btn confirm" type="primary" @click="onApplyDelaySave">提交</button>
        </view>
      </view>
    </uni-popup>
    <!-- 拆分 -->
    <uni-popup ref="splitPopup" type="bottom" :mask-click="false">
      <view class="dialog">
        <view class="dialog_header">
          <text>拆分</text>
          <view class="dialog_close" @click="closeSplit"></view>
        </view>
        <view class="dialog_body split_body">
          <Product mode="split" :initItem="splitForm.initItem" @change="onSplitChange" />
        </view>
        <view class="dialog_footer">
          <view class="split_footer">
            <view class="view-total">
              <view class="head">合计</view>
              <view class="row_block">
                <view class="row">
                  <text class="label">需发数量</text><text class="value">{{ splitForm.initItem.quantity || '-' }}</text>
                </view>
                <view class="row">
                  <text class="label">吨位</text><text class="value">{{ splitForm.totalQuantity || '-' }}</text>
                </view>
              </view>
            </view>
            <button class="btn confirm" type="primary" @click="onSplitSave">提交</button>
          </view>

        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getDetailApi, saveSignInTicket, checkApi, splitDataApi, updateApi } from '@/api/invoice.js'
import Product from './product.vue'
import DetailButtons from '@/components/detail-buttons/index.vue'
import FileUpload from '@/components/file-upload/index.vue'
import { getShipmentPlanDetailApi, createApi } from '@/api/delay_invoice.js'
import { downloadFile } from '@/utils/downloadFile.js'

export default {
  name: 'InvoiceDetail',
  components: { Product, DetailButtons, FileUpload },
  data() {
    return {
      form: {},
      buttons: [
        // 编辑涉及到的产品-子表操作 放到详情里面
        // { text: '编辑', visible: true, variant: 'outline', event: 'edit' },
        { text: '填写实发数', visible: true, variant: 'outline', event: 'fill' },
        { text: '上传签收单据', visible: true, variant: 'primary', event: 'upload' },
        { text: '填写日期', visible: true, variant: 'primary', event: 'fillDate' },
      ],
      uploadFile: { id: '', name: '' },
      applyDelayForm: {},
      splitForm: {
        initItem: {},
      },
      fillDateForm: {
        id: '',
        shipmentsDate: '',
        newShipmentDate: '',
      },
    }
  },
  computed: {
    statusFlags() {
      const m = this.form || {}
      const e = String(m.status || '')
      return {
        canEdit: e === 'UN_SHIPMENTS',
        // onTimeShipment 有值（true || false）， 填写实发数按钮不显示
        canFill: e === 'UN_SHIPMENTS' && (m.onTimeShipment !== false && m.onTimeShipment !== true),
        canUpload: e === 'SHIPMENTS',
        // canFillDate: e === 'UN_SHIPMENTS' && m.onTimeShipment === false && !m.newShipmentDate,
        canFillDate: e === 'UN_SHIPMENTS' && m.onTimeShipment === false,
      }
    },
    displayButtons() {
      const f = this.statusFlags
      return [
        // { ...this.buttons[0], visible: f.canEdit && this.$auth.hasPermi('shipping-plan-manage:invoice:modify') },
        { ...this.buttons[0], visible: f.canFill && this.$auth.hasPermi('shipping-plan-manage:invoice:fill') },
        { ...this.buttons[1], visible: f.canUpload && this.$auth.hasPermi('shipping-plan-manage:invoice:upload') },
        { ...this.buttons[2], visible: f.canFillDate && this.$auth.hasPermi('shipping-plan-manage:invoice:fill-date') },
      ]
    },
    todayDate() {
      const now = new Date()
      const y = now.getFullYear()
      const m = String(now.getMonth() + 1).padStart(2, '0')
      const d = String(now.getDate()).padStart(2, '0')
      return `${y}-${m}-${d}`
    }
  },
  onLoad(query) {
    const id = (query && (query.id || query.code)) || ''
    if (id) this.loadDetail(id)
  },
  methods: {
    async loadDetail(id) {
      try {
        const res = await getDetailApi(id)
        this.form = res.data || {}
      } catch (e) {
        this.form = {}
      }
    },
    handleButtonClick(btn) {
      if (!btn || btn.disabled) return
      const map = {
        // edit: () => this.onEdit(),
        fill: () => this.onFill(),
        upload: () => this.onUpload(),
        fillDate: () => this.onFillDate(),
      }
      const fn = map[btn.event]
      if (typeof fn === 'function') fn()
    },
    // onEdit() {
    // const id = this.form.id || this.form.code
    // if (id) uni.navigateTo({ url: `/pages/invoice/modify?id=${id}` })
    // },
    async onFill() {
      const id = this.form.id || this.form.code;
      try {
        await checkApi([id])
      } catch (e) {
        uni.showToast({ title: (e && e.msg) || '检查失败', icon: 'none' })
        return
      }
      if (id) uni.navigateTo({ url: `/pages/invoice/fill?id=${id}&customerName=${this.form.customerName}` })
    },
    onUpload() {
      this.$refs.uploadPopup && this.$refs.uploadPopup.open()
    },
    onFillDate() {
      this.fillDateForm.id = this.form.id;
      this.fillDateForm.shipmentsDate = this.form.shipmentsDate;
      this.$refs.fillDatePopup && this.$refs.fillDatePopup.open()
    },
    downloadFile,
    closeUploadInfo() {
      this.uploadFile = { id: '', name: '' };
      this.$refs.uploadPopup && this.$refs.uploadPopup.close()
    },
    async onUploadSave() {
      console.log('onUploadSave__this.uploadFile', this.uploadFile)
      if (!this.uploadFile.id) {
        uni.showToast({
          title: '请上传签收单据',
          icon: 'none'
        })
        return
      }
      const params = {
        fileId: this.uploadFile.id,
        fileName: this.uploadFile.name,
        shipmentsOrderId: this.form.id
      }
      try {
        await saveSignInTicket(params)
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(() => { uni.redirectTo({ url: '/pages/invoice/index' }) }, 300)
      } catch (e) {
        uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
      }
    },
    closeFillDateInfo() {
      this.uploadFile = { id: '', name: '' };
      this.$refs.fillDatePopup && this.$refs.fillDatePopup.close()
    },
    async onFillDateSave() {
      console.log('onFillDateSave__this.fillDateForm', this.fillDateForm)
      if (!this.fillDateForm.newShipmentDate) {
        uni.showToast({
          title: '请选择实际发货日期',
          icon: 'none'
        })
        return
      }
      const params = {
        id: this.fillDateForm.id,
        newShipmentDate: this.fillDateForm.newShipmentDate,
      }
      try {
        await updateApi(params)
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(() => { uni.redirectTo({ url: '/pages/invoice/index' }) }, 300)
      } catch (e) {
        uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
      }
    },
    // 申请延期
    applyDelayFun(id) {
      getShipmentPlanDetailApi(id).then(res => {
        if (res && res.data) {
          console.log('handleApplyDelay__res.data', res.data)
          this.applyDelayForm = { ...res.data };
          this.$refs.applyDelayPopup && this.$refs.applyDelayPopup.open();
        }
      })
    },
    closeApplyDelay() {
      this.$refs.applyDelayPopup && this.$refs.applyDelayPopup.close();
    },
    async onApplyDelaySave() {
      console.log('onApplyDelaySave__this.applyDelayForm', this.applyDelayForm)
      if (!this.applyDelayForm.applyShipmentDate) {
        uni.showToast({ title: '请选择现申请发货日期', icon: 'none' })
        return
      }
      const delayedShipmentDetailList = [this.applyDelayForm].map((r) => {
        return {
          orderId: r.orderId,
          shipmentsPlanDetailId: r.id,
          orderSpecId: r.orderSpecId,
          deliveryDate: r.shipmentsDate,
          applyShipmentDate: r.applyShipmentDate,
          applyCount: r.applyCount,
          quantity: Number(r.quantity || 0),
          delayReason: r.delayReason,
        };
      });
      const params = {};
      params.shipmentsOrderId = this.form.id || '';
      params.delayedShipmentDetailList = delayedShipmentDetailList;
      console.log('onApplyDelaySave__params', params)
      try {
        await createApi(params)
        uni.showToast({ title: '保存成功', icon: 'success' })
        // 刷新当前页
        this.$refs.applyDelayPopup && this.$refs.applyDelayPopup.close();
        this.loadDetail(this.form.id)
      } catch (e) {
        uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
      }
    },
    // 拆分
    splitFun(item) {
      this.splitForm.initItem = { ...item };
      this.$refs.splitPopup && this.$refs.splitPopup.open();
    },
    closeSplit() {
      this.$refs.splitPopup && this.$refs.splitPopup.close();
    },
    getStartDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr.replace(/-/g, '/'))
      date.setDate(date.getDate() + 1)
      const y = date.getFullYear()
      const m = String(date.getMonth() + 1).padStart(2, '0')
      const d = String(date.getDate()).padStart(2, '0')
      return `${y}-${m}-${d}`
    },
    onSplitChange(data) {
      console.log('onSplitChange__data', data)
      const list = Array.isArray(data) ? data : []
      this.splitForm.splitQuantityList = list;
      const sum = list.reduce((acc, it) => {
        const v = Number(it && it.quantity)
        return acc + (isNaN(v) ? 0 : v)
      }, 0)
      const fixedSum = Number(sum.toFixed(2))
      console.log('onSplitChange__sum', fixedSum)
      this.$set(this.splitForm, 'totalQuantity', fixedSum)
    },
    async onSplitSave() {
      if (!this.validateLineListRequired()) return;
      const params = {};
      params.id = this.splitForm.initItem.id || '';
      params.totalQuantity = this.splitForm.totalQuantity || '';
      const _splitQuantityList = this.splitForm.splitQuantityList || [];
      const splitQuantityList = _splitQuantityList
        .map((r) => Number(r.quantity || 0))
        .filter((n) => !isNaN(n));
      params.splitQuantityList = splitQuantityList;
      console.log('onSplitSave__params', params)
      try {
        await splitDataApi(params)
        uni.showToast({ title: '保存成功', icon: 'success' })
        // 刷新当前页
        this.$refs.splitPopup && this.$refs.splitPopup.close();
        this.loadDetail(this.form.id)
      } catch (e) {
        uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
      }
    },
    validateLineListRequired() {
      const list = Array.isArray(this.splitForm.splitQuantityList) ? this.splitForm.splitQuantityList : []
      if (list.length === 0) {
        uni.showToast({ title: '请先添加发货单明细', icon: 'none' })
        return false
      }
      const fields = [
        { key: 'quantity', label: '吨位' },
      ]
      for (let i = 0; i < list.length; i++) {
        const it = list[i] || {}
        for (const f of fields) {
          const v = it && it[f.key]
          if (v === undefined || v === null || String(v).trim() === '' || Number(v) <= 0) {
            uni.showToast({ title: `发货单明细第${i + 1}条：${f.label}不能为空！`, icon: 'none' })
            return false
          }
        }
      }
      return true
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.scroll {
  flex: 1;
  background: #f3f3f3;
}

.detail-page {
  padding-bottom: 150rpx;
}

.section {
  padding: 32rpx;
  background: #fff;
  margin-bottom: 20rpx;
  position: relative;

  .status {
    position: absolute;
    top: 16rpx;
    right: 52rpx;
    width: 180rpx;
    height: 146rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    // 已签收
    &_DELIVERED {
      background-image: url('~@/static/images/invoice/status_DELIVERED.png');
    }

    // 已发货
    &_SHIPMENTS {
      background-image: url('~@/static/images/invoice/status_SHIPMENTS.png');
    }

    // 未发货
    &_UN_SHIPMENTS {
      background-image: url('~@/static/images/invoice/status_UN_SHIPMENTS.png');
    }


  }
}

.row {
  display: flex;
  margin-bottom: 28rpx;

  &:last-child {
    margin-bottom: 0;
  }

  &.company {
    font-size: 36rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    padding-top: 10rpx;
    margin-bottom: 32rpx;
    line-height: 50rpx;
  }

  .label {
    max-width: 240rpx;
    margin-right: 20rpx;
    line-height: 32rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);
  }

  .value {
    flex: 1;
    line-height: 32rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
    text-align: right;
    word-break: break-all;

    &.act {
      color: $theme-primary;
    }

  }
}

.title-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 32rpx 32rpx 22rpx;
  border-bottom: 1rpx dashed #f0f0f0;

  &_icon {
    width: 32rpx;
    height: 28rpx;
    margin-right: 16rpx;
  }

  span {
    color: rgba(0, 0, 0, 0.9);
    font-size: 32rpx;
    line-height: 44rpx;
    font-weight: 600;
  }
}


.dialog {
  width: 100%;
  overflow-y: auto;
  padding: 32rpx 28rpx calc(20rpx + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;

  &_header {
    position: relative;
    text-align: center;
    font-size: 34rpx;
    font-weight: 600;
    margin-bottom: 12rpx;
    color: rgba(0, 0, 0, 0.9);
  }

  &_body {
    padding: 12rpx 4rpx 24rpx;
    max-height: 70vh;
    overflow-y: auto;

  }

  .split_body {
    max-height: 60vh;
  }

  &_footer {
    padding-top: 12rpx;
    display: flex;
    justify-content: center;

    .btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 12rpx;
      font-size: 32rpx;
      background: $theme-primary;
      color: #fff;

      &::after {
        border: none;
      }
    }
  }
}

.dialog_close {
  position: absolute;
	right: 16rpx;
	top: 0rpx;
	width: 48rpx;
	height: 48rpx;
	background-image: url('~@/static/images/flow/close_icon.png');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
}

.dialog_row {
  margin-bottom: 24rpx;
}

.dialog_label {
  display: block;
  margin-bottom: 12rpx;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.9);
}

.upload-show {
  margin-top: 8rpx;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.6);
}


::v-deep .uni-list {
  background: transparent;

  .uni-list--border-top {
    background-color: transparent !important;
  }

  &-item {
    &__extra-text {
      font-size: 32rpx;
    }

    &__content-title {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
    }

    &__container {
      padding: 32rpx;

      .uni-easyinput {

        .is-disabled {
          background-color: transparent !important;
        }

        &__placeholder-class {
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.4);
        }

        &__content {
          border: none;

          &-input {
            padding-left: 0 !important;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 32rpx;
          }

          .content-clear-icon {
            font-size: 44rpx !important;
          }
        }
      }

      .amount-row {
        flex: 1;
        display: flex;
        align-items: center;

        .uni-easyinput {
          flex: 1;
        }

        .unit {
          margin-left: 16rpx;
          color: rgba(0, 0, 0, 0.9);
        }
      }

      .item-title,
      .uni-list-item__content {
        flex: none;
        min-height: 48rpx;
        line-height: 48rpx;
        font-size: 32rpx;
        position: relative;
        width: 200rpx;
        margin-right: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        padding-right: 0;


        .required {
          color: red;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: -16rpx;
        }
      }

    }

    &.select-item {
      &.is-empty {
        .uni-list-item__extra-text {
          color: rgba(0, 0, 0, 0.4) !important;
        }
      }

      &.is-filled {
        .uni-list-item__extra-text {
          color: rgba(0, 0, 0, 0.9) !important;
        }
      }

      .serial-number-row {
        display: flex;
        align-items: center;
      }

    }

    &.mgb10 {
      margin-bottom: 20rpx;
    }

  }

  .title-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 32rpx 32rpx 22rpx;

    &_icon {
      width: 32rpx;
      height: 28rpx;
      margin-right: 16rpx;
    }

    span {
      color: rgba(0, 0, 0, 0.9);
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 600;
    }
  }
}

/* 只读 easyinput 根据内容自适应高度 */
::v-deep .uni-list-item__container {
  align-items: flex-start;
}

.split_footer {
  width: 100%;

  .view-total {
    padding: 0 32rpx;

    .head {
      font-size: 32rpx;
      font-weight: 600;
      line-height: 36rpx;
      color: rgba(0, 0, 0, 0.9);
      padding-bottom: 10rpx;
      margin-bottom: 24rpx;
      border-bottom: 1px dashed #E7E7E7;
    }

    .row_block {
      display: flex;
    }

    .row {
      width: 50%;
      display: flex;
      line-height: 32rpx;

      .label {
        width: 140rpx;
        margin-right: 14rpx;
        color: rgba(0, 0, 0, 0.6);
        font-size: 32rpx;
      }

      .value {
        flex: 1;
        color: rgba(0, 0, 0, 0.9);
        font-size: 32rpx;
        white-space: pre-wrap;
        word-break: break-all;
        text-align: left;
        font-weight: 600;
      }
    }
  }
}
.fill-data_body {
  ::v-deep .uni-list-item {
    &__container {
      align-items: center;
    }
  }
}
</style>