<template>
  <div>
    <el-button type="primary" size="mini" @click="editBtn">编 辑</el-button>
    <el-drawer title="编辑商品组" :visible.sync="drawer" size="80%" direction="rtl" append-to-body @close="onCancel">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules"  ref="form"  size="small" label-position="right" label-width="100px">
            <el-col :span="8">
              <el-form-item label="商品组名称:" prop="groupname">
                <el-input v-model="form.groupname" placeholder="请输入商品组名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="品牌:" prop="sa_brandid">
                <el-select v-model="form.sa_brandid" placeholder="请选择品牌" style="width: 100%" :disabled="true">
                  <el-option v-for="item in brandList" :key="item.sa_brandid" :label="item.brandname"
                             :value="item.sa_brandid" size="small">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="序号:" prop="sequence">
                <el-input type="text" size="small" v-model="form.sequence"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onCancel" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="submit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: ['data', 'type'],
  data () {
    return {
      drawer:false,
      col:0,
      tableData:[],
      brandList:[],
      form: {
        sa_brandid: '',
        groupname: '',
        itemno: '',
        tag: [],
        sequence:''
      },
      rules: {
        sa_brandid: [
          { required: true, message: '请选择品牌', trigger: 'blur' },
        ],
        groupname: [
          { required: true, message: '请输入商品组名称', trigger: 'blur' },
        ],
        itemno: [
          { required: true, message: '请选择商品', trigger: 'blur' },
        ]
      }
    }
  },
  created () {
    this.getBrandList()
  },
  methods: {
    editBtn () {
      this.drawer=true
      this.form = Object.assign({},this.form,this.data)
    },
    onCancel(){
      this.drawer = false
      this.form={
        sa_brandid: '',
        groupname: '',
        itemno: '',
        tag: []
      },
      this.tableData = []
    },
    addProduct (row) {
      this.tableData.push(row)
      const res = new Map();
      this.tableData = this.tableData.filter((item) => !res.has(item['itemid']) && res.set(item['itemid'], 1));
    },
    deleteProduct (row) {
      this.tableData = this.tableData.filter(e=>{
        return e.itemid !== row.itemid
      })
    },
    async submit() {
      if (this.tableData.length === 0) 
      const res = await this.$api.requested({
        "id": "20220922164303",
        "content": {
          "sa_itemgroupid":0,     //sa_itemgroupid<=0时 为新增
          "sa_brandid":this.form.sa_brandid,
          "groupname":this.form.groupname,
          "itemno":"",
          "sequence":this.form.sequence,
          "tag": []
        }
      })
    },
    /* 可选择的品牌列表 */
    async getBrandList() {
      let res = await this.$api.requested({
        "id": "20220922085103",
        "version":1,
        "content": {
          "nocache":true,
          "where":{
              "condition":""
          }
        }
      })
      this.brandList = res.data
      console.log(this.brandList,'品牌');
    },
    async onSuccess () {
      const res = await this.$api.requested({
        "id": "20220922164303",
        "content": {
          "sa_itemgroupid":this.groupdata.sa_itemgroupid,     //sa_itemgroupid<=0时 为新增
          "sa_brandid":this.groupdata.sa_brandid,
          "groupname":this.groupdata.groupname,
          "itemno":this.tableData[0].itemno,
          "tag": []
        }
      })
      this.$emit('onSuccess')
      this.drawer = false
      
    }
  }
}

</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>