<template>
  <div class="m-box" v-loading="load">
    <moduleView :propConfig="config" ref="view" @search="search" @pagination="pagination" @resert="resert" />
    <synchronous-orderModal ref="synchronousOrderModal" @handleSuccess="handleSuccess" />
    <product-sku-modal ref="sku"  @confirm="confirmProduct" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import SynchronousOrderModal from "./components/synchronousOrderModal.vue";
import { maindataMaterialRelevancy, materialrelevancy } from '@/api/maindataMaterialRelevancy'
@Component({ components: { SynchronousOrderModal } })
export default class SynchronousProduct extends Vue {
  load = false;
  currentRow:any=null;
  count=0;
  time:any=null;
  config:any={
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'mini',
        rules:{
          name:[{
            required: true, message: '请输入名称', trigger: 'blur'
          }]
        }
      },
      columns:[
        [{
          span:6,
          label:'商品编码',
          prop:'goodsSkuId',
          component:'by-input',
          compConfig:{
          }
        },{
          span:6,
          label:'商品名称',
          prop:'goodsName',
          component:'by-input',
          compConfig:{
          }
        },{
          span:6,
          label:'关联sku',
          prop:'materialField',
          component:'by-input',
          compConfig:{
          }
        }]
      ]
    },
    tool:{
      customTools: [
        {
          name: '商品同步', icon: 'el-icon-setting', event: {
            click: () => {
              (this.$refs.synchronousOrderModal as any).setShow(true);
            }
          }
        }
      ]
    },
    table:{
      attr:{
        size:'mini',
        align:'center'
      },
      columns:[{
        title:'商品编码',
        field:'goodsSkuId',
        width:150
      },{
        title:'商品名称',
        field:'goodsName'
      },{
        title:'关联sku',
        field:'materialField'
      },{
        title:'关联的skuID',
        field:'materialSkuId',
        width:140
      },{
        title:'操作',
        action:true,
        width:170,
        plugins:[{
          name:'关联商品',
          audit:'',
          event:{
            show:(row:any) => {
              return row.isSync != 1
            },
            click:(item:any) => {
              (this.$refs.sku as any).setShow(true);
              this.setCurrentRow(item);
            }
          }
        },{
          name:'直接注册',
          audit:'',
          event:{
            show:(row:any) => {
              return row.isSync != 1
            },
            click:(item:any) => {
              this.$message('尚未开发！');
              // console.log('该行数据：',item)
            }
          }
        }]
      }]
    }
  }

  mounted(){
    this.$nextTick(()=>{
      this.time = setInterval(()=>{
        this.getSyncData()
      },500)
      
    })
  }
  setCurrentRow(row:any){
    this.currentRow = row;
  }
  //商品同步成功
  handleSuccess() {
    let data = (this.$refs.view as any).getPage();
    data.pageNo = 1;
    this.getList(data);
  }
  pagination(){
    this.search();
  }
  resert(){
    let data = (this.$refs.view as any).getPage();
    data.pageNo = 1;
    this.getList(data);
  }
  search(){
    let data:any=(this.$refs.view as any).getQuery();
    data.pageNo = 1;
    this.getList(data);
  }
  getList(data:any){
    let page:any = {
      pageNo:data.pageNo,
      pageSize:data.pageSize
    }
    
    this.load = true;
    maindataMaterialRelevancy(data).then((res:any) => {
      this.load = false;
      if(this.$refs.view){
        (this.$refs.view as any).setTableValue(res.data.records);
        page.pageNo = res.data.current;
        page.total = res.data.total;
        (this.$refs.view as any).setPage(page);
      }
    }).catch((err:any) => {
      this.load = false;
    })
  }
  //列表数据
  getSyncData(){
    this.count ++ ;
    if(this.count >=5){
      clearInterval(this.time)
      return
    }
    if(!this.$refs.view){
      return
    }
    this.count = 0;
    clearInterval(this.time)
    let data = (this.$refs.view as any).getPage();
    
    this.getList(data);
  }

  confirmProduct(data:Array<any>){
    if(data.length == 0){
      this.$message('请选择商品！');
      return;
    }
    let value:any={
      lid:this.currentRow.id,
      mskuid:data[0].id
    }
    this.load = true;
    materialrelevancy(value).then((res:any) => {
      this.load = false;
      this.$message({
        message:'商品关联成功！',
        type:'success'
      })
      this.getSyncData();
    }).catch((err:any) => {
      this.load = false;
      this.$message.error('商品关联失败！')
    })
  }
}
</script>

<style lang="scss" scoped>
.m-box{
  height: 100%;
  width: 100%;
}
</style>