<style>
  .coursePrice_table th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }

  .coursePrice_table tr {
    height: 45px;
  }

  .course_Line {
    width: 3px;
    height: 10px;
    display: inline-block;
    background-color: #3FC4FF;
    margin-right: 5px;
  }
</style>
<template>
  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
    <q-card style="width: 900px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">设置课程价格</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-lg text-grey-6">
          <span class="course_Line"></span>
          基础价格设置
        </div>
        <div>
          <table style="margin-left:10px;">
            <tr>
              <td style="width:70px;text-align:right;">
                卖价
              </td>
              <td colspan="2">
                <q-input filled stack-label maxlength="8" style="padding-bottom:0;width:390px;margin-left:10px;" dense
                  v-model="priceObj.courseObj.SellPrice" ref="SellPrice" label="卖价"
                  @keyup.native="checkPrice(priceObj.courseObj, 'SellPrice')" :rules="[val => !!val || '请填写卖价']" />
              </td>
            </tr>
          </table>
        </div>
        <div class="text-caption q-mb-lg q-mt-lg text-grey-6">
          <span class="course_Line"></span>
          优惠
        </div>
        <table style="border-collapse: collapse;width:100%;" class="coursePrice_table">
          <tr style="height:40px;">
            <th>
              优惠
            </th>
            <th>
              首次报名优惠
            </th>
            <th>首次优惠价</th>
            <th>
              续费报名优惠
            </th>
            <th>续费优惠价</th>
          </tr>
          <tr>
            <td style="width:70px;">
              直客优惠
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.B2CRatio" ref="B2CRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'B2CRatio'),getPrePrice(1)" suffix="%" />
            </td>
            <td style="width:150px;text-align:center;">
              {{getPrePrice(1)}}
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.B2CReNewRatio" ref="B2CReNewRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'B2CReNewRatio'),getPrePrice(2)" suffix="%" />
            </td>
            <td style="width:150px;text-align:center;">
              {{getPrePrice(2)}}
            </td>
          </tr>
        </table>
        <div class="text-caption q-mb-lg q-mt-lg text-grey-6">
          <span class="course_Line"></span>
          返佣
        </div>
        <table style="border-collapse: collapse;" class="coursePrice_table">
          <tr style="height:40px;">
            <th>同行
            </th>
            <th>
              首报名返佣比例
            </th>
            <th>
              首报返佣值
            </th>
            <th>
              返佣设置
            </th>
            <th>
              续费报名返佣比例
            </th>
            <th>
              续费返佣值
            </th>
            <th>
              返佣设置
            </th>
          </tr>
          <tr>
            <td style="width:70px;">
              一般同行
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.B2BRebateRatio" ref="B2BRebateRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'B2BRebateRatio'),getShouBAO(3)" suffix="%" />
            </td>
            <td style="text-align:center;width:100px;">
              {{getShouBAO(3)}}
            </td>
            <td style="width:200px;"> 
              <div class="row wrap">
                <q-select class="col-7" filled dense v-model="priceObj.courseObj.B2BRebateRatioType" :options="CourseRebateList"
                   emit-value map-options option-value="Id" option-label="Name" label="返佣设置" />
                <q-input class="col-5" v-if="priceObj.courseObj.B2BRebateRatioType==3" style="width:75px;margin-left:5px;" 
                filled stack-label dense v-model="priceObj.courseObj.B2BRebateRatioValue" @keyup.native="checkPrice(priceObj.courseObj, 'B2BRebateRatioValue')" />
              </div>
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.B2BReNewRatio" ref="B2BReNewRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'B2BReNewRatio'),getShouBAO(4)" suffix="%" />
            </td>
            <td style="text-align:center;width:100px;">
              {{getShouBAO(4)}}
            </td>
            <td style="width:200px;">
              <div class="row wrap">
                <q-select class="col-7" filled dense v-model="priceObj.courseObj.B2BReNewRatioType" :options="CourseRebateList"
                   emit-value map-options option-value="Id" option-label="Name" label="返佣设置" />
                <q-input class="col-5" v-if="priceObj.courseObj.B2BReNewRatioType==3" style="width:75px;margin-left:5px;"
                 filled stack-label dense v-model="priceObj.courseObj.B2BReNewRatioValue" @keyup.native="checkPrice(priceObj.courseObj, 'B2BReNewRatioValue')" />
              </div>
            </td>
          </tr>
          <tr>
            <td>
              校代
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.SchoolRebateRatio" ref="SchoolRebateRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'SchoolRebateRatio'),getShouBAO(5)" suffix="%" />
            </td>
            <td style="text-align:center;">
              {{getShouBAO(5)}}
            </td>
            <td style="width:200px;"> 
              <div class="row wrap">
                <q-select class="col-7" filled dense v-model="priceObj.courseObj.SchoolRebateRatioType" :options="CourseRebateList"
                   emit-value map-options option-value="Id" option-label="Name" label="返佣设置" />
                <q-input class="col-5" v-if="priceObj.courseObj.SchoolRebateRatioType==3" style="width:75px;margin-left:5px;" 
                filled stack-label dense v-model="priceObj.courseObj.SchoolRebateRatioValue" @keyup.native="checkPrice(priceObj.courseObj, 'SchoolRebateRatioValue')" />
              </div>
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.SchoolReNewRatio" ref="SchoolReNewRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'SchoolReNewRatio'),getShouBAO(6)" suffix="%" />
            </td>
            <td style="text-align:center;">
              {{getShouBAO(6)}}
            </td>
            <td style="width:200px;"> 
              <div class="row wrap">
                <q-select class="col-7" filled dense v-model="priceObj.courseObj.SchoolReNewRatioType" :options="CourseRebateList"
                   emit-value map-options option-value="Id" option-label="Name" label="返佣设置" />
                <q-input class="col-5" v-if="priceObj.courseObj.SchoolReNewRatioType==3" filled stack-label 
                style="width:75px;margin-left:5px;" dense @keyup.native="checkPrice(priceObj.courseObj, 'SchoolReNewRatioValue')" v-model="priceObj.courseObj.SchoolReNewRatioValue" />
              </div>
            </td>
          </tr>
          <tr>
            <td>
              转介
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.TransIntroductceRatio"
                ref="TransIntroductceRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'TransIntroductceRatio'),getShouBAO(7)" suffix="%" />
            </td>
            <td style="text-align:center">
              {{getShouBAO(7)}}
            </td>
            <td style="width:200px;"> 
              <div class="row wrap">
                <q-select class="col-7" filled dense v-model="priceObj.courseObj.TransIntroductceRatioType" :options="CourseRebateList"
                   emit-value map-options option-value="Id" option-label="Name" label="返佣设置" />
                <q-input class="col-5" v-if="priceObj.courseObj.TransIntroductceRatioType==3" filled 
                  stack-label dense style="width:75px;margin-left:5px;" @keyup.native="checkPrice(priceObj.courseObj, 'TransIntroductceRatioValue')" v-model="priceObj.courseObj.TransIntroductceRatioValue" />
              </div>
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.TransIntroductceReNewRatio"
                ref="TransIntroductceReNewRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'TransIntroductceReNewRatio'),getShouBAO(8)" suffix="%" />
            </td>
            <td style="text-align:center">
              {{getShouBAO(8)}}
            </td>
            <td style="width:200px;"> 
              <div class="row wrap">
                <q-select class="col-7" filled dense v-model="priceObj.courseObj.TransIntroductceReNewRatioType" :options="CourseRebateList"
                   emit-value map-options option-value="Id" option-label="Name" label="返佣设置" />
                <q-input class="col-5" v-if="priceObj.courseObj.TransIntroductceReNewRatioType==3" filled 
                  stack-label dense style="width:75px;margin-left:5px;" @keyup.native="checkPrice(priceObj.courseObj, 'TransIntroductceReNewRatioValue')" v-model="priceObj.courseObj.TransIntroductceReNewRatioValue" />
              </div>
            </td>
          </tr>
          <tr>
            <td>
              内推
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.InnerRecommendRatio"
                ref="InnerRecommendRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'InnerRecommendRatio'),getShouBAO(9)" suffix="%" />
            </td>
            <td style="text-align:center">
              {{getShouBAO(9)}}
            </td>
            <td style="width:200px;"> 
              <div class="row wrap">
                <q-select class="col-7" filled dense v-model="priceObj.courseObj.InnerRecommendRatioType" :options="CourseRebateList"
                   emit-value map-options option-value="Id" option-label="Name" label="返佣设置" />
                <q-input class="col-6" v-if="priceObj.courseObj.InnerRecommendRatioType==3" filled stack-label dense 
                v-model="priceObj.courseObj.InnerRecommendRatioValue" @keyup.native="checkPrice(priceObj.courseObj, 'InnerRecommendRatioValue')" style="width:75px;margin-left:5px;" />
              </div>
            </td>
            <td>
              <q-input filled stack-label dense v-model="priceObj.courseObj.InnerRecommendReNewRatio"
                ref="InnerRecommendReNewRatio"
                @keyup.native="checkPrice(priceObj.courseObj, 'InnerRecommendReNewRatio'),getShouBAO(10)" suffix="%" />
            </td>
            <td style="text-align:center">
              {{getShouBAO(10)}}
            </td>
            <td style="width:200px;"> 
              <div class="row wrap">
                <q-select class="col-7" filled dense v-model="priceObj.courseObj.InnerRecommendReNewRatioType" :options="CourseRebateList"
                   emit-value map-options option-value="Id" option-label="Name" label="返佣设置" />
                <q-input class="col-5" v-if="priceObj.courseObj.InnerRecommendReNewRatioType==3" filled stack-label dense 
                  v-model="priceObj.courseObj.InnerRecommendReNewRatioValue" @keyup.native="checkPrice(priceObj.courseObj, 'InnerRecommendReNewRatioValue')" style="width:75px;margin-left:5px;" />
              </div>
            </td>
          </tr>
        </table>

      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveCourseLoading"
          @click="saveCourse" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    saveCoursePreferential,
    queryCoursePreferentialList,
    queryCourseInfo,
    queryCoursePreferentialType,
    GetCourseRebateSetList
  } from "../../api/course/index";
  export default {
    components: {},
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        optionTitle: "",
        saveCourseLoading: false,
        //价格对象
        priceObj: {
          courseObj: {
            CourseId: 0, //课程编号
            OriginalPrice: 0, //原价
            SellPrice: 0, //售价
            CommissionReType:1,//1课耗返佣    2付款返佣
            B2CRatio: 0, //直客首次报名优惠比例
            B2CReNewRatio: 0, //直客续费优惠比例
            B2BRebateRatio: 0, //一般同行首次报名返佣比例
            B2BRebateRatioType: 1,
            B2BRebateRatioValue: '',
            B2BReNewRatio: 0, //一般同行续费返佣比例
            B2BReNewRatioType: 1,
            B2BReNewRatioValue: '',
            SchoolRebateRatio: 0, //校代同行首次返佣比例
            SchoolRebateRatioType: 1,
            SchoolRebateRatioValue: '',
            SchoolReNewRatio: 0, //校代同行续费返佣比例
            SchoolReNewRatioType: 1,
            SchoolReNewRatioValue: '',
            TransIntroductceRatio: 0, //转介首次报名返佣比例
            TransIntroductceRatioType: 1,
            TransIntroductceRatioValue: '',
            TransIntroductceReNewRatio: 0, //转介续费返佣比例
            TransIntroductceReNewRatioType: 1,
            TransIntroductceReNewRatioValue: '',
            InnerRecommendRatio: 0, //內推首次报名返佣比例
            InnerRecommendRatioType: 1,
            InnerRecommendRatioValue: '',
            InnerRecommendReNewRatio: 0, //內推续费返佣比例
            InnerRecommendReNewRatioType: 1,
            InnerRecommendReNewRatioValue: ''
          },
          priceList: [] //价格列表
        },
        CourseRebateList: [],
        priceTypeList: [] //优惠类型列表
      };
    },
    created() {
      this.getTypeList();
      this.getFanyong();
    },
    mounted() {
      this.initObj();
    },
    methods: {
      //获取返佣设置下拉
      getFanyong(){
        GetCourseRebateSetList().then(res => {
          if(res.Code==1){
            this.CourseRebateList = res.Data;
          }
        });
      },
      //获取优惠类型列表
      getTypeList() {
        queryCoursePreferentialType().then(res => {
          this.priceTypeList = res.Data;
        });
      },
      //新增价格
      addPrice() {
        var currentObj = {
          Id: 0, //主键编号
          CourseId: 0, //课程编号
          PreferentialTerms: "", //优惠条件
          SaleCommissionType: 0, //销售返佣类型(0-百分比，1-固定金额)
          SaleCommissionMoney: 0, //销售返佣
          B2BCommissionType: 0, //同行返佣类型(0-百分比，1-固定金额)
          B2BCommissionMoney: 0, //同行返佣
          EduCommissionType: 0, //教育返佣类型
          EduCommissionMoney: 0, //教育同行佣金
          PriceDiscountType: 0, //课程价格优惠类型(见枚举)
          BuyNum: 0, //购买人数
          SendNum: 0, //赠送人数
          PriceType: 0, //优惠价格类型(0-百分比，1-固定金额)
          PriceMoney: 0 //优惠金额
        };
        this.priceObj.priceList.push(currentObj);
      },
      //删除价格
      delPrice(index) {
        this.priceObj.priceList.splice(index, 1);
      },
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.CourseId > 0) {
          queryCourseInfo({
            CourseId: this.saveObj.CourseId
          }).then(res => {
            this.priceObj.courseObj.CourseId = res.Data.CourseId;
            this.priceObj.courseObj.OriginalPrice = res.Data.OriginalPrice;
            this.priceObj.courseObj.SellPrice = res.Data.SellPrice;
            this.priceObj.courseObj.CommissionReType = res.Data.CommissionReType;
            this.priceObj.courseObj.B2CRatio = res.Data.B2CRatio;
            this.priceObj.courseObj.B2CRatioType = res.Data.B2CRatioType;
            this.priceObj.courseObj.B2CRatioValue = res.Data.B2CRatioValue;
            this.priceObj.courseObj.B2CReNewRatio = res.Data.B2CReNewRatio;
            this.priceObj.courseObj.B2CReNewRatioType = res.Data.B2CReNewRatioType;
            this.priceObj.courseObj.B2CReNewRatioValue = res.Data.B2CReNewRatioValue;
            this.priceObj.courseObj.B2BRebateRatio = res.Data.B2BRebateRatio;
            this.priceObj.courseObj.B2BRebateRatioType = res.Data.B2BRebateRatioType;
            this.priceObj.courseObj.B2BRebateRatioValue = res.Data.B2BRebateRatioValue;
            this.priceObj.courseObj.B2BReNewRatio = res.Data.B2BReNewRatio;
            this.priceObj.courseObj.B2BReNewRatioType = res.Data.B2BReNewRatioType;
            this.priceObj.courseObj.B2BReNewRatioValue = res.Data.B2BReNewRatioValue;
            this.priceObj.courseObj.SchoolRebateRatio = res.Data.SchoolRebateRatio;
            this.priceObj.courseObj.SchoolRebateRatioType = res.Data.SchoolRebateRatioType;
            this.priceObj.courseObj.SchoolRebateRatioValue = res.Data.SchoolRebateRatioValue;
            this.priceObj.courseObj.SchoolReNewRatio = res.Data.SchoolReNewRatio;
            this.priceObj.courseObj.SchoolReNewRatioType = res.Data.SchoolReNewRatioType;
            this.priceObj.courseObj.SchoolReNewRatioValue = res.Data.SchoolReNewRatioValue;
            this.priceObj.courseObj.TransIntroductceRatio = res.Data.TransIntroductceRatio;
            this.priceObj.courseObj.TransIntroductceRatioType = res.Data.TransIntroductceRatioType;
            this.priceObj.courseObj.TransIntroductceRatioValue = res.Data.TransIntroductceRatioValue;
            this.priceObj.courseObj.TransIntroductceReNewRatio = res.Data.TransIntroductceReNewRatio;
            this.priceObj.courseObj.TransIntroductceReNewRatioType = res.Data.TransIntroductceReNewRatioType;
            this.priceObj.courseObj.TransIntroductceReNewRatioValue = res.Data.TransIntroductceReNewRatioValue;
            this.priceObj.courseObj.InnerRecommendRatio = res.Data.InnerRecommendRatio;
            this.priceObj.courseObj.InnerRecommendRatioType = res.Data.InnerRecommendRatioType;
            this.priceObj.courseObj.InnerRecommendRatioValue = res.Data.InnerRecommendRatioValue;
            this.priceObj.courseObj.InnerRecommendReNewRatio = res.Data.InnerRecommendReNewRatio;
            this.priceObj.courseObj.InnerRecommendReNewRatioType = res.Data.InnerRecommendReNewRatioType;
            this.priceObj.courseObj.InnerRecommendReNewRatioValue = res.Data.InnerRecommendReNewRatioValue;

          });
          queryCoursePreferentialList({
            CourseId: this.saveObj.CourseId
          }).then(res => {
            if (res.Code == 1 && res.Data) {
              this.priceObj.priceList = res.Data;
            }
          });
          this.optionTitle = "修改课程优惠信息";
        } else {
          this.optionTitle = "新增课程优惠信息";
          this.priceObj.courseObj.CourseId = 0;
          this.priceObj.courseObj.OriginalPrice = 0;
          this.priceObj.courseObj.SellPrice = 0;
        }
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit("close");
        this.persistent = false;
      },
      //保存菜单
      saveCourse() {
        if (this.priceObj.priceList && this.priceObj.priceList.length > 0) {
          this.priceObj.priceList.forEach(item => {
            if (item.BuyNum == "") {
              item.BuyNum = 0;
            }
            if (item.SendNum == "") {
              item.SendNum = 0;
            }
            if (item.PriceMoney == "") {
              item.PriceMoney = 0;
            }
            if (item.B2BCommissionMoney == "") {
              item.B2BCommissionMoney = 0;
            }
            if (item.SaleCommissionMoney == "") {
              item.SaleCommissionMoney = 0;
            }
            if (item.EduCommissionMoney == "") {
              item.EduCommissionMoney = 0;
            }
          });
        }

        this.$refs.SellPrice.validate();

        if (!this.$refs.SellPrice.hasError) {
          this.saveCourseLoading = true;
          saveCoursePreferential(this.priceObj)
            .then(res => {
              this.saveCourseLoading = false;
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "数据保存成功！",
                position: "top"
              });
              this.$emit("success");
              this.closeSaveForm();
            })
            .catch(() => {
              this.saveCourseLoading = false;
            });
        }
      },
      //获取首次报名优惠
      getPrePrice(type) {
        //首次优惠
        var Count = ''
        if (type == 1) {
          if (this.priceObj.courseObj.B2CRatio) {
            let num = Number(100 - this.priceObj.courseObj.B2CRatio) / 100;
            Count = (num * this.priceObj.courseObj.SellPrice).toFixed(2);
          }
        }
        if (type == 2) {
          if (this.priceObj.courseObj.B2CReNewRatio) {
            let num = Number(100 - this.priceObj.courseObj.B2CReNewRatio) / 100;
            Count = (num * this.priceObj.courseObj.SellPrice).toFixed(2);
          }
        }
        return Count;
      },
      //获取首报返佣比例
      getShouBAO(type) {
        //首次优惠
        var Count = ''
        var currentPrice = Number(100 - this.priceObj.courseObj.B2CRatio) * this.priceObj.courseObj.SellPrice/100;
        if (type == 3) {
          if (this.priceObj.courseObj.B2BRebateRatio) {
            let num = currentPrice * Number(this.priceObj.courseObj.B2BRebateRatio) / 100;
            Count = num.toFixed(2);
            return Count;
          }
        }
        if (type == 4) {
          if (this.priceObj.courseObj.B2BReNewRatio) {
            let num = currentPrice * Number(this.priceObj.courseObj.B2BReNewRatio) / 100;
            Count = num.toFixed(2);
            return Count;
          }
        }
        if (type == 5) {
          if (this.priceObj.courseObj.SchoolRebateRatio) {
            let num = currentPrice * Number(this.priceObj.courseObj.SchoolRebateRatio) / 100;
            Count = num.toFixed(2);
            return Count;
          }
        }
        if (type == 6) {
          if (this.priceObj.courseObj.SchoolReNewRatio) {
            let num = currentPrice * Number(this.priceObj.courseObj.SchoolReNewRatio) / 100;
            Count = num.toFixed(2);
            return Count;
          }
        }
        if (type == 7) {
          if (this.priceObj.courseObj.TransIntroductceRatio) {
            let num = currentPrice * Number(this.priceObj.courseObj.TransIntroductceRatio) / 100;
            Count = num.toFixed(2);
            return Count;
          }
        }
        if (type == 8) {
          if (this.priceObj.courseObj.TransIntroductceReNewRatio) {
            let num = currentPrice * Number(this.priceObj.courseObj.TransIntroductceReNewRatio) / 100;
            Count = num.toFixed(2);
            return Count;
          }
        }
        if (type == 9) {
          if (this.priceObj.courseObj.InnerRecommendRatio) {
            let num = currentPrice * Number(this.priceObj.courseObj.InnerRecommendRatio) / 100;
            Count = num.toFixed(2);
            return Count;
          }
        }
        if (type == 10) {
          if (this.priceObj.courseObj.InnerRecommendReNewRatio) {
            let num = currentPrice * Number(this.priceObj.courseObj.InnerRecommendReNewRatio) / 100;
            Count = num.toFixed(2);
            return Count;
          }
        }
      }
    }
  };
</script>