<template>
  <div>
    <el-button type="primary" size="small" @click="addBtn">新增商品</el-button>
    <el-dialog title="产品组商品新增" append-to-body :visible.sync="dialogTableVisible" width="50%">
      <table1 v-if="productList" @checkboxCallBack="checkboxCallBack" :layout="tablecols" :data="productList" :opwidth="200" :custom="false" :height="300" :checkbox="true">
      </table1>
      <span slot="footer" class="dialog-footer">
        <div>
          <el-button @click="dialogTableVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="submit" size="small" :disabled="product.length == 0">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils'
import table1 from '@/components/table/index'
export default {
  data () {
    return {
      dialogTableVisible:false,
      product:[],
      tablecols:[],
      productList:''
    }
  },
  props:['id'],
  watch: {
    
  },
  components:{table1},
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).addProductTable.tablecols
  },
  methods: {
    async submit() {
      if(this.product.length == 0) return
      this.product = this.product.map(item => {
        return {
          sa_itemgroupmxid:0,
          itemid:item.itemid
        }
      })
      let res = await this.$api.requested({
        "accesstoken": "69f1a508bad99ddffdce4bc3c919a0d0",
        "id": "20220923110303",
        "version":1,
        "content": {
          "sa_itemgroupid":this.id,
          "itemclassinfos":this.product
        }
      })
      this.tool.showMessage(res,() => {
        this.dialogTableVisible = false
        this.$emit('onSuccess')
      })
    },
    handleClose(tag) {
      this.form.tag.splice(this.form.tag.indexOf(tag), 1);
    },
    checkboxCallBack(data) {
      this.product = data
    },
    async addBtn() {
      this.dialogTableVisible=true
      let res = await this.$api.requested({
        "id": "20220923112503",
        "version":1,
        "content": {
          "nocache":true,
          "sa_itemgroupid":this.id,
          "where":{
              "condition":""
          }
        }
      })
      console.log(res);
      this.productList = res.data
    }
  }
}

</script>
<style scoped>
/deep/.el-dialog__body {
  padding-bottom: 0 !important;
  padding-top: 10px !important;
}
/deep/.dialog-footer {
  margin-top: 10px !important;
}
/deep/.el-form-item__content {
  width: calc(100% - 100px) !important;
}
</style>