<style>
  .TuitractView {
    width: 930px;
    min-height: 500px;
    height: auto;
    margin: auto;
    padding: 20px 0;
  }

  .firstPage {
    margin: 30px;
  }

  .operationAgree {
    font-size: 40px;
    letter-spacing: 10px;
    text-align: center;
    margin: 20px 0;
  }

  .operationTitle {
    display: flex;
    align-items: baseline;
    justify-content: center;
    position: relative;
  }

  .TuiContract {
    position: absolute;
    bottom: 28px;
    right: 70px;
  }

  .Tui_Jiafang {
    display: flex;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .Tui_Inner {
    text-indent: 40px;
    font-size: 20px;
    line-height: 35px;
    margin-bottom: 10px;
  }

  .TuitractInput {
    border: 0;
    display: inline-block;
    border-bottom: 1px solid #c0c0c0;
    width: 200px;
    font-size: 20px;
    text-align: center;
    text-indent: 0;
  }

  .Tui_SignZhang {
    display: flex;
    font-size: 20px;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .cnmoney_Course{
    border-bottom:1px solid #c0c0c0;
    padding:0 5px 5px 5px; 
  }
  .courseReLeft{
    flex-shrink: 0;
  }

</style>
<template>
  <div class="TuitractView">
    <div class="firstPage">
      <div class="operationTitle">
        <div class="operationAgree">培训课程退款协议</div>
        <div class="TuiContract">合约编号:{{dataList.ProtocolNum}}</div>
      </div>
      <div class="Tui_Jiafang">
        <div style="margin-right:100px;">甲方：{{dataList.PartyAName}}</div>
        <div>（家长/监护人）：{{dataList.PartyAGuardian}}</div>
      </div>
      <div class="Tui_Jiafang">
        <div style="margin-right:150px;">乙方：{{dataList.PartyBName}}</div>
        <div>法定代表人：{{dataList.PartyBLegal}}</div>
      </div>
      <div class="Tui_Inner">
        甲乙双方经平等友好协商就 <div class="TuitractInput" style="width: 90px;">{{getData(dataList.SignDateStr,1)}}</div> 年
        <div class="TuitractInput" style="width: 80px;">{{getData(dataList.SignDateStr,2)}}</div> 月 
        <div class="TuitractInput" style="width: 80px;">{{getData(dataList.SignDateStr,3)}}</div> 日
        签订的《培训课程协议》解除合作关系。
      </div>
      <div class="Tui_Inner">第一条：原协议内容</div>
      <div class="Tui_Inner">
        原协议报名人员：<div class="TuitractInput" style="width: 659px;text-align:left;">{{dataList.OldSaleMan}}</div>
      </div>
      <div class="Tui_Inner">
        原报名项目：<div class="TuitractInput" style="width: 700px;text-align:left;">{{dataList.CNMoneyStr}}</div>
      </div>
      <div class="Tui_Inner">
        原报名项目原价：<div class="TuitractInput" style="width: 100px;">{{dataList.OldSellPrice}}</div>
        折后（优惠）价：<div class="TuitractInput" style="width: 100px;">{{dataList.OldDiscountMoney}}</div>
      </div>
      <div class="Tui_Inner">
        原协议已收学费：<div class="TuitractInput" style="width: 300px;text-align:left;">
          大写：{{dataList.OldIncomeStr}}
        </div>
        （¥<div class="TuitractInput" style="width: 100px;">{{dataList.OldIncome}}</div>元整）。
      </div>
      <div class="Tui_Inner" style="display:flex;flex-wrap:wrap;">
        <div class="courseReLeft">原收据编号：</div><div class="TuitractInput" style="width: 700px;text-align:left;word-break:break-all">{{dataList.OldFinaceNum}}</div>
      </div>
      <div class="Tui_Inner">
        原收款人：<div class="TuitractInput" style="width: 720px;text-align:left;">{{dataList.OldReceiveMan}}</div>
      </div>
      <div class="Tui_Inner">
        第二条：乙方共计课时<div class="TuitractInput" style="width: 80px;">{{dataList.TotalClassHours}}</div>节；已销课时
        <div class="TuitractInput" style="width: 80px;">{{dataList.CompleteHours}}</div>节：剩余课时
        <div class="TuitractInput" style="width: 80px;">{{dataList.SurplusHours}}</div>节
      </div>
      <div class="Tui_Inner">
        甲方应退还乙方未上课时费用<span class="cnmoney_Course">{{dataList.CNMoneyStr}}</span>
        （¥<span class="cnmoney_Course">{{dataList.BackMoney}}</span>），原协
        议自动终止、收据自动失效。退还帐户名<span class="cnmoney_Course">{{dataList.BackAccountName}}</span>，退还帐号：
        <span class="cnmoney_Course">{{dataList.BackAccount}}</span>
        退还学费=乙方已缴总学费-已上课程学费-（乙方已缴学费-已上课程学费）*10%，其中“（乙方已缴课程学费）*10%”为违约金。
      </div>
      <div class="Tui_Inner">
        第三条：乙方应将原协议和收据原件交还甲方，若原件无法交还，请乙方<br />在此声明：
        <div class="TuitractInput" style="width: 750px;text-align:left;">{{dataList.StateMent}}</div>
      </div>
      <div class="Tui_Inner">
        第四条：本协议自签订之日起正式生效。
      </div>
      <div class="Tui_SignZhang" style="position:relative;">
        <div>甲方(家长/监护人)签字（盖章）： <img style="width:85px;position:absolute;top:-13px;" :src="dataList.PartyASign" /></div>
        <div>乙方签字（盖章）：<img v-if="dataList.IsCompanySeal==1" style="width:100px;position:absolute;top:-30px;" :src="dataList.GroupSealImg" /></div>
      </div>
      <div class="Tui_SignZhang">
        <div>签署日期：{{dataList.PartyASignDateStr}}</div>
        <div>签署日期：<span v-if="dataList.IsCompanySeal==1">{{dataList.PartyBSignDateStr}}</span></div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    GetBackClassProtocol
  } from "../api/sale/contract";

  export default {
    meta: {
      title: "退课协议管理",
    },
    data() {
      return {
        msg: {
          Id: 0
        },
        dataList: {},
      };
    },
    created() {

    },
    mounted() {
      if(this.$route.query.Id){
        this.msg.Id = this.$route.query.Id;
      }
      this.getList();
    },
    methods: {
      //获取校区列表
      getList() {
        this.loading = true;
        GetBackClassProtocol(this.msg).then((res) => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        });
      },
      //获取日期
      getData(dateStr,type){
        if(dateStr){
          let Year = dateStr.split('-')[0];
          let Month = dateStr.split('-')[1];
          let day = dateStr.split('-')[2];
          if(type==1){
            return Year
          }
          if(type==2){
            return Month
          }
          if(type==3){
            return day
          }
        }
      }
    },
  };

</script>
