<template>
  <div class="oms-label" id="labelPage" v-loading="load">
    <by-tool :propConfig="tool" v-if="userInfo && userInfo.userName == 'admin'" class="tool" @clickHandle="clickHandle" id="labelTool" />
    <by-table :propConfig="tableConfig" ref="table">
      <template v-slot:ordered="{row}">
        <vxe-input v-if="userInfo && userInfo.userName == 'admin'" v-model="row.ordered" size="small" type="number"></vxe-input>
        <span v-else>{{ row.ordered }}</span>
      </template>
    </by-table>
    <add-label ref="addLabel" @handleSuccess="getList" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import {querySys, updateOrdered, del} from '@/api/omsLabel'
import addLabel from './components/addLabel.vue'
@Component({components:{addLabel}})
export default class OmsLabel extends Vue {
  load=false;
  userInfo:any= {};
  tool={
    tools:{
      add:true,
      refresh:true
    },
    audit:{}
  }
  tableConfig:any={
    attr:{
      size:'mini',
      align:'center',
      seq:true
    },
    columns:[{
      title:'名称',
      field:'name'
    },{
      title:'排序',
      field:'ordered',
      width:150,
      slot:true
    },{
      title:'操作',
      action:true,
      width:200,
      plugins:[{
        name:'排序',
        event:{
          show:() => {
            let userInfo = this.$store.getters.userInfo;
            if(userInfo && userInfo.userName == 'admin'){
              return true
            }else{
              return false
            }
          },
          click:(row:any) => {
            this.sortHandle(row);
          }
        }
      },{
        name:'删除',
        event:{
          show:() => {
            let userInfo = this.$store.getters.userInfo;
            if(userInfo && userInfo.userName == 'admin'){
              return true
            }else{
              return false
            }
          },
          click:(row:any) => {
            this.delHandle(row);
          }
        }
      }]
    }]
  }
  created() {
    this.userInfo = this.$store.getters.userInfo;
  }
  mounted(){
    this.$nextTick(()=>{
      let height = (document.getElementById('labelPage') as any).offsetHeight;
      this.tableConfig.attr.height=height - 32 - 48;
      if(this.$refs.table){
        (this.$refs.table as any).setConfig(this.tableConfig);
      }
      this.getList();
    })
  }
  //获取数据
  getList(){
    this.load = true;
    querySys().then((res:any) => {
      this.load = false;
      if(this.$refs.table){
        (this.$refs.table as any).setValue(res.data);
      }
    }).catch(()=>{
      this.load = false
    })
  }
  //排序
  sortHandle(row:any){
    this.load = true;
    updateOrdered({
      id:row.id,
      ordered:Number(row.ordered)
    }).then(()=>{
      this.load = false;
      this.getList();
    }).catch(()=>{
      this.load = false
    })
  }
  //删除
  delHandle(row:any){
    this.$confirm('此操作将删除“'+row.name+'”, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.load = true;
      del({
        id:row.id
      }).then(()=>{
        this.load = false;
        this.getList();
      }).catch(()=>{
        this.load = false
      })
    }).catch(()=>{})
    
  }
  clickHandle(e:any){
    if(e == 'onAdd'){
      (this.$refs.addLabel as any).setShow(true)
    }
    if(e == 'onRefresh'){
      this.getList();
    }
  }
}
</script>

<style lang="scss" scoped>
.oms-label{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
  .tool{
    padding-bottom: 16px;
  }
}
</style>