<script>
import Selector from "@/components/Selector/index.vue";
import Inputor from "@/components/Inputor/index.vue";
import Template from "@/views/cms/template/index.vue";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";

export default {
  name: "SeaPrice",
  components: {Template, Inputor, Selector},
  props:{
    priceType: Number, // 1全包价，0清关费+运费
    unitList:{
      type: Array,
      default: []
    },
    currencyList:{
      type: Array,
      default: []
    },
    readonly: Boolean,
    value:{
      type: Object,
      default: () => {
        return {

        }
      }
    }
  },
  created() {
    this.initSpecialPrice()
  },
  data(){
    return {

    }
  },
  methods:{
    getDictDatas,
    // 初始化特需加价
    initSpecialPrice(){
      if(!this.value.specialList){
        this.$set(this.value, 'specialList', [])
      }
      this.getDictDatas(this.DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS).forEach(item => {
        if(!this.value.specialList.find(special => special.specialDictType == item.value)){
          this.value.specialList.push({
            allPrice: undefined, // 新建默认给0，否则默认是null
            allPriceUnit: this.value[`allPriceUnit`],
            allVolumeUnit: this.value[`allVolumeUnit`],
            transportPrice: undefined, // 新建默认给0，否则默认是null
            transportPriceUnit: this.value[`transportPriceUnit`],
            transportVolumeUnit: this.value[`transportVolumeUnit`],
            clearancePrice: undefined,
            clearancePriceUnit: this.value[`clearancePriceUnit`],
            clearanceVolumeUnit: this.value[`clearanceVolumeUnit`],
            specialDictType: item.value
          })
        }
      })
    },
    // 校验
    validate(){
      let valid = true
      // 价格检查
      if(this.priceType){
        if(!this.validatePrice(this.value[`allPrice`])){
          valid = false
          this.$message.error(`请设置全包价`)
        }
      }else{
        if(!this.validatePrice(this.value[`transportPrice`])){
          valid = false
          this.$message.error(`请设置运费`)
        }
        if(!this.validatePrice(this.value[`clearancePrice`])){
          valid = false
          this.$message.error(`请设置清关费`)
        }
      }

      return valid
    },
    // 校验价格是否为空，可以是0
    validatePrice(value){
      if(value === undefined || value === null || value === ''){
        return false
      }
      return true
    },
  }
}
</script>

<template>
  <el-row>
    <el-col :span="12">
      <div class="page-title">{{$t('海运运费价格设置')}}</div>
      <el-form-item :label="$t('默认运费')" v-if="!priceType">
        <el-input-number v-model="value[`transportPrice`]" :placeholder="$t('整数或者两位小数')" :controls="false":disabled="readonly" class="w-100 mr-10"/>
        <selector
          :disabled="readonly"
          v-model="value[`transportPriceUnit`]"
          :options="currencyList"
          :label-field="$l(null, 'title')"
          @input="$emit('changeUnit', {
           value: $event,
           field: `transportPriceUnit`
        })"
          value-field="id"
          class="w-100" />
        /
        <selector
          :disabled="readonly"
          v-model="value[`transportVolumeUnit`]"
          :options="unitList"
          :label-field="$l(null, 'title')"
          @input="$emit('changeUnit', {
            value: $event,
            field: `transportVolumeUnit`
          })"
          value-field="id"
          class="w-100" />
      </el-form-item>

      <el-form-item :label="$t('默认全包价')" v-if="priceType">
        <el-input-number v-model="value[`allPrice`]" :placeholder="$t('整数或者两位小数')" :disabled="readonly" :controls="false" class="w-100 mr-10"/>
        <selector
          :disabled="readonly"
          v-model="value[`allPriceUnit`]"
          :options="currencyList"
          :label-field="$l(null, 'title')"
          @input="$emit('changeUnit', {
           value: $event,
           field: `allPriceUnit`
        })"
          value-field="id"
          class="w-100" />
        /
        <selector
          :disabled="readonly"
          v-model="value[`allVolumeUnit`]"
          :options="unitList"
          :label-field="$l(null, 'title')"
          @input="$emit('changeUnit', {
            value: $event,
            field: `allVolumeUnit`
          })"
          value-field="id"
          class="w-100" />
      </el-form-item>
      <!--特性加价-->
      <template v-for="(special, specialIndex) in value.specialList">
        <div :key="specialIndex + 'transport'">
          <el-form-item
            v-if="!priceType"
            :label="getDictDataLabel(DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS, special.specialDictType) + $t('运费')"
          >
            <el-input-number v-model.number="special[`transportPrice`]" :controls="false" :min="0" :disabled="readonly" :placeholder="$t('整数或者两位小数')" class="w-100 mr-10" />
            <selector disabled v-model="special[`transportPriceUnit`]" :options="currencyList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100 mr-10" />
            <span class="mr-10">/</span>
            <selector disabled v-model="special[`transportVolumeUnit`]" :options="unitList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100" />
          </el-form-item>
          <el-form-item
            v-if="priceType"
            :label="getDictDataLabel(DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS, special.specialDictType) + $t('全包价')"
          >
            <el-input-number v-model.number="special[`allPrice`]" :controls="false" :min="0" :disabled="readonly" :placeholder="$t('整数或者两位小数')" class="w-100 mr-10" />
            <selector disabled v-model="special[`allPriceUnit`]" :options="currencyList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100 mr-10" />
            <span class="mr-10">/</span>
            <selector disabled v-model="special[`allVolumeUnit`]" :options="unitList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100" />
          </el-form-item>
        </div>
      </template>
    </el-col>
    <el-col :span="12"  v-if="!priceType">
      <div class="page-title">{{$t('海运清关费价格设置')}}</div>
      <el-form-item :label="$t('默认清关费')">
        <el-input-number v-model="value[`clearancePrice`]" :placeholder="$t('整数或者两位小数')" :disabled="readonly" :controls="false" class="w-100 mr-10"/>
        <selector
          :disabled="readonly"
          v-model="value[`clearancePriceUnit`]"
          :options="currencyList"
          :label-field="$l(null, 'title')"
          @input="$emit('changeUnit', {
           value: $event,
           field: `clearancePriceUnit`
        })"
          value-field="id"
          class="w-100" />
        /
        <selector
          :disabled="readonly"
          v-model="value[`clearanceVolumeUnit`]"
          :options="unitList"
          :label-field="$l(null, 'title')"
          @input="$emit('changeUnit', {
            value: $event,
            field: `clearanceVolumeUnit`
          })"
          value-field="id"
          class="w-100" />
      </el-form-item>
      <!--特性加价-->
      <template v-for="(special, specialIndex) in value.specialList">
        <div :key="specialIndex + 'transport'">

          <el-form-item
            v-if="!priceType"
            :label="getDictDataLabel(DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS, special.specialDictType) + $t('清关费')"
          >
            <el-input-number v-model.number="special[`clearancePrice`]" :controls="false" :min="0" :disabled="readonly" :placeholder="$t('整数或者两位小数')" class="w-100 mr-10" />
            <selector disabled v-model="special[`clearancePriceUnit`]" :options="currencyList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100 mr-10" />
            <span class="mr-10">/</span>
            <selector disabled v-model="special[`clearanceVolumeUnit`]" :options="unitList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100" />
          </el-form-item>
        </div>
      </template>


    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.bold {
  font-weight: bold;
}
.text-lg{
  font-size: 1.3rem;
}
.tips{
  font-size: 1rem; color: red;
}
</style>
