<!-- 预览审查表单 -->
<template>
  <el-dialog
    title="预览审查表单"
    :visible.sync="dialogManger.dialogVisible"
    width="75%"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <!--审查表单概要-->
    <div class="form-review-questionnaire" style="margin: 0">
      <div class="title-display">
        <span class="title-i"></span>
        <span class="title-content">预览审查表单</span>
        <div class="control-btns">
          <div class="control-btn" @click="openAll()">
            <icon-park
              type="down-c"
              theme="outline"
              size="16"
              style="margin-right: 5px"
              fill="#303133"
            />
            全部展开
          </div>
          <div class="control-btn" @click="closeAll()">
            <icon-park
              type="up-c"
              theme="outline"
              size="16"
              style="margin-right: 5px"
              fill="#303133"
            />
            全部收起
          </div>
        </div>
      </div>
      <!--审查表单概要-->
      <collapse v-model="activeNames" class="mt10">
        <collapse-item
          v-for="(item, key) in dialogManger.model.systemReviewTask.standard"
          :key="key"
          :name="item.chapter + key"
        >
          <span slot="title" style="width: 100%">
            <div class="standard-box">
              <div class="standard-left">
                <div class="standard-title">
                  <div class="standard">标准：</div>
                  {{ item.chapter + item.text }}
                </div>
              </div>
              <div class="standard-result">
                审查结果：
                <span v-if="item.passed === null">__</span>
                <span v-else-if="item.passed == 1" class="green">符合</span>
                <span v-else class="orange">不符合</span>
              </div>
            </div>
          </span>
          <table class="table">
            <tr>
              <th>审查要点</th>
              <th>审查细则</th>
              <th>现有控制</th>
              <th>不符合描述</th>
              <th class="investigate-result">审查结果</th>
              <th>记录</th>
              <th class="written-by">填写人</th>
            </tr>
            <template v-for="(keyPoint, keyPointKey) in item.keyPointList">
              <tr :key="keyPointKey">
                <td :rowspan="keyPoint.reviewDetailsList.length + 1">
                  {{ keyPoint.text }}
                </td>
              </tr>
              <template
                v-for="(
                  reviewDetail, reviewDetailKey
                ) in keyPoint.reviewDetailsList"
              >
                <tr :key="reviewDetailKey">
                  <td align="center">{{ reviewDetail.text }}</td>
                  <td align="center">
                    {{
                      reviewDetail.result
                        ? reviewDetail.result.successRemark
                        : ''
                    }}
                  </td>
                  <td align="center">
                    {{
                      reviewDetail.result ? reviewDetail.result.failRemark : ''
                    }}
                  </td>
                  <td align="center" class="investigate-result">
                    <div v-if="reviewDetail.result">
                      <el-tag
                        v-if="reviewDetail.result.passed === 1"
                        size="medium"
                        type="success"
                        >符合</el-tag
                      >
                      <el-tag
                        v-if="reviewDetail.result.passed === 0"
                        size="medium"
                        type="warning"
                        >不符合</el-tag
                      >
                    </div>
                    <div v-else>__</div>
                  </td>
                  <td align="center">
                    <div v-if="reviewDetail.result">
                      <div v-if="reviewDetail.result.fileList.length">
                        <template v-for="i in reviewDetail.result.fileList">
                          {{ i.fileName ? ` 文件:《${i.fileName}》` : '' }}
                          {{ i.catalogue }}
                        </template>
                      </div>
                      <div v-if="reviewDetail.result.comment">
                        备注: {{ reviewDetail.result.comment }}
                      </div>
                    </div>
                    <div v-else>__</div>
                  </td>
                  <td align="center" class="written-by">
                    <column-data
                      :text="
                        reviewDetail.result
                          ? reviewDetail.result.userName
                            ? reviewDetail.result.userName
                            : '__'
                          : '__'
                      "
                    />
                  </td>
                </tr>
              </template>
            </template>
          </table>
        </collapse-item>
      </collapse>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose()"> 关 闭 </el-button>
    </span>
  </el-dialog>
</template>
<script>
import collapse from '@/components/Collapse/collapse'
import collapseItem from '@/components/Collapse/collapse-item'
export default {
  components: {
    collapse: collapse,
    'collapse-item': collapseItem
  },
  props: {
    dialogManger: {
      type: Object,
      default() {
        return {
          dialogVisible: false,
          model: {
            systemReviewTask: {
              standard: []
            }
          }
        }
      }
    }
  },
  data() {
    return {
      activeNames: []
    }
  },
  watch: {
    'dialogManger.dialogVisible': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.openAll()
        }
      }
    }
  },
  methods: {
    // 关闭预览
    handleClose() {
      this.dialogManger.dialogVisible = false
    },
    openAll() {
      this.activeNames = this.dialogManger.model.systemReviewTask.standard.map(
        (i, key) => {
          return i.chapter + key
        }
      )
    },
    closeAll() {
      this.activeNames = []
    }
  }
}
</script>