<template>
  <div>
    <el-button type="primary" size="small" :disabled="!!disabled" @click="editBtn">新增商品明细</el-button>
    <el-drawer title="新增商品明细" :visible.sync="drawer" size="80%" direction="rtl" append-to-body :show-close="false">
      <div class="drawer__panel">
          <el-row>
            <el-form label-position="right" ref="form" :rules="rules" inline label-width="100px" :model="form" size="small">
              <el-col :span="24">
                <Table ref="table" :id="$route.query.id" @addProduct="submit">
                </Table>
              </el-col>
            </el-form>
          </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="drawer = false" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Table from '@/template/product/index.vue'
import previewImage from '@/components/previewImage/index.vue'
export default {
  props: ['data', 'type','rowData','disabled'],
  components:{Table,previewImage},
  data () {
    return {
      drawer:false,
      dseleteGroup: '',
      inputVisible: false,
      inputValue: '',
      productList:[],
      tablecols:[],
      total:0,
      search:'',
      form: {
        sa_brandid: '',
        groupname: '',
        itemno: '',
        tag: []
      },
      rules: {
        sa_brandid: [
          { required: true, message: '请选择品牌', trigger: 'blur' },
        ],
        groupname: [
          { required: true, message: '请输入商品组名称', trigger: 'blur' },
        ],
      },
    }
  },
  inject:['brandList'],
  methods: {
    editBtn () {
      this.drawer = true
      this.form = Object.assign({},this.form,this.rowData)
      this.form.itemno = ''
      this.$nextTick(() => {
        this.$refs.table.listData()
      })
    },
    submit (row) {
      this.$refs.form.validate(async val => {
        if (val) {
          let itemno = [{
            sa_itemgroupmxid:0,
            itemno:row.itemno,
            itemid:row.itemid
          }]
          let res = await this.$api.requested({
            "id": "20220923110303",
            "version": 1,
            "content": {
              "sa_itemgroupid": this.rowData.sa_itemgroupid,
              "itemclassinfos": itemno
            }
          })
          this.tool.showMessage(res, () => {
            this.$emit('onSuccess')
          })
        }
      })
    },
  }
}

</script>
<style scoped>
.dialog-footer {
  margin-top: 32px;
  text-align: center;
}
/deep/.el-form-item {
  width: 100%;
}
/deep/.el-form-item__content {
  width: calc(100% - 100px);
}
/deep/.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>