<!--  -->
<template>
  <div class="addVideo">
    <MainTop :crumb="[{ name: '视频管理 > 编辑视频' }]" />
    <div class="table-interface" style="flex: 1">
      <div class="top-body">
        <div class="conten">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="视频名称" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入视频名称"
                style="width: 220px; margin-right: 10px"
              ></el-input>
            </el-form-item>
            <el-form-item label="视频动画：" style="margin-left: 15px">
              <el-upload
              :limit=1
                class="upload-demo"
                drag
                :headers="{
                  token,
                }"
                :file-list="contentUrlList"
                :show-file-list="true"
                :action="uploadUrl"
                :before-remove="beforeRemove"
                :before-upload="beforeUpload"
                :on-success="upload_success"
              >
                <div>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                  </div>
                </div>
                <div class="el-upload__tip" slot="tip">
                  支持视频动画格式：.wmv, .wav, .mp4
                </div>
              </el-upload>
            </el-form-item>

            <el-form-item label="展示封面：" style="margin-left: 15px">
              <!-- style="border: 1px dotted #ccc; width:178px;   border-radius: 5px;" -->
              <Cropper
                :width="512"
                :height="512"
                :fixed-number="[1, 1]"
                :uploadUrl="'/scene/upload'"
                :img="ruleForm.thumb"
                @clearImg="ruleForm.thumb = ''"
                @subUploadSucceed="getShopImages"
              />
              <span class="wwtxt" style="color: #c0c4cc"
                >建议上传512*512的png格式图片</span
              >
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="add" style="margin-left: 50px"
          >编辑</el-button
        >
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import MainTop from '@/components/main-top'
import Cropper from '@/components/cropper'

export default {
  name: 'addVideo',
  components: {
    MainTop,
    Cropper
  },
  data () {
    // 这里存放数据
    return {
      token: window.localStorage.getItem('token'),
      contentUrlList: [],
      uploadUrl: `${this.$serverName}/video/upload`,
      ruleForm: {
        fileName: 'CSBWG',
        name: '',
        thumb: '',
        urlVideo: ''
      },
      rules: {
        name: [{ required: true, message: '请输入视频名称', trigger: 'blur' }]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 上传视频的方法
    beforeRemove (file) {
      console.log(1111111, file)
      this.contentUrlList = []
      this.ruleForm.urlVideo = ''
    },
    beforeUpload (file) {
      console.log(222222222)
      this.loading = true
      let typeArr = ['wmv', 'wav', 'mp4']
      let type = this.isTypeBySend(file.name, typeArr)
      if (!type) {
        this.loading = false
        this.$message.error('支持视频动画格式：.wmv, .wav, .mp4')
        return type
      }
    },
    upload_success (data) {
      console.log(33333333, data)
      this.loading = false
      this.ruleForm.urlVideo = data.data.filePath
      this.fileName = data.data.fileName
      // this.contentUrlList = [
      //   {
      //     name: data.data.split('/')[data.data.split('/').length - 1],
      //     url: data.data
      //   }
      // ]
    },

    getShopImages (img) {
      console.log(999999, img)
      this.ruleForm.thumb = img.filePath
    },
    async add () {
      await this.$refs.ruleForm.validate()
      if (!this.ruleForm.urlVideo) return this.$message.warning('视频动画不能为空')
      if (!this.ruleForm.thumb) return this.$message.warning('封面不能为空')
      this.getList()
    },
    // 编辑接口
    async getList () {
      await this.$http({
        method: 'post',
        url: '/video/save',
        data: this.ruleForm
      })
      this.$message.success('编辑成功')
    },
    // 点击重置
    reset () {
      this.$refs.ruleForm.resetFields()
      this.ruleForm.urlVideo = ''
      this.ruleForm.thumb = ''
      this.contentUrlList = []
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created () {
    // 根据ID获取视频详情
    let result = await this.$http({
      method: 'get',
      url: `video/detail/${this.$route.params.id}`,
      data: this.ruleForm
    })
    this.contentUrlList = [{name: result.data.fileName}]
    console.log(999999999, result)
    this.ruleForm = result.data
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.addVideo {
  display: flex;
  flex-direction: column;
}
.table-interfac {
  overflow-x: hidden;
  height: calc(100% - 3rem);
}
.top-body {
  padding: 24px;
  height: 100%;
  margin: 1rem 0;
}
.conten {
  padding-top: 10px;
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
  margin-bottom: 30px;
}
</style>
