<template>
  <vxe-modal v-model="value" id="productDialogModal" :width="width?width+'px':'80%'" @show="show" :height="height?height+'px':'80%'" min-width="500" min-height="400" 
  show-zoom resize transfer show-footer  @confirm="confirm">
    <template #title>
      <span>选择商品</span>
    </template>
    <template #default>
      <module-view :propConfig="config" ref="view" @pagination="getList" @search="getList" @resert="getList" @clickHandle="clickHandle" />
    </template>
  </vxe-modal>
</template>

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

  @Prop()
  width?:number

  @Prop()
  height?:number

  @Prop({
    default:true
  })
  mulit?:boolean

  config:any={
    search:{
      attr:{
        size:'mini'
      },
      columns:[
        [{
          span:6,
          label:'名称',
          prop:'name',
          component:'by-input',
          compConfig:{
            attr:{
              clearable:true,
              placeholder:'请输入名称'
            }
          }
        },{
          span:6,
          label:'简称',
          prop:'short_name',
          component:'by-input',
          compConfig:{
            attr:{
              clearable:true,
              placeholder:'请输入简称'
            } 
          }
        },{
          span:6,
          label:'财务编号',
          prop:'accounting_code',
          component:'by-input',
          compConfig:{
            attr:{
              clearable:true,
              placeholder:'请输入财务编号'
            }
          }
        },{
          span:6,
          label:'国际码',
          prop:'ns_code',
          component:'by-input',
          compConfig:{
            attr:{
              clearable:true,
              placeholder:'请输入国际码'
            }
          }
        }],
        [{
          span:6,
          label:'单位',
          prop:'unit',
          component:'by-input',
          compConfig:{
            attr:{
              clearable:true,
              placeholder:'请输入单位'
            }
          }
        },{
          span:6,
          label:'品牌',
          prop:'brandId',
          component:'by-select',
          compConfig:{
            attr:{
              label:'name',
              value:'id',
              placeholder:'请选择品牌',
              clearable:true,
              requestFormat:'records'
            },
            request:{
              url:'/maindata/maindataMaterialBrand/page',
              method:'get',
              params:{
                pageNo:1,
                pageSize:1000
              }
            }
          }
        },{
          span:6,
          label:'分类',
          prop:'categoryId',
          component:'by-select',
          compConfig:{
            attr:{
              label:'name',
              value:'id',
              placeholder:'请选择分类',
              clearable:true,
              requestFormat:'records'
            },
            request:{
              url:'/maindata/maindataMaterialCategory/page',
              method:'get',
              params:{
                pageNo:1,
                pageSize:1000
              }
            }
          }
        }]
      ]
    },
    tool:{
      tools:{
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        triggerRowCheck: 'row'
      },
      columns:[{
        title:'编码',
        field:'id',
        width:100
      },{
        title:'名称',
        field:'name',
        width:150
      },{
        title:'简称',
        field:'short_name',
        width:100
      },{
        title:'款式编码',
        field:'newNumber'
      },{
        title:'国际码',
        field:'ns_code'
      },{
        title:'单价',
        field:'price'
      },{
        title:'原价',
        field:'basePrice'
      },{
        title:'单位',
        field:'unit'
      },{
        title:'重量',
        field:'weight'
      },{
        title:'保质期（天）',
        field:'shelf_life'
      },{
        title:'库存',
        field:'stock'
      }]
    },
    // request:{
    //   url:'/system/maindataMaterial/page'
    // }
  }
  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
    }
    // this.getBrand()
  }
  mounted(){}
  //获取品牌数据
  getBrand(){
    (this as any).$request({
      url: '/maindata/maindataMaterialBrand/page',
      method: 'get',
      params:{
        pageNo:1,
        pageSize:1000
      }
    }).then((res:any) => {
      if(res.data.records){
        this.brandData = res.data.records;
      }
    })
  }
  //确定
  confirm(){
    let data:Array<any>=this.getSelectdata();
    this.$emit('confirm',data);
  }
  //获取已选中表格数据
  getSelectdata(){
    let data:Array<any>=[];
    if(this.$refs.view){
      data = (this.$refs.view as any).getSelectData()
    }
    return data;
  }
  //显示弹窗
  show(){
    if(this.data.length ==0){
      this.time =setInterval(()=>{
        this.getList()
      },500) 
    }
    if(this.$refs.view){
      (this.$refs.view as any).clearCheckboxRow();
    }
  }
  getList(){
    if(!this.$refs.view){
      if(this.timeNum > 5){
        clearInterval(this.time)
      }
      this.timeNum ++;
      return
    }
    clearInterval(this.time)
    let query = (this.$refs.view as any).getQuery();
    (this as any).$request({
      url: '/maindata/maindataMaterial/page',
      method: 'get',
      params:query
    }).then((res:any) => {
      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)
      }
    })
  }
} 
</script>
<style lang="scss" scoped>

</style>