<template>
  <el-dialog :visible.sync="show" title="新增商品" width="900px" @close="closeDialog" :close-on-click-modal="false">
    <el-form label-width="120px" :inline="true">
      <el-form-item label="商品品种/品类：">
        <treeselect
          :options="treeList"
          style="width: 200px;"
          :disable-branch-nodes="true"
          :show-count="true"
          :normalizer="normalizer"
          placeholder="请选择品种"
          v-model="type_id">
          <div slot="value-label" slot-scope="{ node }">{{ parseLabel(node) }}</div>
        </treeselect>
      </el-form-item>
      <div v-for="(item, i) in skus" :key="i" class="skuBox">

        <div class="tit">规格{{ i + 1 }}</div>

        <el-form-item label="规格名称：">
          <el-input placeholder="规格名称" v-model="item.title"></el-input>
        </el-form-item>
        <el-form-item label="颜色/特性：">
          <el-input placeholder="颜色/特性" v-model="item.attribute"></el-input>
        </el-form-item>
        <el-form-item label="商品状态：">
          <el-select v-model="item.status" placeholder="下架（默认）" style="width: 200px;">
            <el-option v-for="it in options" :key="it.id" :label="it.label" :value="it.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品成本：">
          <el-input v-model="item.cost" placeholder="商品成本">
          </el-input>
        </el-form-item>

        <div>
          <el-form-item label="可售库存：">
            <el-input v-model="item.sale_stock" placeholder="可售库存">
            </el-input>
          </el-form-item>
          <el-form-item label="最终编码：">
            <el-input v-model="item.external_sku_id" placeholder="不输入自动生成"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="danger" @click="handleDelete(i)" size="mini" icon="el-icon-delete">删除</el-button>
          </el-form-item>
          
        </div>
      </div>
      <div>
        <el-form-item>
          <el-button type="success" @click="toAddSku()" icon="el-icon-plus">增加规格</el-button>
        </el-form-item>
      </div>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave()" :loading="loading">保存</el-button>
      <el-button plain @click="cancel()">取消</el-button>
    </span>
    
  </el-dialog>
  
</template>
  
<script>
  import { addGoods } from '@/api/goods.js'
  import { goods_types } from '@/api/rankingData.js'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  
  export default {
    components: { Treeselect },
    props: {
      show: {
        type: Boolean,
        default: () => {
          return false
        }
      }
    },
    data() {
      return {
        showDialog: false,
        treeList: [],
        skus: [],
        type_id: null,
        options: [
          { id: 0, label: "下架" },
          { id: 1, label: "在售" }
        ],
        loading: false
      }
    },
    methods: {
      getGoodsTypes() {
        let params = {
          parent_id: 0
        }
        goods_types(params).then((res) => {
          this.treeList = JSON.parse(JSON.stringify(res.data.data).replace(/name/g, "label"))
        })
      },
      // 添加商品
      handleSave() {
        this.loading = true
        let skus = this.skus
        let params = {
          type_id: this.type_id || '',
          goods_id: '',
          skus: skus
        }
        addGoods(params).then((res) => {
          this.$message({ message: '商品添加成功！', type: 'success' })
          this.loading = false
          this.closeDialog()
          this.$emit('complete')
        }).catch(() => {
          this.loading = false
        })
      },
      toAddSku() {
        if(!this.type_id) {
          this.$message({ message: "请选择商品品种/品类", type: "error" })
          return
        }
        this.handleAdd()
      },
      handleAdd() {
        let sku = {
          title: '',
          external_sku_id: '',
          status: 0,
          num: 0,
          cost: 0,
          sale_stock: 9999,
          reserve: 0,
          attribute: ''
        }
        this.skus.push(sku)
      },
      handleDelete(index) {
        this.skus.splice(index, 1)
      },
      cancel() {
        this.closeDialog()
      },
      normalizer(node) {
        if ((!node.children || (node.children && node.children.length == 0)) && node.level == 1) {
          node.isDisabled = true
        }
        return node
      },
      parseLabel(node) {
        let text = ''
        text += node.parentNode ? node.parentNode.label + ' / ' : ''
        text += node.raw ? node.raw.label : ''
        return text
      },
      closeDialog() {
        this.showDialog = false
        this.$emit('close')
      }
    },
    watch: {
      show: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.skus = []
            this.showDialog = true
            this.handleAdd()
            this.getGoodsTypes()
          }
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>
  
<style scoped lang="scss">
  .skuBox{
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 15px 0;
    margin-bottom: 15px;
    background-color: #f3f3f3;
    .tit{
      padding-left: 40px;
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 15px;
    }
  }

</style>