<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">{{$t('修改佣金规则')}}-{{form.orderNo||''}}</div>
        <el-form :model="form" ref="queryForms" label-width="120px" class="card">
          <el-form-item :label="$t('商品类型:')">
             <span>{{getProductAttrNameById(form.prodType) }}</span>
           </el-form-item>
           <el-form-item :label="$t('商品名称:')">
             <span>{{ form.prodTitleZh }}</span>
           </el-form-item>
           <el-form-item :label="$t('英文名称:')">
             <span>{{ form.prodTitleEn }}</span>
           </el-form-item>
           <el-form-item :label="$t('线路:')">
             {{ `【${getDictDataLabel(DICT_TYPE.TRANSPORT_TYPE, form.transportId)}】${ getChannelNameById(form.channelId) }从【${startTitleZh}】发往【${destTitleZh}】`}}
           </el-form-item>
          <el-form-item :label="$t('运费:')" >
              <span>{{ form.subtotalFreight }} {{ currentMap[form.freightCurrency] }}</span>
          </el-form-item>
          <el-form-item :label="$t('清关费:')">
              <span>{{ form.subtotalClearanceFreight }} {{ currentMap[form.clearanceFreightCurrency] }}</span>
          </el-form-item>
          <el-form-item :label="$t('佣金类型:')">
                <el-radio-group v-model="form.commissionType" >
                  <el-radio :label="dict.value" v-for="dict in getDictDatas('commission_type')">{{dict.label}}</el-radio>
                </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.commissionType==3" :label="$t('暗佣佣金:')">
            <el-input style="width: 100px;"  type="number" v-model="shadeCommissionAmount"  />
              <span style="margin-left: 10px;">{{ currentMap[form.freightCurrency] }}</span>
              <span>/{{ volumeMap[form.freightVolume] }}</span>
          </el-form-item >
            <el-form-item v-if="form.commissionType==1||form.commissionType==3" :label="$t('明佣佣金:')">
               <el-input style="width: 100px;"  type="number" v-model="lightCommissionAmount"  />
              <span style="margin-left: 10px;">{{ currentMap[form.freightCurrency] }}</span>
              <span>/{{ volumeMap[form.freightVolume] }}</span>
            </el-form-item >
          <el-form-item v-if="form.commissionType!=0" :label="$t('商品:')">
              <span>{{form.prodTitleZh }}</span>
               <span style="margin-left: 10px;" v-if="form.commissionType==3">{{$t('成本价')}}：{{parseInt(form.freight)-parseInt(shadeCommissionAmount)}}{{ currentMap[form.freightCurrency] }}/{{ volumeMap[form.freightVolume] }}</span>
              <span style="margin-left: 10px;">  {{$t('销售价')}}：{{form.commissionType!=2?(parseInt(form.freight)+parseInt(lightCommissionAmount)):form.freight}}{{ currentMap[form.freightCurrency] }}/{{ volumeMap[form.freightVolume] }}</span>
              <span style="margin-left: 10px;color: #1E98D7;" v-if="form.commissionType==2" @click="$router.push(`/customer/customerCommission`)">{{$t('去设置')}}</span>
              <span style="margin-left: 10px;" v-if="form.commissionType==3">{{$t('实际佣金返点')}}：{{parseInt(lightCommissionAmount)+parseInt(shadeCommissionAmount)}}{{ currentMap[form.freightCurrency] }}/{{ volumeMap[form.freightVolume] }}</span>
          </el-form-item>
          <el-form-item :label="$t('审核状态:')">
              <dict-tag :type="DICT_TYPE.APPLY_STATUS" :value="form.applyStatus"></dict-tag>
              <span>{{form.applyResult?('('+form.applyResult+')'):''}}</span>
          </el-form-item>
        </el-form>
    </el-card>
    <div slot="header" class="card-title">{{$t('审批流程')}}</div>
    <work-flow xmlkey="commission_config" v-model="selectedUsers" style="margin-top: 20px;"></work-flow>
    <div slot="footer" class="card footer_btn">
        <el-button type="primary" v-if="form.applyStatus==0" @click="submitForm">{{$t('提交')}}</el-button>
        <el-button plain type="primary" v-if="form.applyStatus==0" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
        <el-button v-if="form.applyStatus==1" type="primary" @click="$router.push(`/bpm/process-instance/detail?id=`+form.formId)">{{$t('审核中')}}</el-button>
        <el-button v-if="form.applyStatus==1" plain type="primary" @click="dialogVisible = true">{{$t('取消审核')}}</el-button>
        <el-button v-if="form.applyStatus==1" plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
    </div>
    <el-dialog
      :title="$t('提示')"
      :visible.sync="dialogVisible"
      width="30%">
      <span class="cancel_notice">{{$t('特价申请正在审核中，你确定取消特价申请吗？')}}</span>
      <div class="cancel_content">
        <span>{{$t('取消原因')}}：</span>
        <el-input v-model="reason" :placeholder="$t('请输入取消原因')"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t('取消')}}</el-button>
        <el-button type="primary" @click="cancelSplit">{{$t('确定')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getDictData, getDictDatas,DICT_TYPE,getDictDataLabel} from '@/utils/dict'
import WorkFlow from '@/components/WorkFlow'
import {getOrder,getOrderSpecial,cancelOrderSpecial,createOrderSpecial} from '@/api/ecw/order'
import {getChannelList} from "@/api/ecw/channel"
import { getCurrencyList } from '@/api/ecw/currency'
import { getProductAttrList } from '@/api/ecw/productAttr'
import {getUnitList} from '@/api/ecw/unit'
import {openedRouterList} from "@/api/ecw/warehouse"

export default {
  name: "specialCommission",
  components: {
    WorkFlow
  },
  props: {
    orderItemId: [String, Number]
  },
  data() {
    return {
      reason:'',
      dialogVisible:false,
      loading:false,
      form:{},
      selectedUsers:[],
      orderData:{},
      channelList:[],
      currencyList:[],
      productAttrList:[],
      unitType:[],
      startTitleZh:'',
      destTitleZh:'',
      shadeCommissionAmount:0,
      lightCommissionAmount:0
    };
  },
  created() {
    if(this.orderItemId){
      this.form.orderItemId = this.orderItemId - 0
      this.getOrderSpecialData()
    }
    // this.getOrderData()
    // this.getList()
    this.getUnitTypeData()
    getChannelList().then(res => this.channelList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
    getProductAttrList().then(res => this.productAttrList = res.data)
  },
  computed:{
    getDictData(){
        return (type, value) => getDictData(type, value) || {}
    },
    getDictDatas(){
        return getDictDatas
    },
    // 根据渠道id显示渠道名
    getChannelNameById(){
      return channelId => {
        const s = this.channelList.find(item => item.channelId == channelId) ?. nameZh
        return s ? '【' + s + '】' : ''
        }
    },
    currentMap(){
      let map = {}
      this.currencyList.forEach(item => {
        map[item.id] = item.titleZh
      })
      return map
    },
    volumeMap(){
      let map = {}
      this.unitType.forEach(item => {
        map[item.id] = item.titleZh
      })
      return map
    },
  },
  watch: {
    'form.lineId'(val){
      if (val){
        openedRouterList({lineId: val}).then(r => {
          if(r.data && r.data.length > 0){
            this.startTitleZh = r.data[0].startTitleZh
            this.destTitleZh = r.data[0].destTitleZh
          }
        })
      }
    }
  },
  methods: {
    getUnitTypeData () {
    	getUnitList().then(res => {
    		if(res.code==0&&res.data&&res.data.length>0){
    			this.unitType = res.data
    		}
    	})
    },
    getOrderData(){
      getOrder(this.form.orderId).then(response => {
        this.orderData = response.data
      });
    },
    getProductAttrNameById(id){
      return this.productAttrList.find(e => e.id === id)?.attrName || ''
    },
    /** 查询列表 */
    getOrderSpecialData(){
      getOrderSpecial(this.form.orderItemId,3).then(r => {
        this.form = r.data
        this.lightCommissionAmount = this.form.lightCommissionAmount
        this.shadeCommissionAmount = this.form.shadeCommissionAmount
        this.form.commissionType = this.form.commissionType.toString()
      })
    },
    submitForm(){
       this.form.applyType = 3
       this.form.commissionType = parseInt(this.form.commissionType)
       if(this.form.commissionType==1){
         this.form.lightCommissionAmount = this.lightCommissionAmount
       }
       if(this.form.commissionType==3){
         this.form.lightCommissionAmount = this.lightCommissionAmount
         this.form.shadeCommissionAmount = this.shadeCommissionAmount
       }
       this.form.ccIds = this.selectedUsers.join(',')
      createOrderSpecial(this.form).then(r => {
        this.$message.success(r.msg || this.$t('提交成功'))
        this.$store.dispatch('tagsView/delCurrentView')
      })
    },
    cancelSplit(){
      let that = this
      if(!that.reason){
        that.$message.error(this.$t("请输入取消原因"));
        return
      }
      cancelOrderSpecial(that.form.orderApprovalId,{reason:that.reason}).then(res=>{
          that.$message.success(this.$t("取消成功"));
          that.$store.dispatch('tagsView/delCurrentView')
        })
    },

  }
}
</script>
<style scoped>
  .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>
