<style>
  .jobInfo_item {
    margin-bottom: 20px;
  }

  .job_Line {
    width: 3px;
    height: 11px;
    margin-right: 10px;
    background-color: #3FC4FF;
    display: inline-block;
  }

  .conTable {
    width: 100%;
  }

  .conTable th {
    height: 40px;
  }

.priceinput label{
  height:30px !important;
}
.priceinput div{
  height:20px !important;
}

.studentinput div{
  height:40px !important;
}
</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 900px;max-width:1000px;">
      <q-card-section>
        <div class="text-h6">{{objOption.Id==0?'新增合同':'修改合同'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="jobInfo_item">
          <span class="job_Line"></span>基础信息
        </div>
        
          <!-- <q-input class="priceinput" style="float:left;height:30px;width:80%;" v-model="objOption.CourseName" label="学生姓名"   :dense="false"  /> -->
       
        <div class="row wrap">
          
          <q-input clearable v-model="objOption.LegalPerson" label="法定代表人" stack-label :dense="false" class="col-12 q-pr-lg q-pb-lg studentinput" />
          <q-input clearable v-model="objOption.StudentName" label="学生姓名" stack-label :dense="false" class="col-6 q-pr-lg studentinput" />
          <div class="col-6 q-pb-lg" style="color: rgba(0, 0, 0, 0.6); font-size: 12px;line-height: 20px; font-weight: 400; letter-spacing: 0.00937em; text-decoration: inherit; text-transform: inherit; transform-origin: left top;">
            学生性别：
            <q-radio v-model="objOption.StuSex" size="xs" :val="0" label="男" />
            <q-radio v-model="objOption.StuSex" size="xs" :val="1" label="女" />
          </div>
          <q-input clearable v-model="objOption.StuIDCard" label="学生身份证号码" stack-label :dense="false" class="col-6 q-pr-lg studentinput" />

          <q-input clearable  class="col-6 q-pb-lg studentinput" stack-label  v-model="objOption.IDCardAddress" label="住所地（身份证地址）"  :dense="false"/>
          <q-input clearable  class="col-6 q-pr-lg q-pb-lg studentinput" stack-label  v-model="objOption.StuAddress" label="联系地址（实际居住地）"  :dense="false"/>
          <q-input clearable  class="col-6 q-pb-lg studentinput" stack-label  v-model="objOption.StuTel" label="联系电话" :dense="false" />
          <!-- <q-input clearable filled class="col-6 q-pr-lg q-pb-lg" v-model="objOption.StuTel" label="学生电话" /> -->
          <q-input clearable  class="col-6 q-pr-lg q-pb-lg studentinput"  stack-label   label="紧急联系人"  v-model="objOption.ParentName"  :dense="false"/>
          <q-input clearable  class="col-6 q-pr-lg studentinput"  stack-label   label="紧急联系电话"  v-model="objOption.ParentTel"  :dense="false"/>
          <q-input filled v-if="false" v-model="objOption.StuBirth" class="col-6 q-pb-lg" mask="date" label="学生生日">
            <template v-slot:append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
                  <q-date v-model="objOption.StuBirth" @input="() => $refs.qDateProxy1.hide()" />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>
      
        <div class="jobInfo_item" style="">
          <span class="job_Line"></span>培训课程内容
        </div>
        <div style="width:100%;display:inline-block;">
          <q-input clearable class="studentinput" stack-label style="float:left;height:30px;width:100%;" label="培训课程信息"  v-model="objOption.CourseName"  :dense="false"  />
        </div>
        <div style="width:100%;display:inline-block;margin-top:10px;">
          <q-input clearable class="studentinput" stack-label style="float:left;height:30px;width:100%;"  label="培训课程内容" v-model="objOption.StartLevel" :dense="false"  />
        </div>
      
        <div class="jobInfo_item" style="margin-top:20px;">
          <span class="job_Line"></span>课程费用
        </div>
        <div>
         <div style="width:100%;display:inline-block;"><span style="float:left;">人民币（大写）：</span>
          <q-input class="priceinput" style="min-width:200px;float:left;height:30px;width:auto;padding:0 5px;" v-model="objOption.CNYCaps" disabled   :dense="false"  />
          <span style="float:left;">圆（小写）：</span> 
          <q-input class="priceinput" style="width:150px;float:left;height:30px;" v-model="objOption.Money"  @keyup.native="checkPrice(objOption,'Money')" @input="mathMoney(objOption.Money)"   :dense="false"  /> 元。</div>  
          <div style="width:100%;display:inline-block;">
            <span style="float:left;">课时费：共计</span>
             <q-input class="priceinput" style="float:left;width:150px;height:30px;"  v-model="objOption.FirstClassHours"  @keyup.native="checkPrice(objOption,'FirstClassHours')"   :dense="false"  /> 
            <span style="float:left;"> 元（</span>
            <q-input class="priceinput" style="float:left;width:150px;height:30px;" v-model="objOption.ClassHours"  @keyup.native="checkPrice(objOption,'ClassHours')"  :dense="false"  /> 
            <span > 元/节）</span>   
          </div>   
          <div style="width:100%;display:inline-block;">
            <span style="float:left;">  课件费：</span>
             <q-input class="priceinput" style="float:left;width:150px;height:30px;"   @keyup.native="checkPrice(objOption,'FirstClassFee')"     v-model="objOption.FirstClassFee"   :dense="false"  />   元。</div>                        
          <div style="width:100%;display:inline-block;">
            <span style="float:left;">  教材：</span>
             <q-input class="priceinput" style="float:left;width:150px;height:30px;"  @keyup.native="checkPrice(objOption,'FirstBookFee')"    v-model="objOption.FirstBookFee" :dense="false"  />   元。</div>
             <div style="width:100%;display:inline-block;">
          <q-input clearable class="studentinput" stack-label style="float:left;height:30px;width:100%;margin-bottom:30px;"  label="教材包括" v-model="objOption.TextbookIncludes" :dense="false"  />
        </div>
          
       
        </div>
        <div class="jobInfo_item" style="">
          <span class="job_Line"></span>考试要求
        </div>
        <div class="row wrap">
          <div>
            <p>乙方通过参加甲方提供的教学服务后，应主动参加相关国际考试。考试内容为：</p>
<p>A  日语国际能力测试（JLPT）：初级（N5-N4）、中级（N3-N2）、高级（N1）；</p>
<p>B  实用日本语鉴定考试（J.TEST）：初级（E-F级）、中高级（A-D级）；</p>
<p>C  日本留学生考试（EJU）：文科（日语）、综合科目、数学。</p>
<div style="width:100%;display:inline-block;">
          <q-input clearable class="studentinput" stack-label style="float:left;height:30px;width:100%;" label="乙方当前选择考试"  v-model="objOption.Exam"  :dense="false"  />
        </div>                               
          </div>
          <!-- <q-select class="col-6 q-pb-lg " clearable    option-value="Id" option-label="Value"
            v-model="objOption.Exam" ref="ManagerId" :options="ExamArray" label="乙方当前选择考试"emit-value
            map-options>
          </q-select>
          <div class="col-3" style="margin:10px 0 0 20px;">
            是否有补充协议
            <q-toggle size="md" label="" color="primary" :false-value="0" :true-value="1"
              v-model="objOption.IsSupplement" />
          </div> -->
        </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="saveLoading"
          @click="saveContract" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    SetEducationContractInfo,
    GetStudentInfo,
    GetEducationContractInfo
  } from '../../api/sale/contract'
  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          Id: 0,
          OrderId: 0,
          GuestId: 0,
          CType: 1, //类型1培训 2留学
          StudentName: '', //学生姓名
          StuBirth: '', //学生生日
          StuSex: 0, //学生性别0男1女
          StuAddress: '', //学生地址
          StuTel: '', //学生电话
          StuEmail: '', //学生邮箱
          ParentName: '', //家长姓名
          ParentRelation: '', //家长与学员关系
          ParentTel: '', //家长电话
          ParentEmail: '', //家长邮箱
          UrgentName: '', //紧急联系人姓名
          UrgentRelation: '', //紧急联系人与学生关系
          UrgentTel: '', //紧急联系人电话
          UrgentEmail: '', //紧急联系人邮箱
          GuardianIDCard: '', //监护人身份证后4位
          CourseName: '', //培训课程内容
          SchoolName: '', //校区名称
          SchoolPrincipal: '', //校区负责人
          StartLevel: '', //起始级别
          CourseConsultant: '', //课程顾问
          Payee: '', //收款人
          FirstClassHours: 0, //第一期-培训课时数
          FirstCourseFee: '', //第一期-培训课程费
          FirstBookFee: '', //第一期-培训教材费
          FirstClassFee: '', //第一期-培训课件费
          FirstDiscountMoney: '', // 第一期-折让价格
          FirstMoney: '', //第一期-费用总计
          FirstPayDate: '', //第一期-支付日期
          SecondClassHours: 0, //第二期-培训课时数
          SecondCourseFee: '', // 第二期-培训课程费
          SecondBookFee: '', //第二期-培训教材费
          SecondClassFee: '', //第二期-培训课件费
          SecondDiscountMoney: '', //第二期-折让价格
          SecondMoney: '', //第二期-费用总计
          SecondPayDate: '', //第二期-支付日期
          ThirdClassHours: 0, //第三期-培训课时数
          ThirdCourseFee: '', //第三期-培训课程费
          ThirdBookFee: '', //第三期-培训教材费
          ThirdClassFee: '', // 第三期-培训课件费
          ThirdDiscountMoney: '', //第三期-折让价格
          ThirdMoney: '', //第三期-费用总计
          ThirdPayDate: '', //第三期-支付日期
          Exam: '', //乙方当前选择考试
          IsSupplement: 0, // 0无 1 有 是否有补充协议
          StuIDCard:"",//学员身份证号码
          TextbookIncludes:"",//教材包括
          ClassHours:0,//课时单价
          LegalPerson:"丁嘉睿",//法人
          IDCardAddress:"",//身份证地址
          Money: 0
        },
        totalHours: 0, //培训课时数总计
        totalCourseFee: 0, //培训课程费总计
        totalBookFee: 0, //培训教材费总计
        totalClassFee: 0, //培训课件费总计
        totalDiscountMoney: 0, //折让价格
        totalMoney: 0, // 费用总计
        firstFYXJ: 0, //第一列费用小计
        secondFYXJ: 0, //第二列费用小计
        thirdFYXJ: 0, //第三列费用小计
        fyxjTotal: 0, //费用小计合计
        saveLoading: false,
        StudentMsg: {
          OrderId: 0,
          GuestId: 0
        },
        //考试数组
        ExamArray: [{
            Id: "A  日语国际能力测试（JLPT）：初级（N5-N4）、中级（N3-N2）、高级（N1）；",
            Value: "A  日语国际能力测试（JLPT）：初级（N5-N4）、中级（N3-N2）、高级（N1）；"
          },
          {
            Id: "B  实用日本语鉴定考试（J.TEST）：初级（E-F级）、中高级（A-D级）；",
            Value: "B  实用日本语鉴定考试（J.TEST）：初级（E-F级）、中高级（A-D级）；"
          },
          {
            Id: "C  日本留学生考试（EJU）：文科（日语）、综合科目、数学。",
            Value: "C  日本留学生考试（EJU）：文科（日语）、综合科目、数学。"
          }
        ]
      }
    },
    created() {},
    mounted() {
      if (this.setingObj) {
        this.StudentMsg.OrderId = this.setingObj.OrderId;
        this.StudentMsg.GuestId = this.setingObj.GuestId;
        this.objOption.OrderId = this.setingObj.OrderId;
        this.objOption.GuestId = this.setingObj.GuestId;
        if (this.setingObj.ContractId > 0) {
          this.getInfoList();
        } else {
          this.getStudentContract();
        }
      }
    },
    methods: {
      mathMoney(n) { // 数字转中文大写 1
        this.objOption.CNYCaps = this.$commonUtils.changeMoneyToChinese(n)
      },
      //保存合同
      saveContract() {
        //this.objOption.Money = this.totalMoney;
        SetEducationContractInfo(this.objOption).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '修改成功！',
              position: 'top'
            })
          }
          this.$emit('success');
          this.closeSaveForm();
        })
      },
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      //获取学生信息
      getStudentContract() {
        GetStudentInfo(this.StudentMsg).then(res => {
          if (res.Code == 1) {
            var tempData = res.Data;
            this.objOption.StudentName = tempData.StudentName;
            this.objOption.StuTel = tempData.StuTel;
            this.objOption.StuSex = tempData.StuSex;
            this.objOption.StuEmail = tempData.StuEmail;
            this.objOption.StuBirth = tempData.StuBirth;
            this.objOption.StuAddress = tempData.StuAddress;
            this.objOption.StartLevel = tempData.StartLevel;
            this.objOption.SchoolPrincipal = tempData.SchoolPrincipal;
            this.objOption.SchoolName = tempData.SchoolName;
            this.objOption.Payee = tempData.Payee;
            this.objOption.Money = tempData.Money;
            this.objOption.FirstMoney = tempData.FirstMoney;
            this.objOption.FirstDiscountMoney = tempData.FirstDiscountMoney;
            this.objOption.FirstCourseFee = tempData.FirstCourseFee;
            this.objOption.FirstClassHours = tempData.FirstClassHours;
            this.objOption.FirstClassFee = tempData.FirstClassFee;
            this.objOption.FirstBookFee = tempData.FirstBookFee;
            this.objOption.CourseName = tempData.CourseName;
            this.objOption.CourseConsultant = tempData.CourseConsultant;
            this.objOption.CNYCaps = tempData.CNYCaps;
            this.objOption.ClassHours=tempData.ClassHours;
            this.objOption.TextbookIncludes=tempData.TextbookIncludes;
            this.objOption.IDCardAddress=tempData.IDCardAddress;
            this.objOption.LegalPerson="丁嘉睿";
            this.objOption.StuIDCard=tempData.StuIDCard;
            this.objOption.Exam ="A";
          }
        })
      },
      //获取详情
      getInfoList() {
        let msg = {
          ContractId: this.setingObj.ContractId
        }
        GetEducationContractInfo(msg).then(res => {
          if (res.Code == 1) {
            var tempData = res.Data;
            this.objOption.Id = tempData.Id;
            this.objOption.StudentName = tempData.StudentName;
            this.objOption.StuTel = tempData.StuTel;
            this.objOption.StuSex = tempData.StuSex;
            this.objOption.StuEmail = tempData.StuEmail;
            this.objOption.StuBirth = tempData.StuBirthStr;
            this.objOption.StuAddress = tempData.StuAddress;
            this.objOption.StartLevel = tempData.StartLevel;
            this.objOption.SchoolPrincipal = tempData.SchoolPrincipal;
            this.objOption.SchoolName = tempData.SchoolName;
            this.objOption.Payee = tempData.Payee;
            this.objOption.Money = tempData.Money;
            this.objOption.FirstMoney = tempData.FirstMoney;
            this.objOption.FirstPayDate = tempData.FirstPayDateStr;
            this.objOption.FirstDiscountMoney = tempData.FirstDiscountMoney;
            this.objOption.FirstCourseFee = tempData.FirstCourseFee;
            this.objOption.FirstClassHours = tempData.FirstClassHours;
            this.objOption.FirstClassFee = tempData.FirstClassFee;
            this.objOption.FirstBookFee = tempData.FirstBookFee;
            this.objOption.SecondClassHours = tempData.SecondClassHours;
            this.objOption.SecondCourseFee = tempData.SecondCourseFee;
            this.objOption.SecondBookFee = tempData.SecondBookFee;
            this.objOption.SecondClassFee = tempData.SecondClassFee;
            this.objOption.SecondDiscountMoney = tempData.SecondDiscountMoney;
            this.objOption.SecondMoney = tempData.SecondMoney;
            this.objOption.SecondPayDate = tempData.SecondPayDateStr;
            this.objOption.ThirdClassHours = tempData.ThirdClassHours;
            this.objOption.ThirdCourseFee = tempData.ThirdCourseFee;
            this.objOption.ThirdBookFee = tempData.ThirdBookFee;
            this.objOption.ThirdClassFee = tempData.ThirdClassFee;
            this.objOption.ThirdDiscountMoney = tempData.ThirdDiscountMoney;
            this.objOption.ThirdMoney = tempData.ThirdMoney;
            this.objOption.ThirdPayDate = tempData.ThirdPayDateStr;
            this.objOption.CourseName = tempData.CourseName;
            this.objOption.CourseConsultant = tempData.CourseConsultant;
            this.objOption.CNYCaps = tempData.CNYCaps;
            this.objOption.Exam =tempData.Id==0?"A": tempData.Exam;
            this.objOption.IsSupplement = tempData.IsSupplement;
            this.objOption.ParentName = tempData.ParentName;
            this.objOption.ParentRelation = tempData.ParentRelation;
            this.objOption.UrgentName = tempData.UrgentName;
            this.objOption.GuardianIDCard = tempData.GuardianIDCard;
            this.objOption.UrgentRelation = tempData.UrgentRelation;
            this.objOption.ParentTel = tempData.ParentTel;
            this.objOption.UrgentTel = tempData.UrgentTel;
            this.objOption.ParentEmail = tempData.ParentEmail;
            this.objOption.UrgentEmail = tempData.UrgentEmail;
            this.objOption.ClassHours=tempData.ClassHours;
            this.objOption.TextbookIncludes=tempData.TextbookIncludes;
            this.objOption.IDCardAddress=tempData.IDCardAddress;
            this.objOption.LegalPerson=tempData.Id==0?"丁嘉睿":tempData.LegalPerson;
            this.objOption.StuIDCard=tempData.StuIDCard;
          }
        })
      }
    },
  }

</script>
<style>
</style>
