<template>
  <div>
    <template v-if="type === 'text'">
      <!--普通文本模式-->
      <template v-for="(item, index) in lotList">
        <div class="attr-item" :key=`${item.formattedLotAttr}_${index}`>
          <span class="attr-item__label">{{item.titleZh}} :&nbsp;&nbsp;</span>
          <span class="attr-item__value">
            {{
            item.lotField === 'LOT_ATT04'
              // 判断是批次属性4品质
              ? $utils.keyMatcher(formData[item.formattedLotAttr], $keys.common.lotAtt04).name
              : getLotValueName(formData[item.formattedLotAttr], item.keyValue)
            }}
          </span>
        </div>
      </template>
    </template>
    <template v-else>
      <!--使用inject将el-form的props注入子组件的el-form, 用法类似 $attrs-->
      <el-form
        v-bind="elForm.$props"
        :disabled="isDisabled"
      >
        <template v-for="item in lotList" v-if="item.inputControl !== 'F'">
          <el-form-item
            :key="item.formattedLotAttr"
            :label="item.titleZh"
            :prop="item.formattedLotAttr"
          >
            <!--日期类型-->
            <template v-if="item.fieldType === 'DateField'">
              <el-date-picker
                v-model="formData[item.formattedLotAttr]"
                value-format="yyyy-MM-dd 00:00:00"
              ></el-date-picker>
            </template>

            <!--时间日期类型-->
            <template v-else-if="item.fieldType === 'DateTimeField'">
              <el-date-picker
                type="datetime"
                v-model="formData[item.formattedLotAttr]"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </template>

            <!--下拉框类型-->
            <template v-else-if="item.fieldType === 'ComboBox'">
              <el-select v-model="formData[item.formattedLotAttr]">
                <!--批次属性4为固定属性品质-->
                <template v-if="item.lotField === 'LOT_ATT04'">
                  <template v-for="att04Item in $keys.common.lotAtt04">
                    <el-option :key="att04Item.id" :value="att04Item.key" :label="att04Item.name"></el-option>
                  </template>
                </template>

                <!--其他下拉的批次属性, options在获取批次属性时请求到-->
                <template v-else>
                  <template v-for="attItem in item.options">
                    <el-option :key="attItem.key" :value="attItem.key" :label="attItem.nameZh"></el-option>
                  </template>
                </template>
              </el-select>
            </template>

            <!--数字输入框-->
            <template v-else-if="item.fieldType === 'NumberField'">
              <el-input type="number" v-model="formData[item.formattedLotAttr]"></el-input>
            </template>

            <!--默认类型 普通文本输入框-->
            <template v-else>
              <el-input v-model="formData[item.formattedLotAttr]"></el-input>
            </template>
          </el-form-item>
        </template>
      </el-form>
    </template>
  </div>
</template>

<script>
export default {
  name: 'LotAttrs',
  inject: {
    elForm: {
      from: 'elForm',
      default: false,
    }
  },
  props: {
    type: {
      type: String,
      default: 'form'
    },
    // 查询属性的条件
    queryParams: {
      type: Object,
      required: true
    },
    // 禁用属性
    disabled: {
      type: Boolean,
      default: false,
    },
    // 父组件表单对象, 可不传, 会默认使用 elForm.$props.model
    formData: {
      type: Object
    },
    // 绑定值前缀
    prefix: {
      type: String,
    },
    // 绑定值后缀
    suffix: {
      type: String,
    }
  },
  watch: {
    queryParams: {
      immediate: true,
      handler () {
        this.getLotConfig()
      },
    }
  },
  computed: {
    // 前缀
    preText () {
      return this.prefix || ''
    },
    sufText () {
      return this.suffix || ''
    },
    // 禁用
    isDisabled () {
      return this.elForm.$props.disabled || this.disabled
    },
    // 批次属性配置
    allLotConfigs () {
      return this.$store.state.framework.lotAttrsConfigs
    },
  },
  data () {
    return {
      lotList: [], // 批次属性配置数组, 通过全局 lotAttrs 配置获取
    }
  },
  methods: {
    // 获取批次属性
    getLotConfig () {
      if (!this.queryParams.skuCode && !this.queryParams.ownerCode) {
        console.log('没有为 LotAttrs 组件传入 skuCode 和 ownerCode')
        this.lotList = []
        return
      }
      // 极端情况会返回第一个值
      // 商品匹配对象
      const skuObj = this.allLotConfigs.skuList
        .find(item =>
          // queryParams 存在哪个值就判断哪个值, 否则返回 true, 不返回 true 会导致不进行后续判断
          (this.queryParams.skuCode
            ? this.queryParams.skuCode === item.skuCode
            : true
          ) &&
          (this.queryParams.ownerCode
            ? this.queryParams.ownerCode === item.ownerCode
            : true
          )
        ) || {}
      // 商品批次匹配对象
      const lotObj = this.allLotConfigs.lotList.find(item => skuObj.lotCode === item.lotCode) || {}
      // 批次属性列表
      const lotAttrList = lotObj.lotAttList || []
      // 设置个性字段以及枚举值
      this.lotList = lotAttrList.map(item => {
        const copy = { ...item } // 防止有多个 LotAttrs 组件时, 绑定 key 重复, 在货权转移单出现过此 bug
        copy.formattedLotAttr = this.preText + this.camelCase(copy.lotField) + this.sufText // 设置att字段格式
        if (copy.keyValue) {
          // 存在 keyValue 说明是有筛选集合, 设置筛选 options
          this.setSelectOptions(copy)
        }
        return copy
      })
      // 提交获取到的批次属性配置
      this.$emit('getLotConfig', {
        lotObj,
      })
    },
    // 获取并设置下拉选项
    setSelectOptions (obj) {
      const lotValueMap = this.allLotConfigs.lotValueList.find(item => item.masterCode === obj.keyValue) || {}
      this.$set(obj, 'options', lotValueMap.valueList || []) // 可能存在空值的情况
    },
    /**
     * 通过逻辑值获取显示值
     *
     * @param {String} value, 接口数据给的逻辑值
     * @param {String} code, 当前数据的筛选映射 code, 取自数据的 keyValue 字段, 映射筛选集合的 masterCode 字段
     * */
    getLotValueName (value, code) {
      if (!code) return value
      return (((this.allLotConfigs.lotValueList
        .find(item => item.masterCode === code) || {}).valueList || [])
        .find(item => item.key === value) || {}).nameZh
    },
    // 转驼峰
    camelCase (string) {
      const lowerStr = string.toLowerCase()
      // 有前缀则首字母大写
      const rawStr = this.preText ? this.$utils.upperFirst(lowerStr) : lowerStr
      return rawStr.replace(/_([a-z])/g, (all, letter) => {
        return letter.toUpperCase()
      })
    },
  }
}
</script>

<style type="text/css" lang="scss">
  /*谷歌*/
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  /*火狐*/
  input[type="number"] {
    -moz-appearance:textfield;
  }
  .attr-item {
    display: inline-block;
    width: 25%;
    font-size: 14px;
    padding: 7px;
    &__value {
      word-break: break-all;
    }
  }
</style>
