<style>
  .TCdiv_content {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color: #000;
  }

  .TCdiv_content .NavFixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
    background: #fff;
  }

  .TCdiv_content .navHidden {
    width: 100%;
    overflow: hidden;
    height: 3rem;
  }

  .TCdiv_content .navHidden .wrap {
    width: 100%;
    /* height: 3rem; */
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .TCdiv_content .navHidden .Navul {
    width: 28rem;
    padding: 0;
    display: flex;
    height: 3rem;
    line-height: 3rem;
    margin: 0;
    border-bottom: 1px solid #ccc;
  }

  .TCdiv_content .navHidden .Navul li {
    display: inline-block;
    margin-left: 1rem;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 1rem;
    cursor: pointer;
  }

  .navHidden .ActiveLi {
    border-bottom: 2px solid #24ade5;
  }

  .CisHideen {
    display: none;
    overflow: hidden;
  }

  .contractTitle {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .ContractMain {
    /* padding: 100px 15px 80px 15px; */
    position: relative;
    background: #fff;
    min-height: 100vh;
  }

  .CliSignDiv {
    position: fixed;
    border: 1px solid #d1d1d1;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    margin: auto;
    display: block;
    z-index: -999;
  }

  .TcConfirmMain .isShowSign {
    z-index: 999 !important;
  }

  .TCdiv_content .signSpan {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    background: #fff;
    border-top: 1px solid #ccc;
    z-index: 1000;
  }

  .TCdiv_content .signSpan .sign {
    width: 75%;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    height: 60px;
    line-height: 60px;
  }

  .ContractMain p {
    font-size: 1rem;
    line-height: 26px;
    margin: 0;
    margin-bottom: 5px;
  }

  .conReFund_Suojin {
    text-indent: 20px;
    font-size: 1rem;
    line-height: 26px;
    margin-bottom: 10px;
  }
  .flexCourse{
    display: flex;
    flex-wrap: wrap;
  }

  .CanvasDiv {
    width: 100%;
    height: calc(100% - 4rem);
    padding-top: 5%;
  }

  .dash {
    padding: 10px;
    box-sizing: border-box;
    border: 1px dashed #ccc;
    width: 95%;
    height: 98%;
    margin: 0 auto;
    overflow: hidden;
  }

  .CanvasDiv #canvas {
    width: 100%;
    height: 100%;
  }

  .TCdiv_content .gzqzUl {
    margin: 0;
    padding: 0;
  }

  .TCdiv_content .gzqzUl li {
    border-bottom: 1px solid #ddd;
    padding: 14px;
    position: relative;
    box-sizing: border-box;
    list-style-type: none;
  }

  .TCdiv_content .gzqzUl .bgli {
    background: #eee;
    width: 100%;
    padding: 0 !important;
    height: 20px;
  }

  .CourseBackSign {
    display: flex;
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .TuitractInput {
    border: 0;
    display: inline-block;
    border-bottom: 1px solid #c0c0c0;
    width: 2rem;
    font-size: 1rem;
    text-align: center;
    text-indent: 0;
  }
  .courseReFlex{
    display:flex;
  }
  .courseReLeft{
    flex-shrink: 0;
  }
  .cnmoney_Course{
    border-bottom:1px solid #c0c0c0;
    padding:0 5px 5px 5px; 
  }
  .Sign_CourseDate{
    display:inline-block;
    min-width:50px;
    text-indent:0;
    text-align: center;
  }
</style>
<template>
  <div class="TcConfirmMain">
    <div class="TCdiv_content">
      <!-- 签字 -->
      <div class="signSpan">
        <div @click="goSign()" class="sign" v-if="dataList.PartyASign==''||dataList.PartyASign==null">
          <span style="padding:0;"><i style="font-size:1.2rem" class="iconfont icon-qianming"></i></span>
          <span style="font-size:1.2rem;margin-left:0.2rem;">签字</span>
        </div>
      </div>
      <div class="NavFixed">
        <p style="background:#24ade5;text-align:center;color:#fff;padding:6px 0;font-size:1rem;margin-bottom:0;">
          培训课程退款协议</p>
      </div>
      <div class="ContractMain">
        <div style="padding:60px 15px 80px 15px;">
          <div class="CourseBackSign">
            <div>
              甲方：{{dataList.PartyAName}}
            </div>
            <div style="margin-left:3rem;">（家长/监护人）：{{dataList.PartyAGuardian}}</div>
          </div>
          <div class="CourseBackSign">
            <div class="courseReFlex">
              <div class="courseReLeft">乙方：</div>
              <div>{{dataList.PartyBName}}</div>
            </div>
          </div>
          <div class="CourseBackSign">
            法定代表人：{{dataList.PartyBLegal}}
          </div>
          <div class="conReFund_Suojin">
            甲乙双方经平等友好协商就<span class="cnmoney_Course Sign_CourseDate">{{getData(dataList.SignDateStr,1)}}</span>年
            <span class="cnmoney_Course Sign_CourseDate">{{getData(dataList.SignDateStr,2)}}</span>月
            <span class="cnmoney_Course Sign_CourseDate">{{getData(dataList.SignDateStr,3)}}</span>日签订的《培训课程协议》解除合作关系。
          </div>
          <div class="conReFund_Suojin">
            第一条：原协议内容
          </div>
          <div class="conReFund_Suojin flexCourse">
            <div class="courseReLeft">原协议报名人员：</div><div class="TuitractInput" style="width:52%;text-align:left;">{{dataList.OldSaleMan}}</div>
          </div>
          <div class="conReFund_Suojin flexCourse">
            <div class="courseReLeft">原报名项目：</div><div class="TuitractInput" style="width:61%;text-align:left;">{{dataList.CNMoneyStr}}</div>
          </div>
          <div class="conReFund_Suojin flexCourse">
            <div class="courseReLeft">原报名项目原价：</div><div class="TuitractInput" style="width:52%;text-align:left;">{{dataList.OldSellPrice}}</div>
          </div>
          <div class="conReFund_Suojin flexCourse">
            <div class="courseReLeft">折后（优惠）价：</div><div class="TuitractInput" style="width:52%;text-align:left;">{{dataList.OldDiscountMoney}}</div>
          </div>
          <div class="conReFund_Suojin" style="padding-right:10px;">
            原协议已收学费：<span class="cnmoney_Course">大写：{{dataList.OldIncomeStr}}</span>   
            ¥<span class="cnmoney_Course">{{dataList.OldIncome}}</span>元整           
          </div>
          <div class="conReFund_Suojin flexCourse">
            <div class="courseReLeft">原收据编号：</div>
            <div class="TuitractInput" style="width:62%;text-align:left;">{{dataList.OldFinaceNum}}</div>
          </div>
          <div class="conReFund_Suojin flexCourse">
            <div class="courseReLeft">原收款人：</div><div class="TuitractInput" style="width:67%;text-align:left;">{{dataList.OldReceiveMan}}</div>
          </div>
          <div class="conReFund_Suojin">
            第二条：乙方共计课时<div class="TuitractInput" style="width:3rem;">{{dataList.TotalClassHours}}</div>节；已销课时
            <div class="TuitractInput" style="width:3rem;">{{dataList.CompleteHours}}</div>节：剩余课时<div
              class="TuitractInput" style="width:3rem;">
              {{dataList.SurplusHours}}</div>节；
          </div>
          <div class="conReFund_Suojin">
            甲方应退还乙方未上课时费用：<span class="cnmoney_Course">{{dataList.CNMoneyStr}}</span>
          （¥<span class="cnmoney_Course">{{dataList.BackMoney}}</span>
            元整），原协议自动终、收据自动失效。
          </div>
          <div class="conReFund_Suojin flexCourse" style="text-indent:0;">
            <div class="courseReLeft">退还帐户名：</div>
            <div class="TuitractInput" style="width:70%;text-align:left;">{{dataList.BackAccountName}}</div>
          </div>
          <div class="conReFund_Suojin flexCourse" style="text-indent:0;">
            <div class="courseReLeft">退还账号：</div>
            <div class="TuitractInput" style="width:75%;text-align:left;">{{dataList.BackAccount}}</div>
          </div>
          <div class="conReFund_Suojin" style="text-indent:0;">
            退还学费=乙方已缴总学费-已上课程学费-（乙方已缴学费-已上课程学费）*10%，其中“（乙方已缴课程学费）*10%”为违约金。
          </div>
          <div class="conReFund_Suojin">
            第三条：乙方应将原协议和收据原件交还甲方，若原件无法交还，请乙方
          </div>
          <div class="conReFund_Suojin flexCourse" style="text-indent:0;">
            <div class="courseReLeft">在此声明：</div>
            <div class="TuitractInput" style="width:75%;text-align:left;">{{dataList.StateMent}}</div>
          </div>
          <div class="conReFund_Suojin">
            第四条：本协议自签订之日起正式生效。
          </div>
          <div class="conReFund_Suojin" style="position:relative;">
            甲方(家长/监护人)签字（盖章）：<img style="width:85px;position:absolute;top:-13px;" :src="dataList.PartyASign" />
          </div>
          <div class="conReFund_Suojin">
            签署日期：{{dataList.PartyASignDateStr}}
          </div>
          <div class="conReFund_Suojin" style="position:relative;">
            乙方签字（盖章）：<img v-if="dataList.IsCompanySeal==1" style="width:100px;position:absolute;top:-30px;" :src="dataList.GroupSealImg" />
          </div>
          <div class="conReFund_Suojin">
            签署日期：<span v-if="dataList.IsCompanySeal==1">{{dataList.PartyBSignDateStr}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    GetBackClassProtocol
  } from '../api/sale/contract'

  export default {
    data() {
      return {
        dataList: [],
        dialogVisible: false,
        gmsg: {
          Id: 0
        },
        dataList: {},
        ActiveTab: 1
      };
    },
    created() {
      if (this.$route.query.Id) {
        this.gmsg.Id = this.$route.query.Id;
      }
      this.getList();
    },
    methods: {
      //获取数据
      getList() {
        GetBackClassProtocol(this.gmsg).then(res => {
          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
          }
        }
      },
      //跳转至合同签名
      goSign() {
        this.$router.push({
          path: '/contractSign',
          query: {
            Id: this.gmsg.Id,
            Type: 2
          }
        });
      }
    },
    mounted() {}
  };

</script>
