<template>
 <div>
    <el-row type="flex" align="align" :gutter="10" >
      <el-col :span="6">空运订单重量上限(kg)</el-col>
      <el-col :span="6" ><el-input v-model="value1.airWeightLimit"></el-input></el-col>
      <el-col :span="6">
        <slot></slot>
      </el-col>
    </el-row>
    <h1>空运清关费</h1>
      <div v-for="(item ,index) in value1[keyArr]">
        <el-row :gutter="10">
          <el-col :span="4">
            第{{index + 1 }}阶梯定价方案：
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="addInterval" v-if="index === 0" >
              添加区间
            </el-button>
            <el-button type="danger" @click="deleteFn(index)" v-else>
              删除
            </el-button>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">
            第{{index + 1}}阶梯
          </el-col>
          <el-col  :span="9">
            <div style="display: flex;align-items: center;">
              <el-input v-model="item.startNum"></el-input> - <el-input v-model="item.endNum" ></el-input > /
              <weight-select v-model="item.weightUnit" :options="unitList"></weight-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3" >
            空运清关费
          </el-col>
          <el-col :span="9">
            <div style="display: flex;align-items: center;">
              <el-input v-model="item.clearancePrice"></el-input>
              <currency-select :options="currencyList" v-model="item.clearancePriceUnit"></currency-select>
              / <weight-select :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";
export default {
  props:{
    value:{
      type:Object,
      default:()=>({})
    },
    keyArr:{
       type:String,
       default:'channelPriceStepClearanceList'
    }
  },
  name: "packaging-type",
  components: {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,
      },

    }
  },
  mounted() {
    this.value1 = this.value
      this.$nextTick(()=>{
        if(this.value1[this.keyArr] && this.value1[this.keyArr].length === 0){
          this.addInterval()
        }
      })
    },
  methods:{
     addInterval(){
       let p = {
         "channelId":'',
         "clearancePrice":'',
         "clearancePriceUnit":'',
         "clearanceVolumeUnit":'',
         "endNum":'',
         "packagingId":'',
         "startNum":'',
         "weightUnit":''
       }
       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>
.el-row {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
</style>
