<template>
  <q-dialog
    v-model="persistent"
    content-class="bg-grey-1"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 600px">
      <q-card-section>
        <div class="text-h6">
          {{ dataList.some((e) => e.FeedBackId > 0) ? "修改" : "新增" }}
        </div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-lg q-px-md text-grey-6">课程反馈</div>
        <div v-for="(item, index) in dataList" :key="index">
          <div class="row wrap" style="margin: 20px 0 10px 0">
            {{ item.GuestName }}:
          </div>
          <div class="row wrap">
            <q-select
              filled
              stack-label
              class="col-6 q-pr-lg q-pb-lg"
              v-model="item.Score"
              :options="ScoreOpts"
              emit-value
              map-options
              label="评分"
            />
          </div>
          <div class="row">
            <q-input
              v-model="item.Comment"
              filled
              stack-label
              type="textarea"
              label="评语"
              style="width: 100%"
            />
          </div>

          <div class="row wrap" style="padding-top: 20px">
            <div style="display: flex; flex-wrap: wrap">
              <div
                v-if="item.PhotoList && item.PhotoList.length > 0"
                v-for="(item1, index1) in item.PhotoList"
                :key="index1"
              >
                <div class="ItemImgDiv">
                  <video
                    :src="item1"
                    style="height: 100%; height: 100%"
                    v-if="item1.indexOf('mp4') != -1"
                  ></video>
                  <el-image
                    :src="item1"
                    style="height: 100%; height: 100%"
                    :preview-src-list="item.PhotoList"
                    v-else
                  ></el-image>
                  <q-btn
                    size="7px"
                    @click="deleteItemImg(index, index1)"
                    style="position: absolute; right: -5px; top: -5px"
                    round
                    color="red"
                    icon="iconfont icon-guanbi1"
                  />
                </div>
              </div>
              <el-upload
                class="avatar-uploader addDutyMain"
                action=""
                :before-upload="
                  (file) => {
                    return uploadFile(file, index);
                  }
                "
                :show-file-list="false"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn
          label="取消"
          flat
          color="grey-10"
          style="font-weight: 400 !important"
          @click="closeSaveForm"
        />
        <q-btn
          label="立即提交"
          color="accent q-px-md"
          style="font-weight: 400 !important"
          :loading="saveLoading"
          @click="saveData"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
import { setFeedBack } from "../../api/teacher";
import { UploadSelfFile } from "../../api/common/common";
export default {
  props: {
    arr: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      persistent: true,
      saveLoading: false,
      rowindex: 0,
      ScoreOpts: [1, 2, 3, 4, 5],
      dataList: [],
    };
  },
  mounted() {
    this.dataList = this.arr;
  },
  methods: {
    //关闭弹窗
    closeSaveForm() {
      this.$emit("close");
      this.persistent = false;
    },
    //保存
    saveData() {
      this.saveLoading = true;
      this.dataList.forEach((e) => {
        e.TeacherId = e.Teacher_Id;
        delete e.Teacher_Id;
      });
      setFeedBack(this.dataList)
        .then((res) => {
          this.saveLoading = false;
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            color: "accent",
            timeout: 2000,
            message: "数据保存成功！",
            position: "top",
          });
          this.$emit("success");
          this.closeSaveForm();
        })
        .catch(() => {
          this.saveLoading = false;
        });
    },
    uploadFile(files, index) {
      let type =
        files.type.indexOf("video") != -1 || files.type.indexOf("image") != -1;
      if (type) {
        UploadSelfFile("studentIcon", files, (res) => {
          if (res.Code == 1) {
            this.dataList[index].PhotoList.push(res.FileUrl);
          }
        });
      } else {
        this.$q.notify({
          type: "warning",
          timeout: 2000,
          message: "请上传图片或视频",
          position: "top",
        });
      }
    },
    //删除图片
    deleteItemImg(index, index1) {
      this.dataList[index].PhotoList.splice(index1, 1);
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  color: #8c939d;
  position: relative;
  overflow: hidden;
}
.addDutyMain {
  display: inline-block;
  width: 118px;
  height: 118px;
  font-size: 70px;
  border: 1px dashed #d9d9d9;
  line-height: 120px;
}
.ItemImgDiv {
  width: 118px;
  height: 118px;
  position: relative;
  overflow: hidden;
  margin: 0 10px 10px 0;
  display: inline-block;
}
._delete_img {
  position: absolute;
  top: 0px;
  height: 82px;
  width: 143px;
  line-height: 34px;
  text-align: center;
  background-color: rgba(2, 2, 2, 0.6);
  display: inherit;
  opacity: 0;
  transition: all linear 0.5s;
}
._delete_img i.iconfont {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #e95252 !important;
  background-color: rgba(251, 251, 251, 0.9);
  margin-top: 26px;
}
._upload_box ul li {
  float: left;
  height: 82px;
  width: 143px;
  padding: 0px 20px 20px 0;
  text-align: center;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}
._upload_box ul li img {
  height: 82px;
  width: 143px;
}
._upload_box ul li:hover ._delete_img {
  opacity: 1;
}
._upload_tips {
  font-size: 12px;
  position: absolute;
  top: 71%;
  width: 100%;
  left: 0;
  text-align: center;
  color: #949494;
}
</style>
