<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="main">
      <div class="thetable">
        <div class="fontTitle"> {{'在线签呈'}}</div>
        <div class="titleflex">
          <div>{{'编号'}} :HZS1237891237891</div>
          <div>
            <el-checkbox-group v-model="checked" :min="0" :max="1">
              <el-checkbox
                v-for="item in checkList"
                :label="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <table id="tfhover" class="tftable" border="1">
          <tr>
            <td colspan="1" width="190px" align="center"> {{'发起部门'}} :</td>
            <td colspan="1" width="435px">运营中心</td>
            <td colspan="1" width="140px" align="center"> {{'发起人'}} :</td>
            <td colspan="1"></td>
          </tr>
          <tr>
            <td colspan="1" align="center"> {{'主旨'}} :</td>
            <td colspan="1">{{ qcList.approvalBusinessVal }}</td>
            <td colspan="1" align="center"> {{'日期'}} :</td>
            <td colspan="1"></td>
          </tr>
          <tr>
            <td colspan="1" align="center"> {{'审批流程'}}</td>
            <td colspan="3">
              <span
                style="margin-right: 20px"
                v-for="(item, index) in qcList.itemList"
                :key="index"
                >{{ item.nickName }}({{ item.deptName }})</span
              >
            </td>
          </tr>
          <tr>
            <td colspan="1" align="center">{{'抄送人'}}</td>
            <td colspan="3">
              <span
                style="margin-right: 20px"
                v-for="(item, index) in qcList.sendList"
                :key="index"
                >{{ item.nickName }}({{ item.deptName }})</span
              >
            </td>
          </tr>
          <tr>
            <td style="height: 180px" align="center">{{'情况说明'}}</td>
            <td colspan="3"></td>
          </tr>
          <tr>
            <td style="height: 170px" align="center"> {{'业务诉求'}}</td>
            <td colspan="3">

            </td>
          </tr>
          <tr v-for="(item, index) in qcList.itemList" :key="index">
            <td align="center" style="height: 108px">
              {{ item.deptName }}意见
            </td>
            <td colspan="3">
              <div class="spbox">
                <div>审批状态：</div>
                <div style="margin-right:20px;">
                  <el-select clearable  v-model="ywsq"  :placeholder="'请选择'">
                    <el-option
                      v-for="item in ywsqList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>

                <div> {{'日期'}} :：</div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

  <script>
import topBar from "@/components/topBar";
import { findQcDetail } from "@/api/signing";
export default {
  name: "Ckqc",
  components: {
    topBar,
  },

  data() {
    return {
      moren: "ckqc",
      topList: [
        {
          name: "查看签呈",
          path: "ckqc",
        },
      ],
      checked: [],
      checkList: [
        { value: "1", label: "普通" },
        { value: "2", label: "急件" },
        { value: "3", label: "密件" },
      ],
      qcList: {},
      ywsq: "",
      ywsqList: [
        { value: "0", label: "同意" },
        { value: "1", label: "驳回" },
      ],
    };
  },
  created() {
    this.findQcDetail();
  },
  methods: {
    findQcDetail() {
      findQcDetail(this.$route.query.pkId).then((res) => {
        this.qcList = res.data;
      });
    },
  },
};
</script>

    <style lang="scss" scoped>
.page {
  padding:20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    // margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    display: flex;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
  }
  .thetable {
    margin: 0 auto;
    .fontTitle {
      font-weight: bold;
      font-size: 24px;
      text-align: center;
    }
    .titleflex {
      display: flex;
      margin-top: 10px;
      margin-bottom: 10px;
      justify-content: space-between;
    }
  }
  .tftable {
    font-size: 14px;
    border-collapse: collapse;
    border-radius: 10px;
    width: 1060px;
    border: 1px solid #cccccc;
    .spbox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    th {
      font-size: 14px;
      // padding: 20px;
    }
    tr td {
      font-size: 14px;
      padding: 10px 20px;
      height: 60px;
    }
  }
}
</style>
