<template>
  <div class="indicatorShow" v-loading="loading">
    <el-form :model="dialogForm" ref="addForm" label-width="80px" label-position="left">
      <el-form-item label="自评分数" prop="jddr_zp_score">
        <div class="value">{{dialogForm.jddr_zp_score}}</div>
      </el-form-item>
      <el-form-item label="自评" prop="jddr_zp_content">
        <div class="value">{{dialogForm.jddr_zp_content}}</div>
        <!-- <div class="value" v-html="dialogForm.jddr_zp_content"></div> -->
      </el-form-item>
      <el-form-item label="佐证材料" prop="jddr_zzcl_json">
        <div v-for="(item, index) in fileList" :key="index">
          <el-link type="primary" :underline="false" @click="showDetail(item)">{{item.name}}</el-link>
        </div>
      </el-form-item>
    </el-form>

    <el-dialog width="80%" :visible.sync="dialogVisible" title="查看" append-to-body :close-on-click-modal="false" @close="handleClose">
      <preview-attach :commonUrl="commonUrl" :filename="filename" style="width: 100%; height: 300px;"></preview-attach>
    </el-dialog>
  </div>
</template>

<script>
import { xfdxTjjlDetail } from "../api";
import PreviewAttach from "@/components/PreviewAttach/index.vue";
export default {
  data() {
    return {
      dialogForm: {},
      fileList: [],
      dialogVisible: false,
      commonUrl: "",
      filename: "",
      loading: true,
    }
  },
  props: ["detailId"],
  watch: {
    detailId: {
      immediate: true,
      handler(val) {
        if (val != "") {
          this.initDetailInfo(val);
        }
      }
    }
  },
  components: { PreviewAttach },
  methods: {
    async initDetailInfo(id) {
      let res = await xfdxTjjlDetail({ jddt_id: id });
      this.dialogForm = res.one_info;

      let fileList = this.dialogForm.jddr_zzcl_json.split(";");
      this.fileList = [];
      fileList.map((item) => {
        let arr = item.split("|");
        this.fileList.push({
          name: arr[1],
          url: arr[0]
        });
      })

      this.loading = false;
    },
    showDetail(data) {
      this.commonUrl = data.url;
      this.filename = data.name;
      this.dialogVisible = true;
    },
    handleClose() {
      this.commonUrl = "";
      this.filename = "";
    }
  }
}
</script>

<style lang="scss" scoped>
.indicatorShow::v-deep {
  .value {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 15px;
    min-height: 40px;
  }
}
</style>