<template>
  <a-card :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
      <!--<a-form-item
        label="视频标识"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 8}, sm: {span: 8} }">
        <a-input v-model="videoName" placeholder="（必填） 区分视频的标识"></a-input>
      </a-form-item>-->

      <a-form-item
        label="选择快手账户"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-select
          v-model="accountId"
          showSearch
          showArrow
          allowClear
          placeholder="选择需创建的快手账户"
          optionFilterProp="children"
          style="width: 500px"
          :filterOption="true"
        >
          <a-select-option
            v-for="userAccount in accountList"
            :key="userAccount.accountId"
            :value="userAccount.accountId"
          >{{userAccount.authName}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="素材投放位置"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 8}, sm: {span: 8} }"
      >
        <a-radio-group buttonStyle="solid" v-model="positionType">
          <a-radio-button value="1">信息流广告</a-radio-button>
          <a-radio-button value="2">视频后贴片广告</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="素材格式"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 8}, sm: {span: 8} }"
      >
        <a-radio-group buttonStyle="solid" v-model="materialType">
          <a-radio-button value="1">竖版</a-radio-button>
          <a-radio-button value="2">横版</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="视频素材上传"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 12} }"
      >
        <upload-to-ali
          v-model="localUrl"
          :customDomain="customDomain"
          multiple
          preview
          :region="region"
          :bucket="bucket"
          :accept="acceptVideo"
          :max="5"
          :size="1024000"
          :accessKeyId="accessKeyId"
          :accessKeySecret="accessKeySecret"
          :before-upload="file"
          :dir="dirVideo"
          @loaded="overUpload"
        ></upload-to-ali>
      </a-form-item>

      <a-form-item
        class="pic_upload_content"
        label="封面图素材上传"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 12} }"
      >
        <upload-to-ali
          v-model="localImageUrl"
          :customDomain="customDomain"
          multiple
          preview
          :region="region"
          :bucket="bucket"
          :accept="acceptImage"
          :max="25"
          :size="1024000"
          :accessKeyId="accessKeyId"
          :accessKeySecret="accessKeySecret"
          :before-upload="file"
          :dir="dirImg"
          @loaded="overUpload"
        ></upload-to-ali>
      </a-form-item>

      <a-form-item
        label="描述"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 8}, sm: {span: 8} }"
      >
        <a-textarea v-model="videoDesc" placeholder="（必填） 说点什么..." :rows="4" />
      </a-form-item>

      <!-- v-decorator="[
       'confirm_videoDesc',
       {rules: [{ required: true, message: 'error:' },
       {validator: handleConfirmValue}]}
      ]"-->
      <a-form-item
        label="格式"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 8}, sm: {span: 2} }"
      >
        <span>视频上传需满足以下条件</span>
        <ul siz>
          <li>
            视频格式为MPEG-4/H.264/HEVC编码的MP4,
            其中，分辨率不小于720p、码率不小于3000kbps以及帧率不小于20fps
          </li>
          <li>音频编码为AAC并且码率不小于64kbps</li>
          <li>上传视频的时长为5秒到10分钟以内且大小不超过 100 M</li>
        </ul>
      </a-form-item>

      <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button htmlType="submit" type="primary">提交</a-button>
        <a-button style="margin-left: 8px">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import UploadToAli from '@femessage/upload-to-ali'
import { postAction, getAction } from '@/api/manage'
import { fileCheck, fileInsert } from '@/api/actor'
import BMF from 'browser-md5-file'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'BaseForm',
  components: {
    UploadToAli
  },
  data() {
    return {
      accountId: '',
      accountList: {},
      localUrl: [],
      localImageUrl: [],
      positionType: '1',
      materialType: '1',
      videoDesc: '',
      customDomain: '',
      acceptVideo: 'video/mpeg,video/mp4',
      acceptImage: 'image/jpeg,jpg,image/png',
      accessKeyId: 'LTAIbNbqWzSOklQV',
      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
      region: 'oss-cn-beijing',
      bucket: 'ctop-media',
      form: this.$form.createForm(this),
      url: {
        addUrl: '/kuaishou/kuaiShouVideo/insert',
        userAllocationList: '/ctop/userAllocation/list'
      }
    }
  },

  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    /*handleConfirmValue(rule, value, callback) {
        value = this.videoDesc;
        if (value == '') {
          callback('请输入视频描述')
        }
        callback()
      },*/
    handleSubmit(e) {
      console.log(this.localUrl)
      console.log(this.videoDesc)
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          let params = {}
          params.accountId = this.accountId
          params.localUrl = this.localUrl
          params.positionType = this.positionType
          params.materialType = this.materialType
          params.videoDesc = this.videoDesc
          params.localImageUrl = this.localImageUrl
          params.loginId = this.userInfo().id
          console.log(params)
          postAction(this.url.addUrl, params).then(res => {
            console.log(res)
            if (res.success) {
              alert('视频批量上传成功')
            }
          })
        }
      })
    },
    file(file) {
      console.log(file)
      var bmf = new BMF()
      var that = this
    },
    overUpload(url) {
      // console.log(url,this.md5)
    //   fileInsert({ code: this.md5, url: url[0] }).then(res => {
    //     console.log(res)
    //   })
    }
  },
  created: function() {
    let params = {}
    params.pageSize = '1000'
    params.mediaId = '2'
    params.userId = this.userInfo().id
    getAction(this.url.userAllocationList, params).then(res => {
      if (res.success) {
        this.accountList = res.result.records
      }
    })
  },
  computed: {
    dirImg() {
      let date = new Date()
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d

      return 'image/' + y + '-' + MM + '-' + d + '/'
    },
    dirVideo() {
      let date = new Date()
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d

      return 'video/' + y + '-' + MM + '-' + d + '/'
    }
  }
}
</script>

<style lang="scss">
.pic_upload_content .draggable-list {
  display: block;
}
</style>