<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <!-- 发布商品：01、选择商品类目 -->
  <div class="Mall4j posting-select-category">
    <!-- 商品类型 -->
    <div class="prod-type-box">
      <div class="prod-title-row">
        <span>{{ $t('product.prodInfo.commodityCategory') }}</span>
      </div>
      <div class="type-select">
        <!-- 实物商品（物流发货） -->
        <div
          class="type-item"
          :class="{'active': dataForm.spuMold === 0 && dataForm.goodsType === 1}"
          @click="switchProdType(1, 0)"
        >
          <div class="big-txt">
            {{ $t('product.prodInfo.physicalGoods') }}
          </div>
          <div class="weak-txt">
            &ensp;({{ $t('product.prodInfo.logisticsDelivery') }})
          </div>
          <i class="active-icon" />
        </div>

        <!-- 组合商品（物流发货） -->
        <div
          class="type-item"
          :class="{'active': dataForm.spuMold === 2 && dataForm.goodsType === 1}"
          @click="switchProdType(1, 2)"
        >
          <div class="big-txt">
            组合商品
          </div>
          <div class="weak-txt">
            &ensp;({{ $t('product.prodInfo.logisticsDelivery') }})
          </div>
          <i class="active-icon" />
        </div>
      </div>
    </div>

    <!-- 实物商品分类 -->
    <div
      v-show="dataForm.spuMold!==1"
      class="prod-category-box"
    >
      <div class="prod-title-row">
        <span>{{ $t('product.prodInfo.commodityClassification') }}</span>
      </div>
      <div class="select-category-containers">
        <!-- 选择平台类目 -->
        <div class="category-com">
          <div class="title">
            <span class="stress">*</span>{{ $t('product.prodInfo.selectPlatformClassification') }}：
          </div>
          <CategorySelection
            ref="platformRef"
            v-model:dataForm="setDataForm"
            :category-id="dataForm.categoryId"
            @re-selection="reSelectionCategory"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CategorySelection from './category-selection.vue'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()

const props = defineProps({
  dataForm: {
    required: true,
    type: Object
  }
})

const setDataForm = computed({
  get () {
    return props.dataForm
  },
  Set (val) {
    emit('update:dataForm', val)
  }
})

const emit = defineEmits(['getCategorySelected', 'update:dataForm'])

const Data = reactive({
  // 分类名称组合
  categoryName: '',
  // 分类类型
  categoryType: '',
  // 模板导入
  uploadVisible: false
})

watch(() => props.dataForm, () => {
  proxy.$forceUpdate()
})

const platformRef = ref(null)

// 分类回显
const init = (categoryId) => {
  platformRef.value.getDataList(categoryId)
}

// 切换商品类型
const switchProdType = (type, spuMold) => {
  if (props.dataForm.prodId) {
    if (type !== props.dataForm.spuMold) {
      ElMessage({
        message: $t('product.cannotModifyProdType'),
        type: 'error',
        duration: 1500,
        onClose: () => {
        }
      })
      return
    }
  }
  setDataForm.value.goodsType = type
  setDataForm.value.spuMold = spuMold
  if (type === 3) {
    // 模板导入
    getUpload()
  }
}

const prodUploadRef = ref(null)
// 跳转至导入选择
const getUpload = () => {
  Data.uploadVisible = true
  nextTick(() => {
    prodUploadRef.value.init()
  })
}

// 重选分类
const reSelectionCategory = () => {
  if (props.dataForm.categoryId) {
    setDataForm.categoryId = null
    Data.categoryName = ''
  }
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.posting-select-category {
  // 商品类型
  .prod-type-box {
    .type-select {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .type-item:not(:last-child) {
        margin-right: 10px;
      }
      .type-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        padding: 16px;
        border: 1px solid #DCDCDC;
        cursor: pointer;
        .weak-txt {
          font-size: 12px;
          color: #999;
        }
        &.active {
          border-color: #155bd4;
          .big-txt {
            color: #155bd4;
          }
          .active-icon {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0;
            height: 0;
            border-bottom: 20px solid #155bd4;
            border-left: 20px solid transparent;
            &::after {
              content: "";
              position: absolute;
              right: 2px;
              bottom: -16px;
              width: 10px;
              height: 5px;
              border: 1px solid #fff;
              border-radius: 1px;
              border-top: none;
              border-right: none;
              background: transparent;
              transform: rotate(-45deg);
            }
          }
        }
      }
      .type-item:last-child {
        &.active {
          .active-icon {
            right: -1px;
          }
        }
      }
    }
  }

  // 商品分类
  .prod-category-box {
    margin-top: 30px;
    .select-category-containers {
      .category-com {
        display: inline-block;
        margin-right: 50px;
        .title {
          font-size: 12px;
          margin-bottom: 10px;
          .stress {
            font-size: 14px;
            color: #D40000;
            padding-right: 4px;
          }
        }
      }
    }
  }
}
</style>
