<style>
  #material-card .ant-tabs-tab {
    border: 1px solid gainsboro !important;
  }

  #material-card .ant-tabs-top-bar {
    position: relative;
    z-index: 100;
  }

  #material-card .ant-badge-count {
    top: -10px;
  }

  .detail .ant-form-item {
    margin-bottom: 10px !important;
  }
</style>
<style lang="scss" scoped>
  @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: 1280px) {
    .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) {

  // }
  @media (min-width: 1920px) {
    .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;
      cursor: pointer;
    }
  }

  .actor-photo-list {
    display: flex;
    padding-left: 0;

    li {
      width: 25%;
      margin: 10px;
      position: relative;
      height: 250px;
      border: 1px solid #f2f2f2;

      img,
      video {
        width: 100%;
        margin-top: auto;
        margin-bottom: auto;
        top: 0;
        bottom: 0;
        position: absolute;
        max-height: 250px;
      }
    }
  }

  .home-card {
    width: 100%;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;

    .home-right {
      width: 100%;
    }

    .bg:after {
      content: '';
      width: 110%;
      height: 110%;
      position: absolute;
      left: -5%;
      top: -5%;
      background: inherit;
      filter: blur(10px);
      z-index: 2;
    }
  }

  .bh {
    height: 60px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  a {
    font-size: 14px;
  }

  .actor-photo-list {
    display: flex;
    padding-left: 0;

    li {
      width: 25%;
      margin: 10px;
      position: relative;
      height: 250px;
      border: 1px solid #f2f2f2;

      img,
      video {
        width: 100%;
        margin-top: auto;
        margin-bottom: auto;
        top: 0;
        bottom: 0;
        position: absolute;
        max-height: 250px;
      }
    }
  }
</style>
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="选择项目">
              <a-select placeholder="请输入项目名称" v-model="queryParam.projectId" @change="getList">
                <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
                  {{ item.projectName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="时间选择">
              <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <!-- <div> -->

    <!-- 操作按钮区域 -->

    <div class="table-operator" style="position:relative;z-index:100">
      <a-button @click="dirVideoGet" type="primary" icon="plus">新增</a-button>
      <a-button @click="onCheckAllChange" v-if="active == 'VIDEO_PART'">{{
        checkAll ? '取消  (  ' + checkArr.length + '  )' : '全选'
      }}</a-button>
    </div>
    <!-- :show-upload-list="false" -->
    <!-- <a-upload name="file" :multiple="true" list-type="picture-card" class="avatar-uploader"
      action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/" :before-upload="beforeUpload"
      @change="handleChange" accept='image/*' :file-list="fileList" :remove="removeFile" @preview="handlePreview">
      <div>
        <a-progress v-if='loadingElse' :percent="percent" :show-info="false" />
        <div class="ant-upload-text">
          Upload
        </div>
      </div>
    </a-upload> -->
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
    <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
      <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
        <div v-if="item.value != 'join' && item.value != 'job' && item.value != 'success'">
          <div v-if="dataSource.length > 0">
            <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
              <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
                <div class="home-right">
                  <a-badge v-if="active == 'VIDEO_PART'"
                    :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
                    :numberStyle="{ backgroundColor: '#52c41a' }" style="width:100%">
                    <span
                      style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
                      {{ items.materialName }}
                    </span>
                  </a-badge>
                  <span v-else
                    style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
                    {{ items.materialName }}
                  </span>
                  <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
                    <video :src="items.url" @canplay="a(items)"
                      style="height:200px;max-width:100%;position:absolute;z-index:10;" />
                    <img src="./timg.gif" v-if="!items.showVideo" alt=""
                      style="height:200px;max-width:100%;position:absolute;z-index:11;" @click.stop />
                  </div>

                  <!-- <div v-if="active == '2'" class="bh">驳回原因：{{ items.refuseReason }}</div> -->
                  <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
                    {{ items.createTime | getDate }}
                    <a-checkbox :value="items.id" style="float:right"></a-checkbox></span>
                </div>
              </div>
            </a-checkbox-group>
            <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right"
              v-if="dataSource.length > 0" showQuickJumper :pageSize.sync="ipagination.pageSize"
              :total="ipagination.total" v-model="ipagination.current" @change="getDataSource" />
          </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="" />
          </div>
        </div>
        <div v-else-if="item.value == 'join'">
          <div style="margin-bottom:20px">
            <a-button @click="addMatemal" type="primary" icon="plus" style="margin-right:15px">新增一行</a-button>
            <a-button type="primary" @click="joinMatemal">开始拼接</a-button>
          </div>

          <a-table :columns="columns" :dataSource="dataList" :pagination="false">
            <span slot="action" slot-scope="text, record, index">
              <a @click="removeMatemal(index)">删除</a>
            </span>
            <span slot="VIDEO_HEAD" slot-scope="text, record, index">
              <div v-if="text != ''" style="position:relative">
                <video class="video" :src="text.url" controls="controls" style="height:160px">
                  您的浏览器不支持 video 标签。
                </video>
                <a-icon type="close-circle"
                  style="position:absolute;top:-5px;right:30%;color:red;z-index:10;cursor: pointer;"
                  @click="deteleVideo('VIDEO_HEAD', record)" />
              </div>
              <a-button @click="checkMatemal('VIDEO_HEAD', index, record)" type="primary" icon="plus" v-else>选择素材
              </a-button>
            </span>
            <span slot="VIDEO_PART" slot-scope="text, record, index">
              <div>
                <video class="video" :src="item.url" controls="controls" style="height:160px" v-for="item of text"
                  :key="item.id" draggable="true" @dragstart="handleDragStart($event, item.code)"
                  @dragover.prevent="handleDragOver($event, item.code)" @dragenter="handleDragEnter($event, item.code)"
                  @dragend="handleDragEnd($event, item.code)">
                  > 您的浏览器不支持 video 标签。
                </video>
              </div>
              <a-button @click="checkMatemal('VIDEO_PART', index, record)" type="primary" icon="plus">选择素材</a-button>
            </span>
            <span slot="VIDEO_TAIL" slot-scope="text, record, index">
              <div v-if="text != ''" style="position:relative">
                <video class="video" :src="text.url" controls="controls" style="height:160px">
                  您的浏览器不支持 video 标签。
                </video>
                <a-icon type="close-circle"
                  style="position:absolute;top:-5px;right:30%;color:red;z-index:10;cursor: pointer;"
                  @click="deteleVideo('VIDEO_TAIL', record)" />
              </div>
              <a-button @click="checkMatemal('VIDEO_TAIL', index, record)" type="primary" icon="plus" v-else>选择素材
              </a-button>
            </span>
          </a-table>
        </div>
        <div v-else-if="item.value == 'job'">
          <a-table :columns="columnsJob" :dataSource="dataSource" :pagination="false" :loading="loading" bordered>
            <span slot="status" slot-scope="text">
              {{ text == 'TranscodeSuccess' ? '已完成' : '提交中' }}
            </span>
          </a-table>
        </div>
        <div v-else-if="item.value == 'success'">
          <a-button @click="dirVideoGetPublish" type="primary">发布到项目</a-button>
          <div v-if="dataSource.length > 0">
            <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
              <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetailElse(items)">
                <div class="home-right">
                  <span
                    style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
                    {{ items.jobId }}
                  </span>
                  <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
                    <video :src="items.videoUrl" @canplay="a(items)"
                      style="height:200px;max-width:100%;position:absolute;z-index:10;" />
                    <img src="./timg.gif" v-if="!items.showVideo" alt=""
                      style="height:200px;max-width:100%;position:absolute;z-index:11;" @click.stop />
                  </div>
                  <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
                    {{ items.createTime | getDate }}
                    <a-checkbox :value="items.videoId" style="float:right"></a-checkbox></span>
                </div>
              </div>
            </a-checkbox-group>
            <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right"
              v-if="dataSource.length > 0" showQuickJumper :pageSize.sync="ipagination.pageSize"
              :total="ipagination.total" v-model="ipagination.current" @change="getDataSource" />
          </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="" />
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <a-modal title="添加素材" v-model="visible" @ok="handleOk" @cancel="close" :maskClosable="false">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择项目">
          <a-select v-decorator="[
              'projectId', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请选择项目!' }] }
            ]" @change="getProjectId">
            <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
              {{ item.projectName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="片段种类">
          <a-select v-decorator="[
              'type', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请选择片段种类!' }], initialValue: 'VIDEO_HEAD' }
            ]" @change="getDir">
            <a-select-option value="VIDEO_HEAD">片头</a-select-option>
            <a-select-option value="VIDEO_PART">片段</a-select-option>
            <a-select-option value="VIDEO_TAIL">片尾</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传">
          <uploadFile :value.sync="urlList.url" :fileCount="1" uploadType="video" :multiple="false" />
          <!-- <upload-to-ali :customDomain="customDomain" preview :region="region" :bucket="bucket" :accept="acceptVideo"
            :max="10" :size="1024000" :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret"
            :before-upload="file" :dir="dirVideo" @loaded="overUpload" v-decorator="[
              'url', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请上传图片!' }] }
            ]"></upload-to-ali> -->
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 18 }
          }" label="标签">
          <template v-for="(tag, index) in tags">
            <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
              <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
                {{ `${tag.slice(0, 20)}...` }}
              </a-tag>
            </a-tooltip>
            <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
              {{ tag }}
            </a-tag>
          </template>
          <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
            :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
            @keyup.enter="$event.target.blur" />
          <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
            <a-icon type="plus" /> New Tag
          </a-tag>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 18 }
          }" label="描述">
          <a-textarea placeholder="请输入描述" v-decorator="[
              'materialDescribe' // 给表单赋值或拉取表单时，该input对应的key
            ]" :autosize="{ minRows: 3, maxRows: 10 }" />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal title="发布到项目" v-model="visiblePublish" @ok="handleOkPublich" @cancel="closePublish" :maskClosable="false">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择项目">
          <a-select v-decorator="[
              'projectId', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请选择项目!' }] }
            ]" @change="getProjectId">
            <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
              {{ item.projectName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal title="素材详情" v-model="visibleDetail" width="70%">
      <div style="display:flex;height:700px">
        <div
          style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2">
          <video class="video" :src="showUrl" controls="controls" style="width:100%">
            您的浏览器不支持 video 标签。
          </video>
        </div>
        <div style="flex:3;padding:10px;box-sizing:border-box;">
          <a-form v-if="detail" class="detail">
            <div v-if="detail.parameter">
              <a-form-item label="视频时长" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
                v-if="detail.parameter.second">
                {{ detail.parameter.second }}秒
              </a-form-item>
              <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
                v-if="detail.parameter.width">
                {{ detail.parameter.width }}*{{ detail.parameter.height }}
              </a-form-item>
              <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.parameter.size">
                {{ detail.parameter.size }}
              </a-form-item>
            </div>
            <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.tag">
              <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-modal>

    <account-check ref="check" @synchro="implement"></account-check>
    <check-matemal ref="matemal" @showVideo="showVideoFun" />
  </a-card>
</template>

<script>
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import UploadToAli from '@femessage/upload-to-ali'
  import uploadFile from '@/components/uploadFile.vue'
  import {
    fileCheck,
    fileInsert,
    fileEdit
  } from '@/api/actor'
  import {
    getAction,
    postAction,
    postFile
  } from '@/api/manage'
  import {
    stopOtherVideo,
    closeAllVideoFun
  } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
  import {
    mapGetters
  } from 'vuex'
  import moment from 'moment'

  import BMF from 'browser-md5-file'
  import qs from 'qs'
  import accountCheck from './accountCheck'
  import checkMatemal from './checkMatemal'
  var COS = require('cos-js-sdk-v5');
  var cos = new COS({
    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
  });
  var i = 0

  function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
  export default {
    name: 'YardList',
    mixins: [JeecgListMixin],
    components: {
      JEllipsis,
      UploadToAli,
      accountCheck,
      checkMatemal,
      uploadFile
    },

    data() {
      return {
        fileList: [],
        dragging: null,
        dataKey: 0,
        columns: [{
            title: '片头',
            dataIndex: 'VIDEO_HEAD',
            scopedSlots: {
              customRender: 'VIDEO_HEAD'
            },
            align: 'center'
          },
          {
            title: '内容',
            dataIndex: 'VIDEO_PART',
            scopedSlots: {
              customRender: 'VIDEO_PART'
            },
            align: 'center'
          },
          {
            title: '片尾',
            dataIndex: 'VIDEO_TAIL',
            scopedSlots: {
              customRender: 'VIDEO_TAIL'
            },
            align: 'center'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {
              customRender: 'action'
            },
            align: 'center'
          }
        ],
        columnsJob: [{
            title: '',
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '任务Id',
            dataIndex: 'jobId',
            scopedSlots: {
              customRender: 'jobId'
            },
            align: 'center'
          },
          {
            title: '状态',
            dataIndex: 'status',
            scopedSlots: {
              customRender: 'status'
            },
            align: 'center'
          }
        ],
        dataJob: [],
        dataList: [{
          key: 1,
          VIDEO_HEAD: '',
          VIDEO_PART: [],
          VIDEO_TAIL: ''
        }],
        inputVisible: false,
        inputValue: '',
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 12
          }
        },
        noImgUrl: require('@/assets/img/noImg.png'),
        queryParam: {},
        dataElse: [],
        ascription: {
          clipId: [], //剪辑人id
          shotId: [], //拍摄人id
          planId: [], //策划id
          planeId: [] //平面id
        },
        show: true,
        visible: false,
        visibleDetail: false,
        visiblePublish: false,
        activeKey: 'video',
        active: 'VIDEO_HEAD',
        examinelList: [{
            value: 'VIDEO_HEAD',
            tab: '片头'
          },
          {
            value: 'VIDEO_PART',
            tab: '片段'
          },
          {
            value: 'VIDEO_TAIL',
            tab: '片尾'
          },
          {
            value: 'join',
            tab: '视频拼接'
          },
          {
            value: 'job',
            tab: '任务列表'
          },
          {
            value: 'success',
            tab: '成品'
          }
        ],
        // 表头
        urlList: {
          url: '',
          md5: '',
          name: ''
        },
        url: {
          list: '/ctop/materialInfo/list'
        },
        detail: false,
        form: this.$form.createForm(this),
        tags: [],
        refuseFile: [],
        refuseReason: '',
        creativeCopywriter: '',
        customDomain: '',
        region: 'oss-cn-beijing',
        bucket: 'ctop-part',
        acceptVideo: 'video/mpeg,video/mp4',
        acceptImage: 'image/jpeg,image/jpg,image/png',
        accessKeyId: 'LTAIbNbqWzSOklQV',
        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
        checkArr: [],
        checkAll: false,
        showUrl: '',
        showUrlWater: '',
        materialDescribe: '',
        name: '',
        detail: null,
        add: true,
        id: '',
        role: {
          roleCode: '',
          roleName: ''
        },
        key: '0',
        mediaId: null,
        dirVideo: '',
        defaultDir: 'VIDEO_HEAD',
        joinVideo: {
          head: '',
          content: [],
          foot: ''
        },
        loadingElse: false,
        imageUrl: '',
        percent: 0,
        previewVisible: false,
        previewImage: '',
      }
    },
    filters: {
      getDate(value) {
        let date = new Date(value)
        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 y + '-' + MM + '-' + d
      }
    },
    updated() {
      stopOtherVideo()
    },
    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 + '/'
      }
    },
    created() {
      this.queryParam.type = this.active
      this.queryParam.userId = this.userInfo().id
      this.ipagination.pageSize = 8
      this.getParticipateList()
      // /sys/user/getRoleInfo
      getAction('/sys/user/getRoleInfo', {
        userId: this.userInfo().id
      }).then(res => {
        this.role = res
      })
    },
    watch: {
      $route: function (n, o) {
        if (n.path == '/modules/material/materialList') {
          this.queryParam.userId = this.userInfo().id
          this.queryParam.type = this.active
          this.loadData()
        }
      }
    },
    methods: {
      handleCancel() {
        this.previewVisible = false;
      },
      handleChange(info) {
        if (info.file.status === 'uploading') {
          this.loading = true;
          return;
        }
        if (info.file.status === 'done') {
          // Get this url from response in real world.
          getBase64(info.file.originFileObj, imageUrl => {
            this.imageUrl = imageUrl;
            this.loading = false;
          });
        }
      },
      removeFile(file) {
        console.log(file)
        var index = this.fileList.findIndex(v => v.uid === file.uid)
        this.fileList.splice(index, 1)
      },
      async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      beforeUpload(file) {
        console.log(file)
        this.loadingElse = true
        var that = this
        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 new Promise(function (resolve, reject) {
          cos.putObject({
            Bucket: 'media-1301855440',
            /* 必须 */
            Region: 'ap-chongqing',
            /* 存储桶所在地域，必须字段 */
            Key: 'image/' + y + '-' + MM + '-' + d + '/' + file.name,
            /* 必须 */
            StorageClass: 'STANDARD',
            Body: file, // 上传文件对象
            onProgress: function (progressData) {

              console.log(typeof JSON.stringify(progressData));
              console.log(progressData.percent);
              that.percent = (progressData.percent * 100)
            },
            onTaskReady: function (tid) {
              console.log('onTaskReady', tid);
            },
            onTaskStart: function (info) {
              console.log('onTaskStart', info);
            },
          }, function (err, data) {
            if (err) {
              console.log(err);

              return;
            }
            console.log('成功', data)
            // alert('成功')
            that.loadingElse = false
            that.fileList.push({
              uid: i++,
              name: file.name,
              status: 'done',
              url: 'http://' + data.Location,
            })
          });
        })
        reject()
      },


      startConcat() {
        console.log(this.dataList)
      },
      handleDragStart(e, item) {
        this.dragging = item
      },
      handleDragEnd(e, item) {
        this.dragging = null
      },
      //首先把div变成可以放置的元素，即重写dragenter/dragover
      handleDragOver(e) {
        e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
      },
      handleDragEnter(e, item) {
        e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
        if (item === this.dragging) {
          return
        }
        console.log(this.dataKey)
        const newItems = [...this.dataList[this.dataKey].VIDEO_PART]
        console.log(newItems)
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)

        newItems.splice(dst, 0, ...newItems.splice(src, 1))

        this.dataList[this.dataKey].VIDEO_PART = newItems
      },
      checkMatemal(type, number, item) {
        this.$refs.matemal.showCheck(type, number, item)
      },
      addMatemal() {
        var num = this.dataList.length + 1
        this.dataList.push({
          key: num,
          VIDEO_HEAD: '',
          VIDEO_PART: [],
          VIDEO_TAIL: ''
        })
      },
      removeMatemal(index) {
        this.dataList.splice(index, 1)
      },
      deteleVideo(type, item) {
        item[type] = ''
      },
      moment,
      a(item) {
        item.showVideo = true
      },
      getDir(value) {
        this.defaultDir = value
        this.setDir()
      },
      joinMatemal() {
        console.log(this.dataList)
        var data = this.dataList.filter(item => {
          return item.VIDEO_PART.length > 0
        })
        console.log(data)
        if (data.length > 0) {
          //    {"startPart":"","endPart":"","parts":["",""]}
          var params = this.dataList.map(item => {
            return {
              startPart: item.VIDEO_HEAD.id,
              parts: item.VIDEO_PART.map(item => {
                return item.id
              }),
              endPart: item.VIDEO_TAIL.id
            }
          })
          // var paramsString = qs.stringify({ videoMergeList: params })
          postAction('/ctop/materialpart/merge', params).then(res => {
            console.log(res)
            if (res.success) {
              that.$message.error(res.message)
              this.dataList = []
            }
          })
        } else {
          that.$message.error('还未选择素材片段')
        }
      },
      dirVideoGet() {
        this.visible = true
        console.log(this.defaultDir)
        this.setDir()
      },
      dirVideoGetPublish() {
        if (this.checkArr.length > 0) {
          this.visiblePublish = true
        } else {
          this.$message.error('请选择需要发布的视频')
        }
      },
      setDir() {
        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

        this.dirVideo = 'input/' + this.defaultDir + '/' + y + '-' + MM + '-' + d + '/'
      },
      tongbu() {
        this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
          userId: this.userInfo().id,
          projectId: this.queryParam.projectId
        })
      },
      implement(data) {
        var params = {}
        params.mediaId = this.mediaId
        params.materialArray = JSON.stringify(this.checkArr)
        params.accountArray = JSON.stringify(data)
        postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
          if (res.code == 0) {
            this.checkArr = []
            this.checkAll = false
          }
        })
      },
      showVideoFun(data, typeName) {
        console.log(data)
        if (typeName == 'VIDEO_HEAD') {
          //片头
          this.dataList[data.key].VIDEO_HEAD = data.head
        } else if (typeName == 'VIDEO_TAIL') {
          this.dataList[data.key].VIDEO_TAIL = data.foot
        } else {
          this.dataList[data.key].VIDEO_PART = data.content
          this.dataKey = data.key
        }
      },
      downloadByBlob() {
        fetch(this.showUrlWater)
          .then(res => res.blob())
          .then(blob => {
            const a = document.createElement('a')
            document.body.appendChild(a)
            a.style.display = 'none'
            // 使用获取到的blob对象创建的url
            const url = window.URL.createObjectURL(blob)
            a.href = url
            // 指定下载的文件名
            a.download = this.name
            a.click()
            document.body.removeChild(a)
            // 移除blob对象的url
            window.URL.revokeObjectURL(url)
          })
      },
      download(href, name) {
        let eleLink = document.createElement('a')
        eleLink.download = name
        eleLink.href = href
        eleLink.click()
        eleLink.remove()
      },
      ...mapGetters(['nickname', 'avatar', 'userInfo']),
      onCheckAllChange() {
        if (this.checkAll) {
          this.checkArr = []
        } else {
          this.checkArr = this.dataSource.map(item => {
            return item.id
          })
        }
        this.checkAll = !this.checkAll
        this.onChangeCheck(this.checkArr)
      },
      searchRe() {
        this.queryParam = {
          projectId: '',
          createTime: ''
        }
        this.loadData()
      },
      getList(value) {
        this.mediaId = this.dataElse.filter(item => {
          if (value == item.projectId) {
            return item
          }
        })[0].mediaId
        this.loadData()
      },
      onChangeCheck(checkedList) {
        //  { value: 'VIDEO_HEAD', tab: '片头' },
        // { value: 'VIDEO_PART', tab: '片段' },
        // { value: 'VIDEO_TAIL', tab: '片尾' }
        if (this.active == 'VIDEO_HEAD') {
          //片头
          if (this.checkArr.length > 1) {
            this.checkArr.shift()
            this.joinVideo.head = checkedList[0]
          } else if (this.checkArr.length == 1) {
            this.joinVideo.head = checkedList[0]
          } else if (this.checkArr.length == 0) {
            this.joinVideo.head = ''
          }
        } else if (this.active == 'VIDEO_TAIL') {
          //片尾
          if (this.checkArr.length > 1) {
            this.checkArr.shift()
            this.joinVideo.foot = checkedList[0]
          } else if (this.checkArr.length == 1) {
            this.joinVideo.foot = checkedList[0]
          } else if (this.checkArr.length == 0) {
            this.joinVideo.foot = ''
          }
        } else {
          //内容
          if (checkedList.length == 0) {
            this.checkAll = false
          }
          this.joinVideo.content = checkedList
        }
      },
      handleClose(removedTag) {
        const tags = this.tags.filter(tag => tag !== removedTag)
        this.tags = tags
      },

      showInput() {
        this.inputVisible = true
        this.$nextTick(function () {
          this.$refs.input.focus()
        })
      },

      handleInputChange(e) {
        this.inputValue = e.target.value
      },

      handleInputConfirm() {
        const inputValue = this.inputValue
        let tags = this.tags
        if (inputValue && tags.indexOf(inputValue) === -1) {
          tags = [...tags, inputValue]
        }
        Object.assign(this, {
          tags,
          inputVisible: false,
          inputValue: ''
        })
      },
      showDetail(item) {
        this.visibleDetail = true
        this.showUrl = item.url
        this.showUrlWater = item.watermarkUrl ? item.watermarkUrl : null
        this.name = item.watermarkMaterialName ? item.watermarkMaterialName : null
        this.id = item.id
        if (this.active == '2') {
          this.refuseReason = item.refuseReason
          this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
        } else if (this.active == '1') {
          this.creativeCopywriter = item.creativeCopywriter
          this.refuseReason = ''
          this.refuseFile = []
        } else {
          this.refuseReason = ''
          this.refuseFile = []
        }
        getAction('/ctop/materialInfo/getDetail', {
          materialId: item.id
        }).then(res => {
          this.detail = res
        })
      },
      showDetailElse(item) {
        this.visibleDetail = true
        this.showUrl = item.videoUrl
        this.id = item.id
        getAction('/ctop/materialInfo/getDetail', {
          materialId: item.videoId
        }).then(res => {
          this.detail = res
        })
      },
      okEditShow(item, editStatus) {
        if (editStatus == '2') {
          var params = {}
          params.id = item.id
          params.auditorId = this.userInfo().id
          params.refuseReason = this.refuseReason
          var data = this.refuseFile.map(item => {
            return 'https:' + item
          })
          params.refuseFile = JSON.stringify(data)
          params.status = editStatus
          fileEdit(params).then(res => {
            this.refuseFile = []
            this.refuseReason = ''
            this.loadData()
          })
        } else if (editStatus == '1') {
          var params = {}
          params.id = item.id
          params.auditorId = this.userInfo().id
          params.creativeCopywriter = this.refuseReason
          params.status = editStatus
          fileEdit(params).then(res => {
            this.refuseReason = ''
            this.loadData()
          })
        }
      },
      okEdit(e) {
        this.edit(null, this.active, '2')
      },
      edit(item, status, editStatus) {
        if (status == '0' || status == '1') {
          if (editStatus == '2') {
            var params = {}
            params.id = this.id
            params.auditorId = this.userInfo().id
            params.refuseReason = this.refuseReason
            var data = this.refuseFile.map(item => {
              return 'https:' + item
            })
            params.refuseFile = JSON.stringify(data)
            params.status = editStatus
            fileEdit(params).then(res => {
              this.refuseFile = []
              this.refuseReason = ''
              this.loadData()
              this.visibleDetail = false
            })
          } else {
            fileEdit({
              id: this.id,
              status: editStatus,
              auditorId: this.userInfo().id
            }).then(res => {
              this.refuseFile = []
              this.refuseReason = ''
              this.loadData()
              this.visibleDetail = false
            })
          }
        } else {
          this.add = false
          this.visible = true
          this.getProjectId(item.projectId)
          getAction('/ctop/materialInfo/getDetail', {
            materialId: item.id
          }).then(res => {
            if (this.activeKey == 'image') {
              this.form.setFieldsValue({
                projectId: item.projectId,
                clipId: res.ascription.clipId,
                planeId: res.ascription.planeId,
                materialDescribe: item.materialDescribe
              })
            } else {
              this.form.setFieldsValue({
                projectId: item.projectId,
                clipId: res.ascription.clipId,
                planId: res.ascription.planId,
                shotId: res.ascription.shotId,
                materialDescribe: item.materialDescribe
              })
            }
            this.tags = res.tag
            this.urlList.url = item.url
            this.urlList.md5 = item.code
            this.urlList.name = item.materialName
            this.watermarkUrl.url = item.watermarkUrl
            this.watermarkUrl.md5 = item.watermarkCode
            this.watermarkUrl.name = item.watermarkMaterialName
            this.id = item.id
          })
        }
      },
      handleOkPublich() {
        console.log(this.checkArr)
        this.form.validateFieldsAndScroll((err, values) => {
          console.log(values)
          if (!err) {
            var params = {}
            params.materialIds = this.checkArr
            params.projectId = values.projectId
            postAction('/ctop/materialInfo/batchEdit', params).then(res => {
              if (res.success) {
                this.visiblePublish = false
              } else {
                that.$message.error(res.message)
              }
            })
          }
        })
      },
      closePublish() {
        this.visiblePublish = false
      },
      handleOk() {
        this.form.validateFieldsAndScroll((err, values) => {
          if (err) {
            // 这里做逻辑处理
          } else {
            var params = {}
            var roleCode = {}
            for (const key in this.role) {
              if (key == 'roleCode') {
                this.role[key] = this.role[key] + 'Id'
                roleCode[this.role[key]] = this.userInfo().id
              }
            }
            params.id = this.add ? null : this.id
            params.code = this.urlList.md5
            params.url = this.urlList.url
            params.materialName = this.urlList.name
            params.userId = this.userInfo().id
            params.projectId = values.projectId
            params.materialDescribe = values.materialDescribe
            params.ascription = roleCode
            params.type = values.type
            params.tag = this.tags
            if (this.add) {
              fileInsert(params).then(res => {
                this.form.resetFields()
                this.urlList = {
                  url: '',
                  md5: '',
                  name: ''
                }
                this.watermarkUrl = {
                  url: '',
                  md5: '',
                  name: ''
                }
                this.tags = []
                this.loadData()
                this.visible = false
                this.add = true
                for (const key in this.role) {
                  if (key == 'roleCode') {
                    this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
                  }
                }
              })
            } else {
              fileEdit({
                ...params,
                status: '0'
              }).then(res => {
                this.form.resetFields()
                this.urlList = {
                  url: '',
                  md5: '',
                  name: ''
                }
                this.watermarkUrl = {
                  url: '',
                  md5: '',
                  name: ''
                }
                this.tags = []
                this.loadData()
                this.visible = false
                this.add = true
                for (const key in this.role) {
                  if (key == 'roleCode') {
                    this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
                  }
                }
              })
            }
          }
        })
      },
      close() {
        var that = this
        that.form.resetFields()
        that.urlList = {
          url: '',
          md5: '',
          name: ''
        }
        that.watermarkUrl = {
          url: '',
          md5: '',
          name: ''
        }
        that.tags = []
      },
      onChange(date, dateString) {},
      callbackTwo(key) {
        this.checkArr = []

        //   if (key == 'VIDEO_HEAD') {
        //     this.checkArr[0] = this.joinVideo.head
        //   } else if (key == 'VIDEO_TAIL') {
        //     this.checkArr[0] = this.joinVideo.foot
        //   } else if (key == 'VIDEO_PART') {
        //     this.checkArr = this.joinVideo.content
        //   } else
        if (key == 'job') {
          this.queryParam.type = ''
          this.queryParam.jobId = ''
          this.queryParam.status = ''
          this.url.list = '/ctop/videoMergeTask/list'
          this.loadData()
        } else if (key == 'success') {
          this.queryParam.type = ''
          this.queryParam.status = 'TranscodeSuccess'
          // this.queryParam.jobId = '8ed27f6a9e7b456db0dde2ac4081e6c9'
          // this.url.list = '/ctop/videoPart/list'
          this.url.list = '/ctop/videoMergeTask/list'
          this.loadData()
        } else {
          this.url.list = '/ctop/materialInfo/list'
          this.queryParam.status = ''
          this.queryParam.type = key
          this.loadData()
        }
        if (this.form.getFieldValue('projectId')) {
          this.form.setFieldsValue({
            projectId: ''
          })
        }
      },
      overUpload(urlAll) {
        console.log(urlAll)
        this.form.setFieldsValue({
          url: urlAll
        })
      },
      file(file) {
        var bmf = new BMF()
        var that = this
        return new Promise(function (resolve, reject) {
          bmf.md5(file[0], (err, md5) => {
            that.urlList.name = file[0].name
            that.urlList.md5 = md5
            fileCheck({
              code: md5
            }).then(res => {
              if (res.code == 0) {
                that.$message.error('此素材已经上传')
                reject()
              } else {
                resolve()
                //   reject()
              }
            })
          })
        })
      },
      fileWater(file) {
        var bmf = new BMF()
        var that = this
        return new Promise(function (resolve, reject) {
          bmf.md5(file[0], (err, md5) => {
            that.watermarkUrl.name = file[0].name
            that.watermarkUrl.md5 = md5
            fileCheck({
              code: md5
            }).then(res => {
              if (res.code == 0) {
                that.$message.error('此素材已经上传')
                reject()
              } else {
                resolve()
              }
            })
          })
        })
      },
      getParticipateList() {
        getAction('/ctop/projectMember/participateList', {
          userId: this.userInfo().id
        }).then(res => {
          if (res.code == 0) {
            this.dataElse = res.result
          }
        })
      },
      getProjectId(items) {
        getAction('/ctop/projectMember/getMemberList', {
          projectId: items
        }).then(res => {
          if (res.code == 0) {
            this.ascription.clipId = res.result.filter(item => {
              if (item.roleCode == 'clip') {
                return {
                  userId: item.userId,
                  userName: item.userName
                }
              }
            })
            this.ascription.shotId = res.result.filter(item => {
              if (item.roleCode == 'shot') {
                return {
                  userId: item.userId,
                  userName: item.userName
                }
              }
            })
            this.ascription.planId = res.result.filter(item => {
              if (item.roleCode == 'plan') {
                return {
                  userId: item.userId,
                  userName: item.userName
                }
              }
            })
            this.ascription.planeId = res.result.filter(item => {
              if (item.roleCode == 'plane') {
                return {
                  userId: item.userId,
                  userName: item.userName
                }
              }
            })
          }
        })
      },
      getDataSource(page, pageSize) {
        this.ipagination.current = page
        this.checkArr = []
        this.checkAll = false
        this.loadData()
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>