<template>
  <div>
    <el-form>
      <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
        <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
          <div slot="header" class="clearfix">
            <span>干系人信息</span>
          </div>
          <img :src="personal.avatar" />
          <div>{{personal.stakeholder}}</div>
          <div>{{personal.stakeholderBirthday}}</div>
        </el-card>
      </el-col>
    </el-form>

    <el-form>
      <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
        <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
          <div slot="header" class="clearfix">
            <span>平生描述</span>
          </div>
          <div v-html="personal.content"></div>
        </el-card>
      </el-col>
    </el-form>

    <div style="width: 100%;display:flex;justify-content:center;">
      <el-card :body-style="{ padding: '0px' }" shadow="always" style="width: 90%;">
        <div slot="header" class="clearfix">
          <span>干系人照片</span>
        </div>
        <el-form>
          <el-col
            :span="5"
            v-for="item in picList"
            :offset="1"
            :style="{ padding: '0px 0px 10px',display:'flex',justifyContent:'center' }"
            :key="item.key"
          >
            <el-card :body-style="{ padding: '0px' }" shadow="always">
              <el-image
                :key="item.value"
                :src="item.value"
                :preview-src-list="[item.value]"
                class="image"
              ></el-image>
            </el-card>
          </el-col>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { allPersonalImg, getPersonal } from "@/api/common/template";
import { setToken } from "@/utils/auth";

export default {
  data() {
    return {
      pid: 0,
      personal: {},
      personalImg: {
        personalId: null,
      },
      picList: [],
    };
  },
  created() {
    this.pid = this.$route.params && this.$route.params.id;
    this.personalImg.personalId = this.pid;
    this.getContent(this.pid);
    this.getImgs(this.pid);
  },
  methods: {
    getContent(id) {
      getPersonal(id).then((response) => {
        this.personal = response.data;
        console.log(this.personal);
      });
    },
    getImgs(id) {
      allPersonalImg(this.personalImg).then((res) => {
        if (res.code !== 200) {
          this.$message.error("获取照片列表失败");
          return;
        }
        var apiUrl = process.env.VUE_APP_BASE_API;
        var items = res.data;
        for (const i in items) {
          var url = apiUrl + items[i].url;
          this.picList.push({ key: items[i].id, value: url });
        }
      });
    },
  },
};
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>