<template>
  <div class="app-container">
    <div class="filter-container">
      <el-divider content-position="left">上门取件预报</el-divider>
      <div class="pickup-forecast">
        <div>
          <el-button type="primary" icon="el-icon-plus" @click="hanleAddForecast">Add forecast</el-button>
          <el-button type="success" icon="el-icon-refresh" :loading="forecastLoading" @click="hanleViewLatest">View the
            latest</el-button>
        </div>
        <div class="forecast-table">
          <vxe-table :loading="forecastLoading" style="font-size: 16px;" empty-text="No data at present"
            :data="forecastData" :row-config="{ isHover: true }" :header-row-style="{
                background: '#ede8fd',
                color: 'rgb(100, 59, 226)'
              }" :scroll-y="{ enabled: false }">
            <vxe-column title="Forecast time" field="CreateTime" :min-width="160">
              <template #default="{ row }">
                {{ row.CreateTime | dealCreateTime }}
              </template>
            </vxe-column>
            <vxe-column title="Quantity" field="OrderQty" :min-width="160" />
            <vxe-column title="PDF download" :min-width="160">
              <template #default="{ row }">
                <el-button type="text" @click="hanleDownloadPDF(row.PdfUrl)">
                  Download
                </el-button>
              </template>
            </vxe-column>
            <vxe-column title="Operation" :width="110">
              <template #default="{ row }">
                <el-button type="text" @click="onDetailConsume(row)">
                  Detailed
                </el-button>
              </template>
            </vxe-column>
          </vxe-table>
          <Pagination :page-sizes="[10, 20, 40, 100, 400]" :current-page="forecastPagerDto.PageIndex"
            :page-size.sync="forecastPagerDto.PageSize" background layout="prev, pager, next ,total ,jumper,sizes,slot "
            :total="forecastPagerDto.total" @size-change="forecastChangePager" @current-change="forecastPageResult" />
        </div>
      </div>
      <!-- Prediction -->
      <el-dialog top="9vh" :close-on-click-modal="false" width="1320px" title="Prediction"
        :visible.sync="forecastAddVisible" :before-close="hanleCloseForecast">
        <div class="forecast-dialog">
          <div class="systemNo-form">
            <el-form :model="paramsDto" label-position="top">
              <el-form-item label="" label-width="100px">
                <div class="systemNo">
                  <el-input v-model="paramsDto.systemNo" type="textarea"
                    placeholder="Enter multiple single numbers, one for each line, and the forecast cannot be repeated."
                    :autosize="{ minRows: 18, maxRows: 28 }" class="item-form" />
                  <span class="define-right">{{ currentRowNum }}/{{ maxRowNum }}</span>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="isShowAbnormal" class="error-table">
            <!-- <el-alert
            style="margin-bottom: 6px"
            type="error"
            show-icon
            :closable="false"
          >
            <p style="font-size: 16px;">{{ showErrorMsg }}</p>
          </el-alert> -->
            <vxe-table style="font-size: 16px;" empty-text="No data at present" :loading="abnormalLoading"
              :data="abnormalData" :row-config="{ isHover: true }" :scroll-y="{ enabled: false }"
              :column-config="{ resizable: false }" :header-row-style="{
                  background: '#ede8fd',
                  color: 'rgb(100, 59, 226)'
                }">
              <vxe-column title="Odd Numbers" field="TrackingNumber" :width="320" />
              <vxe-column title="Abnormal failure" field="ErrorMsg">
                <template #default="{ row }">
                  <div class="red">
                    {{ row.ErrorMsg }}
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <div v-show="isShowWait" class="error-icon">
            <div>
              <svg t="1720677898820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="4312" width="100" height="100">
                <path
                  d="M521.6 523.76H250.19c-7.91 0-14.32-6.41-14.32-14.32s6.41-14.32 14.32-14.32h257.09V235.3c0-7.91 6.41-14.32 14.32-14.32s14.32 6.41 14.32 14.32v274.14c0 7.91-6.42 14.32-14.32 14.32zM766.75 838.48c-5.4 0-10.73-2.42-14.28-7.03-6.06-7.88-4.59-19.18 3.29-25.24 17.03-13.1 33.15-29.33 44.24-44.54 5.86-8.03 17.12-9.8 25.15-3.94 8.03 5.86 9.8 17.12 3.94 25.15-13.21 18.12-31.46 36.54-51.38 51.86a17.877 17.877 0 0 1-10.96 3.74z"
                  fill="#fb9221" p-id="4313" />
                <path
                  d="M513.61 927.87c-56.13 0-110.6-11-161.88-32.69-49.52-20.95-94-50.93-132.19-89.12s-68.17-82.66-89.12-132.18C108.73 622.6 97.73 568.13 97.73 512s11-110.6 32.69-161.88c20.95-49.52 50.93-94 89.12-132.19s82.66-68.17 132.19-89.12c51.28-21.69 105.75-32.69 161.88-32.69s110.6 11 161.88 32.69c49.52 20.95 94 50.93 132.18 89.12s68.17 82.66 89.12 132.19c21.69 51.28 32.69 105.75 32.69 161.88 0 74.51-19.94 147.62-57.67 211.41-5.06 8.56-16.1 11.39-24.66 6.33-8.56-5.06-11.39-16.1-6.33-24.66 34.45-58.25 52.66-125.02 52.66-193.08 0-51.29-10.04-101.04-29.84-147.86-19.13-45.23-46.52-85.86-81.42-120.75-34.89-34.89-75.52-62.29-120.75-81.42-46.82-19.8-96.57-29.85-147.86-29.85-51.29 0-101.04 10.04-147.86 29.85-45.23 19.13-85.86 46.53-120.75 81.42s-62.29 75.52-81.42 120.75c-19.8 46.82-29.85 96.57-29.85 147.86 0 51.29 10.04 101.04 29.85 147.86 19.13 45.23 46.52 85.86 81.42 120.75 34.89 34.89 75.52 62.29 120.75 81.42 46.82 19.8 96.57 29.84 147.86 29.84 34.59 0 68.87-4.65 101.87-13.81 9.58-2.66 19.5 2.95 22.16 12.53 2.66 9.58-2.95 19.5-12.53 22.16-36.14 10.04-73.65 15.12-111.5 15.12z"
                  fill="#fb9221" p-id="4314" />
              </svg>
              <h2 class="wait">Waiting for forecas</h2>
            </div>
          </div>
          <div v-show="isSuccessStatus" class="error-icon">
            <div>
              <svg t="1720678249575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="6201" width="120" height="120">
                <path
                  d="M874.119618 149.859922A510.816461 510.816461 0 0 0 511.997 0.00208a509.910462 509.910462 0 0 0-362.119618 149.857842c-199.817789 199.679789-199.817789 524.581447 0 724.260236a509.969462 509.969462 0 0 0 362.119618 149.857842A508.872463 508.872463 0 0 0 874.119618 874.120158c199.836789-199.679789 199.836789-524.581447 0-724.260236zM814.94268 378.210681L470.999043 744.132295a15.359984 15.359984 0 0 1-5.887994 4.095996c-1.751998 1.180999-2.913997 2.362998-5.276994 2.913997a34.499964 34.499964 0 0 1-13.469986 2.914997 45.547952 45.547952 0 0 1-12.897986-2.303998l-4.095996-2.363997a45.291952 45.291952 0 0 1-7.009992-4.095996l-196.902793-193.789796a34.126964 34.126964 0 0 1-10.555989-25.186973c0-9.37399 3.583996-18.74698 9.98399-25.186974a36.429962 36.429962 0 0 1 50.372947 0l169.98382 167.423824L763.389735 330.220732a37.059961 37.059961 0 0 1 50.371947-1.732998 33.647965 33.647965 0 0 1 11.165988 25.186973 35.544963 35.544963 0 0 1-9.98399 24.575974v-0.04z m0 0"
                  fill="#52C41A" p-id="6202" />
              </svg>
              <div class="info-text">
                <h2 class="success">Forecast successful</h2>
                <!-- <el-link type="info" style="font-weight: bold;font-size: 16px;" @click="hanleDownloadPDF(PdfUrl)">PDF download</el-link> -->
              </div>
              <el-button v-show="PdfUrl" type="info" @click="hanleDownloadPDF(PdfUrl)">PDF download</el-button>
            </div>
          </div>
        </div>
        <div class="btns">
          <el-button @click="hanleCloseForecast">Close</el-button>
          <el-button type="primary" :loading="abnormalLoading" @click="hanleSubmitForecast">Submit</el-button>
        </div>
      </el-dialog>
      <!-- Detailed -->
      <el-dialog top="10vh" :close-on-click-modal="false" width="520px" title="Odd numbers"
        :visible.sync="oddNumbersVisible">
        <vxe-table style="font-size: 16px;" empty-text="No data at present" :loading="forecastDetailLoading"
          :show-header="false" :data="forecastDetailData" :row-config="{ isHover: true }" :scroll-y="{ enabled: false }"
          :column-config="{ resizable: true }">
          <vxe-column title="Odd Numbers" field="TrackingNumber" />
        </vxe-table>
        <el-pagination :page-sizes="[10, 20, 40, 100, 400]" :current-page="forecastDetailDto.PageIndex"
          :page-size.sync="forecastDetailDto.PageSize" background layout="prev, pager, next ,total ,jumper,sizes,slot "
          :total="forecastDetailDto.total" @size-change="forecastDetailChangePager"
          @current-change="forecastDetailPageResult" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { _getTrackingMoreAddESB, AddScanform, GetScanFormDetailsPager, GetScanFormPager } from '@/api/order'
export default {
  name: 'PickupForecast',
  filters: {
    dealCreateTime(val) {
      if (!val) return ''
      return val.replace('T', ' ')
    }
  },
  data() {
    return {
      forecastLoading: false,
      forecastData: [],
      forecastPagerDto: { PageIndex: 1, PageSize: 10, total: 0 },
      oddNumbersVisible: false,
      forecastAddVisible: false,
      paramsDto: {
        systemNo: null
      },
      currentRowNum: 0,
      maxRowNum: 500,
      abnormalLoading: false,
      abnormalData: [],
      isSuccessStatus: false,
      showErrorMsg: '',
      forecastDetailDto: { PageIndex: 1, PageSize: 10, total: 0, _Eq_ScanFormId: undefined },
      forecastDetailData: [],
      forecastDetailLoading: false,
      PdfUrl: undefined
    }
  },
  computed: {
    isShowAbnormal() {
      return this.abnormalData.length > 0
    },
    isShowWait() {
      return this.abnormalData.length === 0 && !this.isSuccessStatus
    }
  },
  watch: {
    // 监听跟踪单号
    'paramsDto.systemNo'(newValue, oldValue) {
      const rowNum = this.getRow()
      const maxRowNum = this.maxRowNum
      this.currentRowNum = rowNum === maxRowNum ? maxRowNum : rowNum
      if (rowNum > maxRowNum) {
        this.paramsDto.systemNo = oldValue
      }
    }
  },
  created() {
    this.forecastPageResult()
  },
  methods: {
    // 获取当前跟踪单号文本框的行数
    getRow() {
      if (!this.paramsDto.systemNo) return 0
      let row = 0
      const systemNoList = this.paramsDto.systemNo.split('\n')
      systemNoList.forEach(item => {
        if (item.length === 0) {
          row += 1
        } else {
          row += Math.ceil(item.replace(/[\u0391-\uFFE5]/g, 'aa').length / 50)
        }
      })
      return row
    },
    forecastChangePager(size) {
      this.forecastPagerDto.PageSize = size
      this.forecastPageResult()
    },
    forecastPageResult() {
      this.forecastLoading = true
      GetScanFormPager(this.forecastPagerDto).then((res) => {
        this.forecastData = res.Result
        this.forecastPagerDto.total = res.TotalCount
      }).finally(() => {
        this.forecastLoading = false
      })
    },
    // 明细
    onDetailConsume(row) {
      this.forecastDetailDto._Eq_ScanFormId = row.Id
      this.forecastDetailPageResult()
      this.oddNumbersVisible = true
    },
    forecastDetailChangePager(size) {
      this.forecastPagerDto.PageSize = size
      this.forecastDetailPageResult()
    },
    forecastDetailPageResult() {
      this.forecastDetailLoading = true
      GetScanFormDetailsPager(this.forecastDetailDto).then((res) => {
        this.forecastDetailData = res.Result
        this.forecastDetailDto.total = res.TotalCount
      }).finally(() => {
        this.forecastDetailLoading = false
      })
    },
    // 查看最新
    hanleViewLatest() {
      this.forecastPageResult()
    },
    // 新增预报
    hanleAddForecast() {
      this.forecastAddVisible = true
    },
    hanleCloseForecast() {
      this.forecastAddVisible = false
      this.isSuccessStatus = false
    },
    hanleDownloadPDF(PdfUrl) {
      window.open(PdfUrl)
    },
    hanleSubmitForecast() {
      if (!this.paramsDto.systemNo) {
        this.$message({
          type: 'warning',
          message: 'Please enter the system number.'
        })
        return
      }
      const systemNoes = this.paramsDto.systemNo.split('\n')
      const systemNoList = systemNoes.filter(item => item)
      if (systemNoList.length === 0) {
        this.$message({
          type: 'warning',
          message: 'Please enter the system number.'
        })
        return
      }
      const uniqueArraySystemNo = [...new Set(systemNoList)]
      this.abnormalLoading = true
      AddScanform(uniqueArraySystemNo).then((res) => {
        this.PdfUrl = res.PdfUrl
        this.showErrorMsg = res.ErrorMsg
        this.abnormalData = res.ItemResults.filter((item) => !item.IsSuccess)
        this.abnormalData.length === 0 ? this.isSuccessStatus = true : this.isSuccessStatus = false
      }).finally(() => {
        this.abnormalLoading = false
      })
    }
  }
}
</script>

<style scoped>
.forecast-table {
  margin-top: 12px;
}

.forecast-dialog {
  display: flex;
}

.forecast-dialog .info-text {
  display: flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 12px;
}

.forecast-dialog .red {
  color: red;
}

.forecast-dialog .wait {
  color: #FB9221;
}

.forecast-dialog .success {
  margin: 0;
  padding-right: 6px;
  color: #52C41A;
}

.forecast-dialog .systemNo-form {
  flex-basis: 490px;
}

.forecast-dialog .error-table {
  margin-left: 10px;
  flex: 1;
}

.forecast-dialog .error-icon {
  flex: 1;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.forecast-dialog .systemNo {
  position: relative;
}

.forecast-dialog .systemNo .define-right {
  position: absolute;
  color: #909399;
  font-size: 15px;
  bottom: 6px;
  right: 20px;
}

.forecast-dialog .systemNo .item-form {
  font-size: 16px;
}

.btns {
  text-align: right;
}</style>
