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

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

.add-image-material .draggable-list {
  display: block !important;
}
</style>
<style lang="scss" scoped>
.home-item {
  overflow: hidden;
}

@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;
}
</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">
            <selectTable :projectId.sync="queryParam.projectId"></selectTable>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="时间选择">
              <a-date-picker v-model="queryParam.createTime" 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">
            <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="visible = true" type="primary" icon="plus">新增</a-button> -->
      <a-button @click="onCheckAllChange" v-if="queryParam.projectId && active == '1'">{{
        checkAll ? '取消  (  ' + checkArr.length + '  )' : '全选'
      }}</a-button>
      <a-button v-if="queryParam.projectId && active == '1'" :disabled="checkArr.length == 0" @click="tongbu"
        >一键下载
      </a-button>
    </div>
    <a-tabs @change="callbackTwo" v-model="active" id="material-card" type="card">
      <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
        <a-spin :spinning="spinning">
        <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.url) > -1 ? checkArr.indexOf(items.url) + 1 : 0"
                  :numberStyle="{ backgroundColor: '#52c41a' }"
                  style="width:100%;display:flex"
                  @click.stop
                >
                  <span
                    style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
                  >
                    {{ items.materialName }}
                  </span>
                  <a-icon
                    type="close-circle"
                    @click="deleteData(items.id)"
                    v-show="active == '0'"
                    v-if="items.userId == userInfo().id"
                  />
                </a-badge>
                <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
                  <div
                    class="home-num bg"
                    v-if="activeKey == 'image'"
                    :style="{
                      backgroundImage: 'url(' + items.url + ')',
                      backgroundSize: 'cover',
                      backgroundRepeat: 'no-repeat',
                      backgroundPosition: 'center center',
                      overflow: 'hidden',
                      position: 'relative',
                      width: '100%',
                      height: '100%'
                    }"
                  ></div>
                  <img
                    v-if="activeKey == 'image'"
                    :src="items.url"
                    style="height:200px;max-width:100%;position:absolute;z-index:10;"
                  />
                </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
                    href="javascript:;"
                    style="margin-left:20px"
                    @click="imageEdit(items, '2')"
                    v-show="active == '2'"
                    v-if="items.userId == userInfo().id"
                  >
                    修改</a
                  >

                  <a-checkbox :value="items.url" v-show="active == '1'" 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="" v-if="!loading"/>
          <div v-else></div>
        </div>
        </a-spin>
      </a-tab-pane>
    </a-tabs>
    <a-modal title="添加素材" v-model="visible" @ok="handleOk" @cancel="close" :maskClosable="false" :width="800">
      <template slot="footer">
        <a-button key="back" @click="close">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :disabled="material.filter(item => item == false).length > 0 || urlList.url == ''"
          @click="handleOk"
        >
          确定
        </a-button>
      </template>
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="图片素材上传" class="add-image-material">
        <uploadFile :value.sync="urlList.url" :multiple='false'
          @overUpload="overUpload" :fileCount="1" uploadType="image" />
          <!-- <upload-to-ali
            style="width:160%"
            v-model="urlList.url"
            :customDomain="customDomain"
            preview
            :region="region"
            :bucket="bucket"
            :accept="activeKey == 'image' ? acceptImage : acceptVideo"
            :max="10"
            :size="1024000"
            :accessKeyId="accessKeyId"
            :accessKeySecret="accessKeySecret"
            :before-upload="file"
            :dir="activeKey == 'image' ? dirImg : dirVideo"
            @loaded="overUpload"
          ></upload-to-ali> -->
          <span v-if="material.filter(item => item == false).length > 0 && urlList.url != ''" style="color:red"
            >上传素材的尺寸不符,请修改</span
          >
          <span v-else-if="material.filter(item => item == false).length == 0 && urlList.url != ''" style="color:green"
            >上传成功</span
          >
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal title="素材详情" v-model="visibleDetail" width="70%">
      <div style="width:100%">
        <a-button type="primary" @click="setSuccess" style="float:right">
          {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
        </a-button>
      </div>
      <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"
        >
          <img :src="showUrl" alt="" v-if="activeKey == 'image'" style="height:100%" />
        </div>
        <div style="flex:3;padding:10px;box-sizing:border-box;">
          <!-- <video
            v-if="detail.videoUrl"
            :src="detail.videoUrl"
            style="height:200px;max-width:100%;position:absolute;z-index:10;"
          /> -->

          <a-form v-if="detail" class="detail">
            <a-form-item label="绑定视频" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.videoUrl">
              <video
                class="video"
                :src="detail.videoUrl"
                controls="controls"
                style="width:150px"
                controlsList="nodownload"
              >
                您的浏览器不支持 video 标签。
              </video>
            </a-form-item>
            
            <a-form-item label="上传人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.userName">
              {{ detail.userName }}
            </a-form-item>
            <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.width">
              {{ detail.width }}*{{ detail.height }}
            </a-form-item>
            <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.size">
              {{ detail.size }}
            </a-form-item>
            <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-item label="水印素材下载" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="showUrlWater">
              <a-button type="primary" @click="downloadByBlob">下载</a-button>
            </a-form-item>
            <a-form-item label="审核人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
              {{ detail.auditorName }}
            </a-form-item>
            <a-form-item label="广告语" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '1'">
              {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
            </a-form-item>
            <a-form-item label="驳回原因" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
              {{ refuseReason ? refuseReason : '无原因' }}
            </a-form-item>
            <a-form-item label="截图" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" 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>
          </a-form>
        </div>
      </div>
    </a-modal>

    <account-check ref="check" @synchro="implement"></account-check>
  </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, downFile, downFilePost, deleteAction, putAction } from '@/api/manage'

import { mapGetters } from 'vuex'
import moment from 'moment'

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

import BMF from 'browser-md5-file'

import accountCheck from './accountCheck'
export default {
  name: 'YardList',
  mixins: [JeecgListMixin],
  components: {
    JEllipsis,
    UploadToAli,
    accountCheck,
    selectTable,
    uploadFile
  },

  data() {
    return {
      projectId: '',
      videoId: '',
      inputVisible: false,
      inputValue: '',
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      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,
      activeKey: 'image',
      active: '0',
      examinelList: [
        {
          value: '0',
          tab: '未审核'
        },
        {
          value: '1',
          tab: '已批准'
        },
        {
          value: '2',
          tab: '已驳回'
        }
      ],
      // 表头
      columns: [],
      urlList: {
        url: '',
        md5: '',
        name: '',
        size: '',
        width: '',
        height: ''
      },
      imageArr: [],
      watermarkUrl: {
        url: '',
        md5: '',
        name: ''
      },
      url: {
        list: '/ctop/MaterialImageInfo/pageList'
      },
      detail: false,
      form: this.$form.createForm(this),
      tags: [],
      refuseFile: [],
      refuseReason: '',
      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,
      showUrl: '',
      showUrlWater: '',
      materialDescribe: '',
      name: '',
      detail: null,
      add: true,
      id: '',
      role: {
        roleCode: '',
        roleName: ''
      },
      key: '0',
      mediaId: null,
      repeat: false,
      noList: [],
      material: [],
      excellent: 0,
      code: '',
      bohui:"",
      bohuiShow: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
    }
  },
  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 = 'IMAGE'
    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
    })
  },
  watch: {
    $route: function(n, o) {
      if (n.path == '/modules/material/materialList') {
        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)
      }
    }
  },
  methods: {
    showBoHui(item){
      this.bohui = item
      this.bohuiShow = true
    },
    setSuccess() {
      var params = {}
      params.id = this.code
      params.excellent = this.excellent == 1 ? 0 : 1
      getAction('/ctop/materialInfo/excellent/set', params).then(res => {
        if (res.success) {
          this.excellent = this.excellent == 1 ? 0 : 1
          this.loadData(this.ipagination.current)
        }
      })
    },
    deleteData(id) {
      deleteAction('/ctop/materialInfo/delete', {
        id: id
      }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    moment,
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    a(item) {
      item.showVideo = true
    },
    tongbuImage() {
      this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
        userId: this.userInfo().id,
        projectId: this.queryParam.projectId
      })
    },
    tongbu() {
      if (this.checkArr.length > 1) {
        downFilePost('/download/zip', {
          urls: this.checkArr
        }).then(res => {
          let blob = new Blob([res], {
            type: 'application/zip'
          })
          let downloadElement = document.createElement('a')
          let href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '批量下载' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
      } else {
        let image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')
        image.src = this.checkArr[0]
        image.onload = () => {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(image, 0, 0, image.width, image.height)
          canvas.toBlob(blob => {
            let url = URL.createObjectURL(blob)
            let eleLink = document.createElement('a')
            eleLink.download = '封面下载'
            eleLink.href = url
            eleLink.click()
            eleLink.remove()
            // 用完释放URL对象
            URL.revokeObjectURL(url)
          })
        }
      }
    },
    implement(data) {
      var params = {}
      var dataJson = []
      for (let i = 0; i < this.dataSource.length; i++) {
        for (let j = 0; j < this.checkArr.length; j++) {
          if (this.dataSource[i].url == this.checkArr[j]) {
            dataJson.push(this.dataSource[i].id)
          }
        }
      }
      params.mediaId = this.mediaId
      params.materialArray = JSON.stringify(dataJson)
      params.accountArray = JSON.stringify(data)
      postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
        if (res.code == 0) {
          this.checkArr = []
          this.checkAll = false
        }
      })
      //   /ctop/materialUpload/uploadAccount
    },
    downloadByBlob() {
      if (this.activeKey == 'image') {
        let image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')
        image.src = this.showUrlWater
        image.onload = () => {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(image, 0, 0, image.width, image.height)
          canvas.toBlob(blob => {
            let url = URL.createObjectURL(blob)
            this.download(url, this.name)
            // 用完释放URL对象
            URL.revokeObjectURL(url)
          })
        }
      } else {
        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 {
        var data = this.dataSource.map(item => {
          return item.url
        })
        this.checkArr.push(...data)
      }
      this.checkAll = !this.checkAll
    },
    searchRe() {
      this.queryParam = {
        type: 'IMAGE',
        userId: this.userInfo().id,
        status: this.active
      }
      this.loadData(1)
    },
    getList(value) {
      if (value) {
       getAction('/ctop/projectMember/participateListV2', {
          userId: this.userInfo().id,
          projectId: value,
        }).then((res) => {
          if (res.code == 0) {
            this.mediaId = res.result.records[0].mediaId
          }
        })
      }

      this.loadData()
    },
    onChangeCheck(checkedList) {
      if (checkedList.length == 0) {
        this.checkAll = false
      }
    },
    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
      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/MaterialImageInfo/getDetail', {
        id: item.id
      }).then(res => {
        this.detail = res.result
      })
    },
    imageEdit(item) {
      this.projectId = item.id
      this.videoId = item.videoId
      this.visible = true
    },
    handleOk() {
      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          // 这里做逻辑处理
        } else {
          var params = { ...this.urlList }
          params.id = this.projectId
          params.videoId = this.videoId
          params.status = '0'
          putAction('/ctop/MaterialImageInfo/edit', params).then(res => {
            if (res.success) {
              this.form.resetFields()
              this.urlList = {
                url: '',
                md5: '',
                name: '',
                size: '',
                width: '',
                height: ''
              }
              this.tags = []
              this.loadData()
              this.visible = false
              this.$message.success('素材修改成功')
            }
          })
        }
      })
    },
    close() {
      this.urlList = { url: '', md5: '', name: '', size: '', width: '', height: '' }
      this.visible = false
    },
    onChange(date, dateString) {},
    callbackTwo(key) {
      this.checkAll = false
      this.checkArr = []
      if (this.form.getFieldValue('projectId')) {
        this.form.setFieldsValue({
          projectId: ''
        })
      }
      this.queryParam.status = key
      this.loadData()
    },
    overUpload(urlAll) {
      console.log(urlAll, this.urlList)
      var that = this
      var img = null
      img = new Image()
      that.material = []

      img.src = this.urlList.url
      if (img.complete) {
        that.urlList.width = img.width
        that.urlList.height = img.height
        // 打印
        if (img.width == 720) {
          if (img.height == 1280) {
            that.material.push(true)
          } else {
            that.material.push(false)
          }
        } else if (img.width == 1080) {
          if (img.height == 1920) {
            that.material.push(true)
          } else {
            that.material.push(false)
          }
        } else if (img.width == 1280) {
          if (img.height == 720) {
            that.material.push(true)
          } else {
            that.material.push(false)
          }
        } else if (img.width == 1920) {
          if (img.height == 1080) {
            that.material.push(true)
          } else {
            that.material.push(false)
          }
        } else {
          that.material.push(false)
        }
        console.log(this.material)
      } else {
        // 加载完成执行
        img.onload = function() {
          that.urlList.width = img.width
          that.urlList.height = img.height
          if (img.width == 720) {
            if (img.height == 1280) {
              that.material.push(true)
            } else {
              that.material.push(false)
            }
          } else if (img.width == 1080) {
            if (img.height == 1920) {
              that.material.push(true)
            } else {
              that.material.push(false)
            }
          } else if (img.width == 1280) {
            if (img.height == 720) {
              that.material.push(true)
            } else {
              that.material.push(false)
            }
          } else if (img.width == 1920) {
            if (img.height == 1080) {
              that.material.push(true)
            } else {
              that.material.push(false)
            }
          } else {
            that.material.push(false)
          }
        }
      }
    },
    file(file) {
      console.log(file)
      var bmf = new BMF()
      var that = this
      return new Promise(function(resolve, reject) {
        bmf.md5(file[0], (err, md5) => {
         
          fileCheck({
            code: md5,
            projectId: that.getData('projectId')
          }).then(res => {
            if (res.code == 0) {
              that.$message.error('此素材已经上传')
              reject()
            } else {
               that.urlList.name = file[0].name
                that.urlList.md5 = md5
                that.urlList.size = file[0].size
              resolve()
              //   reject()
            }
          })
        })
      })
    },
    getData(className) {
      return this.form.getFieldValue(className)
    },
    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>
