<template>
  <div>
    <div class="add-message" @click="handleOpen"> + </div>

    <el-form>
      <el-col :style="{ padding: '1px 0px 10px' }" style="display:flex;justify-content:center;">
        <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
          <img :src="baseUrl+personal.avatar" height="100" width="100" />
          <div>{{personal.stakeholder}}</div>
          <div>诞辰：{{personal.stakeholderBirthday}}</div>
        </el-card>
      </el-col>
      
      <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>

    <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-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-card>
    </div>

      <el-col :style="{ padding: '10px 0px 10px' }" style="display:flex;justify-content:center;">
        <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
          <el-table v-loading="loading" :data="messageOptions">
            <el-table-column label="TA的留念" prop="name" width="80" />
            <el-table-column prop="contents" />
          </el-table>
          <br />
          <el-pagination small layout="prev, pager, next"
            v-show="total>0"
            :page-size="queryParams.pageSize"
            :current-page="queryParams.pageNum"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
      </el-card>
      </el-col>
  </el-form>

    <el-drawer
      :size="'70%'"
      :wrapperClosable="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">

      <div class="drawer__content">

        <el-form ref="messageForm" :model="messageForm" :rules="rules">
          <el-form-item label="姓名" prop="name" :label-width="'80px'">
            <el-col :span="20">
            <el-input v-model="messageForm.name" placeholder="请输入您的姓名" />
            </el-col>
          </el-form-item>
          <el-form-item :label-width="'80px'">
            <el-radio-group v-model="messageForm.type">
              <el-radio :label="1">留言语</el-radio>
              <el-radio :label="2">留念语</el-radio>
              <el-radio :label="3">缅怀语</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label-width="'10px'">
            
          <div class="box-card">
            <el-table v-loading="loading" 
              height="250"
              :border="true"
              :data="modelOptions" 
              highlight-current-row 
              @current-change="modelCurrentChange">
              <el-table-column label="选择留言" prop="contents"> </el-table-column>
            </el-table>
          </div>

          </el-form-item>
        </el-form>
        <div class="drawer__footer">
          <el-button type="primary" @click="addMessages" :loading="loading">留言</el-button>
        </div>
      </div>

    </el-drawer>

  </div>
</template>

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

export default {
  data() {
    return {
      drawer: false,
      loading: false,
      direction: 'btt',
      baseUrl: process.env.VUE_APP_BASE_API,
      pid: 0,
      personal: {},
      personalImg: {
        personalId: null,
      },
      messageOptions: [],
      modelOptions: [],
      picList: [],
      messageForm:{},
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        personalId: null
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
      }
    };
  },
  created() {
    this.pid = this.$route.params && this.$route.params.id;
    this.personalImg.personalId = this.pid;
    this.getContent(this.pid);
    this.getImgs(this.pid);
    this.getModels();
    this.getMessageList();
  },
  methods: {
    getContent(id) {
      getPersonal(id).then((response) => {
        this.personal = response.data;
      });
    },
    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 });
        }
      });
    },
    getModels(){
      allPersonalModel().then((res) => {
        this.modelOptions = res.data;
      });
    },
    modelCurrentChange(row){
      this.messageForm.contents = row.contents;
    },
    handleSizeChange: function(size) {
      this.queryParams.pageSize =  size
      this.getMessageList();
    },
    handleCurrentChange: function(currentPage) {
      this.queryParams.pageNum = currentPage
      this.getMessageList();
    },
    getMessageList(){
      this.loading = true;
      this.queryParams.personalId = this.personalImg.personalId;
      messageList(this.queryParams).then(response => {
        this.messageOptions = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    addMessages(){
      this.loading = true;
      this.messageForm.personalId = this.personalImg.personalId;
      addMessage(this.messageForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("留言成功");
          this.loading = false;
          this.drawer = false;
          this.getMessageList();
        }
      });
      this.loading = false;
    },
    handleOpen (){
      this.drawer = true;
    },
    handleClose (){
      this.drawer = false;
    }
  },
};
</script>

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

.add-message {
  position: fixed;
  background-color: #1890ff;
  width: 40px;
  height: 40px;
  right: 40px; 
  bottom: 40px;
  border-radius: 50%;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 20px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 5;
}
.drawer__content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.drawer__footer {
  text-align:center
}
.el-drawer__header {
    margin-bottom: 8px;
    padding: 10 5 10;
}
.box-card {
  height: 250px;
  width: 95%;
  overflow:auto;
  background:#fff;
}
</style>