<template>
  <div>
    <el-button size="mini" type="primary" :disabled="!isEdit()" @click="dialogFormVisible = true">新 建</el-button>
    <el-drawer
        title="新增商品模块"
        :visible.sync="dialogFormVisible"
        size="70%"
        direction="rtl"
        append-to-body
        @close="dialogFormVisible = false"
        :show-close="false">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="right" size="mini">
            <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="groupqty">
                <el-input v-model="form.groupqty" placeholder="请输入单位数量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否必须订购:" prop="requard">
                <el-checkbox v-model="form.requard" :true-label="1" :false-label="0"></el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="商品:" prop="product">
                <selectTable v-if="dialogFormVisible" ref="table" idName="itemid" :layout="tablecols" :data="productList" :custom="true" height="500px">
                  <template v-slot:customcol="scope">
                    <div v-if="scope.column.columnname == 'attinfos' && scope.column.data.attinfos[0]">
                      <previewImage style="height:38px;width:38px" :image="scope.column.data.attinfos[0]" :list="scope.column.data.attinfos" :deletebtn="false"></previewImage>
                    </div>
                    <div v-else-if="scope.column.columnname == 'itemclass'">
                        <span v-for="(item,index) in scope.column.data[scope.column.columnname]" :key="index">
                          {{item?item.itemclassname+',':'--'}}
                        </span>
                        <!-- <el-tag v-if="item" style="margin-bottom:10px">{{item.itemclassname}}</el-tag> -->
                    </div>
                    <div v-else-if="scope.column.columnname == 'spec'">
                      {{scope.column.data.model}}/{{scope.column.data.spec}}
                    </div>
                    <div v-else-if="scope.column.columnname == 'brand'">
                      <p v-for="(item,index) in scope.column.data[scope.column.columnname]" :key="index">
                        <span style="float: left" v-if="index === scope.column.data[scope.column.columnname].length -1">{{item?item.brandname+'':'--'}}</span>
                        <span style="float: left" v-else>{{item?item.brandname+',':'--'}}</span>
                      </p>
                    </div>
                    <div v-else>{{scope.column.data[scope.column.columnname]}}</div>
                    <div v-if="!scope.column.data[scope.column.columnname] && scope.column.columnname != 'operation' && scope.column.data[scope.column.columnname] !== 0">--</div>
                  </template>
                </selectTable>
                <div class="container normal-panel" style="text-align:right">
                  <el-pagination
                      style="text-align:right"
                      background
                      small
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="params.content.pageNumber"
                      :page-size="params.content.pageSize"
                      layout="total, prev, pager, next, jumper"
                      :total="total">
                  </el-pagination>
                </div>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectTable from '@/components/selectTable/index'
import previewImage from '@/components/previewImage/index'
export default {
  name: "add",
  inject:['isEdit'],
  components:{selectTable,previewImage},
  data(){
    return {
      dialogFormVisible:false,
      tablecols:[],
      productList:[],
      total:0,
      form:{
        "sa_promotion_itemgroupid":0,     //sat_notice_classid<=0时 为新增
        "sa_promotionid": '',
        "requard":1,
        "groupname": "",
        "groupqty": ''
      },
      params:{
        "id": 20220923112503,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
            "sa_itemgroupid":0,
            "where": {
              "condition": ''
            }
        }
      },
      rules:{
        groupname:[
          { required: true, message: '请输入模块名称', trigger: 'blur'},
        ],
      },
    }
  },
  watch: {
    dialogFormVisible (val) {
      if (!val) {
        this.$refs.form.resetFields()
        this.$refs.table.allArr = []
      }
    }
  },
  methods:{
    onSubmit(){
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        this.form.sa_promotionid = this.$route.query.id
        const res = await this.$api.requested({
          "id": "20230102112203",
          "content": this.form
        })
        this.tool.showMessage(res, async ()=>{
          this.dialogFormVisible = false
          let arr = this.$refs.table.allArr.map(item => {
            return {
              "sa_promotion_itemsid":0,
              "itemid":item.itemid,
              "islimit":0,
              "groupqty":0,
              "orderaddqty":0,
              "orderminqty":0
            }
          })
          if (arr.length) {
            let res2 = await this.$api.requested({
              "id":20230102142403,
              "content": {
                sa_promotionid:this.$route.query.id,
                sa_promotion_itemgroupid:res.data.sa_promotion_itemgroupid,
                iteminfos: arr
              }
            })
            this.$emit('onSuccess')
          } else {
            this.$emit('onSuccess')
          }
          
        })
      })
    },
    async getProductList () {
      const res = await this.$api.requested(this.params)
      this.productList = res.data
      console.log(this.productList);
      
      this.total = res.total
    },
    brandChange (val) {

    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.getProductList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.getProductList()
    },
  },
  created() {
    this.getProductList()
    this.tablecols = this.tool.tabelCol(this.$route.name).productTable.tablecols
  },
}
</script>

<style scoped>

</style>