<template>
  <q-card class="q-px-md" style="width:850px;max-width:900px;">
    <q-card-section class="row items-center q-pb-none">
      <div class="text-h6">报价单修改价格</div>
      <q-space />
      <!-- <q-btn icon="close" flat round dense v-close-popup /> -->
    </q-card-section>
    <div class="text-subtitle2 text-weight-bold q-mb-md" style="margin:20px 0 0 15px;">
      <span style="font-size:15px;">客户信息</span>
    </div>
    <q-card-section style="max-height:75vh;" class="scroll">
      <div class="row q-price-info">
        <div class="col q-mr-md">
          报价单名称: {{model.Name}}
        </div>
        <div class="col">
          客户来源: {{model.CustomerSourceName}}
        </div>
      </div>
      <div class="row q-price-info">
        <div class="col q-mr-md">
          客户类型: {{model.CustomerTypeName}}
        </div>
        <div class="col">
          报名人数: {{model.JoinNum}} 人
        </div>
      </div>
      <div class="row q-price-info">
        <div class="col q-mr-md">
          客户姓名：{{model.CustomerName}}
        </div>
        <div class="col">
          客户电话：{{model.CustomerTel}}
        </div>
      </div>
      <div class="row q-price-info">
        <div class="col q-mr-md">
          报价有效期：{{model.EffectiveEnd}}
        </div>
        <div class="col">
          销售人员：{{model.CreateByName}}
        </div>
      </div>
      <div class="text-subtitle2 text-weight-bold q-mb-md">
        <span style="font-size:15px;">申请信息</span>
      </div>
      <div class="row">
        <div class="col q-mr-md" style="display:flex;">
          <div style="flex-shrink:0">申请原因：</div>
          <div style="max-height:150px;overflow-y:auto;">{{model.ApplyReason}}</div>
        </div>
      </div>
      <div class="text-subtitle2 text-weight-bold q-mb-md" style="margin-top:20px">
        <span style="font-size:15px;">课程信息</span>
      </div>
      <div class="q-mt-md">
        <q-table :pagination="pageInfo" no-data-label="暂无相关数据" flat
          class="sticky-header-table sticky-right-column-table no-bottom-table" separator="none" :data="chosenCourses"
          :columns="columns" row-key="name">
          <template v-slot:body-cell-DiscountRemark="props">
            <q-td :props="props" class="text-negative">
              <div v-for="(x, i) in props.value.split('^')" style="border-bottom:1px dotted #f5f6f7;">
                {{ x }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-DiscountPrice="props">
            <q-td :props="props">
              <span style="display:inline-block;width:65px;">{{props.row.DiscountPrice.toFixed(2)}}</span>&nbsp;
              <i class="iconfont icon-edit" @click.stop="getClassItem(props.row)" title="点击修改价格" style="cursor:pointer;color:blue;font-size: 14px;">
                <span style="font-size:13px;margin-left:3px;">修改价格</span>
                <q-popup-proxy>
                  <q-banner v-if="isShowEdit">
                    <div class="calenderDialog" style="width:300px;">
                      <div style="margin:10px 0 15px 0;">设置价格</div>
                      <q-input standout bottom-slots filled v-model="priceMsg.price" label="价格" dense mask="#"
                        fill-mask="0" reverse-fill-mask :rules="[val => !!val || '请输入价格']">
                      </q-input>
                      <q-input v-model="priceMsg.remark" filled type="textarea" placeholder="优惠说明" />
                      <q-card-actions align="right" class="bg-white">
                        <q-btn label="取消" flat color="grey-10" @click="isShowEdit=false"
                          style="font-weight:400 !important" />
                        <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important"
                          @click="setPriceUpdate(props.row)" />
                      </q-card-actions>
                    </div>
                  </q-banner>
                </q-popup-proxy>
              </i>
            </q-td>
          </template>
        </q-table>
      </div>
      <div style="border-top:1px solid #f5f6f7;" class="row q-py-md">
        <div class="col">
          <span>累计优惠：</span>
          <span class="q-ml-xs text-weight-bold">￥{{
              model.TotalDiscountPrice ? model.TotalDiscountPrice.toFixed(2) : "0.00"
            }}</span>
        </div>
        <div class="col  text-right">
          <span>课程总价：</span>
          <span class="q-ml-xs text-weight-bold">￥{{
              model.TotalPrice ? model.TotalPrice.toFixed(2) : "0.00"
            }}</span>
        </div>
      </div>
    </q-card-section>
    <q-card-actions align="right" class="bg-white">
      <q-btn label="取消" flat color="primary" v-close-popup />
      <q-btn label="保存" color="accent" class="q-px-md" style="font-weight:400 !important" @click="saveOfferPrice" />
    </q-card-actions>
  </q-card>
</template>

<script>
  import {
    queryCourseOfferInfo,
    saveCourseOfferPrice
  } from "../../api/course/index";

  export default {
    props: ["obj"],
    data() {
      return {
        model: {},
        columns: [{
            name: "CourseName",
            required: true,
            label: "课程名称",
            align: "left",
            field: row => row.CourseName
          },
          {
            name: "OriginalPrice",
            required: true,
            label: "现价",
            align: "left",
            field: row => row.OriginalPrice.toFixed(2)
          },
          {
            name: "JoinNum",
            required: true,
            label: "报名人数",
            align: "left",
            field: row => row.JoinNum
          },
          {
            name: "DiscountPrice",
            required: true,
            label: "优惠",
            align: "left",
            field: row => row.DiscountPrice.toFixed(2)
          },
          {
            name: "DiscountRemark",
            required: true,
            label: "优惠说明",
            align: "left",
            field: row => row.Remark
          },
          {
            name: "ActualPrice",
            required: true,
            label: "小计金额",
            align: "left",
            field: row => row.ActualPrice.toFixed(2)
          }
        ],
        pageInfo: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12
        },
        chosenCourses: [], //报价详情列表
        priceMsg: {
          price: 0,
          remark: ''
        },
        isShowEdit: false
      };
    },
    computed: {

    },
    created() {

    },
    mounted() {
      this.initObj();
    },
    methods: {
      //当前点击的班级
      getClassItem(item) {
        this.isShowEdit = true;
        var Obj = JSON.parse(JSON.stringify(item));
        this.priceMsg.price = Obj.DiscountPrice;
      },
      //设置
      setPriceUpdate(item) {
        item.DiscountPrice = parseInt(this.priceMsg.price);
        item.ActualPrice = parseInt(item.OriginalPrice - item.DiscountPrice);
        item.Remark = item.Remark + '^' + this.priceMsg.remark;
        let num1 = 0;
        let num2 = 0;
        this.model.OfferDetails.forEach(x => {
          num1 += x.DiscountPrice;
          num2 += x.ActualPrice;
        });
        this.model.TotalDiscountPrice = num1;
        this.model.TotalPrice = num2;
        this.isShowEdit = false;
      },
      //初始化对象
      initObj() {
        if (this.obj && this.obj.Id > 0) {
          queryCourseOfferInfo({
            Id: this.obj.Id
          }).then(res => {
            var tempObj = res.Data;
            if (res.Code == 1) {
              this.model = {
                Id: tempObj.Id,
                Name: tempObj.Name,
                EffectiveStart: tempObj.EffectiveStart,
                EffectiveEnd: tempObj.EffectiveEnd,
                CustomerType: tempObj.CustomerType,
                CustomerTypeName: tempObj.CustomerTypeName,
                CustomerSource: tempObj.CustomerSource,
                CustomerSourceName: tempObj.CustomerSourceName,
                TotalOriginalPrice: tempObj.TotalOriginalPrice,
                TotalPrice: tempObj.TotalPrice,
                TotalDiscountPrice: tempObj.TotalDiscountPrice,
                CustomerInfo: tempObj.CustomerInfo,
                CustomerName: tempObj.CustomerName,
                CustomerTel: tempObj.CustomerTel,
                OfferDetails: [],
                JoinNum: tempObj.JoinNum,
                ApplyReason: tempObj.ApplyReason,
                CreateByName: tempObj.CreateByName
              };
              if (tempObj.OfferDetails && tempObj.OfferDetails.length > 0) {
                this.model.OfferDetails = tempObj.OfferDetails;
                this.chosenCourses = tempObj.OfferDetails;
              }
            }
          })
        }
      },
      //修改报价单价格
      saveOfferPrice() {
        saveCourseOfferPrice(this.model).then(r => {
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            // color: "positive",
            color:'accent',
            timeout: 2000,
            message: "修改价格成功!",
            position: "top",
          });
          this.$emit("save");
        });
      },
    },
    watch: {

    }
  };

</script>

<style>
  .q-price-info{
    margin-bottom:20px;
  }
</style>
