<template>
  <div style=" position: relative;">
    <div class="div_btn">
      <el-button size="mini"
                 type="default"
                 @click="diaCancel">取消返回</el-button>
      <el-button size="mini"
                 type="primary"
                 @click="submitCode">提交</el-button>
    </div>

    <el-tabs v-model="activeName"
             @tab-click="tabClick"
             class="el-tabs">
      <el-tab-pane label="功能说明"
                   name="desc">
        <el-form :inline="true"
                 :model="dataForm"
                 class="form">
          <el-form-item label="版本功能说明"
                        prop="versionDesc"
                        label-width="150px"
                        style="display:block">
            <el-input type="textarea"
                      :autosize="{ minRows: 3, maxRows: 6}"
                      :rows="4"
                      resize="none"
                      style="width:600px"
                      maxlength="100"
                      show-word-limit
                      placeholder='请输入版本功能说明'
                      v-model="dataForm.versionDesc">
            </el-input>
            <div class="el-upload__tip">小程序版本说明和功能解释,最多不超过100个字</div>
          </el-form-item>

          <el-form-item label="图片预览"
                        label-width="150px"
                        style="display:block">
            <el-upload class="avatar-uploader"
                       ref="uploadPic"
                       :action="upload_url"
                       list-type="picture-card"
                       :name="upload_name"
                       :on-exceed="exceedPic"
                       :on-remove="removePic"
                       :file-list="picList"
                       :limit="10"
                       :http-request="uploadPic">
              <span class="font-14">选择图片</span>
              <div slot="tip"
                   class="el-upload__tip">可上传小程序截图，最多上传10张图片，图片支持jpg、jpeg、bmp、git或png格式，图片大小不超过5M</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="视频预览"
                        label-width="150px"
                        style="display:block">
            <el-upload class="avatar-uploader"
                       ref="uploadVedio"
                       :action="upload_url"
                       :name="upload_name"
                       :on-exceed="exceedVedio"
                       :on-remove="removeVedio"
                       :file-list="videoList"
                       :limit="1"
                       :http-request="uploadVedio">
              <el-button size="small"
                         type="primary">选择视频</el-button>
              <div slot="tip"
                   class="el-upload__tip">可上传小程序使用录屏，最多上传1个视频。视频支持mp4格式，视频大小不超过20M</div>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="审核加急"
                        label-width="150px"
                        style="display:block">
            <el-radio-group v-model="dataForm.isSpeed">
              <el-radio :label="false">不加急 </el-radio>
              <el-radio :label="true">加急 </el-radio>
            </el-radio-group>
            <div class="el-upload__tip">一年3次，不加急：预计在1-7天内完成，加急：预计再2-12小时内完成</div>
          </el-form-item> -->
        </el-form>

      </el-tab-pane>

      <el-tab-pane label="审核项"
                   name="item">
        <submit-item ref="ref_submit_item"></submit-item>
      </el-tab-pane>

      <el-tab-pane label="UGC信息安全声明"
                   name="ugc">
        <div class="el-upload__tip">当小程序第一次提交审核且类目包含社交-社区/论坛、社交-笔记、社交-问答其中之一时需填写UGC场景信息</div>
        <el-form :inline="true"
                 :model="dataForm.ugcDeclare"
                 class="form">
          <el-form-item label="UGC场景"
                        label-width="150px"
                        style="display:block">
            <el-checkbox-group v-model="dataForm.ugcDeclare.scene">
              <el-checkbox @change="scene0"
                           :label="0">不涉及用户生成内容</el-checkbox>
              <el-checkbox :label="1"
                           :disabled="sceneDisabled">用户资料</el-checkbox>
              <el-checkbox :label="2"
                           :disabled="sceneDisabled">图片</el-checkbox>
              <el-checkbox :label="3"
                           :disabled="sceneDisabled">视频</el-checkbox>
              <el-checkbox :label="4"
                           :disabled="sceneDisabled">文本</el-checkbox>
              <el-checkbox :label="5"
                           :disabled="sceneDisabled"
                           @change="sceneOther">其他</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div v-if="!sceneDisabled">
            <el-form-item label="其他场景"
                          label-width="150px"
                          style="display:block">
              <el-input type="textarea"
                        :disabled="sceneOtherDisabled"
                        :rows="4"
                        resize="none"
                        style="width:600px"
                        maxlength="256"
                        show-word-limit
                        placeholder='请输入其他场景'
                        v-model="dataForm.ugcDeclare.otherSceneDesc">
              </el-input>
              <div class="el-upload__tip">当scene选其他时的说明,不超时256字</div>
            </el-form-item>
            <el-form-item label="内容安全机制"
                          label-width="150px"
                          style="display:block">
              <el-checkbox-group v-model="dataForm.ugcDeclare.method">
                <el-checkbox :label="1">使用平台建议的内容安全API</el-checkbox>
                <el-checkbox :label="2">使用其他的内容审核产品</el-checkbox>
                <el-checkbox :label="3">通过人工审核把关</el-checkbox>
                <el-checkbox :label="4">未做内容审核把关</el-checkbox>
              </el-checkbox-group>
              <!-- <div class="el-upload__tip">1.使用平台建议的内容安全API，2.使用其他的内容审核产品，3.通过人工审核把关，4.未做内容审核把关</div> -->
            </el-form-item>
            <el-form-item label="是否有审核团队"
                          label-width="150px"
                          style="display:block">
              <el-radio-group v-model="dataForm.ugcDeclare.hasAuditTeam">
                <el-radio :label="0">无 </el-radio>
                <el-radio :label="1">有 </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审核机制"
                          label-width="150px"
                          style="display:block">
              <el-input type="textarea"
                        :rows="4"
                        resize="none"
                        style="width:600px"
                        maxlength="256"
                        show-word-limit
                        placeholder='请输入审核机制'
                        v-model="dataForm.ugcDeclare.auditDesc">
              </el-input>
              <div class="el-upload__tip">说明当前对UGC内容的审核机制,不超过256字</div>
            </el-form-item>
          </div>
        </el-form>

      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import SubmitItem from './SubmitItem'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      loading: false,
      codeId: '', // 上传代码id，父组件传

      // tab页相关
      activeName: 'desc',

      sceneDisabled: true, // 场景是否禁用
      sceneOtherDisabled: true, // 其他场景是否禁用
      dataForm: {
        isSpeed: false, // 是否加急
        isRepeat: false, // 上一次提审是否是加急，初次提审都是false
        versionDesc: '', // 小程序版本说明和功能解释
        ugcDeclare: { // 用户生成内容场景（UGC）信息安全声明
          scene: [1, 2, 4], // UGC场景 0,不涉及用户生成内容, 1.用户资料,2.图片,3.视频,4.文本,5其他, 可多选,当scene填0时无需填写下列字段
          otherSceneDesc: '', // 当scene选其他时的说明,不超时256字
          method: [2], // 内容安全机制 1.使用平台建议的内容安全API,2.使用其他的内容审核产品,3.通过人工审核把关,4.未做内容审核把关
          hasAuditTeam: 1, // 是否有审核团队, 0.无,1.有,默认0
          auditDesc: '严重色情内容、轻微色情内容、涉政负面内容、严重辱骂、涉政暴恐（恶搞领导人、特殊标识、特殊着装、枪支、利器、血腥场景）' // 说明当前对UGC内容的审核机制,不超过256字
        }
      },

      // 上传素材
      dialogImageUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/mediaupload',
      upload_url: '', // 上传URL
      upload_name: '', // 图片或视频名称
      picList: [], // 预览列表
      videoList: [], // 预览列表

      // 弹出框相关
      dialog: {
        title: '',
        visible: false
      }
    }
  },
  components: {
    CDialog, SubmitItem
  },
  mounted () {
  },
  computed: {
    tableHeight () {
      return this.clientHeight * 0.56 - 100
    },
    ...mapGetters(['clientHeight'])
  },
  methods: {
    initData (codeId) {
      this.codeId = codeId
    },
    reseatDataForm () {
      this.dataForm = {
        isSpeed: false, // 是否加急
        isRepeat: false, // 上一次提审是否是加急，初次提审都是false
        versionDesc: '', // 小程序版本说明和功能解释
        ugcDeclare: { // 用户生成内容场景（UGC）信息安全声明
          scene: [1, 2, 4], // UGC场景 0,不涉及用户生成内容, 1.用户资料,2.图片,3.视频,4.文本,5其他, 可多选,当scene填0时无需填写下列字段
          otherSceneDesc: '', // 当scene选其他时的说明,不超时256字
          method: [2], // 内容安全机制 1.使用平台建议的内容安全API,2.使用其他的内容审核产品,3.通过人工审核把关,4.未做内容审核把关
          hasAuditTeam: 1, // 是否有审核团队, 0.无,1.有,默认0
          auditDesc: '严重色情内容、轻微色情内容、涉政负面内容、严重辱骂、涉政暴恐（恶搞领导人、特殊标识、特殊着装、枪支、利器、血腥场景）' // 说明当前对UGC内容的审核机制,不超过256字
        }
      }
    },
    tabClick (tab) {
      if (tab.name === 'item') {
        this.$refs['ref_submit_item'].initData(this.codeId)
      }
      if (tab.name === 'ugc') {
        this.scene0(false)
      }
    },
    removeVedio (file) {
      this.videoList.splice(this.videoList.findIndex(item => item.uid === file.uid), 1)
      // console.log(this.videoList)
    },
    removePic (file) {
      this.picList.splice(this.picList.findIndex(item => item.uid === file.uid), 1)
      // console.log(this.picList)
    },
    exceedPic: () => {
      this.$message({
        message: '最多上传5张预览图片',
        type: 'warning'
      })
    },
    exceedVedio: () => {
      this.$message({
        message: '最多上传2个预览视频',
        type: 'warning'
      })
    },

    // 上传视频
    uploadVedio: (params) => {
      let file = params.file
      let fileType = file.type
      let isVideo = fileType.indexOf('video') !== -1
      let fileUrl = this.$refs.uploadVedio.uploadFiles[this.videoList.length].url
      file.url = fileUrl
      this.videoList.push(file)

      let isLt20M = file.size / 1024 / 1024 < 20
      if (!isLt20M) {
        this.$message({
          message: '上传视频大小不能超过 20MB!',
          type: 'warning'
        })
        this.videoList.pop()
        return
      }
      let isMP4 = file.type === 'video/mp4'
      if (!isVideo || !isMP4) {
        this.$message({
          message: '请选择mp4格式的视频!',
          type: 'warning'
        })
        this.videoList.pop()
        return
      }
      this.startLoading()
      this.upload_name = 'file_video[]'
      let formData = new FormData()

      formData.append('type', fileType)
      formData.append('media', file)
      formData.append('codeId', this.codeId)
      window.app.ajax.post2(this.dialogImageUrl, formData,
        (data, rspMsg) => {
          this.endLoading()
          if (data.code === 0) {
            this.videoList[this.videoList.length - 1].mediaid = data.data
          } else {
            this.videoList.pop()
            this.$message.error(rspMsg)
          }
        },
        (rspMsg, data) => {
          this.videoList.pop()
          this.endLoading()
          this.$message.error(rspMsg)
        })
    },
    // 上传图片
    uploadPic: (params) => {
      let file = params.file
      let fileType = file.type
      let isImage = fileType.indexOf('image') !== -1
      let fileUrl = this.$refs.uploadPic.uploadFiles[this.picList.length].url
      file.url = fileUrl
      this.picList.push(file)

      let isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message({
          message: '上传图片大小不能超过 5MB!',
          type: 'warning'
        })
        this.picList.pop()
        return
      }
      if (!isImage) {
        this.$message({
          message: '请选择图片!',
          type: 'warning'
        })
        this.picList.pop()
        return
      }
      // console.log(this.picList)

      this.upload_name = 'file_img[]'
      let formData = new FormData()
      this.startLoading()
      formData.append('type', fileType)
      formData.append('media', file)
      formData.append('codeId', this.codeId)
      window.app.ajax.post2(this.dialogImageUrl, formData,
        (data, rspMsg) => {
          this.endLoading()
          if (data.code === 0) {
            this.picList[this.picList.length - 1].mediaid = data.data
          } else {
            this.picList.pop()
            this.$message.error(rspMsg)
          }
        },
        (rspMsg, data) => {
          this.picList.pop()
          this.endLoading()
          this.$message.error(rspMsg)
        }, { headers: { 'Content-Type': 'multipart/form-data' } })
    },
    // UGC场景选中0以后的事件
    scene0 (value) {
      if (value) { // 选中
        this.sceneDisabled = true
        this.UGCSence0()
      } else {
        this.sceneDisabled = false
      }
    },
    // UGC场景选中其他以后的事件
    sceneOther (value) {
      if (value) { // 选中
        this.sceneOtherDisabled = false
      } else {
        this.sceneOtherDisabled = true
        this.dataForm.ugcDeclare.otherSceneDesc = ''
      }
    },
    // 重置UGC场景数据
    resetUGC () {
      this.dataForm.ugcDeclare.scene = [1, 2, 4]
      this.dataForm.ugcDeclare.otherSceneDesc = ''
      this.dataForm.ugcDeclare.method = [2]
      this.dataForm.ugcDeclare.hasAuditTeam = 1
      this.dataForm.ugcDeclare.auditDesc = '严重色情内容、轻微色情内容、涉政负面内容、严重辱骂、涉政暴恐（恶搞领导人、特殊标识、特殊着装、枪支、利器、血腥场景）'
    },
    // UGC场景选择0的初始化
    UGCSence0 () {
      this.dataForm.ugcDeclare.scene = [0]
      this.dataForm.ugcDeclare.otherSceneDesc = ''
      this.dataForm.ugcDeclare.method = [1]
      this.dataForm.ugcDeclare.hasAuditTeam = 0
      this.dataForm.ugcDeclare.auditDesc = ''
    },
    submitCode () {
      let params = {
        codeId: this.codeId,
        ugcDeclare: this.dataForm.ugcDeclare // 信息安全
      }
      // 功能说明
      // 解析预览信息
      let picIdList = []
      let videoIdList = []
      this.picList.forEach(element => {
        picIdList.push(element.mediaid)
      })
      // // eslint-disable-next-line
      // debugger
      this.videoList.forEach(element => {
        videoIdList.push(element.mediaid)
      })

      // 预览信息排除空数组
      if (picIdList.length > 0 || videoIdList.length > 0) {
        params.previewInfo = {}
        if (picIdList.length > 0) {
          params.previewInfo.picIdList = picIdList
        }
        if (videoIdList.length > 0) {
          params.previewInfo.videoIdList = videoIdList
        }
        // console.log('预览图片：')
        // console.log(params.previewInfo.picIdList)
        // console.log('预览视频：')
        // console.log(params.previewInfo.videoIdList)
      }
      // 加急 
      // params.isSpeed = this.dataForm.isSpeed
      params.isSpeed = false
      params.isRepeat = false// 上一次提审是否是加急，初次提审都是false

      // 小程序描述排除空内容
      if (this.dataForm.versionDesc !== '') {
        params.versionDesc = this.dataForm.versionDesc
      }

      // 审核项
      const itemList = this.$refs['ref_submit_item'].getItemList()
      if (itemList.length > 0) {
        params.itemList = itemList
      }

      console.log(params)

      const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/audit'
      // const url = '/third/code/audit'
      this.startLoading()
      window.app.ajax.post(url, params,
        (data, rspMsg) => {
          this.endLoading()
          this.$message.success('提交审核成功，请等待审核结果')
          this.resetData()
          this.activeName = 'desc'
          this.$emit('okSubmit')
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })
    },
    // 取消
    diaCancel () {
      this.resetData()
      this.activeName = 'desc'
      this.$emit('cancleSubmit')
    },
    resetData () {
      this.reseatDataForm()
      // 功能说明
      this.picList = []
      this.videoList = []

      // 审核项
      this.$refs['ref_submit_item'].reseatData()
      // 信息安全
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  props: {
  }
}
</script>
<style scoped >
.el-tabs {
  margin: 0 20px;
}
.el-upload__tip {
  color: rgb(155, 155, 155);
  margin: 0;
}
.form {
  margin-top: 30px;
}
.div_btn {
  z-index: 10;
  position: absolute;
  top: 5px;
  right: 30px;
}
</style>
