<!-- 
/* @name    表单选择sku组件
 * @authors pen (you@example.org)
 * @date    2022-06-08 
 * @version 1.0.0
 */
 -->
<template>
  <div class="tags_box">
    <el-tag
      v-for="tag in data.value"
      :key="tag.id"
      :closable="
        data.closable === undefined ? !choiceSkuDisabled : data.closable
      "
      class="tutorial_dialog_tag set_tag_height"
      size="medium"
      :disable-transitions="false"
      @close="handleTagClose(tag)"
    >
      {{ tag[data.showField || 'sku'] }}
    </el-tag>
    <el-button
      v-if="!data.justCheck"
      class="tutorial_dialog_tag tag_btn"
      size="small"
      :disabled="choiceSkuDisabled"
      @click="openSkuDialog"
    >
      {{ data.choiceBtnText || choiceBtnText }}
    </el-button>
    <!-- 选择弹窗 -->
    <choice-dialog-view
      ref="productDialog"
      :choiceDialogWidth="data.choiceDialogWidth || choiceDialogWidth"
      :choiceDialogTitle="data.choiceDialogTitle || choiceDialogTitle"
      :isCustomSave="data.isCustomSave || isCustomSave"
      :extendQuery="data.choiceSkuExtendQuery || choiceSkuExtendQuery"
      :columns="data.choiceSkuColumns || choiceSkuColumns"
      :queryFormItems="data.choiceSkuQueryFormItems || choiceSkuQueryFormItems"
      :choiceDialogRequestUrl="
        data.choiceDialogRequestUrl || choiceDialogRequestUrl
      "
      @submit-event="skuSubmitEvent"
    >
      <template #columns>
        <slot name="columns"></slot>
      </template>
      <template
        v-for="item in data.choiceSkuColumns || choiceSkuColumns"
        v-slot:[item.customSlot]="slotProps"
      >
        <slot
          :name="item.customSlot"
          v-bind:customSlotData="slotProps.customSlotData"
        ></slot>
      </template>
      <template v-slot:expandSlot="slotProps">
        <slot
          name="expandSlot"
          v-bind:customSlotData="slotProps.customSlotData"
        ></slot>
      </template>
    </choice-dialog-view>
  </div>
</template>
<script>
import choiceDialogView from '../choiceDialog.vue'
export default {
  name: 'form-choice-sku-view',
  components: {
    choiceDialogView
  },
  props: {
    // 弹窗宽度
    choiceDialogWidth: {
      type: [String, Number],
      default: '850px'
    },
    // 弹窗标题
    choiceDialogTitle: {
      type: String,
      default: 'SKU'
    },
    // 是否禁用
    choiceSkuDisabled: Boolean,
    // 选择弹窗查询的额外参数
    choiceSkuExtendQuery: {
      type: Object
    },
    // 选择弹窗查询接口
    choiceDialogRequestUrl: {
      type: String,
      default: '/productItem/page'
    },
    // 弹窗表格的列
    choiceSkuColumns: {
      type: [Object, Array],
      default: () => {
        return {
          columnType2: {
            type: 'selection',
            reserveSelection: true,
            visible: true,
            width: '46px',
            align: 'center'
          },
          columnType: {
            label: '#',
            type: 'index',
            visible: true,
            width: '46px',
            align: 'center'
          },
          name: {
            label: '产品名称',
            visible: true
            // align: "center"
          },
          sku: {
            label: 'SKU',
            visible: true
            // align: "center"
          },
          platformSku: {
            label: '平台sku',
            visible: true
            // align: "center"
          }
        }
      }
    },
    // 弹窗的查询条件
    choiceSkuQueryFormItems: {
      type: Array,
      default: () => {
        return [
          {
            label: '产品sku',
            type: 'input',
            value: '',
            name: 'sku',
            placeholder: '产品sku',
            xl: 5,
            lg: 5
          },
          {
            label: '平台sku',
            type: 'input',
            value: '',
            name: 'platformSku',
            placeholder: '平台sku',
            xl: 5,
            lg: 5
          },
          {
            label: '产品名称',
            type: 'input',
            value: '',
            name: 'name',
            placeholder: '产品名称',
            xl: 5,
            lg: 5
          }
        ]
      }
    },
    // 选择sku按钮的文字
    choiceBtnText: {
      type: String,
      default: '+ 添加'
    },
    // 选择sku的配置数据
    choiceSkuData: {
      type: Object,
      default: () => ({})
    },
    // 选择数据之后映射给id的字段名
    choiceSkuValueField: {
      type: String,
      default: 'productId'
    },
    // 使用自定义保存方法
    isCustomSave: {
      type: Boolean
    },
    // 只能选择一个sku
    isChoiceOne: {
      type: Boolean
    },
    // 当只能选择一个sku时 多选之后的提示文字
    warnText: {
      type: String,
      default: '只能选择一个sku'
    },
    // 去除重复数据判断的字段
    filterField: {
      type: String,
      default: 'id'
    },
    // 去除重复数据判断数据源的字段
    originalFilterField: {
      type: String,
      default: 'id'
    }
  },
  data() {
    return {
      data: []
    }
  },
  mounted() {
    this.data = this.choiceSkuData
    console.log('传入的数据', this.choiceSkuData)
  },
  methods: {
    handleTagClose(tag) {
      this.data.value.splice(this.data.value.indexOf(tag), 1)
      this.$emit('choice-update', this.data.value, this.data)
    },
    openSkuDialog() {
      this.$emit('open-sku-dialog')
      this.$refs['productDialog'].$emit('open', {
        type: 'add'
      })
    },
    // 保存事件
    skuSubmitEvent(arr) {
      if (arr && arr.length) {
        if (this.isChoiceOne && arr.length > 1) {
          this.$api.warning(this.warnText)
          return
        }
        // && this.isCustomSave
        if (this.isChoiceOne) {
          // 判断是否有映射表，有映射表则按映射表赋值
          if (this.data.mapTable) {
            let obj = {}
            Object.keys(this.data.mapTable).forEach(item => {
              obj[item] = arr[0][item]
              if (this.data.mapTable[item])
                obj[item] = arr[0][this.data.mapTable[item]]
            })
            this.data.value.push(obj)
          } else {
            this.data.value = [
              { id: arr[0][this.choiceSkuValueField], sku: arr[0].sku }
            ]
          }
          this.$refs.productDialog.choiceDialogClose()
          this.$emit('sku-submit-event', arr)
          this.$emit('choice-update', this.data.value, this.data)
          return
        }
        arr.forEach(p => {
          if (
            !this.data.value.find(
              y => y[this.filterField] === p[this.originalFilterField]
            )
          ) {
            // 判断是否有映射表，有映射表则按映射表赋值
            if (this.data.mapTable) {
              let obj = {}
              Object.keys(this.data.mapTable).forEach(item => {
                obj[item] = p[item]
                if (this.data.mapTable[item])
                  obj[item] = p[this.data.mapTable[item]]
              })
              this.data.value.push(obj)
            } else if (this.data.mapAll) {
              this.data.value.push(p)
            } else {
              this.data.value.push({
                id: p[this.choiceSkuValueField],
                sku: p.sku
              })
            }
          }
        })
      }
      console.log('sku', arr, this.data.value, this.data)
      this.$emit('sku-submit-event', arr)
      this.$emit('choice-update', this.data.value, this.data)
    }
  }
}
</script>
<style lang="less" scoped>
.tags_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.tutorial_dialog_tag {
  // margin:5px 10px 5px 0;
  margin: 0 10px 10px 0;
}
.tag_btn {
  height: 30px;
  line-height: 0;
}
.set_tag_height {
  height: 30px;
  line-height: 28px;
  background-color: #ecf5ff;
  border: 1px solid #d9ecff;
  color: #409eff;
}
/deep/ .el-tag .el-tag__close {
  color: #409eff;
}
/deep/ .el-tag .el-tag__close:hover {
  background: #409eff;
  color: #fff;
}
/deep/ .tag_btn:focus,
.tag_btn:hover {
  color: #409eff;
  border-color: #d9ecff;
  background-color: #ecf5ff;
}
/deep/ .el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: #fff;
  border-color: #ebeef5;
}
</style>
