<template>
  <vxe-modal v-model="value" id="shopModel" title="选择店铺" width="70%" height="80%" show-zoom resize transfer show-footer v-loading="load">
    <module-view :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="getList" 
    @resert="queryList" @search="queryList" />
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="btn">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { query } from '@/api/shop'
@Component({components:{}})
export default class ShopModal extends Vue {
  value=false;
  load=false;
  timeNum = 0;
  isSearch=false;
  config:any={
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'small'
      },
      columns:[
        [{
          label:'店铺名称',
          prop:'shopName',
          component:'by-input',
          compConfig:{}
        },{
          label:'店铺简称',
          prop:'shortName',
          component:'by-input',
          compConfig:{}
        },{
          label:'所属平台',
          prop:'channelName',
          component:'by-input',
          compConfig:{}
        }]
      ]
    },
    tool:{
      tools:{
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        triggerRowCheck:'row',
        size:'mini',
        seq:true,
        radio:true,
        align:'center',
      },
      columns:[{
        title:'店铺名称',
        field:'shopName'
      },{
        title:'店铺简称',
        field:'shortName',

      },{
        title:'所属平台',
        field:'channelName',
      }]
    }
  }
  mounted(){
    
  }
  //分页
  pagination(){
    if(this.isSearch){
      this.queryList();
    }else{
      this.getList()
    }
  }
  //列表请求（只有分页，不包含搜素条件）
  getList(){
    if(!this.$refs.view){
      if(this.timeNum > 5){
        return
      }
      setTimeout(()=>{
        this.getList()
      },500) 
      this.timeNum ++;
      return
    }
    this.isSearch = false;
    let data = (this.$refs.view as any).getPage();
    this.requestList(data);
  }
  //列表请求（包含分页和搜素条件）
  queryList(){
    this.isSearch = true;
    let data = (this.$refs.view as any).getQuery();
    this.requestList(data);
  }
  requestList(data:any){
    this.load = true;
    query(data).then((res:any) => {
      this.load = false;
      (this.$refs.view as any).setTableValue(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;
    })
  }
  setShow(v:boolean){
    this.value = v;
    this.getList();
  }
  btn(){
    let data = (this.$refs.view as any).getSelectData();
    if(data.length == 0){
      this.$message('请选择店铺！');
      return
    }
    this.$emit('shopSelect',data[0]);
    this.value = false;
  }
}
</script>

<style lang="scss" scoped>

</style>