<template>
    <div id="WordPreview">
      <div id="title">
        <div class="school">深圳技师学院</div>
        <div class="wordTitle">学 生 创 客 项 目 申 报 书</div>
        <div class="date">申请日期：{{wordData['year']}}年 {{wordData['month']}}月 {{wordData['day']}}日</div>
      </div>
      <div id="table">
        <div class="han">
          <div class="label">项目名称</div><div class="value" style="width: 80%;">{{ wordData.projectName }}</div>
          <!-- <div class="label">所在学院</div><div class="value"></div> -->
        </div>
        <div class="status">
          <div class="statusLabel">项目状态</div>
          <div class="ValueDescribe">
            <div class="statusHan">
              <div class="DescribeLabel">{{wordData.ing }}创意组</div><div class="DescribeValue">立项项目为新立项项目，项目成果应具有较好的创意和较为成型的产品原型或能提供较好的商业模式，产生较好的社会效益。</div>
            </div>
            <div class="statusHan">
              <div class="DescribeLabel">{{wordData.ed }}初创组</div><div class="DescribeValue">立项项目为学校已结题学生创客项目或已入驻学校创业孵化基地的学生初创企业项目（毕业两年内），项目成果应为原结题项目基础上的技术升级、企业注册、规模扩张。</div>
            </div>
          </div>
        </div>
        <div class="han">
          <div class="label">优先支持项目（可多选）</div>
          <div class="value" style="display: flex;justify-content: space-around;flex-wrap: wrap;width: 80%;">
              <div>{{ wordData.multiSelectProject.includes(1)?"√":"□" }}大赛选拔项目</div>
              <div>{{ wordData.multiSelectProject.includes(2)?"√":"□" }}落地注册项目</div>
              <div>{{ wordData.multiSelectProject.includes(3)?"√":"□" }}社会征集项目</div>
              <div>{{ wordData.multiSelectProject.includes(4)?"√":"□" }}产业命题项目</div>
          </div>
          <!-- <div class="label">计划完成时间</div><div class="value"></div> -->
        </div>
        <div class="han">
          <div class="label">美丽校园改造项目（特色项目）</div>
          <div class="value" style="display: flex;justify-content: space-around;flex-wrap: wrap;width: 80%;">
            <div>{{ wordData.schoolRemould.includes(1)?"√":"□" }}校园安全项目</div>
            <div>{{ wordData.schoolRemould.includes(2)?"√":"□" }}环境治理项目</div>
            <div>{{ wordData.schoolRemould.includes(3)?"√":"□" }}校园服务项目</div>
            <div>{{ wordData.schoolRemould.includes(4)?"√":"□" }}文创装置项目</div>

          </div>
        </div>

        <div class="han">
          <div class="label">项目申请人</div>
          <div class="value" >{{ wordData.projectApplyperson.includes(1)?"√":"□" }}在校学生</div>
          <div class="value">{{ wordData.projectApplyperson.includes(2)?"√":"□" }}入驻学校孵化基地的初创企业法人</div>
        </div>
        <div class="han">
          <div class="label">申 请 人 姓 名</div><div class="value" >{{ wordData.pro_leader }}</div>
          <div class="label">所在学院/公司</div><div class="value" >{{ wordData.department }}</div>
          <div class="label">联系电话</div><div class="value" style="width: 20%;">{{ wordData.tel }}</div>
        </div>
        <div class="han">
          <div class="label">项 目 起 始 时 间</div><div class="value" style="width: 30%;">{{ wordData.begin_at }}</div>
          <div class="label">计划完成时间</div><div class="value" style="width: 20%;">{{ wordData.plannedEnd_at }}</div>
        </div>
        <div class="han">
          <div class="label">项 目 组 人 数</div><div class="value">{{ wordData.studentNum + wordData.teacherNum }}</div>
          <div class="label">参与学生人数</div><div class="value">{{ wordData.studentNum }}</div>
          <div class="label">参与教师人数</div><div class="value">{{ wordData.teacherNum }}</div>
        </div>
        <div class="member">
          <div class="memberLabel">
            项目组教师团队（团队3人以上，至少应包含1名教研室主任）
            <!-- 项目组<br/>教师团队<br/>（团队3人以上，<br/>至少应包含1名教<br/>研室主任） -->
          </div>
          <div class="memberTable">
            <div class="memberHan">
              <div class="memberValue" style="width: 9.2%;">姓 名</div>
              <div class="memberValue">所在学院/部门/专业</div>
              <div class="memberValue">项目组角色分工</div>
            </div>
            <div class="memberHan" v-for="(item,index) in wordData.teacher" :key="index">
              <div class="memberValue" style="width: 9.2%;">{{ item.name }}</div>
              <div class="memberValue">{{ item.class }}</div>
              <div class="memberValue">{{ item.division }}</div>
            </div>
            <!-- <div class="memberHan" v-for="(item,index) in wordData['teacher']" :key="index">
              <div class="memberValue">{{item['name']}}</div>
              <div class="memberValue">{{item['speciality']}}</div>
              <div class="memberValue">{{item['title']}}</div>
              <div class="memberValue">{{ item['education'] }}</div>
              <div class="memberValue">{{ item['section'] }}</div>
              <div class="memberValue">{{ item['work'] }}</div>
            </div> -->
          </div>
        </div>
        <div class="member">
          <div class="memberLabel">
            项目组学生团队（团队5人以上，学生团队年级结构安排合理）
            <!-- 项目组<br/>教师团队<br/>（团队3人以上，<br/>至少应包含1名教<br/>研室主任） -->
          </div>
          <div class="memberTable">
            <div class="memberHan">
              <div class="memberValue" style="width: 9.2%;">姓 名</div>
              <div class="memberValue">所在学院/部门/专业</div>
              <div class="memberValue">项目组角色分工</div>
            </div>
            <div class="memberHan" v-for="(item,index) in wordData.student" :key="index">
              <div class="memberValue" style="width: 9.2%;">{{ item.name }}</div>
              <div class="memberValue">{{ item.class }}</div>
              <div class="memberValue">{{ item.division }}</div>
            </div>

            <!-- <div class="memberHan" v-for="(item,index) in wordData['student']" :key="index">
              <div class="memberValue">{{item['name']}}</div>
              <div class="memberValue">{{ item['class'] }}</div>
              <div class="memberValue">{{ item['age'] }}</div>
              <div class="memberValue">{{item['work']}}</div> -->
            <!-- </div> -->
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
            <span>研发内容</span>
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>项目简介(200-300字)</span><br/>
                {{ wordData.brief }}
              </div>
              <div class="chaptersValue">
                <span>项目研发背景</span><br/>
                {{ wordData.back }}
              </div>
              <div class="chaptersValue">
                <span>项目创新点</span><br/>
                {{ wordData.innovate }}
              </div>
              <div class="chaptersValue">
                <span>技术研发路线</span><br/>
                {{ wordData.path }}
              </div>
              <div class="chaptersValue">
                <span>项目应用场景</span><br/>
                {{ wordData.scene }}
              </div>
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
            <span>商业模式及社会价值</span>
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>项目商业模式/社会价值</span><br/>
                {{ wordData.worth }}
              </div>
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
            <span>团队优势</span>
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>团队构成及优势</span><br/>
                {{ wordData.team }}
              </div>
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
            <span>研发成本</span>
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>研发成本来源及构成</span><br/>
                {{ wordData.cost }}
              </div>
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
            <span>预期成果</span>
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>项目预期成果、数量及形式（产品原型/发明专利/双创竞赛/成果转化/社会效益</span><br/>
                {{ wordData.expectResults }}
              </div>
              <div class="chaptersValue">
                <span>学生创客人才培养预期成果、数量（教师填写）</span><br/>
                {{ wordData.expectResultsTeacher }}
              </div>
              <div class="chaptersValue">
                <span>学生创客活动组织实施情况</span><br/>
                {{ wordData.brief }}
              </div>
              <div class="chaptersValue">
                <span>项目预期孵化、转化创业项目情况</span><br/>
                {{ wordData.expectConversion }}
              </div>
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
           实施计划
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>实施计划</span><br/>
                {{ wordData.plan }}
              </div>
          </div>
        </div>

        <!-- <div class="fund" v-for="(item,index) in wordData['fund']" :key="index"> -->
        <div class="fund" v-if="wordData.fund[0]">
          <div class="fundTitle">
            预算<br/>经费
          </div>
          <div class="fundTable">
            <div class="fundTotal">
              <div class="fundLabel">总经费</div>
              <div class="fundValue">{{ wordData.fund[0].total }}元</div>
            </div>
            <div class="fundHeader">
              <div class="HeaderLabel">支出类别</div>
              <div class="HeaderLabel">支出项目</div>
              <div class="HeaderLabel">金额（元）</div>
              <div class="HeaderLabel">备注</div>
            </div>
            <div class="fundData">
              <div class="fundDataLabel">直接费用</div>
              <div class="fundDataHan">
                <div class="fundDataLie">
                  <div class="fundDataValue">小型仪器设备费</div>
                  <div class="fundDataValue">{{ wordData.fund[0].device }}</div>
                  <div class="fundDataValue">{{ wordData.fund[0].deviceRemarks }}</div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">材料费</div>
                  <div class="fundDataValue">{{ wordData.fund[0].Material }}</div>
                  <div class="fundDataValue">{{ wordData.fund[0].MaterialRemarks }}</div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">测试化验加工费</div>
                  <div class="fundDataValue">{{ wordData.fund[0].processing }}</div>
                  <div class="fundDataValue">{{ wordData.fund[0].processingRemarks }}</div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">项目协作费</div>
                  <div class="fundDataValue">{{ wordData.fund[0].Collaboration }}</div>
                  <div class="fundDataValue">{{ wordData.fund[0].CollaborationRemarks }}</div>
                </div>
               
              </div>
            </div>

            <div class="fundData">
              <div class="fundDataLabel">间接费用</div>
              <div class="fundDataHan">
                <div class="fundDataLie">
                  <div class="fundDataValue">项目成果鉴定费</div>
                  <div class="fundDataValue">{{ wordData.fund[0].APPRAISAL }}</div>
                  <div class="fundDataValue">{{ wordData.fund[0].APPRAISALRemarks }}</div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">参展参赛费</div>
                  <div class="fundDataValue">{{ wordData.fund[0].entery }}</div>
                  <div class="fundDataValue">{{ wordData.fund[0].enteryRemarks }}</div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">创客交流活动费</div>
                  <div class="fundDataValue">{{ wordData.fund[0].activitiesRemarks }}</div>
                  <div class="fundDataValue">{{ wordData.fund[0].activitiesRemarks }}</div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">知识产权事务费</div>
                  <div class="fundDataValue">{{ wordData.fund[0].Transaction }}</div>
                  <div class="fundDataValue">{{ wordData.fund[0].TransactionRemarks }}</div>
                </div>
               
              </div>
            </div>
          </div>
        </div>

        <div class="opinion">
          <div class="opinionLabel">所在学院/部门<br/> 意 见</div>
          <div class="opinionValue">
            <div class="opinionImport">
              <div class="opinionChapter">负责人签章：</div>
              <div class="opinionDate">年 月 日</div>
            </div>
          </div>
        </div>

        <div class="opinion">
          <div class="opinionLabel">财务部门<br/>意 见</div>
          <div class="opinionValue">
            <div class="opinionImport">
              <div class="opinionChapter">负责人签章：</div>
              <div class="opinionDate">年 月 日</div>
            </div>
          </div>
        </div>

        <div class="opinion">
          <div class="opinionLabel">创新创业学院<br/>审 核 意 见</div>
          <div class="opinionValue">
            <div class="opinionImport">
              <div class="opinionChapter">负责人签章：</div>
              <div class="opinionDate">年 月 日</div>
            </div>
          </div>
        </div>

      </div>
      <div class="notes">
        <span>备注：</span>
        <span>1.表格可顺延或另附页。</span>
        <span>2.项目申报需附相关佐证材料。</span>
      </div>
    </div>
</template>
  
<script>
import { getNowDate } from './tool/Date';
export default {
  props:["data"],
  data() {
    return {
      // data:{},
      wordData:{
        year:"",  //申请日期年
        month:"",   //申请日期月
        day:"",     //申请日期日
        ing:"", //创意组
        ed:"",  //初创组
        projectName:"",//项目名称
        multiSelectProject:[],  //优先支持项目
        schoolRemould:'',
        projectApplyperson:'',
        department:'',
        tel:'',
        begin_at:'',
        plannedEnd_at:'',
        pro_leader:"",//申请人姓名
        // lead_leader:"",//学院牵头领导
        // people:"",//项目组人数
        teacherNum:"",//参与教师人数
        studentNum:"",//参与学生人数
        teacher:[],   //教师组//name：姓名  speciality：专业  title：职称 education：学历    section：所在教研室    work：项目组角色分工
        student:[],   //学生组//name：姓名    class：班级 age：年龄   work：项目组任务分工
        brief:"",//项目简介
        back:'',
        innovate:'',
        path:'',
        scene:'',
        worth:'',
        team:'',
        cost:'',
        expectResults:'',
        expectResultsTeacher:'',
        expectConversion:'',
        plan:'',

        // Construction:"",//建设内容
        // ProjectBasis:"",//立项依据
        // development:"",//创客空间物理环境、制度建设及软件设施建设情况
        // studio:"",//学生创客工作室建设情况
        // studentTeam:"",//学生创客团队（人才）培养预期成果、数量
        // studentActivities:"",//学生创客活动组织实施情况
        // Transforming:"",//学生创客团队孵化、转化创业项目情况
        // condition:"",//立 项基 础及条 件
        fund:[],//预算经费
        //total：总经费     
        //小型仪器设备费：device        deviceRemarks
        //材料费：Material             MaterialRemarks
        //测试化验加工费：processing    processingRemarks
        //项目协作费：Collaboration     CollaborationRemarks
        //项目成果鉴定费：APPRAISAL     APPRAISALRemarks
        //参展参赛费：entery            enteryRemarks
        //创客交流活动费：activities    activitiesRemarks
        //知识产权事务费：Transaction   TransactionRemarks
        }
    }
  },
  methods:{
    handleData(){
      //处理项目数据
      // return console.log(this.data);
      let data = this.data[0];
      // console.log(data);

      let nowDate = getNowDate().split(' ')[0]
      console.log(nowDate);
      // return console.log(data);
      let fund = this.data[1];
      console.log(fund);
      data['chapters'] = JSON.parse(data['chapters']);
      data['course_student'] = JSON.parse(data['course_student']);
      data['course_teacher'] = JSON.parse(data['course_teacher']);
      //处理资金使用情况
      let fundDataArray = [];
            fund.forEach(item=>{
                let fundData = {
                    total:"",
                    device:"",deviceRemarks:"",
                    Material:"",MaterialRemarks:"",
                    processing:"",processingRemarks:"",
                    Collaboration:"",CollaborationRemarks:"",
                    APPRAISAL:"",APPRAISALRemarks:"",
                    entery:"",enteryRemarks:"",
                    activities:"",activitiesRemarks:"",
                    Transaction:"",TransactionRemarks:""
                }
                //直接经费
                let direct = JSON.parse(item['directFund']);
                //间接经费
                let indirect = JSON.parse(item['indirectFund']);
    
                direct.forEach(item2=>{
                    if (item2['directFundData']==1) {
                        fundData['device'] = direct.filter(item=>item['directFundData']==1)[0]['budget'];
                        // console.log(fundData['device']);
                        fundData['deviceRemarks'] = direct.filter(item=>item['directFundData']==1)[0]['reason'];
                    }
    
                    if (item2['directFundData']==2) {
                        fundData['Material'] = direct.filter(item=>item['directFundData']==2)[0]['budget']
                        fundData['MaterialRemarks'] = direct.filter(item=>item['directFundData']==2)[0]['reason'];
                    }
                    
                    if (item2['directFundData']==3) {
                        fundData['processing'] = direct.filter(item=>item['directFundData']==3)[0]['budget']
                        fundData['processingRemarks'] = direct.filter(item=>item['directFundData']==3)[0]['reason'];
                    }
                    
        
                    if (item2['directFundData']==4) {
                        fundData['Collaboration'] = direct.filter(item=>item['directFundData']==4)[0]['budget']
                        fundData['CollaborationRemarks'] = direct.filter(item=>item['directFundData']==4)[0]['reason'];
                    }
    
                })
                
                indirect.forEach(item3=>{
                    if (item3['indirectFundData']==1) {
                        fundData['APPRAISAL'] = indirect.filter(item=>item['indirectFundData']==1)[0]['budget']
                        fundData['APPRAISALRemarks'] = indirect.filter(item=>item['indirectFundData']==1)[0]['reason'];
                    }
    
                    if (item3['indirectFundData']==2) {
                        fundData['entery'] = indirect.filter(item=>item['indirectFundData']==2)[0]['budget']
                        fundData['enteryRemarks'] = indirect.filter(item=>item['indirectFundData']==2)[0]['reason'];
                    }
    
                    if (item3['indirectFundData']==3) {
                        fundData['activities'] = indirect.filter(item=>item['indirectFundData']==3)[0]['budget']
                        fundData['activitiesRemarks'] = indirect.filter(item=>item['indirectFundData']==3)[0]['reason'];
                    }
    
                    if (item3['indirectFundData']==4) {
                        fundData['Transaction'] = indirect.filter(item=>item['indirectFundData']==4)[0]['budget']
                        fundData['TransactionRemarks'] = indirect.filter(item=>item['indirectFundData']==4)[0]['reason'];
        
                    }
                })
    
                fundData['total'] = Number(fundData['device'])+Number(fundData['Material'])+Number(fundData['processing'])+Number(fundData['Collaboration'])+Number(fundData['APPRAISAL'])+Number(fundData['entery'])+Number(fundData['activities'])+Number(fundData['Transaction']);
    
                fundDataArray.push(fundData);
            })
            
      //       //去除标签
            for(let i in data['chapters']){
                data['chapters'][i]=data['chapters'][i].replace(/<[^>]+>/g,"");
            }

            this.wordData = {
                year:nowDate.split('-')[0],  //申请日期年
                month:nowDate.split('-')[1],   //申请日期月
                day:nowDate.split('-')[2],     //申请日期日
                ing:data['typeName']=='ed917c55-f51d-11ed-a3f6-509a4c5b67cf'?"√":"□", //创意组
                ed:data['typeName']=='f3068e26-f51d-11ed-a3f6-509a4c5b67cf'?"√":"□",  //初创组
                projectName:data['title'],//项目名称
                multiSelectProject:JSON.parse(data['multiSelectProject']),
                schoolRemould:data['schoolRemould'],
                projectApplyperson:data['projectApplyperson'],
                pro_leader:data['pro_leader'],
                department:data['name'],
                tel:data['phone'],
                plannedEnd_at:data['plannedEnd_at'],
                begin_at:data['begin_at'],
                // college:data['name'],//
                // begin_at:data['begin_at'],//项目开始时间
                // plannedEnd_at:data['plannedEnd_at'],//计划完成时间
                // pro_leader:data['pro_leader'],//项目负责人
                // lead_leader:data['lead_leader'],//学院牵头领导
                // people:(data['course_teacher'].length+data['course_student'].length),//项目组人数
                teacherNum:data['course_teacher'].length,//参与教师人数
                studentNum:data['course_student'].length,//参与学生人数
                teacher:data['course_teacher'],   //教师组//name：姓名  speciality：专业  title：职称 education：学历    section：所在教研室    work：项目组角色分工
                student:data['course_student'],   //学生组//name：姓名    class：班级 age：年龄   work：项目组任务分工
                brief:data['brief'],//项目简介
                back:data.chapters.back,
                innovate:data.chapters.innovate,
                path:data.chapters.path,
                scene:data.chapters.scene,
                worth:data.chapters.worth,
                team:data.chapters.team,
                cost:data.chapters.cost,
                expectResults:data.chapters.expectResults,
                expectResultsTeacher:data.chapters.expectResultsTeacher,
                expectConversion:data.chapters.expectConversion,
                plan:data.chapters.plan,
                // Construction:data['chapters']['Construction'],//建设内容
                // ProjectBasis:data['chapters']['ProjectBasis'],//立项依据
                // development:data['chapters']['development'],//创客空间物理环境、制度建设及软件设施建设情况
                // studio:data['chapters']['studio'],//学生创客工作室建设情况
                // studentTeam:data['chapters']['studentTeam'],//学生创客团队（人才）培养预期成果、数量
                // studentActivities:data['chapters']['studentActivities'],//学生创客活动组织实施情况
                // Transforming:data['chapters']['Transforming'],//学生创客团队孵化、转化创业项目情况
                // condition:data['chapters']['condition'],//立 项基 础及条 件
                fund:fundDataArray,//预算经费
                    //total：总经费     
                    //小型仪器设备费：device        deviceRemarks
                    //材料费：Material             MaterialRemarks
                    //测试化验加工费：processing    processingRemarks
                    //项目协作费：Collaboration     CollaborationRemarks
                    //项目成果鉴定费：APPRAISAL     APPRAISALRemarks
                    //参展参赛费：entery            enteryRemarks
                    //创客交流活动费：activities    activitiesRemarks
                    //知识产权事务费：Transaction   TransactionRemarks
            }
            console.log(this.wordData)
    },
  },
  mounted(){
    this.handleData();
  }
}
</script>
  
<style lang="less" scoped>
#WordPreview{
  width: 100%;
  height: auto;
  font-size: 16px;
  color: black;
  padding:0 30px;
  #title{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .school{
      font-size: 26px;
      font-weight: bold;
      letter-spacing: 20px;
      margin-bottom: 10px;
    }
    .wordTitle{
      font-size: 24px;
      margin-bottom:30px ;
    }
    .date{
      font-size: 14px;
      position: absolute;
      bottom: 0;
      right: 100px;
      font-weight: bold;
    }
  }
  #table{
    box-sizing: border-box;
    border: solid 1px black;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    .han{
      display: flex;
      width: 100%;
      height: auto;
      box-sizing: border-box;
      border-bottom:solid 1px black;
      .label{
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 20%;
        box-sizing: border-box;
        padding: 10px;
        border-right: solid 1px black;
      }
      .value{
        // flex: 2;
        width: 10%;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        // padding: 10px;
        &:not(:nth-last-child(1)){
          border-right: solid 1px black;
        }
      }
      &:nth-child(5){
        .label{
          // flex: 1;
          justify-content: center;
          padding: 10px 12px;
        }
        .value{
          flex: 1;
          padding: 5px;
        }
      }
    }
    .status{
      display: flex;
      height: auto;
      box-sizing: border-box;
      .statusLabel{
        // flex:1;
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 3.5px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .ValueDescribe{
        flex: 5;
        display: flex;
        flex-direction: column;
        .statusHan{
          display: flex;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          .DescribeLabel{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding:40px 10px;
            border-right: solid 1px black;

          }
          .DescribeValue{
            flex: 5;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding: 15px;
          }
        }
      }
    }
    .member{
      display: flex;
      .memberLabel{
        // flex:1;
        width: 12%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 10px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .memberTable{
        flex: 5;
        // width: 100%;
        display: flex;
        flex-direction: column;
        .memberHan{
          display: flex;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          // height: auto;
          flex: 1;

          .memberValue{
            padding: 10px;
            box-sizing: border-box;
            width: 45%;
            // flex:1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: solid 1px black;
            &:nth-last-child(1){
              border-right: none;
              flex: 3;
            }

          }
        }
      }
    }
    .chapters{
      display: flex;
      .chaptersLabel{
        // flex:1;
        font-size: 18px;
        font-weight: 600;
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // justify-content: center;
        // align-items: center;
        box-sizing: border-box;
        padding: 3.5px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .chaptersTable{
        flex: 5;
        display: flex;
        flex-direction: column;
        .chaptersValue{
          flex: 1;
          min-height:200px;
          border-bottom: solid 1px black;
          padding: 10px;
          span{
            font-weight: bold;
          }
        }
      }
    }
    .fund{
      display: flex;
      .fundTitle{
        // flex:1;
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 3.5px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .fundTable{
        flex: 5;
        display: flex;
        flex-direction: column;
        .fundTotal{
          height: 60px;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          display: flex;
          div{
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
          }
          .fundLabel{
            flex: 1;
            border-right:solid 1px black;
          }
          .fundValue{
            flex: 4;
          }
        }
        .fundHeader{
          min-height: 40px;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          display: flex;
          .HeaderLabel{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: solid 1px black;
            &:nth-last-child(1){
              flex: 2;
              border: none;
            }
          }
        }
        .fundData{
          display: flex;
          .fundDataLabel{
            flex:1;
            box-sizing: border-box;
            border-right: solid 1px black;
            border-bottom: solid 1px black;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .fundDataHan{
            flex: 4;
            display: flex;
            flex-direction: column;
            .fundDataLie{
              display: flex;
              min-height: 40px;
              box-sizing: border-box;
              border-bottom: solid 1px black;
              .fundDataValue{
                flex: 1;
                display: flex;
                justify-content: center;
                align-items:center;
                box-sizing: border-box;
                border-right:solid 1px black;
                &:nth-last-child(1){
                  flex:2;
                  justify-content: flex-start;
                  border: none;
                  text-indent: 1em;
                }
              }
            }
          }
        }
      }
    }
    .opinion{
      display: flex;
      .opinionLabel{
        // flex:1;
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 3.5px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .opinionValue{
        flex: 5;
        min-height: 200px;
        position: relative;
        box-sizing:border-box;
        border-bottom: solid 1px black;
        .opinionImport{
          display: flex;
          width: 30%;
          height:40%;
          flex-direction: column;
          position:absolute;
          bottom: 0px;
          right: 20px;
          justify-content: space-between;
          .opinionDate{
            display: flex;
            justify-content: flex-end;
            font-size: 18px;
          }
        }
      }
    }
  }
  .notes{
    display: flex;
    flex-direction:column;
  }
}
</style>