<template>
  <div>
    <!-- @tab-click="handleClick" -->
    <el-tabs v-model="activeName">
      <el-tab-pane label="公文详情" name="first">
        <div class="baseTop_Info">
          <div class="partS1">
            发起人:<span>{{ singleData.gw_fqr_name }}</span>
          </div>
          <div class="partS1">
            发起科室:<span>{{ singleData.gw_fqks_name }}</span>
          </div>
          <div class="partS1">
            发起时间:<span>{{ singleData.create_dateline }}</span>
          </div>
          <!-- <div class="partS2">历史公文版本??</div> -->
        </div>
        <div class="onlineShow" v-if="singleData.gw_ylfj_pdf">
          <iframe :src="prefixPDFUrl + singleData.gw_ylfj_pdf" v-if="singleData.gw_ylfj_pdf"
            style="width: 100%; min-height: 600px; border: 0" name="ifrmname" id="ifrmid"></iframe>
        </div>
        <div class="fileReview" v-else>
          <div class="specialD">
            <div class="titleHeader">
              <div style="text-align: center">
                <img src="../../../../assets/images/fileTitle1.png" alt="" v-if="singleData.lb_id == 1" />
                <img src="../../../../assets/images/fileTitle2.png" alt="" v-else-if="singleData.lb_id == 2" />
                <img src="../../../../assets/images/fileTitle3.png" alt="" v-else-if="singleData.lb_id == 3" />
                <img src="../../../../assets/images/fileTitle4.png" alt="" v-else-if="singleData.lb_id == 4" />
                <img src="../../../../assets/images/fileTitle5.png" alt="" v-else-if="singleData.lb_id == 5" />
                <img src="../../../../assets/images/fileTitle6.png" alt="" v-else />
              </div>

              <div class="secPart">{{ singleData.gw_zh }}</div>
              <h3>{{ singleData.gw_title }}</h3>
              <p v-html="singleData.gw_content"></p>
            </div>
            <div class="posiR footerInfo">
              <p>景宁畲族自治县教育局</p>
              <p>{{ singleData.fb_dateline }}</p>
              <!-- 章定位 -->
              <div class="zhang">
                <img src="../../../../assets/images/zhang1.png" alt="" v-if="singleData.lb_id == 1" />
                <img src="../../../../assets/images/zhang2.png" alt="" v-else-if="singleData.lb_id == 2" />
                <img src="../../../../assets/images/zhang3.png" alt="" v-else-if="singleData.lb_id == 3" />
                <img src="../../../../assets/images/zhang4.png" alt="" v-else-if="singleData.lb_id == 4" />
                <img src="../../../../assets/images/zhang5.png" alt="" v-else-if="singleData.lb_id == 5" />
                <img src="../../../../assets/images/zhang6.png" alt="" v-else />
              </div>
            </div>
            <div class="reaFooter">
              <div class="reaFooter_left">{{ singleData.gw_fqks_name }}</div>
              <div class="reaFooter_right">
                {{ singleData.fb_dateline }}印发
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="审核记录" name="second">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column prop="sh_dept_name" label="步骤名称"></el-table-column>
          <el-table-column prop="sh_user_name" label="审核人"></el-table-column>
          <el-table-column prop="modify_dateline" label="审核时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                {{ scope.row.sh_status == "2" ? "通过" : "不通过" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sh_reason" label="处理意见"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="查阅情况" name="third">
        <el-table :data="tableData_cy" style="width: 100%">
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column property="xf_department_name" label="查阅对象"></el-table-column>
          <el-table-column property="xf_username" label="查阅人员"></el-table-column>
          <el-table-column label="是否查阅">
            <template slot-scope="scope">
              <div>
                {{ scope.row.is_see == "2" ? "未查阅" : "已查阅" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="modify_dateline" label="查阅时间"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { gwjh_detail, gwjh_recode, org_users } from "./itemApi";
export default {
  name: "gwxq",
  data() {
    return {
      activeName: "first",
      transId: "",
      tableData: [],
      tableData_cy: [],
      singleData: "",
      prefixPDFUrl:
        window.globalVariables.api + "/plugins/pdf.js/web/viewer2.html?file=",
    };
  },
  mounted() {
    this.transId = this.$route.params.id;
    this.initData();
  },
  methods: {
    initData() {
      let transObj = {
        gw_id: this.transId,
      };
      gwjh_detail(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.singleData = res.data.one_info;
            this.tableData = res.data.one_info.shjl;
            this.tableData_cy = res.data.one_info.cxqk;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //审核记录
    initCheckData() {
      let transObj = {
        gw_id: this.transId,
      };
      gwjh_recode(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.tableData = res.data.data;
            console.log(res, "0099");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleClick(tab, event) {
      if (tab.name == "second") {
        this.initCheckData();
      } else if (tab.name == "third") {
      } else {
        this.initData();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../../../../styles/documentOnlineRev.scss");

.baseTop_Info {
  display: flex;

  .partS1 {
    width: 20%;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #000000;

    span {
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      color: #606266;
    }
  }

  .partS2 {
    width: 40%;
    font-size: 16px;
    font-weight: 400;
    text-align: right;
    color: #265cd4;
  }
}

.fileReview {
  box-sizing: border-box;
  // padding: 5% 0%;
}

.specialD {
  width: 210mm;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 84px 78px 20px 78px;
  // box-shadow: 0 0 2px #000;
  overflow: hidden;
}

.onlineShow {
  min-height: 400px;
}

.posiR {
  position: relative;
}

.zhang {
  position: absolute;
  right: 10%;
  bottom: -50%;
  z-index: 13;
}
</style>