<template>
  <form-option title="手册配置详情" style="margin-top: 10px; margin-bottom: 20px;" :rightButton="rightButton">
    <div class="table">
      <div class="item">
        <el-row>
          <el-col :span="3">
            <div class="label">
              检查类别
            </div>
          </el-col>
          <el-col :span="9">
            <div class="value">
              {{ enforceHandbook.enforce_class }}
            </div>
          </el-col>
          <el-col :span="3">
            <div class="label">
              检查项
            </div>
          </el-col>
          <el-col :span="9">
            <div class="value">
              {{ enforceHandbook.enforce_item }}
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="item">
        <el-row>
          <el-col :span="3">
            <div class="label">
              检查流程及方法
            </div>
          </el-col>
          <el-col :span="21">
            <div class="value">
              {{ enforceHandbook.enforce_method || '-' }}
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="item">
        <el-row type="flex">
          <el-col :span="3">
            <div class="label" style="height:100%;">
              常见问题
            </div>
          </el-col>
          <el-col :span="21">
            <div class="value">
              <div v-if = "enforceHandbook.problems && enforceHandbook.problems.length > 0">
                <div v-for="(item, index) in enforceHandbook.problems" :key="index">
                  <div>
                    {{ (index + 1) + "、" + item.problem_desc }}
                  </div>
                  <div v-if="item.problem_images">
                    <div v-for="(imageId, imageIndex) in item.problem_images.split(',')" :key="imageIndex">
                      <el-image style="width: 100px; height: 100px" :src="handleProblemImgs(imageId)" lazy></el-image>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                -
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="item">
        <el-row type="flex">
          <el-col :span="3">
            <div class="label" style="height:100%;">
              设置要求
            </div>
          </el-col>
          <el-col :span="21">
            <div v-if="enforceHandbook.setting_expect">
              <div>
                <!-- <vue-editor v-model="enforceHandbook.setting_expect" /> -->
                <div v-html="enforceHandbook.setting_expect"></div>
              </div>
            </div>
            <div v-else class="value" style="height: 100%;"> - </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="height:50px;"></div>
  </form-option>
</template>

<script>
import { getEnforceHandbook } from '@/api/book'
import FormOption from '@/component/FormOption.vue'
// import { VueEditor } from 'vue2-editor'
import { handleProblemImgs } from '@/utils/tool';

export default {
  components: {
    FormOption,
    // VueEditor,
  },
  computed: {
    resourceId() {
      return this.$route.query.id
    }
  },
  data () {
    return {
      loading: false,
      rightButton: {},
      enforceHandbook: {}
    }
  },
  mounted () {
    if (this.resourceId) {
      this.getEnforceHandbook()
    }
  },
  methods: {
    handleProblemImgs,
    getEnforceHandbook() {
      this.loading = true
      getEnforceHandbook(this.resourceId).then(res => {
        console.log(res)
        this.enforceHandbook = res
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  padding: 15px 20px;
}
.item {
  display: flex;
  align-items: center;
  margin-top: -1px;
  .label {
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: #F7F8FA;
    border: 1px solid #E6E6E6;
    padding: 10px;
  }
  .label:nth-child(1) {
    margin-left: -1px;
  }
  .value {
    border: 1px solid #E6E6E6;
    padding: 10px;
    text-align: left;
    margin-left: -1px;
  }
  .margin-row {
    margin-top: 1px;
  }
}
.el-row {
  width: 100% !important;
}
</style>