<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-button type="primary" size="small" icon="el-icon-plus" @click="infoType = true;infoVis = true">添加产品</el-button>
    <el-table
      :data="list"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="title"
        label="产品名称"
        align="center"
      />
      <el-table-column
        label="产品详情"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="infoPreview(row)">预览效果</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="添加时间"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="setInfoEdit(row)">修改详情</el-button>
          <el-button type="text" @click="submitDelate(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="产品详情"
      :visible.sync="infoVis"
      :close-on-click-modal="false"
    >
      <el-form label-width="70px">
        <el-form-item label="产品名称:">
          <el-input v-model="info.title" />
        </el-form-item>
        <el-form-item label="上传视频:">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="uploadProductVideo"
            accept=".flv, .mp4, .m3u8, .ts, .3gp, .mov, .avi, .wmv"
          >
            <div class="video_upload_container">
              <el-button type="primary" size="small" style="margin-bottom: 10px;" :disabled="video_progress.show">上传视频</el-button>
              <div v-if="video_progress.show">
                <el-progress :percentage="video_progress.value" style="width: 200px" />
              </div>
              <video v-if="info.video" :src="info.video" controls class="preview_video" />
            </div>
            <div slot="tip">
              <p style="margin: 0; line-height: normal;">上传视频大小不超过50M</p>
              <p style="margin: 0; line-height: normal;">上传视频类型为: .flv, .mp4, .m3u8, .ts, .3gp, .mov, .avi, .wmv 后缀的文件类型</p>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="产品详情:">
          <editor ref="infoEditor" :value="info.content" />
        </el-form-item>
        <el-form-item>
          <el-button v-if="infoType" type="primary" size="small" @click="submitAdd">添加</el-button>
          <el-button v-else type="primary" size="small" @click="submitEdit">修改</el-button>
          <el-button size="small" @click="resetInfo">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="产品预览"
      :visible.sync="previewVis"
      width="420px"
      top="50px"
    >
      <div class="preview_container">
        <div class="product_nav">
          <div class="nav_item active">{{ previewInfo.title }}</div>
        </div>
        <div class="produce_main">
          <video v-if="previewInfo.video" controls :src="previewInfo.video" />
          <div class="product_info" v-html="previewInfo.content" />
          <div class="share_container">
            <div class="share_eqcord">
              <img src="@/assets/product/eqcord.png" class="eqcord_img">
              <p>微信扫一扫</p>
            </div>
            <div class="share_info">
              <p class="fixed_p">扫一扫添加微信了解详情 或拨打联系电话</p>
              <p class="share_mobile">123 456 78911</p>
              <p class="share_call">拨打电话</p>
            </div>
          </div>
        </div>
        <div class="set_share_btn">
          <div class="share_btn share_one">单个分享</div>
          <div class="share_btn share_all">全部分享</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { productAdd, productGetList, productDetail, productEdit, uploadProductVideo } from '@/api/product'
export default {
  data() {
    return {
      infoVis: false,
      infoType: true,
      previewVis: false,
      info: {
        title: '',
        content: '',
        video: '',
        id: ''
      },
      list: [],
      loadingFull: false,
      previewInfo: {},
      video_progress: {
        show: false,
        value: 0
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 上传视频
    uploadProductVideo(params) {
      const file = params.file
      const { size, type } = file
      if (size > 50 * 1024 * 1024) {
        this.$message.error('视频最大不超过50M')
        return false
      }
      const fileType = ['video/x-flv', 'video/mp4', 'application/x-mpegURL', 'video/MP2T', 'video/3gpp', 'video/quicktime', 'video/x-msvideo', 'video/x-ms-wmv']
      if (!fileType.includes(type)) {
        this.$message.error('上传文件不是视频类型')
        return false
      }
      const formData = new FormData()
      formData.append('video', file)
      const _this = this
      this.video_progress.show = true
      uploadProductVideo(formData, ({ loaded, total }) => {
        const complete = (loaded / total * 100) | 0
        _this.video_progress.value = complete
      }).then(res => {
        this.video_progress.show = false
        _this.video_progress.value = 0
        if (res.code === 200) {
          this.$message.success('上传视频成功')
          this.info.video = res.data
        } else {
          this.$message.error(res.message || '上传视频失败')
        }
      }).catch(() => {
        this.video_progress.show = false
        _this.video_progress.value = 0
        this.$message.error('上传视频失败')
      })
    },
    // 获取列表
    getList() {
      this.loadingFull = true
      productGetList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.list = res.data.list
        } else {
          this.$message.error(res.message || '获取产品列表失败')
        }
      }).catch(() => {
        this.loadingFull = false
        this.$message.error('获取产品列表失败')
      })
    },
    // 预览
    infoPreview(row) {
      this.previewInfo = row
      this.previewVis = true
    },
    // 删除
    submitDelate(id) {
      this.$confirm('确认删除这个产品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingFull = true
        productDetail({ id }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.$message.success(res.message)
            this.getList()
          } else {
            this.$message.error(res.message || '删除失败')
          }
        }).catch(() => {
          this.loadingFull = false
          this.$message.error('删除失败')
        })
      }).catch(() => {})
    },
    // 编辑
    setInfoEdit(row) {
      const { id, title, content } = row
      this.info.id = id
      this.info.title = title
      this.info.content = content
      this.infoType = false
      this.infoVis = true
    },
    // 重置
    resetInfo() {
      this.info = {
        id: '',
        title: '',
        content: '',
        video: ''
      }
      this.infoType = true
      this.infoVis = false
    },
    // 修改
    submitEdit() {
      if (!this.info.title) {
        this.$message.error('请填写产品名称')
        return false
      }
      const content = this.$refs.infoEditor.getContent()
      if (!content && !this.info.content) {
        this.$message.error('请填写产品详情')
        return false
      }
      this.loadingFull = true
      productEdit({
        title: this.info.title,
        content: content || this.info.content,
        id: this.info.id,
        video: this.info.video
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.$message.success(res.message)
          this.resetInfo()
          this.getList()
        } else {
          this.$message.error(res.message || '修改失败')
        }
      }).catch(() => {
        this.loadingFull = false
        this.$message.error('修改失败')
      })
    },
    // 添加
    submitAdd() {
      if (!this.info.title) {
        this.$message.error('请填写产品名称')
        return false
      }
      const content = this.$refs.infoEditor.getContent()
      if (!content) {
        this.$message.error('请填写产品详情')
        return false
      }
      this.loadingFull = true
      productAdd({
        title: this.info.title,
        content,
        video: this.info.video
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.$message.success(res.message)
          this.resetInfo()
          this.getList()
        } else {
          this.$message.error(res.message || '添加失败')
        }
      }).catch(() => {
        this.loadingFull = false
        this.$message.error('添加失败')
      })
    }
  }
}
</script>
<style lang="scss">
  .preview_video {
    width: 500px;
    margin-bottom: 10px;
  }
  .video_upload_container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }
  .tox-tinymce-aux {
    z-index: 100001 !important;
  }
</style>
<style lang="scss" scoped>
  .tableBorder {
    margin: 20px 0;
  }
  .preview_container {
    width: 375px;
    p {
      margin: 0;
    }
    .set_share_btn {
      width: 100%;
      height: 44px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .share_btn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        height: 100%;
        cursor: pointer;
      }
      .share_one {
        background-color: #FFFFFF;
        color: #EA4A41;
      }
      .share_all {
        background-color: #EA4A41;
        color: #FFFFFF;
      }
    }
    .product_nav {
      width: 100%;
      height: 50px;
      color: #333333;
      font-size: 16px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 26px;
      box-sizing: border-box;
      z-index: 99;
      background-color: #FFFFFF;
      .nav_item {
        height: 100%;
        border-bottom: 2px solid #FFFFFF;
      }
      .active {
        color: #EA4A41 !important;
        border-bottom-color: #EA4A41 !important;
      }
    }
    .produce_main {
      position: relative;
      min-height: 583px;
      video {
        width: 100%;
        height: auto;
      }
    }
    .product_info {
      width: 100%;
      /deep/ img {
        width: 100%;
        height: auto;
      }
    }
    .share_container {
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0;
      width: calc(100% - 23px);
      margin: 0 auto;
      box-shadow: 0 0 10px rgba(106, 106, 106, 0.5);
      background-color: #FFFFFF;
      padding: 20px 27.5px;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      .share_eqcord {
        color: #333333;
        font-size: 16px;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-right: 25px;
        .eqcord_img {
          width: 90px;
          height: 90px;
          margin-bottom: 10.5px;
        }
      }
      .share_info {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        color: #333333;
        text-align: center;
        .fixed_p {
          font-size: 16px;
          line-height: 25px;
        }
        .share_mobile {
          font-size: 18px;
          line-height: 25px;
        }
        .share_call {
          color: #FFFFFF;
          font-size: 16px;
          height: 27px;
          border-radius: 27px;
          line-height: 27px;
          background-color: #4CBF00;
          width: 90px;
          text-align: center;
        }
      }
    }
  }
</style>
