<template>
  <div class="setMember usersList usersListEdit">
    <div class="head-title">
      <span @click="CommonJump('recruitStick')" class="blue point">招募贴</span>
      / 新增评价
    </div>
    <div class="content">
      <el-form
        style="width: 50%"
        :model="addMsg"
        :rules="rules"
        ref="addMsg"
        label-width="150px"
      >
        <el-form-item label="用户名" prop="UserName">
          <el-input v-model="addMsg.UserName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="评价时间" prop="CreateDate">
          <el-date-picker
            size="small"
            v-model="addMsg.CreateDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户头像">
          <el-tooltip
            class="item"
            effect="dark"
            content="建议尺寸100*100"
            placement="top"
          >
            <el-button @click="openChangeDig(1)" size="small"
              >选择文件</el-button
            >
          </el-tooltip>
          <div
            class="app-gallery-item"
            style="position: relative; width: 100px; margin-top: 10px"
          >
            <img
              v-if="!addMsg.userPath || addMsg.userPath == ''"
              src="../../assets/img/default.png"
              style="width: 80px; height: 80px"
              alt=""
            />
            <img
              v-else
              style="width: 80px; height: 80px"
              :src="addMsg.userPath"
              alt=""
            />
          </div>
        </el-form-item>
        <el-form-item label="评价内容">
          <el-input
            type="textarea"
            :rows="5"
            v-model="addMsg.Content"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="评价图片">
          <div class="pj-img-box">
            <div
              v-for="(src, i) in addMsg.ImageList"
              :key="i"
              style="position: relative"
            >
              <el-image
                class="pj-img"
                :src="src"
                fit="contain"
                :preview-src-list="addMsg.ImageList"
              >
              </el-image>
              <i
                class="el-icon-delete-solid del-icon"
                @click="handleRemove(i)"
              ></i>
            </div>
            <el-upload
              class="uploadDiv"
              :http-request="UploadImage"
              :multiple="true"
              :show-file-list="false"
              action
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 20px">
      <el-button size="small" type="primary" @click="Save('addMsg')"
        >保存</el-button
      >
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
  components: {
    ChooseImg,
  },
  data() {
    return {
      rules: {
        UserName: [
          {
            type: "string",
            required: true,
            message: "请输入用户名",
            trigger: "change",
          },
        ],
        CreateDate: [
          {
            type: "string",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        UserPhoto: [
          {
            type: "string",
            required: true,
            message: "请选择头像",
            trigger: "change",
          },
        ],
      },
      addMsg: {
        CreateDate: "",
        UserName: "",
        UserPhoto: "",
        ActivityId: 0,
        Content: "",
        ImageList: [],
        ParentId: 0,
        ReplyUserId: 0,
      },
      msg: {
        pageIndex: 1,
        pageSize: 15,
        CommentGrade: 0,
        PlatformSource: 0,
        UserName: "",
        GoodsName: "",
        Content: "",
      },
      tableData: [],
      changeState: false,
      imgType: 1,
    };
  },
  created() {
    this.addMsg.ActivityId = this.$route.query.data.Id;
  },
  methods: {
    SelectId(msg) {
      if (this.imgType == 1) {
        let url = this.getIconLink(msg.url);
        this.addMsg.UserPhoto = msg.selectId;
        this.addMsg.userPath = url;
      }
      if (this.imgType == 2) {
        let url = this.getIconLink(msg.url);
        this.addMsg.CommentImgList = [url];
        this.addMsg.pjPath = url;
      }
      this.changeState = false;
    },
    openChangeDig(num) {
      this.changeState = true;
      this.imgType = num;
    },
    Save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addMsg.UserPhoto == "") {
            this.Error("请选择头像");
            return;
          }
          if (this.addMsg.Content == "" && this.addMsg.Content.length == 0) {
            this.Error("请输入评论或上传图片");
            return;
          }
          this.apipost(
            "/api/Miai/SgetActivityDiscussInfo",
            this.addMsg,
            (res) => {
              if (res.data.resultCode == 1) {
                this.CommonJump("recruitStick");
                this.Success("操作成功");
              } else {
                this.Error(res.data.message);
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    //选择图片
    UploadImage(file) {
      this.UploadFileToTencent(this.FileType().UserImg, file.file, (res) => {
        if (res.resultCode == 1) {
          this.addMsg.ImageList.push(res.FileUrl);
        }
      });
    },
    //删除图片
    handleRemove(index) {
      this.addMsg.ImageList.splice(index, 1);
    },
  },
};
</script>
<style>
.usersListEdit .tip {
  margin-left: 10px;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  color: #ff4544;
  background-color: #fef0f0;
  padding: 0 20px;
  border-radius: 5px;
}

.usersListEdit .app-image {
  background-size: cover;
  background-position: center center;
  width: 80px;
  height: 80px;
  border-radius: 0%;
}

.setMember .setTable .el-table__body .cell {
  display: flex;
  align-items: center;
}

.setMember .commonLabel .el-form-item__label {
  margin-top: -4px;
}

.setMember .discount .el-form-item__label {
  padding-right: 30px;
  margin-top: -4px;
}

.setMember .el-form-item .elzk {
  position: absolute;
  left: -25px;
  top: 8px;
}

.setMember .el-form-item {
  position: relative;
}

.usersList .blue {
  color: #409eff;
}

.usersList .content {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
  box-sizing: border-box;
}
/* ----------上传区域样式------------ */
.pj-img-box {
  display: flex;
  flex-wrap: wrap;
}
.uploadDiv {
  display: inline-block;
}
.uploadDiv .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.uploadDiv .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.pj-img {
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 10px 10px 0;
  box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2);
}
.del-icon {
  font-size: 16px;
  position: absolute;
  top: 0;
  right: 10px;
  color: red;
}
</style>

