<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">修改佣金规则-{{form.orderNo||''}}</div>
        <el-form :model="form" ref="queryForms" label-width="120px" class="card">
          <el-form-item label="商品类型">
             <span>{{form.prodType }}</span>
           </el-form-item>
           <el-form-item label="商品名称">
             <span>{{ form.prodTitleZh }}</span>
           </el-form-item>
           <el-form-item label="英文名称">
             <span>{{ form.prodTitleEn }}</span>
           </el-form-item>
           <el-form-item label="线路">
             {{ `【${getDictDataLabel(DICT_TYPE.TRANSPORT_TYPE, form.transportId)}】${ getChannelNameById(form.channelId) }从【${form.startTitleZh}】发往【${form.destTitleZh}】`}}
           </el-form-item>
          <el-form-item label="运费:" >
              <span>{{ form.orgFreight }} {{ currentMap[form.orgFreightCurrency] }}</span>
          </el-form-item>
          <el-form-item label="清关费:">
              <span>{{ form.orgClearanceFreight }} {{ currentMap[form.orgClearanceFreightCurrency] }}</span>
          </el-form-item>
          <el-form-item label="佣金类型:">
               <el-radio v-model="form.commissionType" v-for="dict in getDictDatas('commission_type')"
                         :key="dict.value" :label="dict.label" :value="dict.value">
              </el-radio>
          </el-form-item>
          <el-form-item v-if="form.commissionType==3" label="暗佣佣金:">
            <el-input style="width: 100px;"  type="text" v-model="form.lightCommissionAmount"  />
            <el-select v-model="form.commissionCurrencyId" style="width: 100px;margin-left: 10px;">
            <el-option  v-for="dict in getDictDatas('shipping_price_unit')"
                       :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
            <el-select v-model="form.commissionCurrencyId" style="width: 100px;margin-left: 10px;">
            <el-option  v-for="dict in unitType"
                       :key="dict.id" :label="dict.titleZh" :value="dict.id"/>
            </el-select>
          </el-form-item >
            <el-form-item v-if="form.commissionType==1||form.commissionType==3" label="明佣佣金:">
              <el-input style="width: 100px;"  type="text" v-model="form.lightCommissionAmount"  />
              <el-select v-model="form.commissionCurrencyId" style="width: 100px;margin-left: 10px;">
              <el-option  v-for="dict in getDictDatas('shipping_price_unit')"
                         :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
              <el-select v-model="form.commissionCurrencyId" style="width: 100px;margin-left: 10px;">
              <el-option  v-for="dict in unitType"
                         :key="dict.id" :label="dict.titleZh" :value="dict.id"/>
              </el-select>
            </el-form-item >
          <el-form-item v-if="form.commissionType==1" label="商品:">
              <span>{{form.prodTitleZh }}</span>
              <span>销售价：{{11}}美元/千克</span>
              <span v-if="form.commissionType==3">成本价：190美元/千克</span>
              <span v-if="form.commissionType==2" style="color: #1E98D7;" @click="$router.phsh(`/customer/customerCommission`)">去设置</span>
              <span v-if="form.commissionType==3">实际佣金返点：40美元/千克</span>
          </el-form-item>
          <el-form-item label="审核状态:">
              <dict-tag :type="DICT_TYPE.APPLY_STATUS" :value="form.applyStatus"></dict-tag>
          </el-form-item>
        </el-form>
    </el-card>
    <div slot="header" class="card-title">审批流程</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">提交</el-button>
        <el-button plain type="primary" v-if="form.applyStatus==0" @click="$router.back()">取消</el-button>
        <el-button v-if="form.applyStatus==1" type="primary" disabled>审核中</el-button>
        <el-button v-if="form.applyStatus==1" plain type="primary" @click="dialogVisible = true">取消审核</el-button>
        <el-button v-if="form.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,getDictDataLabel} from '@/utils/dict'
import WorkFlow from '@/components/WorkFlow'
import {getOrder,getOrderSpecial,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'

export default {
  name: "specialCommission",
  components: {
    WorkFlow
  },
  props: {
    orderItemId: [String, Number]
  },
  data() {
    return {
      reason:'',
      dialogVisible:false,
      loading:false,
      form:{},
      selectedUsers:[],
      orderData:{},
      channelList:[],
      currencyList:[],
      productAttrList:[],
      unitType:[]
    };
  },
  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
    }
  },
  methods: {
    getUnitTypeData () {
    	getUnitList().then(res => {
    		if(res.code==0&&res.data&&res.data.length>0){
    			this.unitType = res.data
    		}
    	})
    },
    getOrderData(){
      getOrder(this.queryParams.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
      })
    },
    submitForm(){
     createOrderSpecial({
        applyType: this.form.applyType,
        lineId: this.form.lineId,
        commissionType: this.form.commissionType,
        orderId: this.form.orderId,
        orderNo: this.form.orderNo,
        orderItemId: this.form.orderItemId,
        prodId:this.form.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>