<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" />
    <autoShopModal ref="autoShopModal" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { query,save,update,del,dian3ShopQuery,shopAuth,shopSign } from '@/api/shop'
import autoShopModal from './components/autoShopModal.vue'
import axios from 'axios'
import shopTag from './components/tag.vue'
import time from './components/time.vue'
@Component({components:{autoShopModal}})
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:'authStatus',
    //       component:'by-select',
    //       compConfig:{
    //         attr:{
    //           clearable:true,
    //           data:[{
    //             value:'Authorized',
    //             label:'已授权'
    //           },{
    //             value:'Unauthorized',
    //             label:'未授权'
    //           },{
    //             value:'Expired',
    //             label:'已过期'
    //           }]
    //         }
    //       }
    //     },{
    //       label:'子平台名称',
    //       prop:'channelName',
    //       component:'by-input',
    //       compConfig:{}
    //     },
    //     {
    //       label:'联系人',
    //       prop:'enableSyncSend',
    //       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
      },
      customTools:[
        { name: '店铺授权', event:{
          click:() =>{
            (this.$refs.autoShopModal as any).setShow(true);
          }
        }},
      ]
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        // checkbox:true
      },
      columns:[{
        title:'店铺ID',
        field:'shopId',
      },{
        title:'平台',
        field:'platformType',
      },{
        title:'平台用户昵称',
        field:'userNick',
      },{
        title:'授权过期时间',
        field:'expireDate',
        component:time
      }
      // ,{
      //   title:'刷新授权过期',
      //   field:'refreshExpiresTime',
      // }
      // {
      //   title:'操作',
      //   action:true,
      //   width:100,
      //   plugins:[{
      //     name:'店铺授权',
      //     show:(item:any) =>{
      //       return item.authStatus !== '2'
      //     },
      //     event:{
      //       click:(item:any) => {
      //         this.shopAuto(item);
      //       }
      //     }
      //   }]
      // }
      ]
    },
    // modal:{
    //   tool:{
    //     tools:{
    //       return:true,
    //       // add:true
    //     }
    //   },
    //   form:{
    //     attr:{
    //       showType:'desc',
    //       itemCount:2,
    //       size:'small',
    //       width:'900px',
    //       labelWidth:'130px',
    //       rules:{
    //         posName:[
    //           { required: true, message: '请输入店铺名称', trigger: 'blur' }
    //         ],
    //         posCode:[
    //           { required: true, message: '请输入店铺编码', trigger: 'blur' }
    //         ],
    //         posPlatform:[
    //           {required: true, message: '请选择店铺平台类型', trigger: 'change'}
    //         ],
    //         posPlatformType:[
    //           { required: true, message: '请选择店铺子平台类型', trigger: 'change' }
    //         ],
    //         posType:[
    //           { required: true, message: '请选择店铺类型', trigger: 'change' }
    //         ],
    //         posStatus:[
    //           { required: true, message: '请选择店铺状态', trigger: 'change' }
    //         ],
    //         name:[
    //           { required: true, message: '请输入联系人姓名', trigger: 'blur' }
    //         ],
    //         mobile:[
    //           { required: true, message: '请输入联系人手机', trigger: 'blur' },
    //           {validator: this.validatePhone, trigger: 'blur' }
    //         ],
    //         province:[
    //           { required: true, message: '请选择地址', trigger: 'change' }
    //         ],
    //         address:[
    //           { required: true, message: '请输入详细地址', trigger: 'blur' }
    //         ],
    //       }
    //     },
    //     columns:[
    //       [{
    //         label:'店铺名称',
    //         prop:'posName',
    //         component:'by-input',
    //       }],
    //       [{
    //         label:'店铺编码',
    //         prop:'posCode',
    //         component:'by-input',
    //       },{
    //         label:'店铺状态',
    //         prop:'posStatus',
    //         component:'by-select',
    //         compConfig:{
    //           attr:{
    //             clearable:true,
    //             defaultIndex:0,
    //             data:[{
    //               value:'VALID',
    //               label:'有效'
    //             },{
    //               value:'INVALID',
    //               label:'禁用'
    //             },{
    //               value:'DELETED',
    //               label:'删除'
    //             }]
    //           }
    //         }
    //       }],
    //       [{
    //         label:'店铺平台类型',
    //         prop:'posPlatform',
    //         component:'by-select',
    //         compConfig:{
    //           attr:{
    //             clearable:true,
    //             data:[{
    //               value:'TB',
    //               label:'淘宝'
    //             },{
    //               value:'JD',
    //               label:'京东'
    //             },{
    //               value:'PDD',
    //               label:'拼多多'
    //             },{
    //               value:'WPH',
    //               label:'唯品会'
    //             },{
    //               value:'YZ',
    //               label:'有赞'
    //             },{
    //               value:'DY',
    //               label:'抖音'
    //             },{
    //               value:'KS',
    //               label:'快手'
    //             },{
    //               value:'SN',
    //               label:'苏宁'
    //             },{
    //               value:'ALI',
    //               label:'阿里巴巴'
    //             },{
    //               value:'GM',
    //               label:'国美'
    //             },{
    //               value:'MEITUAN',
    //               label:'美团'
    //             },{
    //               value:'XIAOMI',
    //               label:'小米'
    //             },{
    //               value:'ELE',
    //               label:'饿了么'
    //             },{
    //               value:'WM',
    //               label:'微盟'
    //             },{
    //               value:'HW',
    //               label:'华为'
    //             },{
    //               value:'XHS',
    //               label:'小红书'
    //             },{
    //               value:'WD',
    //               label:'微店'
    //             },{
    //               value:'WX',
    //               label:'微信'
    //             },{
    //               value:'SELF',
    //               label:'自有'
    //             }]
    //           }
    //         }
    //       },{
    //         label:'店铺子平台类型',
    //         prop:'posPlatformType',
    //         component:'by-select',
    //         compConfig:{
    //           attr:{
    //             clearable:true,
    //             data:[{
    //               value:'TB',
    //               label:'淘宝'
    //             },{
    //               value:'TMALL',
    //               label:'天猫'
    //             },{
    //               value:'JD',
    //               label:'京东pop店'
    //             },{
    //               value:'PDD',
    //               label:'拼多多三方店'
    //             },{
    //               value:'MP',
    //               label:'唯品会MP'
    //             },{
    //               value:'YZ',
    //               label:'有赞'
    //             },{
    //               value:'DY',
    //               label:'抖音小店'
    //             },{
    //               value:'KS',
    //               label:'快手小店'
    //             },{
    //               value:'DPS',
    //               label:'京东厂送'
    //             },{
    //               value:'KTT',
    //               label:'拼多多快团团'
    //             },{
    //               value:'SN',
    //               label:'苏宁厂送'
    //             },{
    //               value:'YOUPIN',
    //               label:'小米有品'
    //             },{
    //               value:'WM',
    //               label:'微盟微商城'
    //             },{
    //               value:'WM_ZHLS',
    //               label:'微盟-智慧零售'
    //             },{
    //               value:'HW_MALL',
    //               label:'华为商城'
    //             },{
    //               value:'XHS',
    //               label:'小红书'
    //             },{
    //               value:'WD',
    //               label:'微店'
    //             },{
    //               value:'SELF',
    //               label:'自有'
    //             }]
    //           }
    //         }
    //       }],
    //       [{
    //         label:'店铺类型',
    //         prop:'posType',
    //         component:'by-select',
    //         compConfig:{
    //           attr:{
    //             clearable:true,
    //             data:[{
    //               value:'ONLINE_SALE',
    //               label:'线上网销零售'
    //             },{
    //               value:'ONLINE_DISTRIBUTION',
    //               label:'线上分销'
    //             },{
    //               value:'OFFLINE_WHOLESALE',
    //               label:'线下批发'
    //             },{
    //               value:'OFFLINE_SALE',
    //               label:'线下门店零售'
    //             },{
    //               value:'ONLINE_WHOLESALE',
    //               label:'线上批发'
    //             }]
    //           }
    //         }
    //       },{
    //         label:'联系人姓名',
    //         prop:'name',
    //         component:'by-input',
    //       }],
    //       [{
    //         label:'固话',
    //         prop:'phone',
    //         component:'by-input',
    //       },{
    //         label:'联系人电话',
    //         prop:'mobile',
    //         component:'by-input',
    //       }],
    //       [{
    //         label:'地址',
    //         prop:'province',
    //         component:'by-area',
    //         compConfig:{
    //           attr:{
    //             province:'province', //省
    //             provinceCode:'provinceCode',
    //             city:'city',   //市
    //             cityCode:'cityCode',
    //             county:'district',  //县/区
    //             countyCode:'districtCode',
    //             show:'county'
    //           }
    //         }
    //       }],
    //       [{
    //         label:'详细地址',
    //         prop:'address',
    //         component:'by-input'
    //       }]
    //     ]
    //   }
    // }
  }
  mounted(){
    this.$nextTick(()=>{
      this.getList()
    })
  }
  validatePhone(rule:any, value:any, callback:any){
    if (value) {
      if(!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
        callback(new Error('手机号格式不正确！'));
      }else{
        callback();
      }
      
    } else {
      callback();
    }
  }
  shopAuto(item:any){
    let url = window.location.origin + '/shopAuto';
    // let time = String(new Date().getTime());
    // shopSign({
    //   redirectUrl:url,
    //   timestamp:time
    // }).then((res:any) =>{
    //   let jumpURL = 'https://d3.diansan.com/app-web/open/auth/third/add/store/' + item.posPlatform + '?appKey=221280&redirectUrl=' + url + '&timestamp=' + time + '&sign=' + res.msg;
    //   (window as any).open(jumpURL);
    // }).catch(()=>{})


    let that:any = this;
    shopAuth({
      platformType:item.posPlatform,
      url:url
    }).then((res:any)=>{
      if(res.msg){
        (window as any).open(res.msg)
        // let url = res.msg.replace('https://d3.diansan.com',process.env.VUE_APP_DIAN3)
        // axios({
        //   url:url,
        //   method:'get',
        //   headers:{
        //     'Content-Type':'application/json;charset=utf-8'
        //   }
        // })
        // .then(function (response:any) {
        //   let res = response.data
        //   if(res && res.code == '200' && res.success){
        //     that.$message({
        //       message:'操作成功！',
        //       type:'success'
        //     })
        //     item.authStatus = '2';
        //     that.onSave(item)
        //   }else{
        //     that.$message({
        //       dangerouslyUseHTMLString: true,
        //       message: res,
        //       type:'error'
        //     });
        //   }
        // })
        // .catch(function (error) {
        //   console.log(error);
        // });
      }
      
    }).catch(()=>{})
  }
  shopState(item:any,callBack:Function){
    let codes:Array<any>=[];
    let names:Array<any>=[];
    codes.push(item.posCode);
    names.push(item.posName);
    dian3ShopQuery({
      codes:codes,
      names:names,
      pageNo:1,
      pageSize:10
    }).then(res=>{
      callBack(res);
    }).catch(()=>{})
  }
  //删除
  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(item?:any){
    let data:any = item ? item : (this.$refs.view as any).getFormValue();
    data.contact={
      name:data.name,
      mobile:data.mobile,
      phone:data.phone,
      province:data.province,
      city:data.city,
      district:data.district,
      address:data.address
    }
    delete data.name;
    delete data.mobile;
    delete data.phone;
    delete data.province;
    delete data.city;
    delete data.district;
    delete data.address;

    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();
    value.contact={
      name:value.name,
      mobile:value.mobile,
      phone:value.phone,
      province:value.province,
      city:value.city,
      district:value.district,
      address:value.address
    }
    delete value.name;
    delete value.mobile;
    delete value.phone;
    delete value.province;
    delete value.city;
    delete value.district;
    delete value.address;
    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>