<style>
#material-card .ant-tabs-tab {
  border: 1px solid gainsboro !important;
}
#material-card .ant-tabs-top-bar {
  position: relative;
  z-index: 100;
}
#material-card .ant-badge-count {
  top: -10px;
}
.detail .ant-form-item {
  margin-bottom: 10px !important;
}
</style>
<style lang="scss" scoped>
@media (min-width: 1024px) {
  .home-item {
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    width: calc(50% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    z-index: 99;
  }
} /*>=1024的设备*/

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

/*>=1280的设备*/

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

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

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

// }
@media (min-width: 1920px) {
  .home-item {
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    width: calc(25% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    z-index: 99;
    cursor: pointer;
  }
}
.actor-photo-list {
  display: flex;
  padding-left: 0;
  li {
    width: 25%;
    margin: 10px;
    position: relative;
    height: 250px;
    border: 1px solid #f2f2f2;
    img,
    video {
      width: 100%;
      margin-top: auto;
      margin-bottom: auto;
      top: 0;
      bottom: 0;
      position: absolute;
      max-height: 250px;
    }
  }
}
.home-card {
  width: 100%;
  overflow: hidden;
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  .home-right {
    width: 100%;
  }
  .bg:after {
    content: '';
    width: 110%;
    height: 110%;
    position: absolute;
    left: -5%;
    top: -5%;
    background: inherit;
    filter: blur(10px);
    z-index: 2;
  }
}
.bh {
  height: 60px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
a {
  font-size: 14px;
}
</style>
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="项目名称">
              <a-select placeholder="请输入项目名称" v-model="queryParam.projectId" @change="getList">
                <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
                  {{ item.projectName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="6" :sm="8">
            <a-form-item label="剪辑">
              <a-input placeholder="请输入剪辑者名称" v-model="queryParam.advertiserId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="编导">
              <a-input placeholder="请输入编导" v-model="queryParam.responsible"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="拍摄">
              <a-input placeholder="请输入拍摄" v-model="queryParam.responsible"></a-input>
            </a-form-item>
          </a-col> -->
          <a-col :md="6" :sm="8">
            <a-form-item label="时间选择">
              <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

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

    <div class="table-operator" style="position:relative;z-index:100">
      <a-button @click="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">
        <div v-if="dataSource.length > 0">
          <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
            <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
              <div class="home-right">
                <a-badge
                  :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
                  :numberStyle="{ backgroundColor: '#52c41a' }"
                  style="width:100%"
                >
                  <span
                    style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
                  >
                    {{ items.materialName }}
                  </span>
                </a-badge>
                <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="edit(items, '2')"
                    v-show="active == '2'"
                    v-if="items.userId == userInfo().id"
                  >
                    修改</a
                  >
                  <a-popconfirm
                    @confirm="okEditShow(items, '2')"
                    v-show="active != '2'"
                    v-if="
                      role.roleCode == 'operator' ||
                        role.roleCode == 'kuaishouOperationManager' ||
                        role.roleCode == 'admin'
                    "
                  >
                    <div slot="title">
                      <div>
                        驳回原因:
                        <a-textarea
                          placeholder="请输入原因"
                          v-model="refuseReason"
                          :autosize="{ minRows: 3, maxRows: 10 }"
                        />
                      </div>
                      <div>
                        截图:
                        <upload-to-ali
                          v-model="refuseFile"
                          :customDomain="customDomain"
                          multiple
                          preview
                          :region="region"
                          :bucket="bucket"
                          :accept="acceptImage"
                          :max="10"
                          :size="1024000"
                          :accessKeyId="accessKeyId"
                          :accessKeySecret="accessKeySecret"
                          :dir="dirImg"
                        ></upload-to-ali>
                      </div>
                    </div>
                    <a href="javascript:;" style="margin-left:20px">驳回</a>
                  </a-popconfirm>

                  <a-popconfirm
                    @confirm="okEditShow(items, '1')"
                    v-show="active != '1'"
                    v-if="
                      role.roleCode == 'operator' ||
                        role.roleCode == 'kuaishouOperationManager' ||
                        role.roleCode == 'admin'
                    "
                  >
                    <div slot="title">
                      <div>
                        广告语:
                        <a-textarea
                          placeholder="请输入"
                          v-model="refuseReason"
                          :autosize="{ minRows: 3, maxRows: 10 }"
                        />
                      </div>
                    </div>
                    <a
                      href="javascript:;"
                      style="margin-left:20px"
                      v-show="active != '1'"
                      v-if="
                        role.roleCode == 'operator' ||
                          role.roleCode == 'kuaishouOperationManager' ||
                          role.roleCode == 'admin'
                      "
                    >
                      通过审核</a
                    >
                  </a-popconfirm>
                  <a-checkbox :value="items.id" style="float:right"></a-checkbox
                ></span>
              </div>
            </div>
          </a-checkbox-group>
          <a-pagination
            size="small"
            :showTotal="ipagination.showTotal"
            style="float:right"
            v-if="dataSource.length > 0"
            showQuickJumper
            :pageSize.sync="ipagination.pageSize"
            :total="ipagination.total"
            v-model="ipagination.current"
            @change="getDataSource"
          />
        </div>
        <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
            alt=""
          />
        </div>
      </a-tab-pane>
    </a-tabs>
    <a-modal title="添加素材" v-model="visible" @ok="handleOk" @cancel="close" :maskClosable="false">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="项目选择">
          <a-select
            v-decorator="[
              'projectId', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请选择项目!' }] }
            ]"
            @change="getProjectId"
          >
            <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
              {{ item.projectName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="图片素材上传">
          <upload-to-ali
            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>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="水印素材上传">
          <upload-to-ali
            v-model="watermarkUrl.url"
            :customDomain="customDomain"
            preview
            :region="region"
            :bucket="bucket"
            :accept="activeKey == 'image' ? acceptImage : acceptVideo"
            :max="10"
            :size="1024000"
            :accessKeyId="accessKeyId"
            :accessKeySecret="accessKeySecret"
            :before-upload="fileWater"
            :dir="activeKey == 'image' ? dirImg : dirVideo"
            @loaded="overUpload"
          ></upload-to-ali>
        </a-form-item>

        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="role.roleName">
          <span>{{ userInfo().realname }}</span>
        </a-form-item>
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 18 }
          }"
          label="标签"
        >
          <template v-for="(tag, index) in tags">
            <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
              <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
                {{ `${tag.slice(0, 20)}...` }}
              </a-tag>
            </a-tooltip>
            <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
              {{ tag }}
            </a-tag>
          </template>
          <a-input
            v-if="inputVisible"
            ref="input"
            type="text"
            size="small"
            :style="{ width: '78px' }"
            :value="inputValue"
            @change="handleInputChange"
            @blur="handleInputConfirm"
            @keyup.enter="handleInputConfirm"
          />
          <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
            <a-icon type="plus" /> New Tag
          </a-tag>
        </a-form-item>
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 18 }
          }"
          label="描述"
        >
          <a-textarea
            placeholder="请输入描述"
            v-decorator="[
              'materialDescribe' // 给表单赋值或拉取表单时，该input对应的key
            ]"
            :autosize="{ minRows: 3, maxRows: 10 }"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal title="素材详情" v-model="visibleDetail" width="70%">
      <div style="display:flex;height:700px">
        <div
          style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2"
        >
          <img :src="showUrl" alt="" v-if="activeKey == 'image'" style="height:100%" />
        </div>
        <div style="flex:3;padding:10px;box-sizing:border-box;">
          <a-form v-if="detail" class="detail">
            <!-- <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              {{ detail.parameter.width }}*{{ detail.parameter.height }}
            </a-form-item>
            <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              {{ detail.parameter.size }}
            </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>
            <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <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'">
              <upload-to-ali
                v-if="refuseFile"
                disabled
                v-model="refuseFile"
                :customDomain="customDomain"
                multiple
                preview
                :region="region"
                :bucket="bucket"
                :accept="acceptImage"
                :max="10"
                :size="1024000"
                :accessKeyId="accessKeyId"
                :accessKeySecret="accessKeySecret"
                :dir="dirImg"
              ></upload-to-ali>
              <div v-else>无截图</div>
            </a-form-item>
            <a-form-item
              label="审核"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }"
              v-if="
                active != '2' &&
                  (role.roleCode == 'operator' ||
                    role.roleCode == 'kuaishouOperationManager' ||
                    role.roleCode == 'admin')
              "
            >
              <a-button type="primary" @click="edit(null, '0', '1')" v-if="active == '0'" style="margin-right:10px"
                >通过审核</a-button
              >
              <a-popconfirm @confirm="okEdit">
                <div slot="title">
                  <div>
                    驳回原因:
                    <a-textarea
                      placeholder="请输入原因"
                      v-model="refuseReason"
                      :autosize="{ minRows: 3, maxRows: 10 }"
                    />
                  </div>
                  <div>
                    截图:
                    <upload-to-ali
                      v-model="refuseFile"
                      :customDomain="customDomain"
                      multiple
                      preview
                      :region="region"
                      :bucket="bucket"
                      :accept="acceptImage"
                      :max="10"
                      :size="1024000"
                      :accessKeyId="accessKeyId"
                      :accessKeySecret="accessKeySecret"
                      :dir="dirImg"
                    ></upload-to-ali>
                  </div>
                </div>
                <a-button type="primary">驳回</a-button>
                <!-- @click="edit(null, '0', '2')" -->
              </a-popconfirm>
            </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 } from '@/api/manage'

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

import BMF from 'browser-md5-file'

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

  data() {
    return {
      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: '' },
      watermarkUrl: { url: '', md5: '', name: '' },
      url: {
        list: '/ctop/materialInfo/list'
      },
      detail: false,
      form: this.$form.createForm(this),
      tags: [],
      refuseFile: [],
      refuseReason: '',
      creativeCopywriter: '',
      customDomain: '',
      region: 'oss-cn-beijing',
      bucket: 'ctop-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
    }
  },
  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()
      }
    }
  },
  methods: {
    moment,
    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 = {}
      params.mediaId = this.mediaId
      params.materialArray = JSON.stringify(this.checkArr)
      params.accountArray = JSON.stringify(data)
      postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
        if (res.code == 0) {
          this.checkArr = []
          this.checkAll = false
        }
      })
      //   /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 {
        this.checkArr = this.dataSource.map(item => {
          return item.id
        })
      }
      this.checkAll = !this.checkAll
    },
    searchRe() {
      this.queryParam.projectId = ''
      this.queryParam.createTime = ''
      this.loadData()
    },
    getList(value) {
      this.mediaId = this.dataElse.filter(item => {
        if (value == item.projectId) {
          return item
        }
      })[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
      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
      })
    },
    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.urlList.url
          params.materialName = this.urlList.name
          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)
                }
              }
            })
          } else {
            fileEdit({ ...params, status: '0' }).then(res => {
              this.form.resetFields()
              this.urlList = { url: '', md5: '', name: '' }
              this.watermarkUrl = { url: '', md5: '', name: '' }
              this.tags = []
              this.loadData()
              this.visible = false
              this.add = true
              for (const key in this.role) {
                if (key == 'roleCode') {
                  this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
                }
              }
            })
          }
        }
      })
    },
    close() {
      //   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 = []
      if (this.form.getFieldValue('projectId')) {
        this.form.setFieldsValue({ projectId: '' })
      }
      this.queryParam.status = key
      this.loadData()
    },
    overUpload(urlAll) {},
    file(file) {
      var bmf = new BMF()
      var that = this
      return new Promise(function(resolve, reject) {
        bmf.md5(file[0], (err, md5) => {
          that.urlList.name = file[0].name
          that.urlList.md5 = md5
          fileCheck({ code: md5 }).then(res => {
            if (res.code == 0) {
              that.$message.error('此素材已经上传')
              reject()
            } else {
              resolve()
              //   reject()
            }
          })
        })
      })
    },
    fileWater(file) {
      var bmf = new BMF()
      var that = this
      return new Promise(function(resolve, reject) {
        bmf.md5(file[0], (err, md5) => {
          that.watermarkUrl.name = file[0].name
          that.watermarkUrl.md5 = md5
          fileCheck({ code: md5 }).then(res => {
            if (res.code == 0) {
              that.$message.error('此素材已经上传')
              reject()
            } else {
              resolve()
            }
          })
        })
      })
    },
    getParticipateList() {
      getAction('/ctop/projectMember/participateList', { userId: this.userInfo().id }).then(res => {
        if (res.code == 0) {
          this.dataElse = res.result
        }
      })
    },
    getProjectId(items) {
      getAction('/ctop/projectMember/getMemberList', { projectId: items }).then(res => {
        if (res.code == 0) {
          this.ascription.clipId = res.result.filter(item => {
            if (item.roleCode == 'clip') {
              return { userId: item.userId, userName: item.userName }
            }
          })
          this.ascription.shotId = res.result.filter(item => {
            if (item.roleCode == 'shot') {
              return { userId: item.userId, userName: item.userName }
            }
          })
          this.ascription.planId = res.result.filter(item => {
            if (item.roleCode == 'plan') {
              return { userId: item.userId, userName: item.userName }
            }
          })
          this.ascription.planeId = res.result.filter(item => {
            if (item.roleCode == 'plane') {
              return { userId: item.userId, userName: item.userName }
            }
          })
        }
      })
    },
    getDataSource(page, pageSize) {
      this.ipagination.current = page
      this.checkArr = []
      this.checkAll = false
      this.loadData()
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
