<template>
  <!-- 心得体会弹窗 -->

  <div class="score_dialog clearfix">
    <el-dialog title="心得体会" :visible="expVisible" :close-on-click-modal="false" @update:visible="v=>$emit('update:expVisible',v)">
      <div class="comment_content exp_content clearfix">
        <!-- 提交内容 -->
        <div class="comment_single clearfix" v-show="isNext">
          <!-- 活动信息 -->
          <div class="exp_active clearfix">
            <div class="exp_li">
              <div class="exp_title">活动举办者：</div>
              <div>{{list.school_name}}</div>
            </div>
            <div class="exp_li">
              <div class="exp_title">活动名称：</div>
              <div>{{list.name}}</div>
            </div>
            <div class="exp_li">
              <div class="exp_title">活动时间：</div>
              <div>{{list.starttime | date}} —— {{list.endtime | date}}</div>
            </div>
            <div class="exp_li">
              <div class="exp_title">活动地点：</div>
              <div>{{list.address}}</div>
            </div>
          </div>
          <!-- 活动参与过程描述 -->
          <div class="fill_msg layout flex_diection align_left clearfix">
            <div class="fill_title">
              <i class="star">*</i>
              活动参与过程描述
            </div>
            <textarea
              class="fill_area"
              v-model="description"
              placeholder="社会实践类填写内容为：实践主题、实践过程。
活动类填写内容为：活动中个人扮演的角色、承担的责任或任务。"
            ></textarea>
          </div>
          <!-- 活动候有关生涯感想 -->
          <div class="fill_msg layout flex_diection align_left clearfix">
            <div class="fill_title">
              <i class="star">*</i>
              活动后有关生涯的感想
            </div>
            <textarea
              class="fill_area"
              v-model="summary"
              placeholder="社会实践类填写内容为：实践感受（或感想、反思）、实践评价。
活动类填写内容为：责任或任务的完成情况，活动中的收获。"
            ></textarea>
          </div>
          <!-- 活动图片 -->
          <div class="active_pic clearfix layout flex_diection">
            <div class="exp_title">活动图片：</div>
            <el-upload
              class="upload-demo layout flex_row align_left"
              action="http://cp.zgcareer.com/api/common/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              list-type="picture-card"
            >
              <div class="upload_btn">上传</div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body width="30%">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="active_btn" @click="nextPage()">提交</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { post } from "@/api/http";
import { Notification } from "element-ui";
let answer1 = {};
export default {
  props: ["expVisible", "activityId"],
  data() {
    return {
      // 描述
      description: "",
      // 感想
      summary: "",
      expedVisible: false,
      isNext: true,
      sign_btn: 0,
      list: "",
      src1: require("@/assets/img/15.png"),
      src2: require("@/assets/img/9.png"),
      //   问题
      dataShow: [
        {
          questId: 1,
          title: "修理坏掉的东西",
          arr: [
            {
              interId: 1,
              index: "1-1",
              order: "A",
              name: "很喜欢",
              choiced: false
            },
            {
              interId: 1,
              index: "1-2",
              order: "B",
              name: "喜欢",
              choiced: false
            },
            {
              interId: 1,
              index: "1-3",
              order: "C",
              name: "不喜欢",
              choiced: false
            },
            {
              interId: 1,
              index: "1-4",
              order: "D",
              name: "很不喜欢",
              choiced: false
            }
          ]
        },
        {
          questId: 2,
          title: "制作海报、创意卡片",
          arr: [
            {
              interId: 2,
              index: "2-1",
              order: "A",
              name: "很喜欢",
              choiced: false
            },
            {
              interId: 2,
              index: "2-2",
              order: "B",
              name: "喜欢",
              choiced: false
            },
            {
              interId: 2,
              index: "2-3",
              order: "C",
              name: "不喜欢",
              choiced: false
            },
            {
              interId: 2,
              index: "2-4",
              order: "D",
              name: "很不喜欢",
              choiced: false
            }
          ]
        },
        {
          questId: 3,
          title: "促销商品、拓展市场",
          arr: [
            {
              interId: 3,
              index: "3-1",
              order: "A",
              name: "很喜欢",
              choiced: false
            },
            {
              interId: 3,
              index: "3-2",
              order: "B",
              name: "喜欢",
              choiced: false
            },
            {
              interId: 3,
              index: "3-3",
              order: "C",
              name: "不喜欢",
              choiced: false
            },
            {
              interId: 3,
              index: "3-4",
              order: "D",
              name: "很不喜欢",
              choiced: false
            }
          ]
        },
        {
          questId: 4,
          title: "为弱势儿童表演、说故事",
          arr: [
            {
              interId: 4,
              index: "4-1",
              order: "A",
              name: "很喜欢",
              choiced: false
            },
            {
              interId: 4,
              index: "4-2",
              order: "B",
              name: "喜欢",
              choiced: false
            },
            {
              interId: 4,
              index: "4-3",
              order: "C",
              name: "不喜欢",
              choiced: false
            },
            {
              interId: 4,
              index: "4-4",
              order: "D",
              name: "很不喜欢",
              choiced: false
            }
          ]
        },
        {
          questId: 5,
          title: "观察职务生态动作习性",
          arr: [
            {
              interId: 5,
              index: "5-1",
              order: "A",
              name: "很喜欢",
              choiced: false
            },
            {
              interId: 5,
              index: "5-2",
              order: "B",
              name: "喜欢",
              choiced: false
            },
            {
              interId: 5,
              index: "5-3",
              order: "C",
              name: "不喜欢",
              choiced: false
            },
            {
              interId: 5,
              index: "5-4",
              order: "D",
              name: "很不喜欢",
              choiced: false
            }
          ]
        }
      ],
      //   上传图片
      dialogImageUrl: [],
      dialogVisible: false,
      id: ""
    };
  },
  methods: {
    // 选择答案
    choiced: function(item, num) {
      let that = this;
      for (let i in that.dataShow) {
        for (let j in that.dataShow[i].arr) {
          if (item.interId == that.dataShow[i].arr[j].interId) {
            that.$set(that.dataShow[i].arr[j], "choiced", false);
            if (item.index == that.dataShow[i].arr[j].index) {
              that.$set(that.dataShow[i].arr[j], "choiced", true);
            }
          }
        }
        this.$forceUpdate();
      }
      answer1[num] = item.order;
    },
    // 提交
    nextPage() {
      if (this.description.trim().length > 0 && this.summary.trim().length > 0&&this.dialogImageUrl.length>0) {
        this.joinActivitySummary();
      } else {
        Notification.info({
          title: "提示",
          message: "请填写完整信息",
          duration: 1500
        });
      }
    },
    // 上传图片
    // 删除图片
    handleRemove(file, fileList) {
      for (let obj of fileList) {
        this.dialogImageUrl.push(obj.response.data.path);
      }
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    },

    handleSuccess(res, file, fileList) {
      this.dialogImageUrl.push(res.data.path);
    },
    // 上传活动心得体会
    joinActivitySummary() {
      let url = "/api/activity/joinActivitySummary";
      let params = {
        id: this.id,
        description: this.description,
        summary: this.summary,
        images: this.dialogImageUrl
      };
      post(url, params).then(res => {
        console.log(res);
        this.$emit("update:expVisible", false);
        // this.dialogVisible = false;
        this.$parent.getActivityList();
        // this.expedVisible = true;
      });
    },

    // 学生活动详情
    getActivityDetail() {
      let url = "/api/activity/getActivityDetail";
      let params = {
        id: this.id
      };
      post(url, params).then(res => {
        this.list = res.activity;
      });
    }
  },
  components: {},
  mounted() {
    this.id = this.activityId;
    this.getActivityDetail();
  }
};
</script>
<style scoped>
@import "../../../../style/personal.css";

.exp_content {
  padding: 24px 102px 36px 48px;
}

.comment_single {
  font-size: 16px;
  color: #5b5e63;
  line-height: 32px;
}

.active_title,
.active_content {
  float: left;
  text-align: left;
}

/* 活动信息 */
.exp_active {
  text-align: left;
}

.exp_li {
  float: left;
  width: 40%;
}

.exp_title {
  width: 96px;
  float: left;
  text-align: left;
}

/* 填写信息 */
.fill_msg {
  margin: 36px 0;
}

.star {
  color: #f44a5e;
}

/* 多行文本框 */
.fill_area {
  width: 100%;
  height: 132px;
  padding: 12px;
  outline: none;
  border-color: #eee;
}

/* 上传图片组件 */
.upload-demo {
  margin-top: 30px;
}

/* 上传按钮 */
.upload_btn {
  width: 80px;
  height: 40px;
  border: 1px solid #409eff;
  color: #409eff;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  border-radius: 3px;
  margin: 0;
}

/* 下一步按钮 */
.active_btn {
  margin-bottom: 0;
}

/* 问题 */
.exp_box {
  width: 60%;
  padding-left: 30px;
  margin-bottom: 45px;
}

.exp_question {
  margin-bottom: 9px;
}

.exp_circle {
  float: left;
  margin-right: 8px;
}
</style>