<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: {Inputor, Selector},
  props:{
    // 字段前缀
    fieldPrefix: String,
    // 价格名称
    priceName: String,
    // 包装类型字段
    packagingField: String,
    unitList:{
      type: Array,
      default: []
    },
    currencyList:{
      type: Array,
      default: []
    },
    readonly: Boolean,
    value:{
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed:{
    packagingList(){
      const dicts = JSON.parse(JSON.stringify(getDictDatas(DICT_TYPE.ECW_PACKAGING_TYPE)))
      return dicts.map(dict => {
        dict.enable = true
        this.value[this.packagingField]?.forEach(item => {
          if(item.packagingTypes?.length && item.packagingTypes.indexOf(dict.value) > -1){
            dict.enable = false
          }
        })
        return dict
      })
    }
  },
  created() {
    this.initSpecialPrice()
    this.initPackingPrice()
  },
  data(){
    return {

    }
  },
  methods:{
    getDictDatas,
    // 包装类型初始化
    initPackingPrice(){
      // 已有包装类型则处理字段，没有则初始化一个
      if(this.value[this.packagingField]?.length){
        this.value[this.packagingField].forEach(item => {
          if(!item.packagingTypes){
            this.$set(item, 'packagingTypes', [])
          }else if(typeof item.packagingTypes == 'string'){
            item.packagingTypes = item.packagingTypes.split(',')
          }
        })
        return
      }
      this.addPackage()
    },
    // 初始化特需加价
    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
          })
        }
      })
    },
    // 添加包装类型运费
    addPackage(){
      if(!this.value[this.packagingField]){
        this.$set(this.value, this.packagingField, [])
      }
      this.value[this.packagingField]?.push({
        packagingPrice: undefined,
        packagingPriceUnit : this.value[`${this.fieldPrefix}PriceUnit`],
        packagingVolumeUnit : this.value[`${this.fieldPrefix}VolumeUnit`],
      })
    },
    // 删除包装类型运费
    deletePackage(index){
      this.value[this.packagingField]?.splice(index, 1)
    },
    // 校验
    validate(){
      let valid = true
      // 价格检查
      if(!this.validatePrice(this.value[`${this.fieldPrefix}Price`])){
        valid = false
        this.$message.error(this.$t("请设置{name}", {name: this.priceName}))
      }

      // 检查包装费
      if(this.value[this.packagingField]?.length){
        this.value[this.packagingField]?.forEach((item, index) => {
          if(!item.packagingTypes?.length) return
          if(!this.validatePrice(item.packagingPrice)){
            valid = false
            this.$message.error(this.$t("请设置{name}的包装费{index}", {name: this.priceName, index: index+1}))
          }
        })
      }

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

<template>
  <div>
    <div class="page-title">{{$t('{name}价格设置', {name: this.priceName})}}</div>
    <el-form-item :label="$t('默认{name}', {name: this.priceName})">
      <el-input-number v-model="value[`${fieldPrefix}Price`]" :placeholder="$t('整数或者两位小数')" :controls="false":disabled="readonly" class="w-100 mr-10"/>
      <selector
        :disabled="readonly"
        v-model="value[`${fieldPrefix}PriceUnit`]"
        :options="currencyList"
        :label-field="$l(null, 'title')"
        @input="$emit('changeUnit', {
           value: $event,
           field: `${fieldPrefix}PriceUnit`
        })"
        value-field="id"
        class="w-100" />
      /
      <selector
        :disabled="readonly"
        v-model="value[`${fieldPrefix}VolumeUnit`]"
        :options="unitList"
        :label-field="$l(null, 'title')"
        @input="$emit('changeUnit', {
            value: $event,
            field: `${fieldPrefix}VolumeUnit`
          })"
        value-field="id"
        class="w-100" />
    </el-form-item>

    <!--特性加价-->
    <template v-for="(special, specialIndex) in value.specialList">
      <div :key="specialIndex + 'transport'">
        <el-form-item
          :label="getDictDataLabel(DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS, special.specialDictType) + priceName + $t('加价')"
        >
          <el-input-number v-model.number="special[`${fieldPrefix}Price`]" :controls="false" :min="0" :disabled="readonly" :placeholder="$t('整数或者两位小数')" class="w-100 mr-10" />
          <selector disabled v-model="special[`${fieldPrefix}PriceUnit`]" :options="currencyList" :label-field="$l(null, 'title')" value-field="id" class="w-100 mr-10" />
          <span class="mr-10">/</span>
          <selector disabled v-model="special[`${fieldPrefix}VolumeUnit`]" :options="unitList" :label-field="$l(null, 'title')" value-field="id" class="w-100" />
        </el-form-item>
      </div>
    </template>

    <!--包装类型价格-->
    <template v-for="(item, i) in value[packagingField]">
      <el-form-item :label="$t('包装类型') + priceName + (i+1)" :key="i">
        <template #label>
          <div class="el-form-item__label" style="width: 150px;">{{$t('包装类型{name}加价', {name: priceName}) + (i+1)}}</div>
          <div v-if="!item.packagingTypes || !item.packagingTypes.length" class="tips">{{$t('未选择包装类型将被忽略')}}</div>
        </template>
        <el-select v-model="item.packagingTypes" multiple placeholder="请选择" style="width: 100%; max-width: 450px; margin-bottom: 5px; display: block">
          <el-option
            v-for="item in packagingList"
            :key="item.value"
            :label="$l(item, 'label')"
            :value="item.value"
            :disabled="!item.enable"
          >
          </el-option>
        </el-select>
        <el-input-number v-model="item.packagingPrice" :controls="false" :min="0" :placeholder="$t('整数或者两位小数')" class="w-100 mr-10" />
        <selector disabled v-model="item.packagingPriceUnit" :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="item.packagingVolumeUnit" :options="unitList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100" />
        <template v-if="i == value[packagingField].length -1 && !readonly">
          <el-link type="primary" @click.native="addPackage" class="ml-5">{{$t('添加')}}</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link type="danger" @click.native="deletePackage(i)">{{$t('删除')}}</el-link>
        </template>
      </el-form-item>
    </template>
  </div>
</template>

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