<template>
  <vxe-modal v-model="value" id="purchaseModel" width="400" height="300" show-zoom resize transfer show-footer v-loading="load">
    <div class="info">
      <div class="label">类型：</div>
      <el-select v-model="type" placeholder="请选择" size="mini" class="cancel-type" clearable>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="info">
      <div class="label">原因：</div>
      <el-input v-model="reason" class="cancel-type" placeholder="请输入内容" type="textarea" :rows="3"></el-input>
    </div>
    <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 { cancelOrder } from '@/api/omsOrder'
@Component
export default class CancelOrderModel extends Vue {
  value = false;
  load = false;
  reason='';
  ids:Array<any>=[]
  options:Array<any>= [{
    value: '商品缺货',
    label: '商品缺货'
  },{
    value: '客户申请取消',
    label: '客户申请取消'
  },{
    value: '重复订单',
    label: '重复订单'
  },{
    value: '其他',
    label: '其他'
  }];
  type= ''
  setShow(v:boolean){
    this.value = v;
  }
  setData(d:any){
    this.ids = d;
  }
  btn(){
    if(!this.type){
      this.$message('请选择取消类型！');
      return
    }
    this.$confirm('取消订单后将无法恢复, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.load = true;
      cancelOrder({
        idList:this.ids,
        cancelType:this.type,
        remark:this.reason
      }).then(()=>{
        this.load = false;
        this.$message({
          message:'订单取消成功！',
          type:'success'
        });
        this.value = false;
        this.type='';
        this.reason = '';
        this.$emit('handleSuccess');
      }).catch((err:any)=>{
        this.load = false;
      })
    }).catch(() => {});
  }
}
</script>

<style lang="scss" scoped>
.info{
  width: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  .label{
    width: 80px;
    text-align: right;
    padding-right: 8px;
    box-sizing: border-box;
  }
  .cancel-type{
    width: calc(100% - 100px);
  }
}
</style>