<template>
  <vxe-modal v-model="value" id="labelsModal" width="70%" height="80%" @hide="hide" @show="show" title="选标签"  transfer show-footer v-loading="load">
    <div class="labelBox" id="labelBox">
      <by-tool :propConfig="tool" class="labelTool" @clickHandle="clickHandle" id="omsLabelTool" />
      <by-table :propConfig="tableConfig" ref="table" >
        <template v-slot:ordered="{row}">
          <vxe-input v-if="row.isSystem != 1" v-model="row.ordered" size="small" type="number"></vxe-input>
          <span v-else>{{ row.ordered }}</span>
        </template>
      </by-table>
    </div>
    <add-label ref="addLabel" @handleSuccess="getList" :isSystem="0" />
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="btn">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import {queryAll, updateOrdered, del} from '@/api/omsLabel'
import addLabel from '../../omsLabel/components/addLabel.vue'
@Component({components:{addLabel}})
export default class LabelsModal extends Vue {
  value = false;
  load = false;
  tool={
    tools:{
      refresh:true
    },
    customTools:[{
      name:'添加标签',
      event:{
        click:()=>{
          (this.$refs.addLabel as any).setShow(true)
        }
      }
    }],
    audit:{}
  }
  tableConfig:any={
    attr:{
      triggerRowCheck:'row',
      size:'mini',
      align:'center',
      seq:true,
      checkbox:true
    },
    columns:[{
      title:'名称',
      field:'name'
    },{
      title:'排序',
      field:'ordered',
      width:150,
      slot:true
    },{
      title:'操作',
      action:true,
      width:200,
      plugins:[{
        name:'排序',
        event:{
          show:(row:any) => {
            return row.isSystem != 1
          },
          click:(row:any) => {
            this.sortHandle(row);
          }
        }
      },{
        name:'删除',
        event:{
          show:(row:any) => {
            return row.isSystem != 1
          },
          click:(row:any) => {
            this.delHandle(row);
          }
        }
      }]
    }]
  }
  setShow(v:boolean){
    this.value = v;
  }
  show(){
    this.$nextTick(()=>{
      let height = (document.getElementById('labelBox') as any).parentNode.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;
    queryAll().then((res:any) => {
      this.load = false;
      if(this.$refs.table){
        (this.$refs.table as any).setValue(res.data);
      }
    }).catch(()=>{
      this.load = false
    })
  }
  hide(){
    if(this.$refs.table){
      (this.$refs.table as any).clearCheckboxRow();
    }
  }
  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(()=>{})
  }
  btn(){
    let data = (this.$refs.table as any).getSelectData();
    let v='';
    if(data.length == 0){
      this.$message('请选择标签！')
      return
    }
    if(data.length > 10){
      this.$message('标签选择不能超过10个！')
      return
    }
    for(const item of data){
      if(v){
        v = v + ','+item.name
      }else{
        v = item.name
      }
    }
    this.value = false;
    this.$emit('onChange',v);
  }
  clickHandle(e:string){
    if(e == 'onAdd'){
      (this.$refs.addLabel as any).setShow(true)
    }
    if(e == 'onRefresh'){
      this.getList();
    }
  }
}
</script>

<style lang="scss" scoped>
.labelBox{
  width: 100%;
  height: 100%;
}
.labelTool{
  padding-bottom: 16px;
}
</style>