<template>
  <div class="shop">
    <module-view :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @modalHandle="modalHandle" @onRefresh="getList" 
    @resert="queryList" @search="queryList" @clickHandle="clickHandle" @detail="detail" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { query,save,update,del } from '@/api/shop'
import shopTag from './components/tag.vue'
@Component({components:{}})
export default class Shop extends Vue {
  load=false;
  time:any;
  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:'shopStatus',
        //   component:'by-input',
        //   compConfig:{}
        // },
        {
          label:'授权状态',
          prop:'authStatus',
          component:'by-select',
          compConfig:{
            attr:{
              clearable:true,
              data:[{
                value:'Authorized',
                label:'已授权'
              },{
                value:'Unauthorized',
                label:'未授权'
              },{
                value:'Expired',
                label:'已过期'
              }]
            }
          }
        }],
        [{
          label:'授权账号',
          prop:'authAccount',
          component:'by-input',
          compConfig:{}
        },{
          label:'所属平台',
          prop:'channelName',
          component:'by-input',
          compConfig:{}
        },
        // {
        //   label:'同步发货',
        //   prop:'enableSyncSend',
        //   component:'by-input',
        //   compConfig:{}
        // },
        {
          label:'创建时间',
          prop:'createTime',
          component:'by-date-picker',
          compConfig:{
            attr:{
              editable:false,
              type:'datetimerange',
              format:'yyyy-MM-dd HH:mm:ss'
            }
          }
        }]
      ]
    },
    tool:{
      tools:{
        add:true,
        // delete:true,
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        // checkbox:true
      },
      columns:[{
        title:'店铺名称',
        field:'shopName',
        isDetail:true,
        // width:150
      },{
        title:'店铺简称',
        field:'shortName',
        width:150
      },
      // {
      //   title:'店铺分组',
      //   field:'shopGroup',
      //   width:150
      // },{
      //   title:'店铺网址',
      //   field:'shopUrl',
      //   width:150
      // },{
      //   title:'店铺站点',
      //   field:'shopSite',
      //   width:150
      // },
      {
        title:'公司编号',
        field:'companyCode',
        width:150
      },{
        title:'所属平台',
        field:'channelName',
        width:150
      },{
        title:'平台店铺名称',
        field:'channelShopName',
        width:150
      },{
        title:'授权账户',
        field:'authAccount',
        width:150
      },{
        title:'授权状态',
        field:'authStatus',
        width:150,
        component:shopTag
      },
      // {
      //   title:'授权开始时间',
      //   field:'authBegin',
      //   width:150
      // },{
      //   title:'授权过期时间',
      //   field:'authExpired',
      //   width:150
      // },{
      //   title:'授权修改时间',
      //   field:'authModified',
      //   width:150
      // },
      // {
      //   title:'店铺状态',
      //   field:'shopStatus',
      //   width:150
      // }
      // ,{
      //   title:'退款状态',
      //   field:'refundStatus',
      //   width:150
      // },{
      //   title:'身份证',
      //   field:'sendIdCard',
      //   width:150
      // },{
      //   title:'联系电话',
      //   field:'sendPhone',
      //   width:150
      // },{
      //   title:'发货店址',
      //   field:'sendAddress',
      //   width:150
      // },{
      //   title:'发货时效',
      //   field:'sendTimeEffect',
      //   width:150
      // },{
      //   title:'退货手机号',
      //   field:'returnPhone',
      //   width:150
      // },{
      //   title:'退货人',
      //   field:'returnName',
      //   width:150
      // },{
      //   title:'退货地址',
      //   field:'returnAdress',
      //   width:150
      // },{
      //   title:'同步发货',
      //   field:'enableSyncSend',
      //   width:150
      // },{
      //   title:'揽收轨迹同步发货',
      //   field:'enableTrackSyncSend',
      //   width:150
      // },{
      //   title:'拆分订单整单发货',
      //   field:'enableSplitOrderFullSend',
      //   width:150
      // },{
      //   title:'同步库存',
      //   field:'enableSynvStore',
      //   width:150
      // },{
      //   title:'订单下载',
      //   field:'enableSyncOrder',
      //   width:150
      // },{
      //   title:'天猫物流升级',
      //   field:'enableTmallLogistics',
      //   width:150
      // },{
      //   title:'下载截止时间',
      //   field:'endPullTime',
      //   width:150
      // },{
      //   title:'最晚截单时间',
      //   field:'endInterceptTime',
      //   width:150
      // },{
      //   title:'最晚出库时间',
      //   field:'endDeliveryTime',
      //   width:150
      // },{
      //   title:'淘宝消息通知',
      //   field:'enableTaobaoMessageNotice',
      //   width:150
      // },{
      //   title:'商品下载',
      //   field:'enableSkuDownload',
      //   width:150
      // },{
      //   title:'开启链接库存同步',
      //   field:'enableLinkSync',
      //   width:150
      // },{
      //   title:'是否虾皮SIP',
      //   field:'shopeeSip',
      //   width:150
      // },{
      //   title:'支付宝授权状态',
      //   field:'alipayAuthStatus',
      //   width:150
      // },{
      //   title:'京东授权状态',
      //   field:'jdAuthStatus',
      //   width:150
      // },{
      //   title:'东账号拒绝申请原因',
      //   field:'jdRejectReason',
      //   width:150
      // },{
      //   title:'启用分销',
      //   field:'enableDistribution',
      //   width:150
      // },{
      //   title:'菜鸟(青龙)电子面单',
      //   field:'enableCainiaoElectronicBill',
      //   width:150
      // },{
      //   title:'售后单下载',
      //   field:'enableSyncAfterSale',
      //   width:150
      // },{
      //   title:'开通AG',
      //   field:'enableAg',
      //   width:150
      // },{
      //   title:'确认收货自动退款',
      //   field:'enableAutoRefund',
      //   width:150
      // },{
      //   title:'开启跨境操作',
      //   field:'enableCbec',
      //   width:150
      // },{
      //   title:'创建来源',
      //   field:'createSource',
      //   width:150
      // },{
      //   title:'标签',
      //   field:'labels',
      //   width:150
      // },{
      //   title:'服务市场订购版本',
      //   field:'subscriptionVersion',
      //   width:150
      // },{
      //   title:'创建时间',
      //   field:'createTime',
      //   width:150
      // },
      {
        title:'操作',
        action:true,
        width:100,
        plugins:[{
          name:'删除',
          event:{
            click:(item:any) => {
              this.del(item);
            }
          }
        }]
      }
    ]
    },
    modal:{
      tool:{
        tools:{
          return:true,
          add:true
        }
      },
      form:{
        attr:{
          size:'small',
          labelWidth:'130px',
          rules:{
            shopName:[
              { required: true, message: '请输入店铺名称', trigger: 'blur' }
            ],
            shopId:[
              { required: true, message: '请输入店铺编号', trigger: 'blur' }
            ],
            channelName:[
              {required: true, message: '请输入所属平台', trigger: 'blur'}
            ],
            channel:[
              { required: true, message: '请输入平台类型', trigger: 'blur' }
            ],
            authStatus:[
              { required: true, message: '请选择授权状态', trigger: 'change' }
            ]
          }
        },
        columns:[
          [{
            label:'店铺编号',
            prop:'shopId',
            component:'by-input',
          },{
            label:'店铺名称',
            prop:'shopName',
            component:'by-input',
          },{
            label:'店铺简称',
            prop:'shortName',
            component:'by-input',
          },{
            label:'店铺分组',
            prop:'shopGroup',
            component:'by-input',
          }],
          [{
            label:'店铺网址',
            prop:'shopUrl',
            component:'by-input',
          },{
            label:'店铺站点',
            prop:'shopSite',
            component:'by-input',
          },{
            label:'公司编号',
            prop:'companyCode',
            component:'by-input',
          },{
            label:'所属平台',
            prop:'channelName',
            component:'by-input',
          }],
          [{
            label:'平台类型',
            prop:'channel',
            component:'by-input'
          },{
            label:'平台店铺名称',
            prop:'channelShopName',
            component:'by-input'
          },{
            label:'授权账号',
            prop:'authAccount',
            component:'by-input'
          },{
            label:'授权状态',
            prop:'authStatus',
            component:'by-select',
            compConfig:{
              attr:{
                clearable:true,
                data:[{
                  value:'Authorized',
                  label:'已授权'
                },{
                  value:'Unauthorized',
                  label:'未授权'
                },{
                  value:'Expired',
                  label:'已过期'
                }]
              }
            }
          }],
          // [{
          //   label:'APP KEY',
          //   prop:'appKey',
          //   component:'by-input'
          // },{
          //   label:'APP SECRET',
          //   prop:'appSecret',
          //   component:'by-input'
          // },{
          //   label:'ACCESSTOKEN',
          //   prop:'accessToken',
          //   component:'by-input'
          // },{
          //   label:'REFRESHTOKEN',
          //   prop:'refreshToken',
          //   component:'by-input'
          // }],
          // [{
          //   label:'会话用户编号',
          //   prop:'sessionUid',
          //   component:'by-input'
          // },{
          //   label:'授权开始时间',
          //   prop:'authBegin',
          //   component:'by-date-picker'
          // },{
          //   label:'授权过期时间',
          //   prop:'authExpired',
          //   component:'by-date-picker'
          // },{
          //   label:'授权修改时间',
          //   prop:'authModified',
          //   component:'by-date-picker'
          // }],
          // [{
          //   label:'京东授权状态',
          //   prop:'jdAuthStatus',
          //   component:'by-input'
          // },{
          //   label:'京东拒绝申请原因',
          //   prop:'jdRejectReason',
          //   component:'by-input'
          // },{
          //   label:'身份证号',
          //   prop:'sendIdCard',
          //   component:'by-input'
          // },{
          //   label:'联系电话',
          //   prop:'sendPhone',
          //   component:'by-input'
          // }],
          // [{
          //   label:'发货地址',
          //   prop:'sendTimeEffect',
          //   component:'by-input'
          // },{
          //   label:'标签',
          //   prop:'labels',
          //   component:'by-input'
          // },{
          //   span:12,
          //   label:'发货地址',
          //   prop:'sendAddress',
          //   component:'by-input'
          // }],
          // [{
          //   label:'服务市场订购版本',
          //   prop:'subscriptionVersion',
          //   component:'by-input'
          // },{
          //   label:'退货手机',
          //   prop:'returnPhone',
          //   component:'by-input'
          // },{
          //   label:'退货人',
          //   prop:'returnName',
          //   component:'by-input'
          // },{
          //   label:'退货邮编',
          //   prop:'returnZip',
          //   component:'by-input'
          // }],
          // [{
          //   label:'支付宝授权状态',
          //   prop:'alipayAuthStatus',
          //   component:'by-input'
          // },{
          //   label:'菜鸟电子面单',
          //   prop:'enableCainiaoElectronicBill',
          //   component:'by-input'
          // },{
          //   span:12,
          //   label:'退货地址',
          //   prop:'returnAdress',
          //   component:'by-input'
          // }],
          // [{
          //   label:'下载截止时间',
          //   prop:'endPullTime',
          //   component:'by-date-picker'
          // },{
          //   label:'最晚截单时间',
          //   prop:'endInterceptTime',
          //   component:'by-date-picker'
          // },{
          //   label:'最晚出库时间',
          //   prop:'endDeliveryTime',
          //   component:'by-date-picker'
          // },{
          //   label:'淘宝消息通知',
          //   prop:'enableTaobaoMessageNotice',
          //   component:'by-input'
          // }],
          // [{
          //   label:'拆分订单整单发货',
          //   prop:'enableSplitOrderFullSend',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'同步库存',
          //   prop:'enableSynvStore',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'订单下载',
          //   prop:'enableSyncOrder',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'天猫物流升级',
          //   prop:'enableTmallLogistics',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // }],
          // [{
          //   label:'商品下载',
          //   prop:'enableSkuDownload',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'开启链接库存同步',
          //   prop:'enableLinkSync',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'是否虾皮SIP',
          //   prop:'shopeeSip',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'同步发货',
          //   prop:'enableSyncSend',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // }],
          // [{
          //   label:'店铺状态',
          //   prop:'shopStatus',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'退款状态',
          //   prop:'refundStatus',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:'1',
          //       inactiveValue:'0'
          //     }
          //   }
          // },{
          //   label:'启用分销',
          //   prop:'enableDistribution',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'揽收轨迹同步发货',
          //   prop:'enableTrackSyncSend',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // }],
          // [{
          //   label:'售后单下载',
          //   prop:'enableSyncAfterSale',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'开通AG',
          //   prop:'enableAg',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'确认收货自动退款',
          //   prop:'enableAutoRefund',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // },{
          //   label:'开启跨境操作',
          //   prop:'enableCbec',
          //   component:'by-switch',
          //   compConfig:{
          //     attr:{
          //       activeValue:1,
          //       inactiveValue:0
          //     }
          //   }
          // }]
        ]
      }
    }
  }
  mounted(){
    this.$nextTick(()=>{
      this.getList()
    })
  }
  //删除
  del(item:any){
    this.$confirm('此操作将永久删除店铺名称为 “'+item.shopName+'” 的数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.load = true;
      del({id:item.id}).then(()=>{
        this.load = false;
        this.$message({
          message:'删除成功！',
          type:'success'
        })
        this.pagination();
      }).catch(()=>{
        this.load = false;
      })
    }).catch(() => {});
  }
  //分页
  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;
    })
  }
  //修改店铺数据
  onSave(){
    let data = (this.$refs.view as any).getFormValue();
    this.load = true;
    update(data).then((res:any) => {
      this.$message({
        message:res.msg,
        type:'success'
      });
      this.load = false;
      (this.$refs.view as any).closeModal();
      this.pagination();
    }).catch(()=>{
      this.load = false;
    })
  }
  //表单工具栏按钮事件
  modalHandle(n:string){
    if(n == 'onAdd'){
      (this.$refs.view as any).getFormValidate(this.addShop)
    }

    if(n == 'onSave'){
      (this.$refs.view as any).getFormValidate(this.onSave)
    }
  }
  //表格工具栏按钮事件
  clickHandle(n:string){ 
    if(n == 'onAdd'){
      this.config.modal.tool.tools.add = true;
      delete this.config.modal.tool.tools.save;
      (this.$refs.view as any).initFormTool();
    }
  }
  //添加店铺
  addShop(){
    let value = (this.$refs.view as any).getFormValue();
    if(value){
      this.load = true;
      save(value).then((res:any)=>{
        this.load = false;
        this.$message({
          message:res.msg,
          type:'success'
        });
        (this.$refs.view as any).closeModal();
        this.getList();
      }).catch(()=>{
        this.load = false;
      })
    }
  }
  //点击详情
  detail(){
    this.config.modal.tool.tools.save = true;
    delete this.config.modal.tool.tools.add;
    (this.$refs.view as any).initFormTool();
  }
}
</script>

<style lang="scss" scoped>
.shop{
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
</style>