<template>
  <div class="w-full h-full">
    <table
      class="Tb w-full"
      cellpadding="0"
      cellspacing="0"
      align="center"
      valign="middle"
    >
      <tr>
        <td colspan="12">
          <h3>督导对象为学校（有指标）</h3>
        </td>
      </tr>
      <tr>
        <td>任务名称</td>
        <td colspan="11">{{ detailInfo.jdd_name }}</td>
      </tr>
      <tr>
        <td>督导类型</td>
        <td colspan="11">{{ detailInfo.jdd_ddlx_option_n }}</td>
      </tr>
      <tr>
        <td>督导对象</td>
        <td colspan="11">{{ detailInfo.jdd_dddx_option_n }}</td>
      </tr>
      <tr>
        <td>任务开始时间</td>
        <td colspan="11">{{ detailInfo.jdd_start_date }}</td>
      </tr>
      <tr>
        <td>任务结束时间</td>
        <td colspan="11">{{ detailInfo.jdd_end_date }}</td>
      </tr>
      <tr>
        <td>任务内容</td>
        <td colspan="11">{{ detailInfo.jdd_content }}</td>
      </tr>
    </table>

    <table
      v-for="(item, index) in detailInfo.xf_list"
      :key="index"
      class="Tb1 w-full"
      cellpadding="0"
      cellspacing="0"
      align="center"
      valign="middle"
    >
      <tr v-if="item.zb_list.length">
        <td :rowspan="item.zb_list ? item.zb_list.length + 1 : 1">
          {{ item.jddx_uo_name }}
        </td>
        <td>指标内容</td>
        <td>指标分值</td>
        <td>责任部门</td>
        <td>完成情况</td>
        <td>自评分</td>
        <td>附件完成情况</td>
        <td>审核意见</td>
        <td>审核分</td>
        <td>审核人</td>
        <td>督导整改</td>
        <td>督导培训</td>
      </tr>
      <tr v-for="(i, index) in item.zb_list" :key="index">
        <td>{{ i.jddr_content }}</td>
        <td>{{ i.jddr_score }}</td>
        <td>{{ i.jddr_uo_name }}</td>
        <td v-html="i.jddr_zp_content"></td>
        <td>{{ i.jddr_zp_score }}</td>
        <td>{{ i.jddr_fjwcqk }}</td>
        <td>{{ i.jddr_sh_content }}</td>
        <td>{{ i.jddr_sh_score }}</td>
        <td>{{ i.jddr_shr }}</td>
        <td>{{ i.jddr_zgyj }}</td>
        <td>{{ i.px_content }}</td>
      </tr>
      <tr v-show="item.zb_list.length">
        <td colspan="2">汇总</td>
        <td>{{ item.total_jddr_score }}</td>
        <td></td>
        <td></td>
        <td>{{ item.total_jddr_zp_score }}</td>
        <!-- <td>{{item.per_jddr_fjwcqk}}</td> -->
        <td>{{ item.jddt_fjwcqk }}</td>
        <td></td>
        <td>{{ item.total_jddr_sh_score }}</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script>
import { ddzs_detail } from "./api";
export default {
  data() {
    return {
      detailInfo: {},
    };
  },
  methods: {
    getDetailData() {
      let data = {
        jdd_id: this.jdd_id,
      };
      ddzs_detail(data).then((res) => {
        this.detailInfo = res.data.one_info;
        this.detailInfo.xf_list.forEach((item) => {
          item.total_jddr_score = 0;
          item.total_jddr_zp_score = 0;
          item.total_jddr_fjwcqk = 0;

          item.per_jddr_fjwcqk = 0;
          item.total_jddr_sh_score = 0;

          item.zb_list.map((val) => {
            item.total_jddr_sh_score += Number(val.jddr_sh_score);
            item.total_jddr_score += Number(val.jddr_score);
            item.total_jddr_zp_score += Number(val.jddr_zp_score);
            item.total_jddr_fjwcqk += Number(val.jddr_fjwcqk);
            val.jddr_fjwcqk = val.jddr_fjwcqk + "%";
            // item.jddr_fjwcqk = val.jddr_fjwcqk + "%";
            console.log(item.jddr_fjwcqk, 111);
          });
          console.log(item.jddr_fjwcqk, 111);
          item.per_jddr_fjwcqk =
            (item.total_jddr_fjwcqk / item.zb_list.length).toFixed(2) + "%";
        });
      });
    },
  },
  mounted() {
    if (this.$route.params.id != "") {
      this.jdd_id = this.$route.params.id;
      this.getDetailData();
    }
  },
};
</script>

<style lang="scss" scoped>
.Tb td {
  height: 30px;
  border: #000 2px solid;
  box-sizing: border-box;
  padding-left: 1%;
}
.Tb tr {
  line-height: 50px;

}
h3 {
  text-align: center;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
}
// table {
//   width: 100%;
//   //border-collapse: collapse;
//   padding: auto;
//   tr {
//     height: 30px;
//     line-height: 30px;
//     border: 2px solid #333;
//     text-align: center;
//     td:first-of-type {
//       width: 150px;
//     }
//   }
// }
.Tb1 {
  table-layout: fixed;
}
.Tb1 tr {
  line-height: 50px;
}
.Tb1 td {
  height: 30px;
  border: #000 2px solid;
  box-sizing: border-box;
  padding-left: 1%;
  td:first-of-type {
    width: 150px;
  }
  td {
    width: 8%;
  }
}
</style>