<template>
  <div class="sourceShop">
    <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/sourceShop'
import shopTag from './components/tag.vue'
@Component({components:{shopTag}})
export default class SourceShop extends Vue {
  load=false;
  time:any;
  timeNum = 0;
  isSearch=false;
  config:any={
    attr:{
      calculateH:true
    },
    // search:{
    //   attr:{
    //     size:'small'
    //   },
    //   columns:[
    //     [{
    //       label:'来源名称',
    //       prop:'sourceName',
    //       component:'by-input',
    //       span:8,
    //       compConfig:{}
    //     },
    //     {
    //       label:'授权状态',
    //       prop:'authStatus',
    //       span:8,
    //       component:'by-select',
    //       compConfig:{
    //         attr:{
    //           clearable:true,
    //           data:[{
    //             value:'Authorized',
    //             label:'已授权'
    //           },{
    //             value:'Unauthorized',
    //             label:'未授权'
    //           },{
    //             value:'Expired',
    //             label:'已过期'
    //           }]
    //         }
    //       }
    //     },
    //     {
    //       label:'所属平台',
    //       prop:'channelName',
    //       span:8,
    //       component:'by-select',
    //         compConfig:{
    //           attr:{
    //             clearable:true,
    //             data:[{
    //               value:'JUSHUITAN',
    //               label:'聚水潭'
    //             }]
    //           }
    //         }
    //     }],
    //     [{
    //       label:'授权账号',
    //       prop:'authAccount',
    //       component:'by-input',
    //       span:8,
    //       compConfig:{}
    //     },
    //     {
    //       label:'创建时间',
    //       prop:'createTime',
    //       component:'by-date-picker',
    //       span:8,
    //       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:'sourceName',
        isDetail:true,
      },
      {
        title:'所属平台',
        field:'channelName'
      },
      {
        title:'账户授权',
        field:'authAccount',
      },
      {
        title:'授权状态',
        field:'authStatus',
        width:150,
        component:shopTag
      },
      // {
      //   title:'租户id',
      //   field:'tenantId',
      // },
      {
        title:'状态',
        field:'status',
        component: 'textChange',
        compConfig:{
          attr:{
            data:[{
              label:'已启用',
              value:1,
              backgroundColor:'#f0f9eb',
              color:'#67c23a'
            },{
              label:'已禁用',
              value:0,
              backgroundColor:'#fef0f0',
              color:'#f56c6c'
            }]
          }
        }
      },
      {
        title:'操作',
        action:true,
        width:100,
        plugins:[{
          name:'删除',
          event:{
            click:(item:any) => {
              this.del(item);
            }
          }
        }]
      }
    ]
    },
    modal:{
      tool:{
        tools:{
          return:true,
          add:true
        }
      },
      form:{
        attr:{
          width:'1000px',
          size:'small',
          labelWidth:'130px',
          rules:{
            sourceName:[
              {required: true, message: '请输入来源名称', trigger: 'blur'}
            ],
            channelName:[
              {required: true, message: '请选择所属平台', trigger: 'change'}
            ],
            authStatus:[
              { required: true, message: '请选择授权状态', trigger: 'change' }
            ],
            appKey:[
              {required: true, message: '请输入appKey', trigger: 'blur'}
            ],
            appSecret:[
              {required: true, message: '请输入appSecret', trigger: 'blur'}
            ],
            accessToken:[
              {required: true, message: '请输入accessToken', trigger: 'blur'}
            ],
            refreshToken:[
              {required: true, message: 'refreshToken', trigger: 'blur'}
            ],
            authBegin:[
              { required: true, message: '请选择授权开始时间', trigger: 'change' }
            ],
            authExpired:[
              { required: true, message: '请选择授权过期时间', trigger: 'change' }
            ]
          }
        },
        columns:[
          [{
            label:'来源名称',
            prop:'sourceName',
            component:'by-input',
          },{
            label:'所属平台',
            prop:'channelName',
            component:'by-select',
            compConfig:{
              attr:{
                clearable:true,
                defaultIndex:0,
                retConfig:{
                  label:'channelName',
                  value:'channel'
                },
                data:[{
                  value:'JUSHUITAN',
                  label:'聚水潭'
                }]
              }
            }
          }],
          [{
            label:'授权状态',
            prop:'authStatus',
            component:'by-select',
            span:12,
            compConfig:{
              attr:{
                clearable:true,
                defaultIndex:0,
                data:[{
                  value:'Authorized',
                  label:'已授权'
                },{
                  value:'Unauthorized',
                  label:'未授权'
                },{
                  value:'Expired',
                  label:'已过期'
                }]
              }
            }
          },{
            label:'授权账号',
            prop:'authAccount',
            component:'by-input'
          }],
          [{
            label:'appKey',
            prop:'appKey',
            component:'by-input'
          },{
            label:'appSecret',
            prop:'appSecret',
            component:'by-input'
          }],
          [{
            label:'accessToken',
            prop:'accessToken',
            component:'by-input'
          },{
            label:'refreshToken',
            prop:'refreshToken',
            component:'by-input'
          }],
          [{
            label:'授权开始时间',
            prop:'authBegin',
            component:'byDatePicker',
            compConfig:{
              attr:{
                type:'datetime',
                format:'yyyy-MM-dd HH:mm:ss'
              }
            }
          },{
            label:'授权过期时间',
            prop:'authExpired',
            component:'byDatePicker',
            compConfig:{
              attr:{
                type:'datetime',
                format:'yyyy-MM-dd HH:mm:ss'
              }
            }
          }]
        ]
      }
    }
  }
  mounted(){
    this.$nextTick(()=>{
      this.getList()
    })
  }
  //删除
  del(item:any){
    this.$confirm('此操作将永久删除平台来源为 “'+item.sourceName+'” 的数据, 是否继续?', '提示', {
      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>
.sourceShop{
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
</style>