<style scoped lang="scss">
  .template-content {
    width: 100%;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
  }




  @media (min-width: 1024px) {
    .home-item {
      border-style: solid;
      border-width: 1px;
      border-color: #e4e4e4;
      width: calc(50% - 10px);
      padding: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      background: #fff;
      position: relative;
      z-index: 99;
    }
  }

  /*>=1024的设备*/

  // @media (min-width: 1100px) {
  //     .checkbox_item_container {
  //         width:70%
  //     }
  // } /*>=1100的设备*/
  @media (min-width: 1200px) {
    .home-item {
      border-style: solid;
      border-width: 1px;
      border-color: #e4e4e4;
      width: calc(25% - 10px);
      padding: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      background: #fff;
      position: relative;
      z-index: 99;
    }
  }

  /*>=1280的设备*/

  // @media (min-width: 1366px) {
  // }

  // @media (min-width: 1440px) {
  // }

  // @media (min-width: 1680px) {

  // }

  .bhShow {
    height: 100px;
    line-height: 25px;
    text-align: center;
  }

  .bhShow span {
    font-size: 14px;
  }

  .show-data {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
</style>
<template>
  <a-card :bordered="false">
    <!-- <a-steps :current="current" style="width:50%;margin:auto">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps> -->
    <a-button type="primary" icon="plus" @click="visible = true">新增模板</a-button>
    <div class="steps-content">
      <div style="margin-bottom:10px">
        <span>
          视频尺寸&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <!-- sizeType -->
        <a-radio-group defaultValue="1" buttonStyle="solid" v-model="queryParam.sizeType" @change="changData()">
          <a-radio-button value="1">竖版</a-radio-button>
          <a-radio-button value="2">横板</a-radio-button>
        </a-radio-group>
      </div>
      <!-- <div style="margin-bottom:10px">
        <span>
          行业类别&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <a-radio-group defaultValue="a" buttonStyle="solid">
          <a-radio-button value="a">Hangzhou</a-radio-button>
          <a-radio-button value="b">Shanghai</a-radio-button>
          <a-radio-button value="c">Beijing</a-radio-button>
          <a-radio-button value="d">Chengdu</a-radio-button>
          <a-radio-button value="o">Beijing</a-radio-button>
          <a-radio-button value="p">Chengdu</a-radio-button>
          <a-radio-button value="e">Beijing</a-radio-button>
          <a-radio-button value="f">Chengdu</a-radio-button>
        </a-radio-group>
      </div> -->
      <div style="margin-bottom:10px">
        <span>
          模板排序&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <a-radio-group defaultValue="1" buttonStyle="solid" v-model="queryParam.orderType" @change="changData()">
          <a-radio-button value="1">默认排序</a-radio-button>
          <a-radio-button value="2">时间排序</a-radio-button>
        </a-radio-group>
      </div>

      <div class="template-content" v-if="dataSource.length>0">
        <div v-for="item of dataSource" :key="item.id" class="home-item">
          <div class="home-right" style="width:100%">

            <div style="display:flex;justify-content:center;width:100%;position:relative;">
              <video class="video" :src="item.modelVideoUrl" controls="controls" style="height:auto;max-width:100%;"
                controlsList="nodownload">
                您的浏览器不支持 video 标签。
              </video>
            </div>
            <span
              style="color: #999; fontSize: 16px;padding-top:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
              {{ item.title }}
              <a-button type="primary" style="float:right" @click="visibleMergeShow(item)">使用模板</a-button>
            </span>
          </div>
        </div>
      </div>
      <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
          alt="" v-if="!loading" />
        <img v-else src="./loading.gif" />
      </div>
    </div>
    <a-modal title='添加素材' v-model="visible" @cancel="close" @afterClose="close" :maskClosable="false" :width="800">
      <template slot="footer">
        <a-button key="back" @click="close">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">
          确定
        </a-button>
      </template>
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传">
          <!-- <upload-to-ali v-model="urlList.url" :customDomain="customDomain" preview :region="region" :bucket="bucket"
            :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId"
            :accessKeySecret="accessKeySecret" :before-upload="file" :dir="dirVideo" @loaded="overUpload">
          </upload-to-ali> -->
          <uploadFile :value.sync="urlList.url" :fileCount="1" uploadType="video" :multiple="false"
            @overUpload="overUpload" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板标题">
          <a-input placeholder="请输入模板标题" v-decorator="['title',{ rules: [{ required: true, message: '请输入模板标题' }]}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="视频尺寸">
          <a-radio-group placeholder="请选择模板视频尺寸" v-decorator="[
              'sizeType',
              { rules: [{ required: true, message: '请选择模板视频尺寸' }], initialValue: '1' }
            ]">
            <a-radio-button value="1">竖版</a-radio-button>
            <a-radio-button value="2">横板</a-radio-button>
          </a-radio-group>
        </a-form-item>

      </a-form>
    </a-modal>
    <a-modal title='模板视频合成' v-model="visibleMerge" @cancel="closeMerge" @afterClose="closeMerge" :maskClosable="false"
      :width="800">
      <template slot="footer">
        <a-button key="back" @click="closeMerge">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOkMerge">
          确定
        </a-button>
      </template>
      <div style="display:flex;height:600px" v-if="showData">
        <div class="video-content"
          style="position:relative;width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2">
          <video class="video" :src="showData.modelVideoUrl" controls="controls" style="height:90%"
            controlsList="nodownload">
            您的浏览器不支持 video 标签。
          </video>
          <div v-if="showLoading"
            style="font-size:30px;font-weight:700;width:100%;height:100%;position:absolute;top:0;background:white;z-index:2;text-align:center;line-height:500px">
            视频合成中...
          </div>
        </div>
        <div style="flex:3;padding:10px;box-sizing:border-box;">
          <span style="color:black;font-size:18px;text-align:center;width:100%">合成视频上传</span>
          <!-- <uploadFile v-model="urlListMerge.url" :customDomain="customDomain" preview :region="region"
            :bucket="bucket" :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId"
            :accessKeySecret="accessKeySecret" :before-upload="file" :dir="dirMerge" @loaded="overUploadMerge">
          </uploadFile> -->
          <uploadFile :value.sync="urlListMerge.url" :fileCount="1" uploadType="video" :multiple="false"
            @overUpload="overUploadMerge" />
        </div>
      </div>
    </a-modal>

  </a-card>
</template>
<script>
  import {
    getAction,
    postAction,
    postFile,
    deleteAction,
    putAction
  } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import BMF from 'browser-md5-file'
  import uploadFile from '@/components/uploadFile.vue'
  import {
    stopOtherVideo,
    closeAllVideoFun
  } from '@/utils/videoControl'
  export default {
    mixins: [JeecgListMixin],
    components: {
      uploadFile,
    },

    data() {
      return {
        current: 0,
        sizeType: '1',
        orderType: '1',
        visible: false,
        visibleMerge: false,
        showData: null,
        showLoading: false,
        url: {
          list: '/ctop/modelVideoInfo/list'
        },
        columns: [],
        urlList: {
          url: '',
          md5: ''
        },
        urlListMerge: {
          url: '',
          md5: ''
        },
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 12
          }
        },
        form: this.$form.createForm(this),
        creativeCopywriter: '',
        customDomain: '',
        region: 'oss-cn-beijing',
        bucket: 'ctop-media',
        acceptVideo: 'video/mpeg,video/mp4',
        acceptImage: 'image/jpeg,image/jpg,image/png',
        accessKeyId: 'LTAIbNbqWzSOklQV',
        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        dirMerge: "model/part/"
      }
    },
    computed: {
      dirVideo() {

        return 'model/video/'
      }
    },
    methods: {
      next() {
        this.current++
      },
      prev() {
        this.current--
      },
      changData() {
        this.loadData(1)
      },
      visibleMergeShow(item) {
        this.visibleMerge = true
        this.showLoading = false
        // this.showData = item
        this.showData = JSON.parse(JSON.stringify(item))
      },
      closeMerge() {
        this.visibleMerge = false
        this.urlListMerge = {
          url: '',
          md5: ''
        }
        this.showData = null

      },
      handleOkMerge() {
        this.closeMerge()
      },
      close() {
        this.visible = false
      },
      handleOk() {
        this.form.validateFieldsAndScroll((err, values) => {
          if (err) {
            // 这里做逻辑处理
          } else {
            var params = {
              ...values
            }
            params.signature = this.urlList.md5
            params.modelVideoUrl = this.urlList.url
            postAction('/ctop/modelVideoInfo/add', params).then(res => {
              console.log(res)
              if (res.success) {
                this.visible = false
                this.form.resetFields()
                this.urlList = {
                  url: '',
                  md5: '',
                }
                this.loadData()
              }
            })
          }
        })
      },
      overUpload(urlAll) {
        this.$message.success('上传成功')
      },
      overUploadMerge(urlAll) {
        this.showLoading = true
        postAction('/ctop/modelVideoInfoConfig/videoMerge', {
          modelId: this.showData.id,
          url: urlAll
        }).then(res => {
          //   console.log(res)
          if (res.success) {
            this.showLoading = false
            this.showData.modelVideoUrl = res.url
          }
        })
      },
      file(file) {
        var bmf = new BMF()
        var that = this
        return new Promise(function (resolve, reject) {
          bmf.md5(file[0], (err, md5) => {
            that.urlList.md5 = md5
            resolve()
            // fileCheck({
            //   code: md5,
            //   projectId: that.getData('projectId')
            // }).then(res => {
            //   if (res.code == 0) {
            //     that.$message.error('此素材已经上传')
            //     that.repeat = true
            //     reject()
            //   } else {
            //     that.repeat = false
            //     resolve()
            //     //   reject()
            //   }
            // })
          })
        })
      },
    },
    mounted() {
      //   getAction('/ctop/modelVideoInfo/list', {
      //     sizeType: this.sizeType,
      //     orderType: this.orderType
      //   }).then(res => {
      //     console.log(res)
      //   })
    },
    created() {
      this.queryParam.sizeType = this.sizeType
      this.queryParam.orderType = this.orderType
      // this.queryParam.status = key
      this.ipagination.pageSize = 8
    },
  }
</script>
<style scoped>
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    min-height: 200px;
    padding: 30px;
  }

  .steps-action {
    margin-top: 24px;
  }
</style>