<template>
  <vxe-modal v-model="value" id="productDialogModal" v-loading="load" :width="width?width+'px':'80%'" @show="show" @hide="hide" :height="height?height+'px':'80%'" min-width="500" min-height="400" show-zoom resize transfer show-footer>
    <template #title>
      <span>选择商品</span>
    </template>
    <template #default>
      <module-view :propConfig="config" ref="view" @pagination="getList" @search="getList" @resert="getList" @clickHandle="clickHandle" />
    </template>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="confirm">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import wmsStatue from './wmsStatus.vue'
@Component
export default class ProductModal extends Vue {
  value=false
  time:any;
  timeNum = 0;
  data:Array<any>=[]
  load = false;

  @Prop()
  width?:number

  @Prop()
  height?:number

  @Prop()
  mulit?:boolean

  config:any={
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'mini',
      },
      columns:[
        [
        //   {
        //   span:10,
        //   label:'物料编号',
        //   prop:'skuid',
        //   component:'by-input',
        //   labelWidth:'120px',
        //   compConfig:{
        //     attr:{
        //       clearable:true,
        //       placeholder:'请输入物料编号'
        //     }
        //   }
        // },
        {
          span:8,
          label:'商品名称',
          prop:'name',
          component:'by-input',
          labelWidth:'120px',
          compConfig:{
            attr:{
              clearable:true,
              placeholder:'商品名称'
            }
          }
        },{
            span: 8,
            label: '物料编码',
            prop: 'skuCode',
            labelWidth: '130px',
            component: 'by-input',
            compConfig: {
              attr: {
                placeholder: '物料编码',
                clearable: true
              }
            }
          },{
            span: 8,
            label: '69码-商品条码',
            prop: 'barCode',
            labelWidth: '130px',
            component: 'by-input',
            compConfig: {
              attr: {
                placeholder: '69码-商品条码',
                clearable: true
              }
            }
          }]
      ]
    },
    tool:{
      tools:{
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        triggerRowCheck:'row',
        pageSize:10
      },
      columns:[{
        title:'编号',
        field:'id',
        width:100
      },{
        title:'商品名称',
        field:'skuTitle',
        ellipsis:true,
        // width:150
      },{
        title:'物料编码',
        field:'skuCode',
        width:140
      },{
        title:'69码',
        field:'barCode',
        width:140
      },{
        width: '80px',
        title: '是否已同步WMS',
        field: 'isSynchronousWMS',
        component: wmsStatue
      },
      // {
      //   title:'规格',
      //   field:'materialSpec',
      //   width:240,
      //   ellipsis:true
      // },
      {
        title:'单价',
        field:'price',
        width:80
      },{
        title:'库存',
        field:'stock',
        width:80
      }]
    }
  }
  brandData:Array<any>=[]
  
  getBrandData(){
    return this.brandData;
  }

  clickHandle(n:string){
    if(n == 'onRefresh'){
      this.getList()
    }
  }

  setShow(v:boolean){
    this.value = v;
  }

  created(){
    if(this.mulit){
      this.config.table.attr.checkbox = true
    }else{
      this.config.table.attr.radio = true
    }
  }
  mounted(){}

  //确定
  confirm(){
    let data:Array<any>=this.getSelectdata();
    if(data.length == 0){
      this.$message('请选择商品！')
      return
    }
    this.$emit('confirm',data);
    this.value = false;
  }
  //获取已选中表格数据
  getSelectdata(){
    let data:Array<any>=[];
    if(this.$refs.view){
      data = (this.$refs.view as any).getSelectData()
    }
    return data;
  }
  //显示弹窗
  show(){
    this.getList()
    if(this.$refs.view){
      (this.$refs.view as any).clearCheckboxRow();
    }
  }
  hide() {
    this.$emit('hide')
  }
  getList(){
    if(!this.$refs.view){
      if(this.timeNum > 5){
        return
      }
      this.timeNum ++;
      setTimeout(()=>{
        this.getList()
      },500) 
      return
    }
    let query:any = (this.$refs.view as any).getQuery();
    query.isLikeSearch = '0';
    this.load = true;
    (this as any).$request({
      url: '/maindata/maindataMaterialSku/page',
      method: 'get',
      params:query
    }).then((res:any) => {
      this.load = false;
      if(res.data.records){
        (this.$refs.view as any).setTableValue(res.data.records);
        this.data = res.data.records;
        let page={
          pageNo: res.data.current, //当前页
          pageSize: res.data.size, //每页条数
          total: res.data.total //总条数
        };
        (this.$refs.view as any).setPage(page)
      }
    }).catch(()=>{
      this.load = false;
    })
  }
} 
</script>
<style lang="scss" scoped>

</style>