<template>
  <vxe-modal v-model="value" id="tagModal" width="60%" v-loading="load" @hide="hide" height="70%" show-footer title="修改标签">
    <div class="type">
      <el-radio-group v-model="actionType">
        <el-radio :label="1">列表新增</el-radio>
        <el-radio :label="2">列表移除</el-radio>
      </el-radio-group>
    </div>
    <el-scrollbar class="label-group">
      <el-checkbox-group v-model="labels" :max="10">
        <div class="label-box">
          <div class="label-item" v-for="(item,index) of labelData" :key="index">
            <el-checkbox :label="item.name"></el-checkbox>
          </div>
        </div>
      </el-checkbox-group>
    </el-scrollbar>
    <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 { setLabels } from '@/api/omsOrder'
import {queryAll, updateOrdered, del} from '@/api/omsLabel'
@Component({components:{}})
export default class TabModal extends Vue {
  value=false;
  load=false;
  billValue:Array<any>=[];
  actionType:any=1
  labels:Array<any>=[]
  labelData:Array<any>=[]
  mounted(){
    this.getList()
  }
  hide(){
    this.actionType = 1;
    this.labels = [];
  }
  getList(){
    this.load = true;
    queryAll().then((res:any) => {
      this.load = false;
      this.labelData = []
      if(res.data){
        this.labelData = res.data
      }
    }).catch(()=>{
      this.load = false
    })
  }
  btn(){
    let data:any = {};
    data.actionType = this.actionType
    data.labels = this.labels;
    data.idList = this.billValue;
    this.load = true
    setLabels(data).then(()=>{
      this.load = false;
      (this.$message({
        message:'操作成功！',
        type:'success'
      }));
      this.$emit('handleSuccess');
      this.value = false;
    }).catch(()=>{
      this.load = false;
    })
  }
  setShow(v:boolean){
    this.value = v;
  }
  setBillValue(data:Array<any>){
    this.billValue = data;
  }
}
</script>

<style lang="scss" scoped>
.type{
  width: 100%;
  padding-bottom: 16px;
}
.label-group{
  .label-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .label-item{
    width: 33.3333%;
  }
}
</style>

<style lang="scss">
.label-group{
  width: 100%;
  height: calc(100% - 37px);
  div.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-scrollbar__bar {
    right: 0px;
  }
}
</style>