<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">
            <!-- <a-form-item label="项目名称"> -->
            <selectTable :projectId.sync="queryParam.projectId"></selectTable>
          </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>
    <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">
        <div v-if="dataSource.length > 0">
          <a-button @click="onCheckAllChange">{{ checkAll ? '取消  (  ' + checkArr.length + '  )' : '全选' }}</a-button>
          <!-- 同步项目选择：
          <a-select showSearch v-model="projectId" placeholder="选择项目" style="width: 500px" optionFilterProp="children"
            :filterOption="filterOption" allowClear>
            <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
              {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                item.mediaId == '1' ? '头条' : '快手'
              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
            </a-select-option>
          </a-select> -->

          <a-button :disabled="checkArr.length == 0" v-if="queryParam.projectId " @click="tongbu">一键同步</a-button>
          <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="active == 'IMAGE'" :src="items.url"
                    style="height:200px;max-width:100%;position:absolute;z-index:10;" />
                  <img v-else :src="items.coverUrl" alt=""
                    style="height:200px;max-width:100%;position:absolute;z-index:10;" />
                </div>

                <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
                  {{ items.createTime | getDate }}

                  <a-checkbox :value="items.url" 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>
      </a-tab-pane>
    </a-tabs>

    <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="active == 'IMAGE'" style="height:100%" />
          <video class="video" :src="showUrl" controls="controls" style="width:100%" v-else>
            您的浏览器不支持 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>
            <div v-if="detail.ascription">
              <a-form-item label="策划" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                {{ detail.ascription.planName }}
              </a-form-item>
              <a-form-item label="拍摄" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                {{ detail.ascription.shotName }}
              </a-form-item>
              <a-form-item label="剪辑" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
                v-if="detail.ascription.clipName">
                {{ detail.ascription.clipName }}
              </a-form-item>
              <a-form-item label="平面" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
                v-if="detail.ascription.planeName">
                {{ detail.ascription.planeName }}
              </a-form-item>
            </div>
            <div v-if="detail.parameter">
              <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>
            <div class="downLoad" v-if="active=='VIDEO'">
              <a-form-item label="生成水印素材" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-select :defaultValue="4" v-model="size" style="width:70%">
                  <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">{{
                    item.name
                  }}</a-select-option>
                </a-select>
                <a-button type="primary" @click="getWater">生成</a-button>
              </a-form-item>
            </div>
            <div v-if="showUrlWater">
              <a-form-item label="水印素材链接" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-input v-model="showUrlWater" type="text" readonly  />
              </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-item label="广告语" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '1'">
              {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
            </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 {
    fileCheck,
    fileInsert,
    fileEdit
  } from '@/api/actor'
  import {
    getAction,
    postAction,
    postFile,
    downFile,
    downFilePost,
    deleteAction
  } from '@/api/manage'

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

  import selectTable from '@/views/modules/Statistics/components/selecTable.vue'
  import {
    stopOtherVideo,
    closeAllVideoFun
  } from '@/utils/videoControl'
  import BMF from 'browser-md5-file'
  import qs from 'qs'
  import accountCheck from './accountCheck'
  export default {
    name: 'YardList',
    mixins: [JeecgListMixin],
    components: {
      JEllipsis,
      UploadToAli,
      accountCheck,
      selectTable
    },

    data() {
      return {
        inputVisible: false,
        projectId: undefined,
        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: 'IMAGE',
        examinelList: [{
            value: 'IMAGE',
            tab: '优秀图片'
          },
          {
            value: 'VIDEO',
            tab: '优秀视频'
          }
        ],
        // 表头
        columns: [],
        urlList: {
          url: [],
          md5: [],
          name: []
        },
        imageArr: [],
        watermarkUrl: {
          url: '',
          md5: '',
          name: ''
        },
        url: {
          list: '/ctop/materialInfo/excellent/list'
        },
        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: '',
        sizeType: [],
        size: ""
      }
    },
    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
      //   })
      getAction('/ctop/videoWatermarkTemplate/list').then(res => {
        if (res.success) {
          this.sizeType = res.result.records
        }
      })
    },
    watch: {
      'queryParam.projectId': function (n, o) {
        if (n != '') {
          this.getList(n)
        }
      }
    },
    methods: {
      getWater() {
        var params = qs.stringify({
          id: this.id,
          watermarkTemplateId: this.size
        })
        postAction('/ctop/materialInfo/watermark', params).then(res => {
          if (res.success) {
            // getAction("/ctop/videoWatermarkTask/list").then(res=>{
            //     console.log(res)
            // })
            this.$message.success('水印素材生成中,请一分钟后刷新')
            this.visibleDetail = false
            this.refuseFile = []
            this.refuseReason = ''
            closeAllVideoFun()
            this.loadData()
          }
        })
      },
      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
      },
      tongbu() {
        this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
          userId: this.userInfo().id,
          projectId: this.queryParam.projectId
        })
      },
      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.projectId = ''
        if (this.queryParam.createTime) {
          this.queryParam.createTime = ''
        }
        this.loadData()
      },
      getList(value) {
        if (value) {
          this.mediaId = this.dataElse.filter(item => {
            if (value == item.projectId) {
              return item
            }
          })[0].mediaId
        }
        console.log(this.mediaId)
      },
      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

        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
        })
      },
      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
          })
        }
      },
      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.add ? null : this.urlList.url[0]
            //   params.materialName = this.urlList.name
            params.imageArr = this.add ? this.urlList.url : null
            //   params.watermarkCode = this.watermarkUrl.md5
            //   params.watermarkUrl = this.watermarkUrl.url
            //   params.watermarkMaterialName = this.watermarkUrl.name
            params.userId = this.userInfo().id
            params.projectId = values.projectId
            params.materialDescribe = values.materialDescribe
            params.type = 'IMAGE'
            params.ascription =
              this.activeKey == 'image' ?
              roleCode : {
                planId: values.planId,
                shotId: values.shotId,
                clipId: values.clipId
              }
            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)
                  }
                }
                this.$message.success('素材上传成功')
              })
            } 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)
                  }
                }
                this.$message.success('素材修改成功')
              })
            }
          }
        })
      },
      close() {
        //   this.form.resetFields()
        //   this.urlList = { url: '', md5: '', name: '' }
        //   this.watermarkUrl = { url: '', md5: '', name: '' }
        //   this.tags = []
      },
      onChange(date, dateString) {},
      callbackTwo(key) {
        this.checkAll = false
        this.checkArr = []
        this.queryParam.type = key
        this.loadData()
      },
      overUpload(urlAll) {
        console.log(urlAll, this.urlList)

        //   var index = this.urlList.url.findIndex(item => item === urlAll[0])
        //   var data = { url: urlAll[0], code: this.urlList.md5[index], name: this.urlList.name[index] }
        //   this.imageArr.push(data)
        //   console.log(this.imageArr)
        var that = this
        var img = null
        img = new Image()
        that.material = []
        for (let i = 0; i < this.urlList.url.length; i++) {
          img.src = this.urlList.url[i]
          if (img.complete) {
            // 打印
            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 () {
              // 打印
              // alert('from:onload : width:' + img.width + ',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) {
          for (let i = 0; i < file.length; i++) {
            bmf.md5(file[i], (err, md5) => {
              //   that.urlList.name.push(file[0].name)
              //   that.urlList.md5.push(md5)

              fileCheck({
                code: md5,
                projectId: that.getData('projectId')
              }).then(res => {
                if (res.code == 0) {
                  that.$message.error('此素材已经上传')
                  reject()
                } else {
                  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>