<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">设置课程价格</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.courseObj.OriginalPrice"
              ref="OriginalPrice"
              class="col-6 q-pr-lg q-pb-lg"
              label="基础收费"
              @keyup.native="checkPrice(priceObj.courseObj, 'OriginalPrice')"
              :rules="[val => !!val || '请填写基础收费']"
            />
          </div>
          <div class="col-6">
            <q-input
              filled
              stack-label
              maxlength="8"
              :dense="false"
              v-model="priceObj.courseObj.SellPrice"
              ref="SellPrice"
              class="col-6 q-pr-lg q-pb-lg"
              label="卖价"
              @keyup.native="checkPrice(priceObj.courseObj, '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:200px">
                  优惠条件
                </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:80px;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:80px;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:165px"
                      suffix="%"
                    />
                  </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-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="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
} 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 //售价
        },
        priceList: [] //价格列表
      },
      priceTypeList: [] //优惠类型列表
    };
  },
  created() {
    this.getTypeList();
  },
  mounted() {
    this.initObj();
  },
  methods: {
    //获取优惠类型列表
    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, //同行返佣
        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;
        });
        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() {
      this.saveCourseLoading = 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;
          }
        });
      }
      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;
        });
    }
  }
};
</script>
