<template>
  <div class="cargoOwner">
    <div class="btn" v-if="(!data || data.length == 0) && addBtnState">
      <el-button type="primary" size="small" plain icon="el-icon-plus" @click="showForm">新增</el-button>
    </div>
    <module-view class="view" :propConfig="config" ref="view" v-loading="load" @modalHandle="modalHandle" @onRefresh="getList" @clickHandle="clickHandle" @detail="detail" @backHandle="backHandle" />
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import {registerMember, updateMember, queryAll, del, disableMember} from '@/api/cargoOwner'
@Component({components:{}})
export default class CargoOwner extends Vue {
  load=false;
  time:any;
  timeNum = 0;
  data:Array<any> = []
  addBtnState = true
  isSearch=false;
  config:any={
    attr:{
      calculateH:true
    },
    // tool:{
    //   tools:{
    //     add:true,
    //     search:true,
    //     refresh:true
    //   }
    // },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        // checkbox:true
      },
      columns:[{
        title:'货主名称',
        field:'wmsMemberName',
        isDetail:true,
        width:170
      },{
        title:'WMS系统',
        field:'wmsSys',
        width:100
      },{
        title:'货主等级',
        field:'wmsLevel',
        width:80
      },{
        title:'日单量',
        field:'wmsDayAmount',
        width:80
      },{
        title:'联系人',
        field:'wmsContact',
        width:130
      },{
        title:'联系电话',
        field:'wmsPhone',
        width:120
      },{
        title:'联系人性别',
        field:'wmsSex',
        width:100
      },{
        title:'邮箱',
        field:'wmsEmail',
        width:120
      },{
        title:'地址',
        field:'wmsAddress',
        width:150
      },{
        title:'是否启用',
        field:'wmsEnableStatus',
        width:100,
        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:{
          size:'small',
          labelWidth:'130px',
          rules:{
            wmsMemberName:[
              { required: true, message: '请输入货主名称', trigger: 'blur' }
            ],
            wmsSys:[
              { required: true, message: '请选择WMS系统', trigger: 'change' }
            ],
            wmsLevel:[
              { required: true, message: '请输入货主等级', trigger: 'blur' },
              { validator: this.validateLevel, trigger: 'blur' }
            ],
            wmsContact:[
              { required: true, message: '请输入联系人', trigger: 'blur' }
            ],
            wmsPhone:[
              { required: true, message: '请输入联系电话', trigger: 'blur' },
              { validator: this.validatePhone, trigger: 'blur' }
            ],
            wmsSex:[
              { required: true, message: '请选择联系人性别', trigger: 'change' }
            ],
            wmsDayAmount:[
              { required: true, message: '请输入日单量', trigger: 'blur' }
            ],
            wmsEmail:[
              { required: true, message: '请输入邮箱', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ],
            wmsAddress:[
              { required: true, message: '请输入地址', trigger: 'blur' }
            ],
          }
        },
        columns:[
          [{
            label:'货主名称',
            prop:'wmsMemberName',
            component:'by-input'
          },{
            label:'WMS系统',
            prop:'wmsSys',
            component:'by-select',
            compConfig:{
              attr:{
                defaultIndex: 0,
                data:[{
                  value:'GEEKPLUS',
                  label:'极智嘉'
                }]
              }
            }
          },{
            label:'货主等级',
            prop:'wmsLevel',
            component:'by-input',
            compConfig:{
              attr: {
                type: 'integer',
                placeholder:'货主等级 1~99'
              }
            }
          }],
          [{
            label:'联系人',
            prop:'wmsContact',
            component:'by-input'
          },{
            label:'联系电话',
            prop:'wmsPhone',
            component:'by-input'
          },{
            label:'联系人性别',
            prop:'wmsSex',
            component:'by-select',
            compConfig:{
              attr:{
                data:[{
                  value:'男',
                  label:'男'
                },{
                  value:'女',
                  label:'女'
                }]
              }
            }
          }],
          [{
            label:'日单量',
            prop:'wmsDayAmount',
            component:'by-input',
            compConfig:{
              attr: {
                type: 'integer'
              }
            }
          },{
            label:'邮箱',
            prop:'wmsEmail',
            component:'by-input'
          },{
            label:'地址',
            prop:'wmsAddress',
            component:'by-input'
          }]
        ]
      }
    }
  }
  mounted(){
    this.$nextTick(()=>{
      this.getList()
    })
  }
  del(item:any) {
    this.$confirm('此操作将永久删除货主名称为 “'+item.wmsMemberName+'” 的数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.load = true;
      del({id:item.id}).then(()=>{
        this.load = false;
        this.$message({
          message:'删除成功！',
          type:'success'
        })
        this.getList();
      }).catch(()=>{
        this.load = false;
      })
    }).catch(() => {});
    
  }
  validateLevel(rule:any, value:any, callback:any){
    if(value){
      if(Number(value) >=1 && Number(value) <= 99){
        callback();
      }else{
        callback(new Error('货主等级 1~99！')); 
      }
    }else{
      callback();
    }
  }
  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();
    }
  }

  //禁用--启用
  isableData(item:any,enableStatus?:boolean) {
    this.load = true;
    disableMember({id: item.id,enableStatus:enableStatus}).then((res:any) => {
      this.$message({
        message:res.msg,
        type:'success'
      });
      this.load = false;
      this.getList()
    }).catch(()=>{
      this.load = false;
    })
  }
  //列表请求（只有分页，不包含搜素条件）
  getList(){
    if(!this.$refs.view){
      if(this.timeNum > 5){
        return
      }
      setTimeout(()=>{
        this.getList()
      },500) 
      this.timeNum ++;
      return
    }
    this.requestList();
  }
  backHandle() {
    this.addBtnState = true
  }
  requestList(){
    this.load = true;
    queryAll().then((res:any) => {
      this.load = false;
      this.data = res.data;
      (this.$refs.view as any).setTableValue(res.data);

    }).catch(()=>{
      this.load = false;
    })
  }
  showForm() {
    (this.$refs.view as any).modalShow = true
    this.addBtnState = false
  }
  //修改数据
  onSave(){
    let data = (this.$refs.view as any).getFormValue();
    this.load = true;
    updateMember(data).then((res:any) => {
      this.$message({
        message:res.msg,
        type:'success'
      });
      this.addBtnState = true
      this.load = false;
      (this.$refs.view as any).closeModal();
      this.getList();
    }).catch(()=>{
      this.load = false;
    })
  }
  //表单工具栏按钮事件
  modalHandle(n:string){
    if(n == 'onAdd'){
      (this.$refs.view as any).getFormValidate(this.add)
    }

    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();
    }
  }
  //添加
  add(){
    let value = (this.$refs.view as any).getFormValue();
    if(value){
      this.load = true;
      registerMember(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.addBtnState = false
    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>
.cargoOwner{
  width: 100%;
  height: 100%;
  .btn{
    padding: 16px 16px 0;
    box-sizing: border-box;
    width: 100%;
  }
  .view{
    width: 100%;
    height: calc(100% - 48px) !important;
  }
}
</style>