<template>
  <div>
    <div id="printTest" class="app-contprint print-midi">
      <div class="level-title">
        <h1>清单信息</h1>
      </div>
      <div class="mb-20">
        <table class="table-ui">
          <tr>
            <td class="tbg">清单名称</td>
            <td>{{ pd.NAME }}</td>
            <td class="tbg">排查清单类型</td>
            <td>{{ pd.SCREENTYPENAME }}</td>
          </tr>
          <tr>
            <td class="tbg">所属部门</td>
            <td>{{ pd.DEPARTMENT_NAME }}</td>
            <td class="tbg">所属岗位</td>
            <td>{{ pd.POST_NAME }}</td>
          </tr>
          <tr>
            <td class="tbg">排查周期</td>
            <td>{{ pd.PERIODNAME }}</td>
            <td class="tbg">清单类型</td>
            <td>{{ pd.TYPENAME }}</td>
          </tr>
          <!--          <tr>-->
          <!--            <td class="tbg">检查时间</td>-->
          <!--            <td />-->
          <!--            <td class="tbg">排查人</td>-->
          <!--            <td />-->
          <!--          </tr>-->
        </table>
      </div>
      <div class="level-title">
        <h1>检查内容</h1>
      </div>
      <div class="mb-20">
        <table class="table-ui">
          <tr>
            <th>NO</th>
            <th>排查类型</th>
            <th>排查项目</th>
            <th>风险管控措施(排查标准)</th>
            <th>失职部门/人员</th>
            <th>风险失控表现</th>
            <th>备注</th>
          </tr>
          <tr v-for="(data,index) in varList" :key="index">
            <td>{{ index+1 }}</td>
            <td>{{ data.RISKUNITNAME }}</td>
            <td>{{ data.PARTSNAME }}</td>
            <td>{{ data.CHECK_CONTENT }}</td>
            <td>{{ data.DEPARTMENT_NAME }}/{{ data.USER_NAME }} </td>
            <td />
            <td />
          </tr>

        </table>

        <div class="table-qrcode">
          <vue-qr :text="qrcodeStr" :margin="0" :size="300" color-dark="#f67b29" color-light="#fff" />
        </div>
      </div>

    </div>
    <div v-html="styleText" />
    <div class="ui-height" />
    <div class="ui-foot">
      <el-button v-print="'#printTest'" type="primary">打 印</el-button>
      <el-button plain type="info" @click="goBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves'
import SelectTree from '@/components/SelectTree'
export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      styleText: '<style type="text/css" media="print">\n' + '  @page { size: landscape; }\n' + '</style>',
      LISTMANAGER_ID: '',	// 主键ID
      pd: [],						// 存放字段参数
      varList: [],
      hiddens: []
    }
  },
  created() {
    this.LISTMANAGER_ID = this.$parent.LISTMANAGER_ID
    this.getData()
  },

  methods: {
    getData() {
      requestFN(
        '/listmanager/goEdit',
        {
          LISTMANAGER_ID: this.LISTMANAGER_ID
        }
      ).then((data) => {
        this.pd = data.pd
        this.varList = data.varList
      }).catch((e) => {

      })
    },

    goBack() {
      this.$parent.activeName = 'List'
    }
  }
}
</script>

<style lang="sass" scoped>
</style>
