<template>
  <div class="app-container">
    <el-form :rules="rules" :model="form" ref="form" :inline="true" >
      <el-row>
        <el-col :span="24">
          <el-form-item label="客户名称" prop="customerId">
            <el-select
              v-model="customerForm.name"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod">
              <el-option
                v-for="item in customeList"
                :key="item.id"
                :value="item.id.toString()"
                :label="item.name"
              >
                {{ item.number }}|{{ item.name }}|{{ item.defaultContactPhone }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="运输方式" prop="transportId">
            <div style="width: 130px;">
              <custom-selectors-dictionary v-model="form.transportId"
                                           :options="getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE)"></custom-selectors-dictionary>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="始发地" prop="departureId">
            <div style="width: 130px;">
              <custom-selectors-dictionary label-key="titleZh" value-key="id" v-model="form.departureId"
                                           :options="exportCityList"></custom-selectors-dictionary>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="目的地" prop="objectiveId">
            <div style="width: 130px;">
              <custom-selectors-dictionary label-key="titleZh" value-key="id" v-model="form.objectiveId"
                                           :options="importCityList"></custom-selectors-dictionary>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="报关方式" prop="customsType">
            <div style="width: 130px;">
              <custom-selectors-dictionary v-model="form.customsType"
                                           :options="getDictDatas(DICT_TYPE.SHIPPING_DECLARATION_TYPE)"></custom-selectors-dictionary>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="备案" prop="approval">
            <div style="width: 130px;">
              <custom-selectors-dictionary v-model="form.approval"
                                           :options="getDictDatas(DICT_TYPE.COMMISSION_PRODUCT_APPROVAL)"></custom-selectors-dictionary>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="佣金类型(明佣、暗佣)">
            <el-radio-group v-model="form.type">
              <el-radio v-for="(item,index) in getDictDatas(DICT_TYPE.COMMISSION_TYPE)" :label="item.value"
                        :key="index">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="返佣类型" v-if="form.type == 2">
            <el-radio-group v-model="form.darkReturnType">
              <el-radio v-for="(item,index) in getDictDatas(DICT_TYPE.COMMISSION_DARK_TYPE)" :label="item.value"
                        :key="index">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="ming-servant" v-if="form.type == 1">
            <div class="label">佣金</div>
            <div class="content">
              <div>
                <el-input v-model="mingServantFrom[0].refund"></el-input>
              </div>
              <div>
                <custom-selectors-dictionary v-model="mingServantFrom[0].refundCurrency"
                                             :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
              </div>
              <div>
                <custom-selectors-dictionary v-model="mingServantFrom[0].refundUnit"
                                             :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
              </div>
            </div>
          </div>
          <el-form v-if="form.type == 2 && form.darkReturnType == 1">
            <el-form-item label="商品类型" v-for="(item,index) in darkServantAndProductForm" :key="index">
              <div class="shanping-type">
                <div class="tool">
                  <custom-selectors-dictionary v-model="item.productType" :options="commodity" label-key="titleZh"
                                               value-key="id"></custom-selectors-dictionary>
                </div>
                <div class="box">
                  <div class="label">
                    商品特性
                  </div>
                  <div class="custom">
                    <custom-selectors-dictionary v-model="item.productAttr" label-key="attrName" value-key="id"
                                                 :options="commodityType"></custom-selectors-dictionary>
                  </div>
                </div>
                <div class="box">
                  <div class="label">
                    佣金
                  </div>
                  <div class="custom">
                    <el-input v-model="item.darkCommission"></el-input>
                  </div>
                  <div class="custom">
                    <custom-selectors-dictionary v-model="item.darkCurrency"
                                                 :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
                  </div>
                  <div class="custom">
                    <custom-selectors-dictionary v-model="item.darkUnit"
                                                 :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
                  </div>
                </div>
                <div>
                  <el-button type="primary" @click="addToFn(1)" v-if="darkServantAndProductForm.length - 1 === index">添加</el-button>
                </div>
              </div>
            </el-form-item>
          </el-form>
          <div class="column" v-if="form.type == 2 && form.darkReturnType == 2">
            <div style="margin-bottom: 10px" v-for="(item,index) in darkServantAndRebateForm" :key="index">
              <div class="label">
                佣金:
              </div>
              <div class="content">
                <div class="item label">满</div>
                <div class="item">
                  <el-input v-model="item.amount"></el-input>
                </div>
                <div class="item">
                  <custom-selectors-dictionary v-model="item.amountCurrency"
                                               :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
                </div>
                <div class="item">
                  <custom-selectors-dictionary v-model="item.amountUnit"
                                               :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
                </div>
              </div>
              <div class="content">
                <div class="item label">返</div>
                <div class="item">
                  <el-input v-model="item.refund"></el-input>
                </div>
                <div class="item">
                  <custom-selectors-dictionary v-model="item.refundCurrency"
                                               :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
                </div>
                <div class="item">
                  <custom-selectors-dictionary v-model="item.refundUnit"
                                               :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
                </div>
              </div>
              <el-button @click="addToFn(2)" v-show="darkServantAndRebateForm.length -1 === index">添加</el-button>
            </div>
          </div>
          <div class="mingServantAndDarkServant" v-if="form.type == 3">
            <div class="box">
              <div class="label">暗佣佣金：</div>
              <div class="content">
                <div class="item">
                  <el-input v-model="mingServantAnddarkServant[0].refund"></el-input>
                </div>
                <div class="item">
                  <custom-selectors-dictionary v-model="mingServantAnddarkServant[0].refundCurrency"
                                               :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
                </div>
                <div class="item">
                  <custom-selectors-dictionary v-model="mingServantAnddarkServant[0].refundUnit"
                                               :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
                </div>
              </div>
            </div>
            <div class="title">
              <span class="label">成本价：</span>原价-暗佣佣金
            </div>
            <div class="box">
              <div class="label">销售价上调：</div>
              <div class="content">
                <div class="item">
                  <el-input v-model="mingServantAnddarkServant[0].darkAdjustCommission"></el-input>
                </div>
                <div class="item">
                  <custom-selectors-dictionary v-model="mingServantAnddarkServant[0].darkAdjustCurrency"
                                               :options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
                </div>
                <div class="item">
                  <custom-selectors-dictionary v-model="mingServantAnddarkServant[0].darkAdjustUnit"
                                               :options="getDictDatas(DICT_TYPE.COMMISSION_UNIT)"></custom-selectors-dictionary>
                </div>
              </div>
            </div>
            <div class="title">
              <span class="label"> 实际佣金返点：</span>销售价-成本价
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="margin-top: 20px">
          <el-button style="width:200px;margin: 0 40px" type="primary" @click="submitForm">确定</el-button>
          <el-button style="width:200px">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  itemTypeListApi,
  customerDropDownList, commodityList,createCommission

} from "@/api/ecw/customerCommissionInfo";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import customSelectorsDictionary from "./customSelectorsDictionary"
import {getTradeCityList} from "@/api/ecw/region";
import RoutersSelector from "@/components/RoutersSelector"

export default {
  name: "CustomerCommissionInfo",
  components: {
    customSelectorsDictionary,
    RoutersSelector
  },
  data() {
    return {
      value: '',
      getDictDatas,
      DICT_TYPE,
      commodityType: [],
      tradeCityList: [],
      // 表单参数
      form: {
        approval: undefined,//	产品备案
        customerCommissionInfoBaseVOList: [],//	佣金详情
        customerId: undefined,//客户id
        customsType: undefined,//报关类别：我司全代：1，自单代报：2，混合报关：3
        darkReturnType: this.getDictDatas(this.DICT_TYPE.COMMISSION_DARK_TYPE)[0].value,//	暗佣类型 1产品2达标
        departureId: undefined,//	始发地id
        objectiveId: undefined,//目的地id
        transportId:undefined,//运输方式
        type: this.getDictDatas(this.DICT_TYPE.COMMISSION_TYPE)[1].value,//	佣金类型
      },
      //明佣
      mingServantFrom: [
        {
          refund: 0,
          refundCurrency:this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value,
          refundUnit: this.getDictDatas(this.DICT_TYPE.COMMISSION_UNIT)[0].value,
        }
      ],
      //暗佣金+产品
      darkServantAndProductForm: [
        {
          productType:undefined,//商品类型
          productAttr: undefined,//暗佣 产品属性
          darkCommission: 0,//暗佣 佣金
          darkCurrency: this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value,//	暗佣 货币
          darkUnit: this.getDictDatas(this.DICT_TYPE.COMMISSION_UNIT)[0].value,//	暗佣 单位
        }
      ],
      //暗佣+达标返佣
      darkServantAndRebateForm: [
        {
          amount: 0,//	暗佣-满减金额
          amountCurrency:  this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value,//	暗佣-满减金额对应货币
          amountUnit: this.getDictDatas(this.DICT_TYPE.COMMISSION_UNIT)[0].value,//	暗佣-满减金额对应单位,
          refund: 0,//暗佣-满之后返还金额
          refundCurrency: this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value,//暗佣-满之后返还金额的货币
          refundUnit: this.getDictDatas(this.DICT_TYPE.COMMISSION_UNIT)[0].value,//暗佣-满之后返还金额的单位
        }
      ],
      //暗佣+明金
      mingServantAnddarkServant: [
        {
          refund: 0,//	暗佣+明佣 上调金额
          refundCurrency: this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value,//	暗佣+明佣 上调对应的货币
          refundUnit: this.getDictDatas(this.DICT_TYPE.COMMISSION_UNIT)[0].value,//暗佣+明佣 上调对应的单位
          darkAdjustCommission: 0,//暗佣+明佣 上调金额
          darkAdjustCurrency: this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value,//暗佣+明佣 上调对应的货币
          darkAdjustUnit: this.getDictDatas(this.DICT_TYPE.COMMISSION_UNIT)[0].value,//暗佣+明佣 上调对应的单位
        }
      ],
      customerForm: {
        defaultContactName: undefined,
        defaultContactPhone: undefined,
        name: undefined,
        number: undefined,
      },
      customeList: [],
      commodity: [],
      // 表单校验
      rules: {
        customerId: [{required: true, message: "客户名称不能为空", trigger: "blur"}],
        departureId: [{required: true, message: "客户名称不能为空", trigger: "blur"}],
        transportId: [{required: true, message: "运输方式不能为空", trigger: "blur"}],
        objectiveId: [{required: true, message: "客户名称不能为空", trigger: "blur"}],
        customsType: [{required: true, message: "客户名称不能为空", trigger: "blur"}],
        approval: [{required: true, message: "客户名称不能为空", trigger: "blur"}],
      },
      customerShow: true
    };
  },
  computed:{
    importCityList(){
      return this.tradeCityList.filter(item => item.type == 1)
    },
    exportCityList(){
      return this.tradeCityList.filter(item => item.type == 2)
    },
  },
  created() {
    this.getItemType();
    commodityList().then(res => {
      console.log(res, 'res');
      this.commodity = res.data
      this.darkServantAndProductForm.forEach(item=>{item.productType =this.commodity[0].id})
    })
    getTradeCityList().then(res => {
      this.tradeCityList = res.data
    })
  },
  methods: {
    // /** 查询列表客户*/
    getCustomeList() {
      customerDropDownList(this.customerForm).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.customeList = res.data
        }
      })
    },
    remoteMethod(val) {
      this.customerForm.name = val;
      this.form.customerId = val;
      this.getCustomeList();
    },
    /** 取消按钮 */
    cancel() {
    },
    /** 表单重置 */
    reset() {
      this.form = {
        approval: undefined,
        customerCommissionInfoBaseVOList: [],
        customerId: undefined,//客户id
        customsType: undefined,//报关类别：我司全代：1，自单代报：2，混合报关：3
        darkReturnType: this.getDictDatas(this.DICT_TYPE.COMMISSION_DARK_TYPE)[0].value,//	暗佣类型 1产品2达标
        departureId: undefined,//	始发地id
        objectiveId: undefined,//	运输方式
        type: this.getDictDatas(this.DICT_TYPE.COMMISSION_TYPE)[1].value,//	佣金类型
      };
      this.resetForm("form");
    },
    //添加多条
    addToFn(val){
      if(val === 1){
         this.darkServantAndProductForm.push(    {
           productType:this.commodity[0].id,//商品类型
           productAttr: this.commodityType[0].id,//暗佣 产品属性
           darkCommission: 0,//暗佣 佣金
           darkCurrency: this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value,//	暗佣 货币
           darkUnit: this.getDictDatas(this.DICT_TYPE.COMMISSION_UNIT)[0].value,//	暗佣 单位
         })
      }else {
        this.darkServantAndRebateForm.push( {
          amount: 0,//	暗佣-满减金额
          amountCurrency: this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value,//	暗佣-满减金额对应货币
          amountUnit: this.getDictDatas(this.DICT_TYPE.COMMISSION_UNIT)[0].value,//	暗佣-满减金额对应单位,
          refund: 0,//暗佣-满之后返还金额
          refundCurrency: this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value,//暗佣-满之后返还金额的货币
          refundUnit: this.getDictDatas(this.DICT_TYPE.COMMISSION_UNIT)[0].value,//暗佣-满之后返还金额的单位
        })
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs.form.validate ((valid)=>{
        if(!valid)return
        console.log(valid,'1234')
        if (this.form.type == 1) {
          this.form.customerCommissionInfoBaseVOList = this.mingServantFrom
        } else if (this.form.type == 2) {
          if (this.form.darkReturnType == 1) {
            this.form.customerCommissionInfoBaseVOList = this.darkServantAndProductForm
          } else {
            this.form.customerCommissionInfoBaseVOList = this.darkServantAndRebateForm
          }
        } else if (this.form.type == 3) {
          this.form.customerCommissionInfoBaseVOList = this.mingServantAnddarkServant
        }
        createCommission(this.form).then(r =>{
          console.log(r)
        })
      })
    },
    // 商品类型
    getItemType() {
      itemTypeListApi().then(res => {
        if (res.code === 0) {
          this.commodityType = res.data;
          this.darkServantAndProductForm.forEach(item =>{item.productAttr = this.commodityType[0].id})
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.mingServantAndDarkServant {
  margin-top: 10px;
  .box {
    display: flex;
    align-items: center;
    .label {
      vertical-align: middle;
      font-size: 14px;
      color: #606266;
      font-weight: 700;
    }

    .content {
      display: flex;
      align-items: center;

      .item {
        margin-right: 20px;
      }
    }
  }

  .title {
    margin: 15px 0;

    .label {
      vertical-align: middle;
      font-size: 14px;
      color: #606266;
      font-weight: 700;
    }
  }
}
.ming-servant {
  display: flex;
  align-items: center;

  .label {
    width: 50px;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
  }

  .content {
    display: flex;

    div {
      margin-right: 10px;
    }

  }
}

.shanping-type {
  display: flex;

  .tool {
    width: 150px;
  }

  .box {
    margin-left: 20px;
    display: flex;

    .label {
      width: 80px;
      vertical-align: middle;
      font-size: 14px;
      color: #606266;
      font-weight: 700;
      text-align: left;
    }

    .custom {
      width: 150px;
      margin-right: 10px;
    }
  }
}

.column {
  div {
    display: flex;
    align-items: center;

    .label {
      width: 26px;
      white-space: nowrap;
      vertical-align: middle;
      font-size: 14px;
      color: #606266;
      font-weight: 700;
      width: 100px;
    }
  }

  .content {
    display: flex;
    align-items: center;
    margin-right: 10px;

    .item {
      text-align: right;
      width: 150px;
      margin: 0 5px;
    }

    .label {
      width: 50px;
    }
  }

}
</style>
