<template>
  <div>
    <el-button size="small" type="primary"  @click="onShow">新增关联商品</el-button>
    <el-dialog
        :visible.sync="drawer"
        width="1100px"
        @close="onClose"
    >
      <search @searchActive="searchActive" :placeholder="placeholder"></search>
      <div>
        <tablelayout :layout="tablecols" :data="productsList" :custom="true" :checkbox="true" height="calc(100vh - 452px)" @checkboxCallBack="checkboxCallBack">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'province'">
              <span>{{scope.column.data.province}} - {{scope.column.data.city}} - {{scope.column.data.county}}</span>
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
          </template>

        </tablelayout>

      </div>
      <div>
        <p style="margin-top: 2%">已选{{selected}}个商品，共{{total}}个商品</p>
      </div>
      <div class="dialog-footer">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit"  class="normal-btn-width btn-primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tablelayout from '@/components/table/index2'
import search from './search'
export default {
  name: "add",
  props:["plm_technicalinfoid"],
  data(){
    return {
      drawer:false,
      add:false,
      placeholder:'商品名称',
      form:{
        itemid:''
      },
      rules:{
        itemid: [
          { required: true, message: '档案名称不可为空', trigger: 'blur' },
        ],
      },
      productsList:[],
      multipleSelection: [],
      tablecols:[],
      tableHieght:420,
      selected:0,
      total:0,
      params:{
        "id": 20220923140602,
        "content": {
          "where": {
            "condition": ""
          }
        }
      }
    }
  },
  components:{
    tablelayout,
    search
  },
  mounted() {

  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).relationProductTable.tablecols
  },
  methods: {
    onShow(){
      this.drawer = true
      this.productsData()
    },
    onClose(){
      this.drawer = false
      this.form.itemid=''
    },
    async productsData(){
      const res = await this.$api.requested(this.params)
      console.log(res)
      this.productsList = res.data
      this.total = res.total
    },
    checkboxCallBack(val){
      console.log(val)
      this.multipleSelection = val;
      this.selected = val.length

    },
    async onSubmit(){
      console.log(this.multipleSelection)
      let arr = this.multipleSelection.map(e=>{
        return {
          plm_technicalinfo_itemid:0,
          itemid:e.itemid
        }
      })
      const res = await this.$api.requested({
        "id": "20220926102003",
        "version":1,
        "content": {
          "plm_technicalinfoid":this.plm_technicalinfoid,
          "iteminfos":arr
        }
      })
      this.tool.showMessage(res, () => {
        this.drawer = false
        this.$emit('addSuccess')
      })
    },
    searchActive(data) {
      this.params.content.where.condition = data
      this.productsData()
    },
  }
}
</script>

<style scoped>

</style>