<template>
  <div class="box">
    <div class="content">
      <div class="btn" @click="send">
        <p>留言</p>
      </div>

      <div class="container">
        <!-- <div class="title">题目推荐</div> -->

        <div class="item" v-for="(item, index) in list" :key="index">
          <img :src="item.avatar" alt="" />
          <div class="item_box">
            <p>{{ item.title }}</p>
            <p>{{ item.content }}</p>
            <div class="bottom_item">
              <div class="btns">
                <p class="btns_time">
                  {{ item.nickname }} 发布于 {{ item.createTime }}
                </p>
                <p class="btns_btn" @click="del(item.id)">删除当前留言</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-dialog
        title="发布题目"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <!-- <p style="text-align: center;">发布题目</p> -->
        <el-upload
          class="avatar-uploader"
          action="https://9miao.fun:6838/prod-api/common/alibabaUpload"
          :show-file-list="false"
          :headers="headerObj"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="留言人">
              <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="留言内容">
              <el-input v-model="form.content"></el-input>
            </el-form-item>
            <!-- <el-form-item label="">
              <el-input v-model="form.name"></el-input>
            </el-form-item> -->
          </el-form>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="upload">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { apiServe } from "@/api/api";
export default {
  name: "WenhuaWebuiZhiShi",

  data() {
    return {
      list: [],

      dialogVisible: false,

      form: {},
      headerObj: {
        "Content-Type": "application/json",
        saToken: localStorage.getItem("token"),
      },
      imageUrl: "",
      cdata: {},
    };
  },

  mounted() {
    this.cdata.token = localStorage.getItem("token");
    let token = localStorage.getItem("token");
    console.log(token);
    if (!token) {
      if (!token) {
        this.$confirm("您还未登录，是否前去登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 跳转登录
            this.$router.push("/login");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
            this.$router.push("/");
          });
      }
    }
    this.searchUser();
  },

  methods: {
    send() {
      this.dialogVisible = true;
    },
    searchUser() {
      apiServe.getliuyan(this.cdata).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    upload() {
      // 若验证成功 此时应该调登录接口
      let data = {
        content: this.form.content,
        nickname: this.form.nickname,
        avatar: this.imageUrl,
      };
      apiServe.addliuyan(data).then((res) => {
        setTimeout(() => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.dialogVisible = false;
          // location.reload();
        }, 1000);
        console.log(res);
      });
    },
    del(index) {
      apiServe.delliuyan(index).then((res) => {
        console.log(res);
        // this.list = res.data.data
        setTimeout(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          // location.reload();
        }, 1000);
      });
    },
  },
};
</script>

<style scoped lang="less">
.box::v-deep {
  height: 100%;
  //   background-color: #ccc;
  padding: 50px 60px 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 1000px;
    // height: 300px;
    // background-color: #ffffff;
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;

    .btn {
      // width: 100px;
      // background-color: rgba(0, 0, 0, alpha);
      //   padding: 15px 30px;
      box-sizing: border-box;

      p {
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: rgba(22, 155, 213, 1);
        font-size: 14px;
        border-radius: 7px;
        color: #ffffff;
      }
    }
  }

  .container {
    width: 100%;

    .title {
      margin-top: 20px;
      // margin-left: 30px;
      margin-bottom: 20px;
      color: #333;
      font-size: 20px;
    }

    .item {
      width: 100%;
      display: flex;
      //   align-items: center;
      padding: 30px;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 10px;
      margin-bottom: 20px;
      position: relative;
      margin-top: 20px;
      border: 1px solid #ccc;

      img {
        width: 120px;
        height: 120px;
        border-radius: 5px;
      }

      .item_box {
        margin-left: 20px;

        .bottom {
          margin-top: 10px;
        }

        p:first-child {
          margin-bottom: 5px;
          font-size: 20px;
        }

        p:nth-child(2) {
          // margin-bottom: 30px;
          //   width: 600px;
          font-size: 16px;
          color: #979797;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3; //显示几行
        }
      }

      .bottom_item {
        width: 600px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 20px;
        right: 30px;
        // position: relative;

        .time {
          font-size: 14px !important;
          color: #000;
          display: flex;
          align-items: center;
        }

        .btns {
          // width: 100px;
          // background-color: rgba(0, 0, 0, alpha);
          //   padding: 15px 30px;
          box-sizing: border-box;
          position: absolute;
          right: 0;
          display: flex;
          align-items: center;

          .btns_time {
            font-size: 14px;
            margin-right: 20px;
          }

          .btns_btn {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: rgba(22, 155, 213, 1);
            font-size: 10px;
            border-radius: 7px;
            color: #ffffff;
            background-color: red;
          }
        }
      }
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>