<template>
  <div>
    <el-button type="primary" size="small" @click="drawer=true">新 建</el-button>
    <el-drawer title="创建商品组" :visible.sync="drawer" size="80%" direction="rtl" append-to-body @close="onCancel" :show-close="false">
      <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="6">
              <el-form-item label="商品组名称:" prop="groupname">
                <el-input v-model="form.groupname" placeholder="请输入商品组名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="品牌:" prop="sa_brandid">
                <el-select v-model="form.sa_brandid" placeholder="请选择品牌" style="width: 100%">
                  <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="6">
              <el-form-item label="序号:" prop="sequence">
                <el-input v-model="form.sequence" placeholder="请输入商品组序号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="默认商品:" prop="sequence">
                <selectProduct ref="product" @selectRow="productChange" :productData="tableData">
                  <el-input v-model="form.itemname" :disabled="tableData.length == 0" readonly type="text" slot="input" size="small" @focus="$refs.product.tableData=tableData,$refs.product.visible=true"></el-input>
                </selectProduct>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <p class="normal-title normal-margin">
                添加产品
                <el-button v-if="col === 0" type="text" size="mini" @click="col = 12">选择商品</el-button>
                <el-button v-else type="text" size="mini" @click="col = 0">关闭选择</el-button>
              </p>

            </el-col>
            <el-col :span="24 - col">
              <Table type="add" :data="tableData" ref="submitProduct" @onSuccess="onSuccess" @deleteProduct="deleteProduct"></Table>
            </el-col>
            <el-col :span="col">
              <selectTable @addProduct="addProduct"></selectTable>
            </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>
import previewImage from '@/components/previewImage/index.vue'
import selectTable from '@/template/product/index.vue'
import selectProduct from '@/template/selectProduct/index.vue'
import Table from './table.vue'
export default {
  props: ['data', 'type'],
  components:{selectTable,previewImage,Table,selectProduct},
  data () {
    return {
      drawer:false,
      col:0,
      tableData:[],
      index:0,
      form: {
        sa_brandid: '',
        groupname: '',
        itemno: '',
        itemname:'',
        sequence:'',
        tag: [],
        sequence:'',
        sa_itemgroupid:0,
      },
      rules: {
        sa_brandid: [
          { required: true, message: '请选择品牌', trigger: 'blur' },
        ],
        groupname: [
          { required: true, message: '请输入商品组名称', trigger: 'blur' },
        ],
        itemno: [
          { required: true, message: '请选择商品', trigger: 'blur' },
        ],
        sequence: [
          { required: true, message: '请输入序号', trigger: 'blur' },
        ],
      }
    }
  },
  inject:['brandList'],
  created () {
  },
  methods: {
    onCancel(){
      this.drawer = false
      this.form={
        sa_brandid: '',
        groupname: '',
        itemno: '',
        itemname:'',
        tag: []
      },
      this.tableData = []
    },
    addProduct (row) {
      this.index ++
      row.sequence = this.index
      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
      })
      if (this.tableData.findIndex(item => item.itemno == this.form.itemno) == -1) {
        this.form.itemno = ''
        this.form.itemname = ''
      }
    },
    async submit() {
      if (this.tableData.length === 0) 
        return this.$message({
          message:'商品组明细不能为空',
          type:'error'
        })
      this.$refs.form.validate(async val => {
        if (val) {
          const res = await this.$api.requested({
          "id": "20220922164303",
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.groupdata = res.data
          this.index = 0
          this.$refs['submitProduct'].submitProduct(res.data.sa_itemgroupid)
          this.$store.dispatch('changeDetailDrawer',true)
          this.$router.push({path:'/productGroupDetail',query:{id:res.data.sa_itemgroupid,rowindex:res.data.rowindex}})
        })
        }
      })
      
    },
    productChange (data) {
      this.form.itemno = data.itemno
      this.form.itemname = data.itemname
      this.$refs.product.visible = false
    },
    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>