<template>
  <div class="app-container">
    <div class="filter-container">
      <el-divider content-position="left">运费试算</el-divider>
      <div class="calculator-warp">
        <el-form ref="calculatorWarpRef" :model="postData" :rules="rules" label-position="top">
          <div class="top-warp">
            <div class="country">
              <el-form-item prop="country" required label="目的地国家/地区">
                <el-select v-model="postData.country" filterable auto-complete="false" clearable style="width: 100%;">
                  <el-option
                    v-for="(item, index) in countrys"
                    :key="index"
                    :label="item.CnName + ' ' + item.Code + ' ' + item.EnName"
                    :value="item.Code"
                  >
                    <span style="float: left">{{ item.CnName }}
                      <span style=" color: #8492a6; font-size: 10px">{{ item.EnName }}</span> </span>
                    <span style="float: right;">{{ item.Code }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="weight">
              <el-form-item required prop="weight" label="重量">
                <el-input v-model="postData.weight"><span slot="suffix" style="color:#000">kg</span></el-input>
              </el-form-item>
            </div>
            <div class="weight">
              <el-form-item prop="CustomerId" required label="客户">
                <el-select v-model="postData.CustomerId" auto-complete="false" clearable filterable style="width: 100%;">
                  <el-option v-for="item in customers" :key="item.Id" :label="item.CompanyName" :value="item.Id" />
                </el-select>
              </el-form-item>
            </div>
            <div class="weightbtn">
              <el-button type="primary" :loading="calculatorLoading" @click="postCalculator">
                计算
              </el-button>
              <el-button @click="restCalculator">
                重置
              </el-button>
            </div>
          </div>
          <div class="weightend">
            <div class="weight">
              <p class="weight-title">货物体积</p>
              <el-form-item prop="length">
                <el-input v-model="postData.length" placeholder="长" style="margin-left:0"><span
                  slot="suffix"
                  style="color:#000"
                >cm</span></el-input>X
              </el-form-item>
              <el-form-item prop="width">
                <el-input v-model="postData.width" placeholder="宽"><span
                  slot="suffix"
                  style="color:#000"
                >cm</span></el-input>X
              </el-form-item>
              <el-form-item prop="height">
                <el-input v-model="postData.height" placeholder="高"><span
                  slot="suffix"
                  style="color:#000"
                >cm</span></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div class="calculator-warp-bottom">
        <div v-if="IsNewCustomer">
          <el-table
            v-loading="calculatorLoading"
            style="margin-top: 30px"
            :data="sdata"
            border
            :highlight-current-row="true"
            :select-on-indeterminate="true"
            width="100%"
            header-row-class-name="tableHeaderCalculator"
          >
            <el-table-column label="线路名称" prop="ProductName" />
            <el-table-column label="线路类型" prop="StrChannelType" />
            <el-table-column label="计费重(kg)" prop="BWeight" />
            <el-table-column label="运费" prop="ShipFee" />
            <el-table-column label="处理费" prop="OperFee" />
            <el-table-column label="其它运费" prop="OtherFee">
              <template slot-scope="r">
                {{ r.row.OtherFee }}
                <el-popover placement="top" width="200" trigger="hover">
                  <div>
                    <p v-for="(item, index) in r.row.FeeList" :key="index" style="margin:0.2rem 0">
                      {{ item.feeItemName }}:{{ item.fee }}(RMB)
                    </p>
                  </div>
                  <i v-if="r.row.OtherFee > 0" slot="reference" class="el-icon-question" />
                </el-popover>
              </template>

            </el-table-column>
            <el-table-column label="运费总计" prop="TotalFee">
              <template slot-scope="r">
                <span class="text-primary" style="color: #643be2;">{{ r.row.TotalFee }}</span></template>
            </el-table-column>

          </el-table>
        </div>
        <div v-else>
          <el-table
            v-loading="calculatorLoading"
            style="margin-top:30px;"
            :data="sdata"
            border
            :highlight-current-row="true"
            :select-on-indeterminate="true"
            width="100%"
            header-row-class-name="tableHeaderCalculator"
          >
            <el-table-column label="线路名称" prop="Name" />
            <el-table-column label="线路类型" prop="ShippingType" />
            <el-table-column label="计费重(kg)" prop="Weight" />
            <el-table-column label="运费（含燃油）" prop="Fee" />
            <el-table-column label="特殊附加费" prop="AttachFee" />
            <el-table-column label="运费总计" prop="FeeSum">
              <template slot-scope="r"><b>{{ r.row.FeeSum }}</b></template>
            </el-table-column>
            <el-table-column label="报价操作费" prop="OPCOperationFee" />
            <el-table-column label="报价运费" prop="OPCServiceCharge" />
            <el-table-column label="报价计费版本" prop="OPCVersion" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _getCountries } from '@/api/baseInfo'
import { NewCalculatorAll, OldCalculator, GetIsNewCustomer } from '@/api/order'
import { isObject } from '@/utils'
import { _getCustomers } from '@/api/baseInfo'

export default {
  name: 'Calculator',
  data() {
    const validateWeight = function(rule, value, callback) {
      const math2 = /^([0-9]*)+(.[0-9]{1,3})?$/g
      if (value === '') {
        callback('重量必须录入')
      } else if (!math2.test(value)) {
        callback('必须大于0，且小数位数小于4位')
      } else {
        callback()
      }
    }
    const validateCountry = function(rule, value, callback) {
      if (value === '') {
        callback('国家必须录入')
      } else {
        callback()
      }
    }

    const validateCustomerId = function(rule, value, callback) {
      if (value === '' || value === undefined) {
        callback('客户必须录入')
      } else {
        callback()
      }
    }

    const validateWidth = function(rule, value, callback) {
      if (value === '') {
        callback()
      }
      const math = /^([0-9]*)+(.[0-9]{1,2})?$/g
      if (!math.test(value)) {
        callback('小数位数小于3位')
      } else {
        callback()
      }
    }

    const validateHeight = function(rule, value, callback) {
      if (value === '') {
        callback()
      }
      const math = /^([0-9]*)+(.[0-9]{1,2})?$/g
      if (!math.test(value)) {
        callback('小数位数小于3位')
      } else {
        callback()
      }
    }
    const validateLength = function(rule, value, callback) {
      if (value === '') {
        callback()
      }
      const math = /^([0-9]*)+(.[0-9]{1,2})?$/g
      if (!math.test(value)) {
        callback('小数位数小于3位')
      } else {
        callback()
      }
    }
    return {
      sdata: [],
      postData: {
        country: '',
        weight: 0,
        height: 0,
        width: 0,
        length: 0,
        CustomerId: undefined
      },
      rules: {
        weight: [
          { validator: validateWeight, trigger: 'blur' }
        ],
        width: [
          { validator: validateWidth, trigger: 'blur' }
        ],
        length: [
          { validator: validateLength, trigger: 'blur' }
        ],
        height: [
          { validator: validateHeight, trigger: 'blur' }],
        country: [
          { validator: validateCountry, trigger: 'change' }
        ],
        CustomerId: [
          { validator: validateCustomerId, trigger: 'change' }
        ]
      },
      calculatorLoading: false,
      countrys: [],
      customers: [],
      IsNewCustomer: false // 默认旧客户
    }
  },
  created() {
    _getCountries().then((res) => {
      this.countrys = res
    })
    _getCustomers().then((res) => {
      this.customers = res
    })
  },
  methods: {
    postCalculator() {
      this.sdata = []
      this.calculatorLoading = true
      this.$refs['calculatorWarpRef'].validate((valid) => {
        if (valid) {
          GetIsNewCustomer(this.postData.CustomerId).then((r1) => {
            if (isObject(r1)) {
              this.IsNewCustomer = r1.isSucceed
            } else {
              if (r1) this.IsNewCustomer = r1
            }
            if (this.IsNewCustomer) {
              // 新客户费用试算
              NewCalculatorAll({
                CustomerId: this.postData.CustomerId,
                Weight: this.postData.weight,
                CountryCode: this.postData.country,
                W: this.postData.width,
                H: this.postData.height,
                L: this.postData.length
              }).then(r => {
                this.sdata = r
              }).finally(() => {
                this.calculatorLoading = false
              })
            } else {
              // 兼容旧版费用试算
              OldCalculator({
                CustomerId: this.postData.CustomerId,
                Weight: this.postData.weight,
                CountryCode: this.postData.country,
                W: this.postData.width,
                H: this.postData.height,
                L: this.postData.length
              }).then(r => {
                this.sdata = r
              }).finally(() => {
                this.calculatorLoading = false
              })
            }
          }).catch(() => {
            this.calculatorLoading = false
          })
        } else {
          console.log('数据错误!!')
          this.calculatorLoading = false
          return false
        }
      })
    },
    // 重置
    restCalculator() {
      this.postData = {
        country: '',
        weight: 0,
        height: 0,
        width: 0,
        length: 0,
        CustomerId: undefined
      }
      this.sdata = []
    }
  }
}
</script>

<style scoped>
.calculator-warp {
  position: relative;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #d3d4d6;
}

.calculator-warp-bottom {
  position: relative;
  margin-top: 20px;
}

.calculator-warp .weightbtn {
  position: relative;
  top: 37px;
  right: -20px;
}

.calculator-warp .weightend {
  overflow: hidden;
}

.calculator-warp .top-warp {
  display: flex;
  position: relative;
}

.calculator-warp .top-warp .country {
  flex-basis: 260px;
}

.calculator-warp .top-warp .weight {
  flex-basis: 260px;
  margin-left: 20px;
}

.calculator-warp ::v-deep .el-form-item__label {
  padding-bottom: 0;
}

.weightend .weight-title {
  margin: 0;
  line-height: 36px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}

.weightend ::v-deep .el-input {
  display: inline-block;
  width: 130px;
  margin: 0 10px 0 7px;
}

.weightend ::v-deep .el-form-item {
  float: left
}
</style>
