<template>
  <el-tabs type="border-card" v-model="objData.type">
    <el-tab-pane name="text" v-if="typeList.includes('text')" :disabled="tabsDisabledFn('text')">
      <span slot="label"><i class="el-icon-document"></i> 文本</span>
      <el-input
        v-if="objData.type === 'text'"
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="objData.mediaList[0].content">
      </el-input>
    </el-tab-pane>
    <el-tab-pane name="image" v-if="typeList.includes('image')" :disabled="tabsDisabledFn('image')">
      <span slot="label"><i class="el-icon-picture"></i> 图片</span>
<!--      {{ fileList }}-->
      <div class="col-all tc df_center">
        <el-upload
          style="width: 70%"
          :action="actionUrl"
          :headers="headers"
          multiple
          :limit="1"
          :on-success="handleUploadSuccess"
          :on-remove="handleRemove"
          :file-list="fileList"
          :before-upload="beforeImageUpload"
          :data="{ mediaType: 1 }"
          list-type="picture">
          <el-button v-if="fileList.length === 0" type="primary">上传图片</el-button>
          <div v-if="fileList.length === 0" slot="tip" class="el-upload__tip">
            支持bmp/png/jpeg/jpg/gif格式，大小不超过10M
          </div>
        </el-upload>
      </div>
    </el-tab-pane>
    <el-tab-pane name="video" v-if="typeList.includes('video')" :disabled="tabsDisabledFn('video')">
      <span slot="label"><i class="el-icon-share"></i> 视频</span>
      <el-row v-if="objData.type === 'video'">
        <el-input v-model="objData.mediaList[0].title" placeholder="请输入标题"></el-input>
        <div style="margin: 20px 0;"></div>
        <el-input v-model="objData.mediaList[0].introduction" placeholder="请输入描述"></el-input>
        <el-upload
          class="avatar-uploader el-upload--text"
          :headers="headers"
          :action="actionUrl"
          :file-list="videoFileList"
          :show-file-list="false"
          :limit="1"
          :on-success="handleVideoSuccess"
          :before-upload="beforeUploadVideo"
          :on-progress="uploadVideoProcess"
          :data="videoUploadData"
          >
<!--          <video v-if="videoForm.Video !== '' && videoFlag === false" :src="videoForm.Video" class="avatar" controls="controls">您的浏览器不支持视频播放</video>-->
          <i v-if="videoFileList.length === 0 && videoFlag === false" class="el-icon-plus avatar-uploader-icon mt20"></i>
          <el-progress v-if="videoFlag === true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
          <div v-if="videoFileList.length !== 0" @click.stop="''" class="mt20">
            <i class="el-icon-document"></i>
            <span class="ml15 mr15">{{ videoFileList[0]['name'] }}</span>
            <i class="el-icon-close" @click="handleVideoRemove"></i>
          </div>
        </el-upload>
        <P class="text">支持mp4格式，大小不超过10M</P>
      </el-row>
    </el-tab-pane>
    <el-tab-pane name="news" v-if="typeList.includes('news')" :disabled="tabsDisabledFn('news')">
      <span slot="label"><i class="el-icon-news"></i> 图文</span>
      <el-row>
<!--        {{ imageTextList }}-->
        <template v-for="(item, index) in imageTextList">
          <div v-if="item.type === 'text'" class="mb20 df">
            <el-input
              style="flex: 95;"
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              v-model="item.content">
            </el-input>
            <div style="flex: 5;" class="df_center">
              <i class="el-icon-circle-close f22 del_clr pointer ml15" @click="deleteItem(index)"></i>
            </div>
          </div>
          <div v-if="item.type === 'image'" class="df">
            <div style="flex: 95;" class="col-all tc df_center mb20">
              <el-upload
                style="width: 70%"
                :action="actionUrl"
                :headers="headers"
                multiple
                :limit="1"
                :on-success="(response, file, fileList) => handleUploadSuccess1(response, file, fileList, index)"
                :on-remove="(file, fileList) => handleRemove1(file, fileList, index)"
                :file-list="item.fileList"
                :before-upload="beforeImageUpload1"
                :data="{ mediaType: 1 }"
                list-type="picture">
                <el-button v-if="item.fileList.length === 0" type="primary">上传图片</el-button>
                <div v-if="item.fileList.length === 0" slot="tip" class="el-upload__tip">
                  支持bmp/png/jpeg/jpg/gif格式，大小不超过10M
                </div>
              </el-upload>
            </div>
            <div style="flex: 5;" class="df_center">
              <i class="el-icon-circle-close f22 del_clr pointer ml15" @click="deleteItem(index)"></i>
            </div>
          </div>
        </template>
        <el-button type="primary" @click="addText" size="mini">新增文本</el-button>
        <el-button type="primary" @click="addImg" size="mini">新增图片</el-button>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  // import WxNews from '@/components/wechat/WxNews'
  import store from '@/store'

  export default {
    name: "wxReplySelect",
    // components: {
    //   WxNews,
    // },
    props: {
      objData: {
        type: Object
      },
      typeList: {
        type: Array,
        default: () => ['text', 'image', 'voice', 'video', 'news']
      },
      handleType: {
        type: String,
        default: 'add'
      }
    },
    data() {
      return {
        fileList: [],
        actionUrl: '/admin/sysWxReplyMessage/uploadMedia',
        headers: { Authorization: 'Bearer ' + store.getters.access_token },
        // videoForm: { Video: '' },
        videoUploadPercent: 0, // 视频上传进度条
        videoFlag: false,
        videoFileList: [],
        imageTextList: [] // 图文列表
      }
    },
    computed: {
      videoUploadData() {
        return {
          mediaType: 2,
          title: this.objData.mediaList[0].title,
          introduction: this.objData.mediaList[0].introduction
        }
      }
    },
    mounted() {
      // 编辑状态下, 打开弹窗, 初始化数据
      if (this.handleType === 'edit') {
        if (this.objData.type === 'image') {
          const { name, wxMediaId, url } = this.objData.mediaList[0]
          this.$nextTick(() => {
            this.fileList.push({ name, mediaId: wxMediaId, picUrl: url, url })
          })
        } else if (this.objData.type === 'video') {
          const { name, url, wxMediaId, title, introduction } = this.objData.mediaList[0]
          this.$nextTick(() => {
            this.videoFileList.push({ name, mediaId: wxMediaId, url, introduction, title })
          })
        } else if (this.objData.type === 'news') {
          this.objData.mediaList.forEach(ele => {
            if (ele.mediaType === 0)  { // 文本
              this.imageTextList.push({ type: 'text', content: ele.content })
            } else if (ele.mediaType === 1) { // 图片
              const { name, wxMediaId, url } = ele
              this.imageTextList.push({ type: 'image', fileList: [{ name, mediaId: wxMediaId, url, picUrl: url }] })
            }
          })
        }
      }
    },
    methods: {
      beforeImageUpload(file) {
        const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp' || file.type === 'image/jpg';
        const isLt = file.size / 1024 / 1024 < 10;
        if (!isType) {
          this.$message.error('上传图片格式不对!');
        }
        if (!isLt) {
          this.$message.error('上传图片大小不能超过10M!');
        }
        return isType && isLt;
      },
      handleUploadSuccess(response, file, fileList) {
        if (response.code === 0) {
          // console.log(file);
          // 上传成功
          const { mediaId, url } = response.data
          this.fileList.push({ name: file.name, mediaId, url: file.url, picUrl: url })
        } else {
          this.$message.error('上传出错：' + response.msg)
        }
      },
      handleRemove(file, fileList) {
        this.fileList = []
      },
      beforeImageUpload1(file) {
        const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp' || file.type === 'image/jpg';
        const isLt = file.size / 1024 / 1024 < 10;
        if (!isType) {
          this.$message.error('上传图片格式不对!');
        }
        if (!isLt) {
          this.$message.error('上传图片大小不能超过10M!');
        }
        return isType && isLt;
      },
      handleUploadSuccess1(response, file, fileList, index) {
        if (response.code === 0) {
          // 上传成功
          const { mediaId, url } = response.data
          this.imageTextList[index].fileList.push({ name: file.name, mediaId, url: file.url, picUrl: url })
        } else {
          this.$message.error('上传出错：' + response.msg)
        }
      },
      handleRemove1(file, fileList, index) {
        this.imageTextList[index].fileList = []
      },
      handleVideoSuccess(response, file, fileList) {
        this.videoFlag = false;
        this.videoUploadPercent = 0;
        if(response.code === 0){
          const { introduction, mediaId, title, url } = response.data
          this.videoFileList.push({ name: file.name, mediaId, url, introduction, title })
        }else{
          this.$message.error('视频上传失败，请重新上传！');
        }
      },
      handleVideoRemove() {
        this.videoFileList = []
      },
      beforeUploadVideo(file) { // 验证视频格式和视频大小
        if (!this.objData.mediaList[0].title || !this.objData.mediaList[0].introduction) {
          this.$message.warning('请输入标题和描述！')
          return false
        }
        const isLt10M = file.size / 1024 / 1024  < 10;
        if (['video/mp4'].indexOf(file.type) === -1) {
          this.$message.error('请上传正确的视频格式');
          return false;
        }
        if (!isLt10M) {
          this.$message.error('上传视频大小不能超过10MB哦!');
          return false;
        }
      },
      uploadVideoProcess(event, file, fileList){ // 上传进度显示
        this.videoFlag = true;
        this.videoUploadPercent = Math.floor(file.percentage)
      },
      addText()  { // 图文-新增文本
        this.imageTextList.push({ type: 'text', content: '' })
      },
      addImg() { // 图文-新增图片
        this.imageTextList.push({ type: 'image', fileList: [] })
      },
      deleteItem(index) { // 删除某一项
        this.$confirm('确定删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.imageTextList.splice(index, 1)
        }).catch(() => {});
      },
      tabsDisabledFn(type) {
        return this.handleType === 'edit' && this.objData.type !== type
      }
    }
  };
</script>

<style lang="scss" scoped>
  .col-all {
    border: 1px solid rgb(234, 234, 234);
    padding: 30px 0px;
    //height: 160px;
    width: 100%;
  }

  .avatar-uploader-icon {
    border: 1px solid #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    text-align: center;
  }
</style>
