<template>
  <div>
    <el-button type="text" size="small" @click="editBtn">编辑</el-button>
    <el-dialog title="商品组明细" append-to-body :visible.sync="dialogTableVisible" width="30%">
      <el-form label-position="right" ref="form" :rules="rules" inline label-width="100px" :model="form" size="small">
        <el-form-item label="商品" prop="product">
          <el-select v-model="form.product" placeholder="请选择商品">
            <el-option
              v-for="item in productList()"
              :key="item.itemid"
              :label="item.itemname"
              :value="item.itemid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div>
          <el-button @click="dialogTableVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="submit" size="small">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils'
export default {
  data () {
    return {
      dialogTableVisible:false,
      form: {
        product:''
      },
      rules: {
        product: [
          { required: true, message: '请选择商品', trigger: 'blur' },
        ],
      }
    }
  },
  inject: ['productList'],
  props:['id','rowData'],
  watch: {
    
  },
  created() {
    
  },
  methods: {
    editBtn() {
      this.form.product = this.rowData.itemid
      this.dialogTableVisible = true
    },
    submit() {
     this.$refs.form.validate(async val => {
        if(val) {
          let res = await this.$api.requested({
            "accesstoken": "69f1a508bad99ddffdce4bc3c919a0d0",
            "id": "20220923110303",
            "version":1,
            "content": {
              "sa_itemgroupid":this.id,
              "itemclassinfos":[
                {
                  sa_itemgroupmxid:this.rowData.sa_itemgroupmxid,
                  itemid:this.form.product
                }
              ]
            }
          })
          this.tool.showMessage(res,() => {
            this.dialogTableVisible = false
            this.$emit('onSuccess')
          })
        }
     })
    },
    handleClose(tag) {
      this.form.tag.splice(this.form.tag.indexOf(tag), 1);
    },
    
  }
}

</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;
}
/deep/.el-select {
  width: 100% !important;
}
/deep/.el-form-item {
  width: 100% !important;
}
/deep/.el-input{
  width: 100% !important;
}
</style>