<template>
  <div class="w-full h-full">
    <table
      border="1px solid #333"
      class="Tb"
      cellpadding="0"
      cellspacing="0"
      align="center"
      valign="middle"
    >
      <tr>
        <td colspan="5">
          <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>
      <tr v-if="zb_list">
        <td></td>
        <td>附件完成数量</td>
        <td>附件未完成情况</td>
        <td>附件提交时间</td>
        <td>任务反馈意见</td>
      </tr>
      <tr
        v-for="(item, index) in detailInfo.xf_list"
        :key="index"
        v-show="item.zb_list"
      >
        <td>{{ item.zb_list.jddt_uo_name }}</td>
        <td>{{ item.zb_list.jddr_fjwc_num }}</td>
        <td>{{ item.zb_list.jddr_wfjwc_num }}</td>
        <td>{{ item.zb_list.modify_dateline }}</td>
        <td>{{ item.zb_list.jddr_sh_content }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { ddzs_detail } from "./api";
export default {
  data() {
    return {
      detailInfo: {},
      zb_list: {},
    };
  },
  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) => {
          this.zb_list = item.zb_list;
        });
        console.log(this.zb_list);
      });
    },
  },
  mounted() {
    if (this.$route.params.id != "") {
      this.jdd_id = this.$route.params.id;
      this.getDetailData();
    }
  },
};
</script>

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