<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>
    <q-card-section style="max-height:75vh;" class="scroll">
      <div class="row">
        <div class="col q-mr-md">
          <q-input standout bottom-slots v-model="model.Name" ref="Name" label="报价单名称" dense readonly />
        </div>
        <div class="col">
          <q-select dense standout behavior="menu" v-model="model.CustomerSource" ref="CustomerSource"
            :options="CustomerSources" option-label="name" option-value="id" label="客户来源" emit-value map-options
            :rules="[val => !!val || '请选择客户来源']" readonly />
        </div>
      </div>
      <div class="row">
        <div class="col q-mr-md">
          <q-select dense standout behavior="menu" v-model="model.CustomerType" ref="CustomerType"
            :options="CustomerTypes" option-label="name" option-value="id" label="客户类型" emit-value map-options
            :rules="[val => !!val || '请选择客户类型']" readonly />
        </div>
        <div class="col">
          <q-input standout bottom-slots v-model="model.JoinNum" ref="JoinNum" label="报名人数" dense mask="#" fill-mask="0"
            reverse-fill-mask :rules="[val => !!val || '请输入报名人数']" readonly>
            <template v-slot:append>
              <span style="font-size:14px;">人</span>
            </template>
          </q-input>
        </div>
      </div>
      <div class="row">
        <div class="col q-mr-md">
          <q-input standout bottom-slots v-model="model.CustomerName" ref="CustomerName" label="客户姓名" dense
            :rules="[val => !!val || '请输入客户姓名']" readonly />
        </div>
        <div class="col">
          <q-input standout bottom-slots v-model="model.CustomerTel" label="客户电话" dense mask="#" reverse-fill-mask
            readonly />
        </div>
      </div>
      <div class="row">
        <div class="col q-mr-md">
          <q-input standout bottom-slots v-model="model.EffectiveEnd" ref="CustomerName" label="报价有效期" dense
            :rules="[val => !!val || '']" readonly />
        </div>
        <div class="col">
        </div>
      </div>
      <div class="text-subtitle2 text-weight-bold q-mb-md">
        <span>
          <template v-if="obj.OfferType==1">
            课程信息
          </template>
          <template v-else>
            留学就业信息
          </template>
        </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" :visible-columns="visibleColumns">
          <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-ClassId="props">
            <q-td>
              <template v-if="obj.OfferType==1">
                <template v-if="props.row.ClassId>0">
                  {{props.row.ClassName}}
                </template>
                <template v-else>
                  选择班级
                </template>
                &nbsp;
                <i class="iconfont icon-edit" @click.stop="setClass(props.row)" title="选择班级">
                  <q-popup-proxy>
                    <q-banner v-if="isShowClass">
                      <div class="calenderDialog">
                        <div style="margin:10px 0 15px 0;">选择班级</div>
                        <q-select standout="bg-primary text-white" option-value="ClassId" option-label="ClassName"
                          v-model="props.row.ClassId" :options="props.row.ClassList" emit-value map-options label="班级"
                          @input="changeClass(props.row)">
                          <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
                            <q-item v-bind="itemProps" v-on="itemEvents">
                              <q-item-section>
                                <q-item-label v-html="opt.ClassName"></q-item-label>
                              </q-item-section>
                              <q-item-section side>
                                 <q-item-label v-html="opt.OpenTime+'【'+opt.ClassNo+'】'"></q-item-label>
                              </q-item-section>
                            </q-item>
                          </template>
                        </q-select>
                        <q-card-actions align="right" class="bg-white">
                          <q-btn label="取消" flat color="grey-10" @click="isShowClass=false"
                            style="font-weight:400 !important" />
                          <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important"
                            @click="isShowClass=false" />
                        </q-card-actions>
                      </div>
                    </q-banner>
                  </q-popup-proxy>
                </i>
              </template>
            </q-td>
          </template>
          <template v-slot:bottom>
            <div>&nbsp;</div>
          </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.TotalPrice ? model.TotalDiscountPrice.toFixed(2) : "0.00"
            }}</span>
        </div>
        <div class="col  text-right">
          <span>
            <template v-if="obj.OfferType==1">
              课程总价：
            </template>
            <template v-else>
              留学就业总价：
            </template>
          </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="transOfferToOrder" />
    </q-card-actions>
  </q-card>
</template>

<script>
  import {
    queryCourseOfferInfo,
    saveOfferToOrder
  } from "../../api/course/index";
  import {
    getClassDropDownList,
  } from "../../api/school/index";
  export default {
    props: ["obj"],
    data() {
      return {
        CustomerTypes: [{
            id: 1,
            name: "新客户"
          },
          {
            id: 2,
            name: "续班客户"
          }
        ],
        CustomerSources: [{
            id: 1,
            name: "学校介绍"
          },
          {
            id: 2,
            name: "朋友介绍"
          },
          {
            id: 3,
            name: "网络广告"
          }
        ],
        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)
          },
          {
            name: "ClassId",
            label: "班级",
            align: "left",
          },
        ],
        //表格可见列
        visibleColumns: [
          'CourseName', 'OriginalPrice', 'JoinNum', 'DiscountPrice', 'DiscountRemark', 'ActualPrice',
          'ClassId'
        ], //可见列
        pageInfo: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12
        },
        chosenCourses: [], //报价详情列表
        isShowClass: false, //选择班级
      };
    },
    computed: {

    },
    created() {
      if (this.obj && this.obj.OfferType != 1) {
        this.visibleColumns.splice(this.visibleColumns.length - 1, 1);
      }
    },
    mounted() {
      this.initObj();
    },
    methods: {
      //选择班级
      setClass(item) {
        this.isShowClass = true;
        getClassDropDownList({
          CourseId: item.CourseId,
          IsAddDefault: 1, //添加默认选项
        }).then(res => {
          item.ClassList = [];
          if (res.Code == 1) {
            item.ClassList = res.Data;
          }
        });
      },
      //选择班级改变事件
      changeClass(item) {
        if (item.ClassId > 0) {
          let val = item.ClassList.find(x => x.ClassId == item.ClassId);
          if (val) {
            item.ClassName = val.ClassName;
            item.Teacher_Id = val.Teacher_Id;
          }
        } else {
          item.ClassName = ""
        }
      },
      //初始化对象
      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,
                CustomerSource: tempObj.CustomerSource,
                TotalOriginalPrice: tempObj.TotalOriginalPrice,
                TotalPrice: tempObj.TotalPrice,
                TotalDiscountPrice: tempObj.TotalDiscountPrice,
                CustomerInfo: tempObj.CustomerInfo,
                CustomerName: tempObj.CustomerName,
                CustomerTel: tempObj.CustomerTel,
                OfferDetails: [],
                JoinNum: tempObj.JoinNum
              };
              if (tempObj.OfferDetails && tempObj.OfferDetails.length > 0) {
                this.model.OfferDetails = tempObj.OfferDetails;
                this.chosenCourses = tempObj.OfferDetails;
              }
            }
          })
        } else {
          this.model = {
            Id: 0,
            Name: "",
            EffectiveStart: "",
            EffectiveEnd: "",
            CustomerType: null,
            CustomerSource: null,
            TotalOriginalPrice: 0.0,
            TotalPrice: 0.0,
            TotalDiscountPrice: 0.0,
            CustomerInfo: "",
            CustomerName: "",
            CustomerTel: "",
            OfferDetails: [],
            JoinNum: 0
          };
        }
      },
      //报价单转订单
      transOfferToOrder() {
        var sMsg = {
          OfferId: this.model.Id,
          OfferType: this.obj.OfferType,
          OfferDetails: this.model.OfferDetails
        };
        for(var i=0;i<sMsg.OfferDetails.length;i++){
          if(sMsg.OfferDetails[i].Teacher_Id==0){
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请联系班级管理员，关联【${sMsg.OfferDetails[i].ClassName}】班级老师后转单`
            })
            return
          }
        }
        saveOfferToOrder(sMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "positive",
              timeout: 2000,
              message: "转订单成功",
              position: "top",
              actions: [{
                label: "点击查看",
                color: "primary",
                handler: () => {
                  this.$router.push({
                    path: "/sale/myOrder",
                  });
                }
              }]
            });
            this.$emit("save");
          } else {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Data.Message,
              position: 'top'
            })
          }

        })
      },
    },
    watch: {

    }
  };

</script>

<style></style>
