<template>
    <div>
      <!------------------------------------------------->
      <el-row>
        <el-col :span="24">
          <div class="table-from">
          <span style="margin-right:10px;">总体目标</span>

          <table border="0" cellpadding="0" rules="all" width="100%" style="margin-top:10px;">
            <tr v-for="(item, i) in targetContentArr" :key="i">
              <td style="width: 270px;height:60px">目标{{i+1}}</td>
              <td style="height: 40px;position:relative">
                <span style="font-size:16px">{{item.targetContent}}</span>
              </td>
            </tr>
          </table>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div class="table-from">
            <span style="margin-right:10px;">产出指标</span>
            <table border="0" cellpadding="0" rules="all" width="100%" style="margin-top:10px;">
              <tr>
                <td style="width: 270px;height:60px">二级指标(产出指标)</td>
                <td>指标内容</td>
                <td>年度指标值</td>
                <td>中期指标值</td>
                <td style="width: 220px;height:60px">三级指标(产出指标)</td>
                <td style="width: 80px;height:60px">绩效指示性质</td>
                <td style="width: 70px;height:60px">绩效指示值</td>
                <td style="width: 80px;height:60px">绩效度量单位</td>
              </tr>
              <tr v-for="(item, i) in outputIndexArr" :key="i">
                <td style="height: 40px;position:relative">
                  <span style="font-size:16px">{{item.twoClassIndex}}</span>
                </td>
                <td>{{item.indexContent}}</td>
                <td>{{item.annualIndexValue}}</td>
                <td>{{item.mediumTermIndexValue}}</td>
                <td style="height: 40px;position:relative">{{item.threeClassIndex}}</td>
                <td>{{item.indexProperties}}</td>
                <td>{{item.indexValue}}</td>
                <td>{{item.unitMeasure}}</td>
              </tr>
            </table>

            <span style="margin-right:10px;">效益指标</span>
            <table border="0" cellpadding="0" rules="all" width="100%" style="margin-top:10px;">
              <tr>
                <td style="width: 270px;height:60px">二级指标(效益指标)</td>
                <td>指标内容</td>
                <td>年度指标值</td>
                <td>中期指标值</td>
                <td style="width: 220px;height:60px">三级指标(效益指标)</td>
                <td style="width: 80px;height:60px">绩效指标性质</td>
                <td style="width: 70px;height:60px">绩效指标值</td>
                <td style="width: 80px;height:60px">绩效度量单位</td>
              </tr>
              <tr v-for="(item, i) in benefitIndexArr" :key="i">
                <td style="height: 40px;position:relative">
                  <span style="font-size:16px">{{item.twoClassIndex}}</span>
                </td>
                <td>{{item.indexContent}}</td>
                <td>{{item.annualIndexValue}}</td>
                <td>{{item.mediumTermIndexValue}}</td>
                <td style="height: 40px;position:relative">{{item.threeClassIndex}}</td>
                <td>{{item.indexProperties}}</td>
                <td>{{item.indexValue}}</td>
                <td>{{item.unitMeasure}}</td>
              </tr>
            </table>

            <span style="margin-right:10px;">满意度指标</span>
            <table border="0" cellpadding="0" rules="all" width="100%" style="margin-top:10px;">
              <tr>
                <td style="width: 270px;height:60px">二级指标(满意度指标)</td>
                <td>指标内容</td>
                <td>年度指标值</td>
                <td>中期指标值</td>
                <td style="width: 220px;height:60px">三级指标(满意度指标)</td>
                <td style="width: 80px;height:60px">绩效指标性质</td>
                <td style="width: 70px;height:60px">绩效指标值</td>
                <td style="width: 80px;height:60px">绩效度量单位</td>
              </tr>
              <tr v-for="(item, i) in satisfactionIndexArr" :key="i">
                <td style="height: 40px;position:relative">
                  <span style="font-size:16px">{{item.twoClassIndex}}</span>
                </td>
                <td>{{item.indexContent}}</td>
                <td>{{item.annualIndexValue}}</td>
                <td>{{item.mediumTermIndexValue}}</td>
                <td style="height: 40px;position:relative">{{item.threeClassIndex}}</td>
                <td>{{item.indexProperties}}</td>
                <td>{{item.indexValue}}</td>
                <td>{{item.unitMeasure}}</td>
              </tr>
            </table>
          </div>
        </el-col>
      </el-row>
      <!------------------------------------------------->
    </div>
</template>
    <script>
    export default {
      data() {
        return {
          //总体目标
          targetContentArr: [],

          // 产出指标二级指标数据
          outputIndexArr:[],

          // 效益指标二级指标数据
          benefitIndexArr:[],

          // 满意度指标二级指标数据
          satisfactionIndexArr:[],
        }
      },
      methods: {
        getValue(dataVal){
          this.targetContentArr = dataVal.targetContentArr;
          this.outputIndexArr = dataVal.outputIndexArr;
          this.benefitIndexArr = dataVal.benefitIndexArr;
          this.satisfactionIndexArr = dataVal.satisfactionIndexArr;
        }
      }
    }
    </script>
