<style lang="scss">
  .downLoad .ant-form-item-control-wrapper {
    width: 70%;
  }

  #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: 0px;
  }

  .detail .ant-form-item {
    margin-bottom: 10px !important;
  }

  .ant-carousel>>>.slick-slide {
    text-align: center;
    //   height: 160px;
    //   line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }

  .ad_cover_container .ant-card-body {
    padding: 0;
  }

  .ant-carousel>>>.slick-slide h3 {
    color: #fff;
  }

  .ant-carousel>>>.custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }

  .ant-carousel>>>.custom-slick-arrow:before {
    display: none;
  }

  .ant-carousel>>>.custom-slick-arrow:hover {
    opacity: 0.5;
  }

  .cover_carousel_con .slick-dots {
    bottom: 55px;
  }

  .add-image-material .draggable-list {
    display: block !important;
  }

  li.chouzhen.first:before {
    font-size: 12px;
    content: "首帧";
    position: absolute;
    top: 7px;
    left: 5px;
    width: 36px;
    height: 20px;
    color: rgb(255, 255, 255);
    line-height: 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
  }
</style>
<style lang="scss" scoped>
  .chouzhen {
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    width: calc(20% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    z-index: 99;
    float: left
  }

  .content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .slick-dots {
      bottom: 55px;
    }
  }

  .video-content {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #f2f2f2;
  }

  .tag-video {
    position: absolute;
    right: 0px;
    top: 8px;
    padding: 4px;
    border-radius: 2px;
    line-height: 16px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .home-item {
    overflow: hidden;
  }



  @media only screen and (min-width: 1200px) {
    .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 only screen and (min-width: 1250px) {
    .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;
  }

  .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;
  }

  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;
      list-style: none;

      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="8" :sm="8">
            <!-- <a-form-item label="项目名称"> -->
            <selectTable :projectId.sync="queryParam.projectId"></selectTable>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="素材名称">
              <a-input placeholder="请输入素材名称" v-model="queryParam.materialName"></a-input>
            </a-form-item>
          </a-col>
          <!--  -->
          <a-col :md="8" :sm="8">
            <a-form-item label="搜索时间">
              <a-range-picker  v-model="queryParam.createTime"  format="YYYY-MM-DD" style="width:100%"/>
              <!--              <a-date-picker v-model="queryParam.startDate" format="YYYY-MM-DD" style="width:100%" />-->
              <!-- <a-input placeholder="请输入查询时间" v-model="queryParam.createTime"></a-input> -->
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="供应商选择">
              <a-select v-model="queryParam.supplierCode">
                <a-select-option value="kuaishou_001">汇创</a-select-option>
                <a-select-option value="kuaishou_002">鸣闻</a-select-option>
                <a-select-option value="kuaishou_003">优效</a-select-option>
              </a-select>
              <!-- <a-input placeholder="请输入查询时间" v-model="queryParam.createTime"></a-input> -->
            </a-form-item>
          </a-col>
          <a-col :md="8" :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> -->

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


    <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="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)">
              <span v-if="items.excellent == 0"></span>
              <span v-else
                style="position:absolute;top:30px;right:-105px;display:block;width:300px;height:30px;text-align:center;line-height;30px;background:red;transform:rotate(45deg);z-index:1000">优秀素材</span>
              <div class="home-right">
                <a-badge :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
                  :numberStyle="{ backgroundColor: '#52c41a' }" style="width:100%;display:flex" @click.stop>
                  <span
                    style="color: #999; fontSize: 14px;padding-bottom:10px;display:inline-block;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                    :title="items.projectName">
                    {{ items.projectName }}
                  </span>
                  <span
                    style="color: #999; fontSize: 14px;padding-bottom:10px;display:inline-block;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                    :title="items.materialName">
                    {{items.materialName}}
                  </span>
                </a-badge>
                <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative;">



                  <img :src="items.coverUrl" alt="" style="height:200px;max-width:100%;position:absolute;z-index:10;" />
                </div>
                <div style="width:100%;height:1px;border-bottom:1px solid #f2f2f2;margin-top:5px"></div>
                <span
                  style="color: black; fontSize: 16px;padding-top:10px;display:flex;width:100%;justify-content: space-between;"
                  @click.stop>
                  <span>{{ items.createTime | getDate }}</span>
                  <span>{{items.supplierCode|supplierName}}</span>

                </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="" v-if="!loading" />
          <img v-else src="./loading.gif" />
        </div>
      </a-tab-pane>
    </a-tabs>


    <a-modal title="素材详情" v-model="visibleDetail" width="70%" :footer="null">
      <div style="display:flex;height:700px">
        <div class="video-content"
          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="height:50%" controlsList="nodownload">
            您的浏览器不支持 video 标签。
          </video>
          <div class="downLoad" style="height:50%;overflow:auto">
            <ul class="actor-photo-list" :style="{ width: model.length>4?25 * model.length + '%':'100%' }"
              v-if="model.length > 0">
              <a-checkbox-group v-model="checkArrImage" style="width:100%;  display: flex;padding-left: 0;"
                @change="onChangeCheckImage">
                <li v-for="(item, index) of model" :key="index">
                  <a-checkbox :value="item.id" style="position:absolute;z-index: 100"></a-checkbox><img class="video"
                    :src="item.url" @click="coverPreviewShowModal(item, index)" />
                  <span class="tag-video" :style="{
                      backgroundColor:
                        item.status == 0 ? 'rgba(0, 0, 0)' : item.status == 1 ? 'rgba(0, 180, 100)' : 'red'
                    }">{{ item.status == 0 ? '未审核' : item.status == 1 ? '已批准' : '已驳回' }}</span>
                </li>
              </a-checkbox-group>
            </ul>
            <div v-else style="height:100%;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>
        <a-modal title="图片预览" v-model="coverPreviewVisible" :footer="null">
          <a-carousel arrows class="cover_carousel_con">
            <div v-for="(item, index) in modelNew" :key="index" class="content">
              <img :src="item.url" :width="300" />
            </div>
            <a-icon type="left-circle" slot="prevArrow" slot-scope
              style="left: 10px;zIndex: 9;font-size:30px;color:black" />
            <a-icon type="right-circle" slot="nextArrow" slot-scope
              style="right: 10px;zIndex: 9;font-size:30px;color:black" />
          </a-carousel>
        </a-modal>
        <div style="flex:3;padding:10px;box-sizing:border-box;">
          <a-form v-if="detail" class="detail ant-advanced-search-form" layout="inline">
            <div v-if="detail.parameter" style="display:flex;">
              <a-form-item label="视频时长" v-if="detail.parameter.second" style="flex:1">
                {{ detail.parameter.second }}秒
              </a-form-item>
              <a-form-item label="尺寸" style="flex:1" v-if="detail.parameter.width">
                {{ detail.parameter.width }}*{{ detail.parameter.height }}
              </a-form-item>
              <a-form-item label="大小" style="flex:1" v-if="detail.parameter.size">
                {{ detail.parameter.size }}
              </a-form-item>
            </div>
            <div v-if="detail.ascription" style="display:flex;">
              <a-form-item label="策划" style="flex:1">
                {{ detail.ascription.planName }}
              </a-form-item>
              <a-form-item label="拍摄" style="flex:1">
                {{ detail.ascription.shotName }}
              </a-form-item>
              <a-form-item label="剪辑" v-if="detail.ascription.clipName" style="flex:1">
                {{ detail.ascription.clipName }}
              </a-form-item>
            </div>
            <div>
              <a-form-item label="水印链接" v-if="watermarkUrl">
                <a-input v-model="watermarkUrl" type="text" style="width:200%" readOnly />
              </a-form-item>
              <a-form-item label="生成水印" v-else>
                <a-button type="primary" @click="createWater" :loading="creatLoading">生成</a-button>
              </a-form-item>
            </div>
            <div>
              <a-form-item label="标签" v-if="detail.tag">
                <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
              </a-form-item>
            </div>
            <div>
              <a-form-item label="审核人" v-if="active == '2' && detail.auditorName">
                {{ detail.auditorName }}
              </a-form-item>
            </div>
            <div>
              <a-form-item label="广告语" v-if="active == '1'">
                {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
              </a-form-item>
            </div>
            <div>
              <a-form-item label="驳回原因" v-if="active == '2'">
                {{ refuseReason ? refuseReason : '无原因' }}
              </a-form-item>
            </div>
            <div>
              <a-form-item label="截图" v-if="active == '2'">
                <div v-if="refuseFile" style="width:100%">
                  <img style="width:100px;height:auto;margin:5px" @click="showBoHui(item)" :src="item"
                    v-for="(item,index) in refuseFile" :key="index" alt="">
                </div>
                <div v-else>无截图</div>
              </a-form-item>
            </div>
          </a-form>
        </div>
      </div>
    </a-modal>
    <a-modal title="查看截图" v-model="bohuiShow" :width="300" :footer="null">
      <img :src="bohui" alt="" style="width:100%">
    </a-modal>



  </a-card>
</template>

<script>
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import UploadToAli from '@femessage/upload-to-ali'
  import {
    fileCheck,
    fileInsertV2,
    fileEdit,
    fileCheckImage,
    fileEditAll
  } from '@/api/actor'
  import {
    getAction,
    postAction,
    postFile,
    deleteAction,
    putAction
  } from '@/api/manage'
  import qs from 'qs'
  import {
    mapGetters
  } from 'vuex'
  import moment from 'moment'

  import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'

  import BMF from 'browser-md5-file'
  import uploadFile from '@/components/uploadFile.vue'
  import {
    stopOtherVideo,
    closeAllVideoFun
  } from '@/utils/videoControl'
  import accountCheck from './accountCheck'
  export default {
    name: 'supplier-material',
    mixins: [JeecgListMixin],
    components: {
      JEllipsis,
      UploadToAli,
      accountCheck,
      selectTable,
      uploadFile
    },

    data() {
      return {
        coverPreviewVisible: false,
        chouzhen: false,
        chouzhenList: [],
        model: [],
        modelNew: [],
        goodsColumns: [{
            title: '封面预览',
            //   dataIndex: 'coverUrl',
            //   key: 'coverUrl',
            dataIndex: 'url',
            align: 'center',
            scopedSlots: {
              customRender: 'url'
            }
          },
          {
            title: '审核',
            align: 'center',
            dataIndex: 'action',
            width: 100,
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],

        addImageVisible: false,
        addImageData: null,
        projectId: '',
        inputVisible: false,
        inputValue: '',
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 12
          }
        },
        queryParam: {},
        dataElse: [],
        ascription: {
          clipId: [], //剪辑人id
          shotId: [], //拍摄人id
          planId: [], //策划id
          planeId: [] //平面id
        },
        show: true,
        visible: false,
        visibleDetail: false,
        personVisible: false,
        confirmLoading: false,
        loading: false,
        loadingImage: false,
        loadingPerson: false,
        activeKey: 'video',
        active: '0',
        examinelList: [{
            value: '0',
            tab: '未审核'
          },
          {
            value: '1',
            tab: '已批准'
          },
          {
            value: '2',
            tab: '已驳回'
          }
        ],
        // 表头
        columns: [],
        urlList: {
          url: '',
          md5: '',
          name: ''
        },
        urlListImage: {
          url: [],
          md5: [],
          name: [],
          size: []
        },
        watermarkUrl: null,
        url: {
          list: '/ctop/materialInfo/supplierList'
        },
        detail: false,
        form: this.$form.createForm(this),
        formPerson: this.$form.createForm(this),
        tags: [],
        refuseFile: [],
        refuseReason: '',
        refuseReasonImage: '',
        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',
        checkArr: [],
        checkAll: false,
        checkArrImage: [],
        checkAllImage: false,
        showUrl: '',
        showUrlWater: '',
        materialName: '',
        materialDescribe: '',
        name: '',
        detail: null,
        add: true,
        id: '',
        role: {
          roleCode: '',
          roleName: ''
        },
        key: '0',
        mediaId: null,
        sizeType: [],
        size: null,
        repeat: false,
        excellent: 0,
        code: '',
        material: [],
        imageArrList: [],
        showDataBool: false,
        kuaishouData: null,
        douyinData: null,
        bohui: "",
        bohuiShow: false,
        creatLoading: false
      }
    },
    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
      },
      supplierName(value) {
        var data = {
          'kuaishou_001': "汇创",
          "kuaishou_002": "鸣闻",
          "kuaishou_003": "优效"
        }
        return data[value]
      }
    },
    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 + '/'
      }
    },
    created() {
      this.queryParam.type = 'VIDEO'
      this.queryParam.userId = this.userInfo().id
      this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
      this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
      // this.queryParam.status = key
      this.ipagination.pageSize = 8
      this.getParticipateList()
      // /sys/user/getRoleInfo
      getAction('/sys/user/getRoleInfo', {
        userId: this.userInfo().id
      }).then(res => {
        this.role = res
      })
      getAction('/ctop/videoWatermarkTemplate/list').then(res => {
        if (res.success) {
          this.sizeType = res.result.records
        }
      })
    },
    updated() {
      stopOtherVideo()
    },
    watch: {
      $route: function (n, o) {
        if (n.path == '/modules/material/videoMaterial') {
          this.queryParam.userId = this.userInfo().id
          this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
          this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
          this.loadData()
        }
      },
      'queryParam.projectId': function (n, o) {
        if (n != '') {
          this.getList(n)
        }
      },
      visibleDetail: function (n, o) {
        if (!n) {
          this.refuseFile = []
          this.refuseReason = ''
        }
      }
    },
    methods: {
      createWater() {
        this.creatLoading = true
        getAction('/ctop/materialInfo/supplierWatermark', {
          id: this.id
        }).then(res => {
          if (res.success) {
            console.log(res)
            this.watermarkUrl = res.result
            this.creatLoading = false
          } else {
            this.creatLoading = true
          }
        })
      },
      showBoHui(item) {
        this.bohui = item
        this.bohuiShow = true
      },
      getData(className) {
        return this.form.getFieldValue(className)
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      moment,


      ...mapGetters(['nickname', 'avatar', 'userInfo']),
      searchRe() {
        this.queryParam = {
          type: 'VIDEO',
          userId: this.userInfo().id,
          status: this.active
        }
        this.loadData(1)
      },
      getList(value) {
        if (value) {
          this.mediaId = this.dataElse.filter(item => {
            if (value == item.projectId) {
              return item
            }
          })[0].mediaId
        }
        this.loadData()
      },
      onChangeCheckImage(checkedList) {
        if (checkedList.length == 0) {
          this.checkAllImage = false
        }
      },
      onChangeCheck(checkedList) {
        if (checkedList.length == 0) {
          this.checkAll = false
        }
      },

      showDetail(item) {
        this.watermarkUrl = null
        this.visibleDetail = true
        this.showUrl = item.url
        this.id = item.id
        this.code = item.code
        this.excellent = item.excellent
        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
          this.size =
            res.parameter.width == '1080' ? 3 : res.parameter.width == '1920' ? 1 : res.parameter.width == '1280' ?
            2 : 4
        })
        getAction('/ctop/supplierWatermark/list', {
          videoSignature: item.code
        }).then(res => {

          if (res.success) {
            this.watermarkUrl = res.result.records.length > 0 ? res.result.records[0].watermarkUrl : null
          } else {
            this.watermarkUrl = null
          }
        })

        getAction('/ctop/materialInfo/queryById', {
          id: item.id
        }).then(res => {
          if (res.success) {
            this.showUrlWater = res.result.watermarkUrl
            this.name = res.result.watermarkCode
            this.materialName = res.result.materialName
          } else {
            this.showUrlWater = null
            this.name = null
          }
        })
        getAction('/ctop/MaterialImageInfo/list', {
          videoId: item.code
        }).then(res => {
          console.log(res)
          if (res.success) {
            this.model = res.result.map((item, index) => {
              return {
                ...item,
                key: index
              }
            })
          }
        })
      },
      coverPreviewShowModal(item, index) {
        console.log(this.model)
        this.modelNew = this.model.filter(items => {
          return items.status == 0
        })
        if (this.modelNew.length > 0) {
          this.coverPreviewVisible = true
        }
      },
      callbackTwo(key) {
        this.checkAll = false
        this.checkArr = []

        if (key == '3') {
          this.url.list = "/ctop/materialInfo/effiMaterialInfo"
          this.queryParam = {}
        } else {
          this.url.list = "/ctop/materialInfo/list"
          this.queryParam = {
            type: 'VIDEO',
            userId: this.userInfo().id,
            status: key,
            projectId: this.queryParam.projectId
          }
          if (this.form.getFieldValue('projectId')) {
            this.form.setFieldsValue({
              projectId: ''
            })
          }
        }
        //   if (this.form.getFieldValue('projectId')) {
        //     this.form.setFieldsValue({
        //       projectId: ''
        //     })
        //   }
        //   this.queryParam.status = key
        this.loadData(1)
      },
      getParticipateList() {
        getAction('/ctop/projectMember/participateList', {
          userId: this.userInfo().id
        }).then(res => {
          if (res.code == 0) {
            this.dataElse = res.result
          }
        })
      },
      getDataSource(page, pageSize) {
        this.ipagination.current = page
        this.checkArr = []
        this.checkAll = false
        this.loadData()
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>