<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">申请重货优惠-{{queryParams.orderNo||''}}</div>
        <el-form :model="queryParams" ref="queryForms" size="small" :inline="true"  label-width="120px" class="card">
          <el-row >
              <el-form-item label="原重货标准:" label-width="150px">
                  <span>{{queryParams.orgWVolume}}kg/cbm</span>
              </el-form-item>
          </el-row>
          <el-row :span="8" >
             <el-form-item label="* 现重货申请标准:" size="medium" label-width="150px">
               <el-input style="width: 100px;"  type="text" v-model="queryParams.wvolume"  />
                <span style="margin-left: 10px;">kg/cbm</span>
             </el-form-item>
          </el-row>
          <el-row :span="8">
             <el-form-item label="备注:" size="medium" label-width="150px">
               <el-input style="width: 500px;"  type="textarea" v-model="queryParams.orderExceptionHandlerRemark"  />
             </el-form-item>
          </el-row>
        </el-form>
    </el-card>
    <work-flow xmlkey="heavy_goods_discount" v-model="selectedUsers" style="margin-top: 20px;"></work-flow>
    <div slot="footer" class="card footer_btn">
        <el-button type="primary" v-if="queryParams.applyStatus==0" @click="submitForm">提交</el-button>
        <el-button plain type="primary" v-if="queryParams.applyStatus==0" @click="$router.back()">取消</el-button>
        <el-button v-if="queryParams.applyStatus==1" type="primary" disabled>审核中</el-button>
        <el-button v-if="queryParams.applyStatus==1" plain type="primary" @click="dialogVisible = true">取消审核</el-button>
        <el-button v-if="queryParams.applyStatus==1" plain type="primary" @click="$router.back()">返回</el-button>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span class="cancel_notice">申请重货优惠正在审核中，你确定取消申请重货优惠吗？</span>
      <div class="cancel_content">
        <span>取消原因：</span>
        <el-input v-model="reason" placeholder="请输入取消原因"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cancelSplit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getDictData, getDictDatas,DICT_TYPE} from '@/utils/dict'
import WorkFlow from '@/components/WorkFlow'
import {getOrderSpecial,createOrderSpecial} from '@/api/ecw/order'

export default {
  name: "specialWeight",
  components: {
    WorkFlow
  },
  props: {
    orderId: [String, Number]
  },
  data() {
    return {
      reason:'',
      dialogVisible:false,
      loading:false,
      queryParams:{
        orderId:7,
        lang:0
      },
      selectedUsers:[],
      orderData:{}
    };
  },
  created() {
    if (this.orderId) {
      this.queryParams.orderId = this.orderId
      this.getOrderSpecialData()
    }
    // this.getList()
  },
  computed:{
    getDictData(){
        return (type, value) => getDictData(type, value) || {}
    },
    getDictDatas(){
        return getDictDatas
    }
  },
  methods: {
    /** 查询列表 */
   getOrderSpecialData(){
     getOrderSpecial(this.queryParams.orderId,'4').then(r => {
       this.queryParams = r.data
     })
   },
    submitForm(){
     createOrderSpecial({
        applyType: this.queryParams.applyType,
        lineId: this.queryParams.lineId,
        wvolume: this.queryParams.wvolume,
        orderId: this.queryParams.orderId,
        orderNo: this.queryParams.orderNo,
        orderItemId: this.queryParams.orderItemId,
        prodId:this.queryParams.prodId,
         ccIds:this.selectedUsers.join(',')
      }).then(r => {
        this.$message.success(r.msg || '提交成功')
      })
    },
    cancelSplit(){
      let that = this
      if(!that.reason){
        that.$message.error("请输入取消原因");
        return
      }
        cancelApply({orderId:that.queryParams.orderId,reason:that.reason}).then(res=>{
          that.$message.success("取消成功");
          that.$router.back()
        })
    },

  }
}
</script>
<style>
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .card-info{
    font-size: 16px;
  }
  .card{
    margin-top: 20px;
  }
  .btn-header{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
  }
  .red{
    color:#ff3430;
    font-size: 15px;
  }
  .footer_btn{
    padding-bottom: 60px;
  }
  .cancel_notice{
    font-size: 16px;
    font-weight: 600;
  }
  .cancel_content{
    display: flex;
    align-items: center;
    padding-top: 20px;
  }
  .cancel_content span{
    width: 100px;
  }
</style>
