<template>
  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">设置{{Type==1?'留学':'就业'}}价格</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">基础价格设置</div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="8" :dense="false" v-model="priceObj.studyAbroadObj.SuggestPrice"
              ref="SuggestPrice" class="col-6 q-pr-lg q-pb-lg" label="合同建议卖价"
              @keyup.native="checkPrice(priceObj.studyAbroadObj, 'SuggestPrice')" :rules="[val => !!val || '合同建议卖价']" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="8" :dense="false" v-model="priceObj.studyAbroadObj.SellPrice"
              ref="SellPrice" class="col-6 q-pr-lg q-pb-lg" label="实际卖价"
              @keyup.native="checkPrice(priceObj.studyAbroadObj, 'SellPrice')" :rules="[val => !!val || '请填写实际卖价']" />
          </div>
        </div>
        <div class="q-pt-none scroll" style="max-height:60hv">
          <table>
            <thead>
              <tr style="height:60px;">
                <td colspan="5" style="text-align:right;">
                  <q-btn color="accent" size="sm" icon="add" label="新增优惠" @click="addPrice()" />
                </td>
              </tr>
              <tr>
                <td style="width:200px">
                  优惠类型
                </td>
                <td style="width:150px">
                  优惠条件
                </td>
                <td style="width:140px">
                  同行返佣
                </td>
                <td style="width:140px">
                  销售返佣
                </td>
                <td style="width:140px;">
                  教育同行返佣
                </td>
                <td>
                  操作
                </td>
              </tr>
            </thead>
            <tbody v-for="(item, index) in priceObj.priceList">
              <tr>
                <td style="height:50px">
                  <q-select filled stack-label option-value="Id" option-label="Name" v-model="item.PriceDiscountType"
                    ref="PriceDiscountType_Id" :options="priceTypeList" label="优惠类型" style="width:160px" dense
                    emit-value map-options />
                </td>
                <td>
                  <!--买送-->
                  <template v-if="item.PriceDiscountType == 1">
                    <q-input filled stack-label dense v-model="item.BuyNum" ref="BuyNum" label="买"
                      @keyup.native="checkPrice(item, 'BuyNum')" style="width:60px;display:inline-block;" suffix="" />
                    <q-input filled stack-label class="q-ml-xs" v-model="item.SendNum" ref="SendNum" dense label="送"
                      @keyup.native="checkPrice(item, 'SendNum')" style="width:60px;display:inline-block;" suffix="">
                    </q-input>
                  </template>
                  <!--刷卡分期-->
                  <template v-else-if="item.PriceDiscountType == 5"> </template>
                  <template v-else>
                    <q-input filled stack-label dense v-model="item.PriceMoney" ref="PriceMoney" label="优惠"
                      @keyup.native="checkPrice(item, 'PriceMoney')" style="width:100px">
                      <template v-slot:append>
                        <div class="text-dark text-center text-dark cursor-pointer"
                          style="width:30px;margin-right:-12px;height:100%;font-size:14px;border-left:1px solid #ddd;padding-top:15px;">
                          <span>{{item.PriceType==0?'%':'￥'}}</span>
                          <q-menu auto-close>
                            <q-list>
                              <q-item clickable v-close-popup @click="item.PriceType=0">
                                <q-item-section>按百分比（%）</q-item-section>
                              </q-item>
                              <q-item clickable v-close-popup @click="item.PriceType=1">
                                <q-item-section>按固定额度（￥）</q-item-section>
                              </q-item>
                            </q-list>
                          </q-menu>
                        </div>
                      </template>
                    </q-input>
                  </template>
                </td>
                <td>
                  <q-input filled stack-label dense v-model="item.B2BCommissionMoney" ref="B2BCommissionMoney"
                    label="同行返佣" @keyup.native="checkPrice(item, 'B2BCommissionMoney')" style="width:100px">
                    <template v-slot:append>
                      <div class="text-dark text-center text-dark cursor-pointer"
                        style="width:30px;margin-right:-12px;height:100%;font-size:14px;border-left:1px solid #ddd;padding-top:15px;">
                        <span>{{item.B2BCommissionType==0?'%':'￥'}}</span>
                        <q-menu auto-close>
                          <q-list>
                            <q-item clickable v-close-popup @click="item.B2BCommissionType=0">
                              <q-item-section>按百分比（%）</q-item-section>
                            </q-item>
                            <q-item clickable v-close-popup @click="item.B2BCommissionType=1">
                              <q-item-section>按固定额度（￥）</q-item-section>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </div>
                    </template>
                  </q-input>
                </td>
                <td>
                  <q-input filled stack-label dense v-model="item.SaleCommissionMoney" ref="SaleCommissionMoney"
                    label="销售返佣" @keyup.native="checkPrice(item, 'SaleCommissionMoney')" class="q-pr-none"
                    style="width:100px">
                    <template v-slot:append>
                      <div class="text-dark text-center text-dark cursor-pointer"
                        style="width:30px;margin-right:-12px;height:100%;font-size:14px;border-left:1px solid #ddd;padding-top:15px;">
                        <span>{{item.SaleCommissionType==0?'%':'￥'}}</span>
                        <q-menu auto-close>
                          <q-list>
                            <q-item clickable v-close-popup @click="item.SaleCommissionType=0">
                              <q-item-section>按百分比（%）</q-item-section>
                            </q-item>
                            <q-item clickable v-close-popup @click="item.SaleCommissionType=1">
                              <q-item-section>按固定额度（￥）</q-item-section>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </div>
                    </template>
                  </q-input>
                </td>
                <td>
                  <q-input filled stack-label dense v-model="item.EduCommissionMoney" ref="EduCommissionMoney"
                    label="教育同行返佣" @keyup.native="checkPrice(item, 'EduCommissionMoney')" class="q-pr-none"
                    style="width:100px">
                    <template v-slot:append>
                      <div class="text-dark text-center text-dark cursor-pointer"
                        style="width:30px;margin-right:-12px;height:100%;font-size:14px;border-left:1px solid #ddd;padding-top:15px;">
                        <span>{{item.EduCommissionType==0?'%':'￥'}}</span>
                        <q-menu auto-close>
                          <q-list>
                            <q-item clickable v-close-popup @click="item.EduCommissionType=0">
                              <q-item-section>按百分比（%）</q-item-section>
                            </q-item>
                            <q-item clickable v-close-popup @click="item.EduCommissionType=1">
                              <q-item-section>按固定额度（￥）</q-item-section>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </div>
                    </template>
                  </q-input>
                </td>
                <td>
                  <q-btn flat size="xs" icon="iconfont icon-shanchu" title="删除" color="negative" style="font-weight:400"
                    class="q-mr-xs" label="" @click="delPrice(index)" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </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="closeSaveForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveStudyAbroadLoading"
          @click="saveStudyAbroad" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    queryCoursePreferentialType
  } from "../../api/course/index";

  import {
    queryStudyAbroadInfo,
    saveBatchStudyAbroad,
  } from "../../api/studyabroad/index";
  export default {
    components: {},
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      Type: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        saveStudyAbroadLoading: false,
        //价格对象
        priceObj: {
          studyAbroadObj: {
            Id: 0, //留学就业编号
            SuggestPrice: 0, //建议卖价
            SellPrice: 0 //实际卖价
          },
          priceList: [] //价格列表
        },
        priceTypeList: [] //优惠类型列表
      };
    },
    created() {
      this.getTypeList();
    },
    mounted() {
      this.initObj();
    },
    methods: {
      //获取优惠类型列表
      getTypeList() {
        queryCoursePreferentialType().then(res => {
          this.priceTypeList = res.Data;
        });
      },
      //新增价格
      addPrice() {
        var currentObj = {
          Id: 0, //主键编号
          StudyabroadId: 0, //留学就业编号
          PreferentialTerms: "", //优惠条件
          SaleCommissionType: 0, //销售返佣类型(0-百分比，1-固定金额)
          SaleCommissionMoney: 0, //销售返佣
          B2BCommissionType: 0, //同行返佣类型(0-百分比，1-固定金额)
          B2BCommissionMoney: 0, //同行返佣
          EduCommissionType: 0, //教育同行返佣类型(0-百分比，1-固定金额)
          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.Id > 0) {
          queryStudyAbroadInfo({
            Id: this.saveObj.Id,
            IsGetPrice: 1
          }).then(res => {
            this.priceObj.studyAbroadObj.Id = res.Data.Id;
            this.priceObj.studyAbroadObj.SuggestPrice = res.Data.SuggestPrice;
            this.priceObj.studyAbroadObj.SellPrice = res.Data.SellPrice;
            if (res.Data.PreferentialList && res.Data.PreferentialList.length > 0) {
              this.priceObj.priceList = res.Data.PreferentialList;
            }
          });
        } else {
          this.priceObj.studyAbroadObj.CourseId = 0;
          this.priceObj.studyAbroadObj.SuggestPrice = 0;
          this.priceObj.studyAbroadObj.SellPrice = 0;
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit("close");
        this.persistent = false;
      },
      //保存菜单
      saveStudyAbroad() {
        this.saveStudyAbroadLoading = true;
        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;
            }
          });
        }
        saveBatchStudyAbroad(this.priceObj)
          .then(res => {
            this.saveStudyAbroadLoading = false;
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "数据保存成功！",
              position: "top"
            });
            this.$emit("success");
            this.closeSaveForm();
          })
          .catch(() => {
            this.saveStudyAbroadLoading = false;
          });
      }
    }
  };

</script>
