<template>
 <div class="wrapper">
   <template v-if="!readonly">
    <el-row type="flex" align="align" :gutter="10" >
      <el-col :span="6">{{$t('空运订单重量上限')}}(kg)</el-col>
      <el-col :span="6" >
        <el-input-number v-model="value1.airWeightLimit"  controls-position="right"  ></el-input-number>
<!--        <el-input type="number" :max="2000"   v-model="value1.airWeightLimit"></el-input>-->
      </el-col>
      <el-col :span="6">
        <slot></slot>
      </el-col>
    </el-row>
    <h1>{{$t('空运清关费')}}</h1>
   </template>
      <div v-for="(item ,index) in value1[keyArr]">
        <el-row :gutter="10">
          <el-col :span="5">
            {{$t('第{index}阶梯定价方案', {index: index+1})}}：
          </el-col>
          <el-col :span="6"  v-if="!readonly">
            <el-button type="primary" @click="addInterval" v-if="index === 0" >
              {{$t('添加区间')}}
            </el-button>
            <el-button type="danger" @click="deleteFn(index)" v-else>
              {{$t('删除')}}
            </el-button>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="5">
            {{$t('第{index}阶梯', {index: index+1})}}
          </el-col>
          <el-col  :span="15">
            <div style="display: flex;align-items: center;">
              <el-input v-model="item.startNum" class="mr-10"></el-input>
              <span  class="mr-10">-</span>
              <el-input v-model="item.endNum" class="mr-10"></el-input >
              <span class="mr-10">/</span>
              <weight-select @change="changeWeight" :disabled="index > 0"  v-model="item.weightUnit" :options="unitList"></weight-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="5" >
            {{$t('空运清关费')}}
          </el-col>
          <el-col :span="15">
            <div style="display: flex;align-items: center;">
              <el-input v-model="item.clearancePrice" class="mr-10"></el-input>
              <currency-select class="mr-10" @change="setCurrency" :disabled="index > 0" :options="currencyList" v-model="item.clearancePriceUnit"></currency-select>
              <span class="mr-10">/</span>
              <weight-select :disabled="index > 0" @change="setAirFreightWeight" :options="unitList" v-model="item.clearanceVolumeUnit"></weight-select>
            </div>
          </el-col>
        </el-row>
      </div>
 </div>
</template>

<script>
import {getCurrencyPage} from "@/api/ecw/currency";
import CurrencySelect from "@/views/ecw/channel/componrnts/currency-select.vue";
import {getUnitList} from "@/api/ecw/unit";
import WeightSelect from "@/views/ecw/channel/componrnts/weight-select.vue";
import Template from "@/views/cms/template/index.vue";
import {getDictDatas} from "@/utils/dict";
export default {
  props:{
    value:{
      type:Object,
      default:()=>({})
    },
    keyArr:{
       type:String,
       default:'channelPriceStepClearanceList'
    },
    readonly: Boolean
  },
  name: "packaging-type",
  components: {Template, WeightSelect, CurrencySelect},
  created() {
    getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
    getUnitList().then(res => this.unitList = res.data)
    },
  data(){
    return {
      currencyList:[],
      unitList:[],
      value1:{
        airWeightLimit:undefined,
        packagingTypes:undefined,
      },

    }
  },
  computed:{
    screenCom(){
      let num = undefined
      if(this.keyArr === 'channelPriceStepClearanceList'){
        num = this.getDictDatas(this.DICT_TYPE.AIR_CUSTOM_CLEARANCE)[0]?.value
      }else {
        num = this.getDictDatas(this.DICT_TYPE. AIR_COMMODITY_CUSTOM_CLEARANCE)[0]?.value
      }

      return num
    }
  },
  mounted() {
    this.value1 = this.value
    if(!this.value1.airWeightLimit){
      this.value1.airWeightLimit = this.screenCom
    }
      this.$nextTick(()=>{
        if(this.value1[this.keyArr] && this.value1[this.keyArr].length === 0){
          this.addInterval()
        }
      })
    },
  methods:{
    changeWeight(e){
      this.value1[this.keyArr].forEach(item => {
        item.weightUnit = e
      })
    },
    setCurrency(e){
      this.value1[this.keyArr].forEach(item => {
        item.clearancePriceUnit = e
      })
    },
    setAirFreightWeight(e){
      this.value1[this.keyArr].forEach(item => {
        item.clearanceVolumeUnit = e
      })
    },
     addInterval(){
       let p = {
         "channelId":'',
         "clearancePrice":'',
         "clearancePriceUnit":  this.value1[this.keyArr].length && this.value1[this.keyArr][0].clearancePriceUnit  ? this.value1[this.keyArr][0].clearancePriceUnit : '',
         "clearanceVolumeUnit":this.value1[this.keyArr].length ? this.value1[this.keyArr][0].clearanceVolumeUnit : 6,
         "endNum":'',
         "packagingId":'',
         "startNum":'',
         "weightUnit": this.value1[this.keyArr].length ? this.value1[this.keyArr][0].weightUnit : 6
       }
       this.value1[this.keyArr].push(p)
        this.$forceUpdate();
     },
     deleteFn(index){
       this.value1[this.keyArr].splice(index, 1)
       this.$forceUpdate();
     }
   },
  watch:{
    'value1.priceStepClearanceList':{
      handler(val){
        if(val && val.length === 0){
          this.addInterval();
        }
        this.$emit('input', this.value1)
      },
      deep:true
    },
    'value1.airWeightLimit'(){
      this.$emit('input', this.value1)
    },
    value:{
      handler(val){
        this.value1 = val;
      },
      deep:true
    },
  }
}
</script>

<style scoped>
.wrapper{
  font-size: 14px;
}
.el-row {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
</style>
