<template>
  <div v-loading="fullLoading" class="content">
    <!-- 首页 -->
    <div style="font-size: 18px; font-weight: bold; margin-bottom: 24px;">
      大屏背景设置
    </div>
    <div style="margin-bottom:24px;">
      <!-- <el-button v-if="!isEdit" @click="edit">修改</el-button> -->
      <el-button type="primary" @click="save">保存</el-button>
      <!-- <el-button v-if="isEdit" @click="isEdit = false, getBg()">取消</el-button> -->
    </div>
    <!-- <div v-if="!isEdit" class="box">
      <div v-if="isVideo" class="video_box">
        <video :src="videoUrl" style="width: 500px;height: 300px;" controls />
      </div>
      <div v-else class="img_box">
        <el-image :src="item" v-for="(item, i) in params.content" :key="i" class="img_item" />
      </div>
    </div> -->
    <div class="upload_box">
      <el-upload class="upload-demo" drag multiple action="" :http-request="handleUpload" :show-file-list="false">
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div v-if="params.content.length > 0" class="imgs_box">
        <div v-for="(item, i) in params.content" :key="i">
          <el-image :src="item.url" style="width: 320px;height: 180px;" class="img_item" v-if="!item.isVideo" />
          <video :src="item.url" controls v-else style="width: 320px;height: 180px;"/>
          <i class="el-icon-delete" @click="deleteImg(i)" />
        </div>
      </div>
    </div>
    <!-- <el-tabs v-else v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="上传图片" name="first">
        <el-upload class="upload-demo" drag multiple action="" :http-request="handleUploadImage" :show-file-list="false">
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <div v-if="params.content.length > 0" class="imgs_box">
          <div v-for="(item, i) in params.content" :key="i">
            <el-image :src="item" style="width: 320px;height: 180px;" class="img_item" />
            <i class="el-icon-delete" @click="deleteImg(i)" /></span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="上传视频" name="second">
        <el-upload class="upload-demo" drag action="" :http-request="handleUploadVideo" :show-file-list="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <video v-if="params.content.length > 0 && isVideo" :src="params.content[0]" controls
          style="width: 300px;height:150px;" />
      </el-tab-pane>
    </el-tabs> -->

  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { backgroundModule, editModule } from "@/api/module";
import { uploadFile } from "@/api/upload";

export default {
  name: 'Dashboard',

  components: {},
  data() {
    return {
      params: {
        title: '',
        id: '',
        content: []
      },
      isEdit: false,
      isVideo: false,
      videoUrl: '',
      activeName: 'first',
      fullLoading: false
    }
  },
  methods: {
    // 删除某一个轮播图
    deleteImg(i) {
      this.params.content.splice(i, 1)
    },
    edit() {
      // const result = this.params.content[0].split('.').pop()
      // if (result === 'mp4') {
      //   this.activeName = 'second'
      // }
      this.isEdit = true
    },
    // handleUploadImage(params) {
    //   this.handleUpload(params, 0)
    // },
    // handleUploadVideo(params) {
    //   this.handleUpload(params, 1)
    // },
    handleClick(tab, event) {
      this.getBg()
      // this.params.content = []
    },
    // 保存
    save() {
      editModule(this.params).then((res) => {
        const { code, msg } = res
        if (code === 200) {
          this.$message.success("保存成功！")
          this.getBg()
          this.isEdit = false
        } else {
          this.$message.error(msg)
        }
      })
    },
    // 获取当前背景
    getBg() {
      backgroundModule().then((res) => {
        const { code, msg, data } = res
        if (code === 200) {
          if (data.content) {
            data.content = JSON.parse(data.content)
            // const result = data.content[0].split('.').pop()
            // if (result === 'mp4') {
            //   this.isVideo = true
            //   this.videoUrl = data.content[0]
            // } else {
            //   this.isVideo = false
            // }
          }
          this.params = data
        } else {
          this.$message.error(msg)
        }
      })
    },
    // 背景上传
    handleUpload(params) {
      const file = params.file
      // if (type === 0) {
      //   const imgType = ['image/png', 'image/jpg', 'image/jpeg']
      //   if (imgType.indexOf(file.type) === -1) {
      //     this.$message.warning('上传图片格式必须为: png或jpg格式')
      //     return false
      //   }
      // } else {
      //   const videoType = ['video/mp4']
      //   if (videoType.indexOf(file.type) === -1) {
      //     this.$message.warning('上传视屏格式必须为: mp4格式')
      //     return false
      //   }
      // }
      const formData = new FormData()
      formData.append('file', file)
      formData.append('dir', 'image/background')
      this.fullLoading = true
      uploadFile(formData)
        .then((res) => {
          try {
            const { message, code, data } = res
            if (code === 200) {
              this.fullLoading = false
              const result = data.split('.').pop()
              this.params.content.push({ url: 'http://api.xysyszhd.dev.xmnk.cn/storage/' + data, isVideo: result === 'mp4' })
              this.$message.error(message)
              this.fullLoading = false
            }
          } catch (e) {
            this.fullLoading = false
            console.log(`上传失败: ${e}`)
          }
        })
        .catch(() => {
          this.thumbLoad = false;
        });
    },
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    this.getBg();
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  position: relative;
  .upload_box{
    display: flex;
    justify-content: flex-start;
    align-content: center;
    .upload-demo{
      margin-right:24px;
    }
  }

  .imgs_box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .box {
    .video_box {
      video {
        margin-right: 10px;
      }
    }


  }

  .img_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .img_item {
    width: 320px;
    height: 180px;
    // margin-right: 10px;
  }

  .el-icon-delete {
    margin:0 24px 0 10px;
    color: red;
  }
}
</style>
