<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">
              <template v-if="item.PhotoList && item.PhotoList.length > 0">
                <div 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>
              </template>
              <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>