<template>
  <div>
    <el-button size="small"  type="primary" icon="el-icon-plus" @click="onShow" >添加</el-button>
    <el-drawer
        title="添加"
        :visible.sync="dialogProductVisible"
        append-to-body
        size="80%"
        :show-close="false"
        direction="rtl"
        @close="onColes">
      <div class="drawer__panel">
        <div class="flex-align-center flex-between ">
          <slot name="operation"></slot>
          <div class="flex-align-center">
            <el-input size="small"  suffix-icon="el-icon-search" v-model="params.content.where.condition" placeholder="产品名称,编号" @keyup.enter.native="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" clearable></el-input>&nbsp;
          </div>
          <div style="margin-top:-10px;margin-bottom: 10px;float: right">
            <el-button style="float: right" type="primary" size="mini" @click="batchSelect" :disabled="tableSelectData.length === 0 ">批量添加</el-button>
          </div>
        </div>
        <div class="produtMag-panel">
          <el-table
              ref="multipleTable"
              height="calc(100vh - 370px)"
              :data="list"
              style="width: 100%"
              :header-cell-style="{height:'50px',color:'#606266',fontWeight:'400'}"
              :cell-style="{height:'50px',color:'#666666',fontWeight:'400'}"
              @selection-change="selectionChange">
            <el-table-column
                type="selection"
                width="42"
                fixed>
            </el-table-column>
            <el-table-column
                prop="itemclassnum"
                label="类别编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="itemclassfullname"
                label="类别名称"
                width="0">
            </el-table-column>
<!--            <el-table-column
                label="品牌名称"
                width="180">
              <template slot-scope="scope">
                <p><span>{{scope.row.model}}</span>&nbsp;/&nbsp;<span>{{scope.row.spec}}</span></p>
              </template>
            </el-table-column>-->
            <el-table-column
                prop="upitemclassname"
                label="上级类别"
                width="0">
            </el-table-column>
            <el-table-column
                prop="discountrate"
                label="折扣(%)"
                width="150">
              <template slot-scope="scope">
                <span>{{scope.row.discountrate || '--'}}</span>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="80">
              <template slot-scope="scope">
                <el-button type="text" @click="onSelect(scope.row)">添 加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <div style="float: left">已选:{{selectTotal}}个商品</div>
            <div style="margin-top:16px;text-align:right">
              <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="params.content.pageNumber"
                  :page-sizes="[20, 50, 100, 200]"
                  :page-size="100"
                  layout="total,sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onColes" 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>
export default {
  name: "add",
  props:["disabled"],
  data(){
    return {
      dialogProductVisible:false,
      tablecols:[],
      list:[],
      total:0,
      currentPage:0,
      tableSelectData:[],
      selectData:[],
      selectTotal:0,
      params:{
        "id": 20230219162803,
        "content": {
          "sa_quotedpriceid":this.$route.query.id,
          "pageNumber": 1,
          "pageSize": 100,
          "where":{
            "condition":"",
            "istool":'',
            "sa_brandid":''
          }
        }
      },
      timer:0
    }
  },
  methods:{
    onShow(){
      this.dialogProductVisible = true
      this.listData()
    },
    async listData(){
      const res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
    },
    debounce (fn, wait) {
      let that = this
      return function () {
        if (that.timer !== null) clearTimeout(that.timer)
        that.timer = setTimeout(fn, wait)
      }
    },
    batchSelect(){
      this.debounce(this.onSubmit,300)()
    },
    async onSubmit(){
      const res = await this.$api.requested({
        "id": 20230219161303,
        "content": {
          "sa_quotedpriceid":this.$route.query.id,     //sat_notice_classid<=0时 为新增
          "items":this.selectData
        }
      })
      this.tool.showMessage(res,()=>{
        this.$emit('itemClassAdd')
        this.listData()
        this.selectListData()
      })

    },
    onSelect(val){
      this.tableSelectData = []
      this.tableSelectData[0] = val
      let obj = this.tableSelectData.map(e=>{
        return {
          "sa_quotedprice_itemclassid":0,
          "itemclassid":e.itemclassid,
          "discountrate":e.discountrate
        }
      })
      this.selectData = obj
      /*this.$nextTick(()=>{
        this.onSubmit()
      })*/
      this.debounce(this.onSubmit,300)()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.productData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.productData()
    },
    selectionChange(val){
      this.tableSelectData = []
      this.tableSelectData = val
      let obj = this.tableSelectData.map(e=>{
        return {
          "sa_quotedprice_itemclassid":0,
          "itemclassid":e.itemclassid,
          "discountrate":e.discountrate
        }
      })
      this.selectData = obj
    },
    onColes(){

    },
    /*已选产品数据*/
    async selectListData(){
      const res = await this.$api.requested({
        "id": 20230219161403,
        "content": {
          "sa_quotedpriceid":this.$route.query.id     //sat_notice_classid<=0时 为新增
        }
      })
      this.selectTotal = res.total
    },

  },
  mounted() {
  }
}
</script>

<style scoped>

</style>