<style lang="scss">
.downLoad .ant-form-item-control-wrapper {
  width: 70%;
}
#material-card .ant-tabs-tab {
  border: 1px solid gainsboro !important;
}

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

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

.detail .ant-form-item {
  margin-bottom: 10px !important;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  //   height: 160px;
  //   line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

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

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

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

.content {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .slick-dots {
    bottom: 55px;
  }
}
.video-content {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #f2f2f2;
}
.tag-video {
  position: absolute;
  right: 0px;
  top: 8px;
  padding: 4px;
  border-radius: 2px;
  line-height: 16px;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
}
.home-item {
  overflow: hidden;
}



@media only screen and (min-width: 1200px) {
  .home-item {
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    width: calc(50% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    z-index: 99;
  }
}

/*>=1024的设备*/

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

/*>=1280的设备*/

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

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

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

// }
// @media (min-width: 1920px) {
//   .home-item {
//     border-style: solid;
//     border-width: 1px;
//     border-color: #e4e4e4;
//     width: calc(25% - 10px);
//     padding: 10px;
//     margin-right: 10px;
//     margin-bottom: 10px;
//     display: flex;
//     align-items: center;
//     background: #fff;
//     position: relative;
//     z-index: 99;
//     cursor: pointer;
//   }
// }

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

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

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

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

  .home-right {
    width: 100%;
  }

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

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

.bhShow {
  height: 100px;
  line-height: 25px;
  text-align: center;
}

.bhShow span {
  font-size: 14px;
}

.show-data {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

a {
  font-size: 14px;
}
.actor-photo-list {
  display: flex;
  padding-left: 0;
  li {
    width: 25%;
    margin: 10px;
    position: relative;
    height: 250px;
    border: 1px solid #f2f2f2;
    list-style: none;
    img,
    video {
      width: 100%;
      margin-top: auto;
      margin-bottom: auto;
      top: 0;
      bottom: 0;
      position: absolute;
      max-height: 250px;
    }
  }
}
</style>
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <!-- <a-form-item label="项目名称"> -->
            <selectTable :projectId.sync="queryParam.projectId"></selectTable>
          </a-col>
           <a-col :md="8" :sm="8">
            <a-form-item label="素材名称">
              <a-input placeholder="请输入素材名称" v-model="queryParam.materialName"></a-input>
            </a-form-item>
          </a-col>
          <!--  -->
          <a-col :md="8" :sm="8">
            <a-form-item label="时间选择">
              <a-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
          confirmLoading = false
          add = true
        "
        type="primary"
        icon="plus"
        >新增</a-button
      >
      <a-button
        @click="onCheckAllChange"
        v-if="
          queryParam.projectId &&
            active == '1' &&
            (role.roleCode == 'operator' ||
              role.roleCode == 'kuaishouOperationManager' ||
              role.roleCode == 'admin' ||
              role.roleCode == 'operationAssistant' ||
              role.roleCode == 'touTiaoOperationManager')
        "
        >{{ checkAll ? '取消  (  ' + checkArr.length + '  )' : '全选' }}</a-button
      >
      <a-button
        v-if="
          queryParam.projectId &&
            active == '1' &&
            (role.roleCode == 'operator' ||
              role.roleCode == 'kuaishouOperationManager' ||
              role.roleCode == 'admin' ||
              role.roleCode == 'operationAssistant' ||
              role.roleCode == 'touTiaoOperationManager')
        "
        :disabled="checkArr.length == 0"
        @click="tongbu"
        >一键同步</a-button
      >
    </div>

    <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
      <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
        <div v-if="dataSource.length > 0">
          <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
            <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
              <span v-if="items.excellent == 0"></span>
              <span
                v-else
                style="position:absolute;top:30px;right:-105px;display:block;width:300px;height:30px;text-align:center;line-height;30px;background:red;transform:rotate(45deg);z-index:1000"
                >优秀素材</span
              >
              <div class="home-right">
                <a-badge
                  :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
                  :numberStyle="{ backgroundColor: '#52c41a' }"
                  style="width:100%;display:flex"
                  @click.stop
                >
                  <span
                    style="color: #999; fontSize: 14px;padding-bottom:10px;display:inline-block;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                    :title="items.projectName"
                  >
                    {{ items.projectName }}
                  </span>
                  <span
                    style="color: #999; fontSize: 14px;padding-bottom:10px;display:inline-block;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                    :title="items.materialName"
                  >
                     {{items.materialName}}
                  </span>
                 
                  <a-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;">
                  <!-- <video
                    :src="items.url"
                    @canplay="a(items)"
                    style="height:200px;max-width:100%;position:absolute;z-index:10;"
                  /> -->
                  <div style="width: 100px;position: absolute;left: 0;z-index:1000">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ items.kuaishouEffiType == 1 ? '快手有效视频' : '已经同步到快手平台' }}</span>
                      </template>
                      <img
                        style="width:30px;height:30px;"
                        v-if="items.kuaishouVideoIsUp == 1"
                        :style="{ filter: items.kuaishouEffiType == 1 ? 'grayscale(0%)' : 'grayscale(100%)' }"
                        src="./kuaishou.jpg"
                      />
                    </a-tooltip>
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ items.toutiaoEffiType == 1 ? '抖音有效视频' : '已经同步到抖音平台' }}</span>
                      </template>
                      <img
                        v-if="items.toutiaoVideoIsUp == 1 && items.toutiaoEffiType == 1"
                        style="width:30px;height:30px;margin-left:5px;"
                        src="./douyin.jpg"
                        alt=""
                      />
                      <img
                        v-else-if="items.toutiaoVideoIsUp == 1 && items.toutiaoEffiType == 0"
                        style="width:30px;height:30px;margin-left:5px;"
                        src="./douyinhui.jpg"
                        alt=""
                      />
                    </a-tooltip>
                  </div>

                  <a-icon
                    type="fire"
                    style="font-size:20px;position: absolute;right: 0;bottom:10px;z-index:1000;color:red"
                    v-if="items.whetherUnaudited"
                  />
                  <img
                    :src="items.coverUrl"
                    alt=""
                    style="height:200px;max-width:100%;position:absolute;z-index:10;"
                  />
                  <!-- <img
                    src="./timg.gif"
                    v-if="!items.showVideo"
                    alt=""
                    style="height:200px;max-width:100%;position:absolute;z-index:11;"
                    @click.stop
                  /> -->
                </div>
                <div style="width:100%;height:1px;border-bottom:1px solid #f2f2f2;margin-top:5px"></div>
                <div v-if="active == '2'" class="bh">驳回原因：{{ items.refuseReason }}</div>

                <div
                  v-if="active == '1'"
                  class="bhShow"
                  style="display:flex;justify-content:space-between;"
                  @click.stop="showData(items)"
                >
                  <div v-if="items.byteDance" class="show-data">
                    <span>抖音</span>
                    <span>消耗:{{ items.byteDance.cost }}</span>
                    <span>封面点击:{{ items.byteDance.click }}</span>
                    <span>封面展示:{{ items.byteDance.showNum }}</span>
                  </div>
                  <div v-else style="line-height:100px;" class="show-data">
                    <span>抖音:无</span>
                  </div>
                  <div v-if="items.kuaiShou" class="show-data">
                    <span>快手</span>
                    <span>消耗:{{ items.kuaiShou.charge }}</span>
                    <span>封面点击:{{ items.kuaiShou.photoClick }}</span>
                    <span>封面展示:{{ items.kuaiShou.photoShow }}</span>
                  </div>
                  <div v-else style="line-height:100px;" class="show-data">
                    <span>快手:无</span>
                  </div>
                </div>
                <div
                  style="width:100%;height:1px;border-bottom:1px solid #f2f2f2;margin-top:5px"
                  v-if="active != '0'"
                ></div>
                <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
                  <a
                    href="javascript:;"
                    style="margin-right:20px"
                    @click="edit(items, '2')"
                    v-show="active == '2'"
                    v-if="items.userId == userInfo().id"
                  >
                    修改</a
                  >
                  <a
                    href="javascript:;"
                    style="margin-right:20px"
                    v-show="active !='3'"
                    @click="personEdit(items, '2')"
                    v-if="items.userId == userInfo().id||role.roleCode =='designTeamLeader'"
                  >
                    人员修改</a
                  >
                  <a-popconfirm
                    @confirm="okEditShow(items, '2')"
                    v-show="active != '2'&&active!='3'"
                    v-if="
                      role.roleCode == 'operator' ||
                        role.roleCode == 'kuaishouOperationManager' ||
                        role.roleCode == 'admin' ||
                        role.roleCode == 'operationAssistant' ||
                        role.roleCode == 'touTiaoOperationManager'
                    "
                  >
                    <div slot="title">
                      <div>
                        驳回原因:
                        <a-textarea
                          placeholder="请输入原因"
                          v-model="refuseReason"
                          :autosize="{ minRows: 3, maxRows: 10 }"
                        />
                      </div>
                      <div>
                        截图:
                        <uploadFile 
                        v-if="refuseFile"
                        :value.sync="refuseFile"
                        :fileCount="15"
                        uploadType="image"
                        />
                        <!-- <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-right:20px">驳回</a>
                  </a-popconfirm>

                  <a-popconfirm
                    @confirm="okEditShow(items, '1')"
                    v-show="active != '1'&&active!='3'"
                    v-if="
                      role.roleCode == 'operator' ||
                        role.roleCode == 'kuaishouOperationManager' ||
                        role.roleCode == 'admin' ||
                        role.roleCode == 'operationAssistant' ||
                        role.roleCode == 'touTiaoOperationManager'
                    "
                  >
                    <div slot="title">
                      <div>
                        广告语:
                        <a-textarea
                          placeholder="请输入"
                          v-model="refuseReason"
                          :autosize="{ minRows: 3, maxRows: 10 }"
                        />
                      </div>
                    </div>
                    <a
                      href="javascript:;"
                      style="margin-right:20px"
                      v-show="active != '1'"
                      v-if="
                        role.roleCode == 'operator' ||
                          role.roleCode == 'kuaishouOperationManager' ||
                          role.roleCode == 'admin' ||
                          role.roleCode == 'operationAssistant' ||
                          role.roleCode == 'touTiaoOperationManager'
                      "
                    >
                      通过审核</a
                    >
                  </a-popconfirm>
                  <a
                    v-show="active!='3'"
                    style="margin-right:20px"
                    @click="addImage(items)"
                    >添加封面</a
                  >
                  <a
                    style="margin-right:20px"
                    @click="showImage(items)"
                    >推荐封面</a
                  >
                  <a-checkbox :value="items.id" style="float:right" v-show="active == '1'"></a-checkbox>
                  <br>
                  {{ items.createTime | getDate }}
                </span>
              </div>
            </div>
          </a-checkbox-group>
          <a-pagination
            size="small"
            :showTotal="ipagination.showTotal"
            style="float:right"
            v-if="dataSource.length > 0"
            showQuickJumper
            :pageSize.sync="ipagination.pageSize"
            :total="ipagination.total"
            v-model="ipagination.current"
            @change="getDataSource"
          />
        </div>
        <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
            alt="" v-if="!loading"/>
            <img
            v-else
            src="./loading.gif"
            />
        </div>
      </a-tab-pane>
    </a-tabs>
    <a-modal title="封面上传" @cancel="closeImage" @afterClose="closeImage" v-model="addImageVisible">
      <template slot="footer">
        <a-button key="back" @click="closeImage">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOkImage" :loading="loadingImage">
          确定
        </a-button>
      </template>
      <a-form-item label="" class="add-image-material">
          <uploadFile 
          v-if="addImageVisible"
          :value.sync="urlListImage.url"
          :checkFile="fileWater" 
          @overUpload="overUploadImage" 
          @removeUpload="deleteImage"
          :fileCount="15"
          uploadType="image"
          />

        <!-- <upload-to-ali
          style="width:100%"
          v-model="urlListImage.url"
          :customDomain="customDomain"
          :multiple="true"
          preview
          :region="region"
          :bucket="bucket"
          :accept="acceptImage"
          :max="10"
          :size="1024000"
          :accessKeyId="accessKeyId"
          :accessKeySecret="accessKeySecret"
          :before-upload="fileWater"
          :dir="dirImg"
          @delete='deleteImage'
          @loaded="overUploadImage"
        ></upload-to-ali> -->
        <span v-if="material.filter(item => item == false).length > 0 && urlListImage.url.length > 0" style="color:red"
          >上传素材的尺寸不符,请修改(<span v-for="(item, index) of material" :key="index" v-show="!item"
            >第{{ index + 1 }}张</span
          >出错)</span
        >
        <span
          v-else-if="urlListImage.url.length > 0 && material.filter(item => item == false).length == 0"
          style="color:green"
          >上传成功</span
        >
      </a-form-item>
    </a-modal>
    <a-modal title="数据详情" v-model="showDataBool" :footer="null">
      <div class="bhShow" style="display:flex;justify-content:space-between;height:400px">
        <div v-if="douyinData" class="show-data">
          <span style="color:black;font-size:18px;text-align:center;width:100%">抖音</span>
          <span>消耗:{{ douyinData.cost }}</span>
          <span>封面点击:{{ douyinData.click }}</span>
          <span>封面展示:{{ douyinData.showNum }}</span>
          <span>激活:{{ douyinData.active }}</span>
          <span>转化量:{{ douyinData.convertNum }}</span>
          <span>表单提交:{{ douyinData.form }}</span>
          <span>下载注册:{{ douyinData.register }}</span>
          <span>视频总播放:{{ douyinData.totalPlay }}</span>
          <span>视频有效播放:{{ douyinData.validPlay }}</span>
        </div>
        <div v-if="kuaishouData" class="show-data">
          <span style="color:black;font-size:18px;text-align:center;width:100%">快手</span>
          <span>消耗:{{ kuaishouData.charge }}</span>
          <span>封面点击:{{ kuaishouData.photoClick }}</span>
          <span>封面展示:{{ kuaishouData.photoShow }}</span>
          <span>素材曝光数:{{ kuaishouData.aclick }}</span>
          <span>激活数:{{ kuaishouData.activation }}</span>
          <span>行为数:{{ kuaishouData.bclick }}</span>
          <span>表单提交数:{{ kuaishouData.formCount }}</span>
        </div>
      </div>
    </a-modal>

    <a-modal :title="add?'添加素材':'修改素材'" v-model="visible" @cancel="close" @afterClose="close" :maskClosable="false" :width="800">
      <template slot="footer">
        <a-button key="back" @click="close">取消</a-button>
        <a-button key="submit" type="primary" :disabled="!confirmLoading" :loding="loading" @click="handleOk">
          确定
        </a-button>
      </template>
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="项目选择">
          <!-- <selectTable :projectId.sync="projectId" /> -->
          <a-select
            v-decorator="[
              'projectId', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请选择项目!' }] }
            ]"
            @change="getProjectId"
            showSearch
            optionFilterProp="children"
            :filterOption="filterOption"
            :disabled="!add"
          >
            <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" ? '头条' :item.mediaId == "2"? '快手':item.mediaId == "3"?'头条内广':'快手内广'
              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传" v-if="getData('projectId')">
          <uploadFile 
          :checkFile="file" 
          :value.sync="urlList.url"
          @overUpload="overUpload" 
          @removeUpload="removeUpload"
          :fileCount="10"
          uploadType="video" 
          :multiple="false"
          />
          <!-- <upload-to-ali
            v-model="urlList.url"
            :customDomain="customDomain"
            preview
            :region="region"
            :bucket="bucket"
            :accept="acceptVideo"
            :max="10"
            :size="1024000"
            :accessKeyId="accessKeyId"
            :accessKeySecret="accessKeySecret"
            :before-upload="file"
            :dir="dirVideo"
            @loaded="overUpload"
          >
          </upload-to-ali> -->
          <span v-if="repeat" style="color:red">
            此素材重复,请重新选择上传
          </span>
          <span v-if="confirmLoading && urlList.url != ''" style="color:green">
            上传成功
          </span>
        </a-form-item>
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="封面上传"
          class="add-image-material"
          v-if="getData('projectId')&&add&&urlList.url!=''"
        >
          <!-- <upload-to-ali
            style="width:160%"
            v-model="urlListImage.url"
            :customDomain="customDomain"
            :multiple="true"
            preview
            :region="region"
            :bucket="bucket"
            :accept="acceptImage"
            :max="10"
            :size="1024000"
            :accessKeyId="accessKeyId"
            :accessKeySecret="accessKeySecret"
            :before-upload="fileWater"
            :dir="dirImg"
            @delete='deleteImage'
            @loaded="overUploadImage"
          ></upload-to-ali> -->
          <uploadFile 
          :value.sync="urlListImage.url"
          :checkFile="fileWater" 
          @overUpload="overUploadImage" 
          @removeUpload="deleteImage"
          :fileCount="15"
          uploadType="image"
          />
          <span
            v-if="material.filter(item => item == false).length > 0 && urlListImage.url.length > 0"
            style="color:red"
            >上传素材的尺寸不符,请修改(<span v-for="(item, index) of material" :key="index" v-show="!item"
              >第{{ index + 1 }}张</span
            >出错)</span
          >
          <span
            v-else-if="urlListImage.url.length > 0 && material.filter(item => item == false).length == 0"
            style="color:green"
            >上传成功</span
          >
        </a-form-item>
        <div v-if="add">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="策划" v-if="activeKey == 'video'">
            <a-select
              v-decorator="[
                'planId', // 给表单赋值或拉取表单时，该input对应的key
                { rules: [{ required: true, message: '请选择策划!' }] }
              ]"
               showSearch
               optionFilterProp="children"
               :filterOption="filterOption"
            >
              <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">
                {{ item.userName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄" v-if="activeKey == 'video'">
            <a-select
              v-decorator="[
                'shotId' // 给表单赋值或拉取表单时，该input对应的key
              ]"
              showSearch
              optionFilterProp="children"
              :filterOption="filterOption"
            >
              <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">
                {{ item.userName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
            <a-select
              v-decorator="[
                'clipId', // 给表单赋值或拉取表单时，该input对应的key
                { rules: [{ required: true, message: '请选择剪辑!' }] }
              ]"
              showSearch
              optionFilterProp="children"
              :filterOption="filterOption"
            >
              <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">
                {{ item.userName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </div>
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 18 }
          }"
          label="标签"
          v-if="add"
        >
          <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: 12 }
          }"
          label="描述"
          v-if="add"
        >
          <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%" :footer="null">
      <div style="width:100%;height:35px">
        <a-button type="primary" @click="setSuccess" style="float:right">
          {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
        </a-button>
      </div>
      <div style="display:flex;height:700px">
        <div
          class="video-content"
          style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2"
        >
          <video class="video" :src="showUrl" controls="controls" style="height:50%" controlsList="nodownload">
            您的浏览器不支持 video 标签。
          </video>
          <div class="downLoad" style="height:50%;overflow:auto">
            <a-button @click="onCheckAllImageChange" v-if="model.length > 0">{{
              checkAllImage ? '取消  (  ' + checkArrImage.length + '  )' : '全选'
            }}</a-button>
            <ul class="actor-photo-list" :style="{ width: model.length>4?25 * model.length + '%':'100%' }" v-if="model.length > 0">
              <a-checkbox-group
                v-model="checkArrImage"
                style="width:100%;  display: flex;padding-left: 0;"
                @change="onChangeCheckImage"
              >
                <li v-for="(item, index) of model" :key="index">
                  <a-checkbox :value="item.id" style="position:absolute;z-index: 100"></a-checkbox
                  ><img class="video" :src="item.url" @click="coverPreviewShowModal(item, index)" />
                  <span
                    class="tag-video"
                    :style="{
                      backgroundColor:
                        item.status == 0 ? 'rgba(0, 0, 0)' : item.status == 1 ? 'rgba(0, 180, 100)' : 'red'
                    }"
                    >{{ item.status == 0 ? '未审核' : item.status == 1 ? '已批准' : '已驳回' }}</span
                  >
                </li>
              </a-checkbox-group>
            </ul>
            <div v-else style="height:100%;display:flex;justify-content: center;align-items: center;">
              <img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
                alt="" />
            </div>
          </div>
        </div>
        <a-modal title="图片预览" v-model="coverPreviewVisible" :footer="null">
          <a-carousel arrows class="cover_carousel_con">
            <div v-for="(item, index) in modelNew" :key="index" class="content">
              <img :src="item.url" :width="300" />
              <div style="margin-top:10px">
                <a-button type="primary" @click="editImage(item, '1')">
                  通过审核
                </a-button>
                <a-divider type="vertical" />
                <a-popconfirm @confirm="editImage(item, '2')">
                  <div slot="title">
                    <div>
                      驳回原因:
                      <a-textarea
                        placeholder="请输入原因"
                        v-model="refuseReasonImage"
                        :autosize="{ minRows: 3, maxRows: 10 }"
                      />
                    </div>
                  </div>
                  <a-button type="primary">驳回</a-button>
                  <!-- @click="edit(null, '0', '2')" -->
                </a-popconfirm>
              </div>
            </div>
            <a-icon
              type="left-circle"
              slot="prevArrow"
              slot-scope
              style="left: 10px;zIndex: 9;font-size:30px;color:black"
            />
            <a-icon
              type="right-circle"
              slot="nextArrow"
              slot-scope
              style="right: 10px;zIndex: 9;font-size:30px;color:black"
            />
          </a-carousel>
        </a-modal>
        <div style="flex:3;padding:10px;box-sizing:border-box;">
          <a-form v-if="detail" class="detail ant-advanced-search-form" layout="inline">
            <div v-if="detail.parameter" style="display:flex;">
              <a-form-item label="视频时长" v-if="detail.parameter.second" style="flex:1">
                {{ detail.parameter.second }}秒
              </a-form-item>
              <a-form-item label="尺寸" style="flex:1" v-if="detail.parameter.width">
                {{ detail.parameter.width }}*{{ detail.parameter.height }}
              </a-form-item>
              <a-form-item label="大小" style="flex:1" v-if="detail.parameter.size">
                {{ detail.parameter.size }}
              </a-form-item>
            </div>
            <div v-if="detail.ascription" style="display:flex;">
              <a-form-item label="策划" style="flex:1">
                {{ detail.ascription.planName }}
              </a-form-item>
              <a-form-item label="拍摄" style="flex:1">
                {{ detail.ascription.shotName }}
              </a-form-item>
              <a-form-item label="剪辑" v-if="detail.ascription.clipName" style="flex:1">
                {{ detail.ascription.clipName }}
              </a-form-item>
            </div>
            <div>
              <a-form-item label="标签" v-if="detail.tag">
                <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
              </a-form-item>
            </div>
            <div>
              <a-form-item label="无水印素材下载" v-if="name">
                <a-button type="primary" @click="downloadByBlobShowUrl">下载</a-button>
              </a-form-item>
            </div>
            <div>
              <a-form-item label="水印素材下载" v-if="name">
                <a-button type="primary" @click="downloadByBlob" v-if="showUrlWater">下载</a-button>
                <span v-else>水印素材生成中,请一分钟后刷新</span>
              </a-form-item>
            </div>
            <div>
              <a-form-item label="水印素材链接" v-if="showUrlWater">
                <a-input v-model="showUrlWater" type="text" readonly />
              </a-form-item>
            </div>
            <div style="width:100%" class="downLoad">
              <a-form-item label="生成水印素材" style="width:100%">
                <a-select :defaultValue="4" v-model="size" style="width:80%">
                  <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>
              <a-form-item label="审核人" v-if="active == '2' && detail.auditorName">
                {{ detail.auditorName }}
              </a-form-item>
            </div>
            <div>
              <a-form-item label="广告语" v-if="active == '1'">
                {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
              </a-form-item>
            </div>
            <div>
              <a-form-item label="驳回原因" v-if="active == '2'">
                {{ refuseReason ? refuseReason : '无原因' }}
              </a-form-item>
            </div>
            <div>
              <a-form-item label="截图" v-if="active == '2'">
                <div v-if="refuseFile" style="width:100%">
                    <img style="width:100px;height:auto;margin:5px"  @click="showBoHui(item)" :src="item" v-for="(item,index) in refuseFile" :key="index" alt="">
                </div>
                
                <!-- :checkFile="fileWater" 
                @overUpload="overUploadImage" 
                @removeUpload="deleteImage" -->
                <!-- <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>
            </div>
            <div>
              <a-form-item
                label="视频审核"
                v-if="
                  active != '2' &&
                    (role.roleCode == 'operator' ||
                      role.roleCode == 'kuaishouOperationManager' ||
                      role.roleCode == 'admin' ||
                      role.roleCode == 'operationAssistant' ||
                      role.roleCode == 'touTiaoOperationManager')
                "
              >
                <a-popconfirm
                  @confirm="edit(null, '0', '1')"
                  v-show="active != '1'"
                  v-if="
                    role.roleCode == 'operator' ||
                      role.roleCode == 'kuaishouOperationManager' ||
                      role.roleCode == 'admin' ||
                      role.roleCode == 'operationAssistant' ||
                      role.roleCode == 'touTiaoOperationManager'
                  "
                >
                  <div slot="title">
                    <div>
                      广告语:
                      <a-textarea placeholder="请输入" v-model="refuseReason" :autosize="{ minRows: 3, maxRows: 10 }" />
                    </div>
                  </div>
                  <a-button type="primary" v-if="active == '0'" style="margin-right:10px">通过审核</a-button>
                </a-popconfirm>
                <a-popconfirm @confirm="okEdit" v-show="active != '2'">
                  <div slot="title">
                    <div>
                      驳回原因:
                      <a-textarea
                        placeholder="请输入原因"
                        v-model="refuseReason"
                        :autosize="{ minRows: 3, maxRows: 10 }"
                      />
                    </div>
                    <div>
                      截图:
                        <uploadFile 
                        v-if="refuseFile"
                        :value.sync="refuseFile"
                        :fileCount="15"
                        uploadType="image"
                        />
                      <!-- <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" v-show="active != '2'">驳回</a-button>
                  <!-- @click="edit(null, '0', '2')" -->
                </a-popconfirm>
              </a-form-item>
            </div>
            <div>
              <a-form-item label="封面审核" style="width:120%">
                <a-button type="primary" :disabled="checkArrImage.length == 0" @click="editImageAll('1')"
                  >通过审核</a-button
                >
                <a-popconfirm @confirm="editImageAll('2')" v-show="active != '2'">
                  <div slot="title">
                    <div>
                      驳回原因:
                      <a-textarea
                        placeholder="请输入原因"
                        v-model="refuseReasonImage"
                        :autosize="{ minRows: 3, maxRows: 10 }"
                      />
                    </div>
                  </div>
                  <a-button type="primary" :disabled="checkArrImage.length != 1" style="margin-left:10px"
                    >驳回</a-button
                  >
                  <!-- @click="edit(null, '0', '2')" -->
                </a-popconfirm>
              </a-form-item>
            </div>
          </a-form>
        </div>
      </div>
    </a-modal>
    <a-modal title="查看截图" v-model="bohuiShow" :width="300" :footer="null">
      <img :src="bohui" alt="" style="width:100%">
    </a-modal>
    <a-modal title="人员修改" v-model="personVisible"  @afterClose="closePerson">
        <template slot="footer">
            <a-button key="back" @click="closePerson">取消</a-button>
            <a-button key="submit" type="primary" :loading="loadingPerson" @click="handleOkPerson">
            确定
            </a-button>
        </template>
        <a-form  :form="formPerson">
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="策划" v-if="activeKey == 'video'">
            <a-select
              v-decorator="[
                'planId', // 给表单赋值或拉取表单时，该input对应的key
                { rules: [{ required: true, message: '请选择策划!' }] }
              ]"
              showSearch
              optionFilterProp="children"
              :filterOption="filterOption"
            >
              <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">
                {{ item.userName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄" v-if="activeKey == 'video'">
            <a-select
              v-decorator="[
                'shotId' // 给表单赋值或拉取表单时，该input对应的key
              ]"
              showSearch
              optionFilterProp="children"
              :filterOption="filterOption"
            >
              <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">
                {{ item.userName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
            <a-select
              v-decorator="[
                'clipId', // 给表单赋值或拉取表单时，该input对应的key
                { rules: [{ required: true, message: '请选择剪辑!' }] }
              ]"
              showSearch
              optionFilterProp="children"
              :filterOption="filterOption"
            >
              <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">
                {{ item.userName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
    </a-modal>
    <a-modal title="推荐封面" v-model="chouzhen" width="60%">
        <template slot="footer">
            <a-button key="back" @click="chouzhen=false">关闭</a-button>
        </template>
        <ul v-if="chouzhenList.length>0" style="height:600px;overflow:auto">
            <li v-for="(item,index) of chouzhenList" :key="index" class="chouzhen" :class="{'first':index == 0}">
                <img :src="item.url" alt="" style="width:100%">
            </li>

        </ul>
        <div style="clear:both"></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, fileInsertV2, fileEdit, fileCheckImage,fileEditAll } from '@/api/actor'
import { getAction, postAction, postFile, deleteAction, putAction } from '@/api/manage'
import qs from 'qs'
import { mapGetters } from 'vuex'
import moment from 'moment'

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

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

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

      addImageVisible: false,
      addImageData: null,
      projectId: '',
      inputVisible: false,
      inputValue: '',
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 12
        }
      },
      queryParam: {},
      dataElse: [],
      ascription: {
        clipId: [], //剪辑人id
        shotId: [], //拍摄人id
        planId: [], //策划id
        planeId: [] //平面id
      },
      show: true,
      visible: false,
      visibleDetail: false,
      personVisible:false,
      confirmLoading: false,
      loading:false,
      loadingImage:false,
      loadingPerson:false,
      activeKey: 'video',
      active: '0',
      examinelList: [
        {
          value: '0',
          tab: '未审核'
        },
        {
          value: '1',
          tab: '已批准'
        },
        {
          value: '2',
          tab: '已驳回'
        },
        {
          value:'3',
          tab:'有效视频'
        }
      ],
      // 表头
      columns: [],
      urlList: {
        url: '',
        md5: '',
        name: ''
      },
      urlListImage: {
        url: [],
        md5: [],
        name: [],
        size: []
      },
      watermarkUrl: {
        url: '',
        md5: '',
        name: ''
      },
      url: {
        list: '/ctop/materialInfo/list'
      },
      detail: false,
      form: this.$form.createForm(this),
      formPerson:this.$form.createForm(this),
      tags: [],
      refuseFile: [],
      refuseReason: '',
      refuseReasonImage: '',
      creativeCopywriter: '',
      customDomain: '',
      region: 'oss-cn-beijing',
      bucket: 'ctop-media',
      acceptVideo: 'video/mpeg,video/mp4',
      acceptImage: 'image/jpeg,image/jpg,image/png',
      accessKeyId: 'LTAIbNbqWzSOklQV',
      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
      checkArr: [],
      checkAll: false,
      checkArrImage: [],
      checkAllImage: false,
      showUrl: '',
      showUrlWater: '',
      materialName: '',
      materialDescribe: '',
      name: '',
      detail: null,
      add: true,
      id: '',
      role: {
        roleCode: '',
        roleName: ''
      },
      key: '0',
      mediaId: null,
      sizeType: [],
      size: null,
      repeat: false,
      excellent: 0,
      code: '',
      material: [],
      imageArrList: [],
      showDataBool: false,
      kuaishouData: null,
      douyinData: null,
      bohui:"",
      bohuiShow:false
    }
  },
  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 = 'VIDEO'
    this.queryParam.userId = this.userInfo().id
    this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
    this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
    // this.queryParam.status = key
    this.ipagination.pageSize = 8
    this.getParticipateList()
    // /sys/user/getRoleInfo
    getAction('/sys/user/getRoleInfo', {
      userId: this.userInfo().id
    }).then(res => {
      this.role = res
    })
    getAction('/ctop/videoWatermarkTemplate/list').then(res => {
      if (res.success) {
        this.sizeType = res.result.records
      }
    })
  },
  updated() {
    stopOtherVideo()
  },
  watch: {
    $route: function(n, o) {
      if (n.path == '/modules/material/videoMaterial') {
        this.queryParam.userId = this.userInfo().id
        this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
        this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
        this.loadData()
      }
    },
    'queryParam.projectId': function(n, o) {
      if (n != '') {
        this.getList(n)
      }
    },
    visibleDetail:function(n,o){
        if(!n){
          this.refuseFile = []
          this.refuseReason = ''
        }
    }
  },
  methods: {
      showBoHui(item){
          this.bohui = item
          this.bohuiShow = true
      },
    editImage(item, status) {
      var params = {}
      params.id = item.id
      params.status = status
      params.auditorId = this.userInfo().id
      if (status == '1') {
      } else {
        params.refuseReason = this.refuseReasonImage
      }
      var updateArr = [params]
      putAction('/ctop/MaterialImageInfo/batchEdit', updateArr).then(res => {
        console.log(res)
        if (res.success) {
          //   this.coverPreviewVisible = false
          getAction('/ctop/MaterialImageInfo/list', {
            videoId: this.code
          }).then(res => {
            if (res.success) {
              this.model = res.result.map((item, index) => {
                return {
                  ...item,
                  key: index
                }
              })
              this.modelNew = this.model.filter((item, index) => {
                return item.status == '0'
              })
              if (this.modelNew.length == 0) {
                this.coverPreviewVisible = false
              }
            }
          })
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    editImageAll(status) {
      this.checkArrImage
      //   var params = {}
      //   params.id = item.id
      //   params.status = status
      var updateArr = []
      if (status == '1') {
        updateArr = this.checkArrImage.map(item => {
          return { id: item, status: status }
        })
      } else {
        updateArr = this.checkArrImage.map(item => {
          return { id: item, status: status, refuseReason: this.refuseReasonImage }
        })
      }
      putAction('/ctop/MaterialImageInfo/batchEdit', updateArr).then(res => {
        if (res.success) {
          //   this.coverPreviewVisible = false
          getAction('/ctop/MaterialImageInfo/list', {
            videoId: this.code
          }).then(res => {
            if (res.success) {
              this.checkArrImage = []
              this.checkAllImage = false
              this.model = res.result.map((item, index) => {
                return {
                  ...item,
                  key: index
                }
              })
            }
          })
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    showData(item) {
      if (item.byteDance || item.kuaiShou) {
        this.showDataBool = true
        this.kuaishouData = item.kuaiShou
        this.douyinData = item.byteDance
      } else {
        this.$message.error('抖音和快手都无数据')
        return
      }
    },
    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)
        }
      })
    },
    getData(className) {
      return this.form.getFieldValue(className)
    },
    deleteData(id) {
      deleteAction('/ctop/materialInfo/delete', {
        id: id
      }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    moment,
    a(item) {
      item.showVideo = true
    },
    tongbu() {
      this.$refs.check.getData('/ctop/userAllocation/getAccountListByProjectId', {
        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
    },

    downloadByBlobShowUrl() {
      fetch(this.showUrl)
        .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.materialName
          a.click()
          document.body.removeChild(a)
          // 移除blob对象的url
          window.URL.revokeObjectURL(url)
        })
    },
    downloadByBlob() {
      fetch(this.showUrlWater)
        .then(res => res.blob())
        .then(blob => {
          const a = document.createElement('a')
          document.body.appendChild(a)
          a.style.display = 'none'
          // 使用获取到的blob对象创建的url
          const url = window.URL.createObjectURL(blob)
          a.href = url
          // 指定下载的文件名
          a.download = this.name
          a.click()
          document.body.removeChild(a)
          // 移除blob对象的url
          window.URL.revokeObjectURL(url)
        })
    },
    download(href, name) {
      let eleLink = document.createElement('a')
      eleLink.download = name
      eleLink.href = href
      eleLink.click()
      eleLink.remove()
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    onCheckAllChange() {
      if (this.checkAll) {
        this.checkArr = []
      } else {
        this.checkArr = this.dataSource.map(item => {
          return item.id
        })
      }
      this.checkAll = !this.checkAll
    },
    onCheckAllImageChange() {
      if (this.checkAllImage) {
        this.checkArrImage = []
      } else {
        this.checkArrImage = this.model.map(item => {
          return item.id
        })
      }
      this.checkAllImage = !this.checkAllImage
    },
    searchRe() {
      this.queryParam = {
        type: 'VIDEO',
        userId: this.userInfo().id,
        status: this.active
      }
      this.loadData(1)
    },
    getList(value) {
      if (value) {
        this.mediaId = this.dataElse.filter(item => {
          if (value == item.projectId) {
            return item
          }
        })[0].mediaId
      }
      this.loadData()
    },
    onChangeCheckImage(checkedList) {
      if (checkedList.length == 0) {
        this.checkAllImage = false
      }
    },
    onChangeCheck(checkedList) {
      if (checkedList.length == 0) {
        this.checkAll = false
      }
    },
    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: ''
      })
    },
    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()
        }
      })
    },
    showDetail(item) {
      this.visibleDetail = true
      this.showUrl = item.url
      this.id = item.id
      this.code = item.code
      this.excellent = item.excellent
      if (this.active == '2') {
        this.refuseReason = item.refuseReason
        this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
      } else if (this.active == '1') {
        this.creativeCopywriter = item.creativeCopywriter
        this.refuseReason = ''
        this.refuseFile = []
      } else {
        this.refuseReason = ''
        this.refuseFile = []
      }
      getAction('/ctop/materialInfo/getDetail', {
        materialId: item.id
      }).then(res => {
        this.detail = res
        this.size =
          res.parameter.width == '1080' ? 3 : res.parameter.width == '1920' ? 1 : res.parameter.width == '1280' ? 2 : 4
      })
      getAction('/ctop/materialInfo/queryById', {
        id: item.id
      }).then(res => {
        if (res.success) {
          this.showUrlWater = res.result.watermarkUrl
          this.name = res.result.watermarkCode
          this.materialName = res.result.materialName
        } else {
          this.showUrlWater = null
          this.name = null
        }
      })
      getAction('/ctop/MaterialImageInfo/list', {
        videoId: item.code
      }).then(res => {
        console.log(res)
        if (res.success) {
          this.model = res.result.map((item, index) => {
            return {
              ...item,
              key: index
            }
          })
        }
      })
    },
    coverPreviewShowModal(item, index) {
      console.log(this.model)
      this.modelNew = this.model.filter(items => {
        return items.status == 0
      })
      if (this.modelNew.length > 0) {
        this.coverPreviewVisible = true
      }
    },
    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')
    },
    personEdit(item,status){
        this.add = false
        this.personVisible = true
        this.getProjectId(item.projectId)
        getAction('/ctop/materialInfo/getDetail', {
          materialId: item.id
        }).then(res => {
            this.formPerson.setFieldsValue({
              clipId: res.ascription.clipId,
              planId: res.ascription.planId,
              shotId: res.ascription.shotId,
            })
            this.code = item.code
        })
    },
    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
            closeAllVideoFun()
          })
        } else {
          fileEdit({
            id: this.id,
            status: editStatus,
            auditorId: this.userInfo().id,
            creativeCopywriter: this.refuseReason
          }).then(res => {
            this.refuseFile = []
            this.refuseReason = ''
            this.loadData()
            this.visibleDetail = false
            closeAllVideoFun()
          })
        }
      } 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
        })
      }
    },
    closePerson(){
        this.personVisible = false
    },
    handleOkPerson(){
      this.loadingPerson = true
      this.formPerson.validateFieldsAndScroll((err, values) => {
        if (err) {
          // 这里做逻辑处理
        } else {
            var params = {
                planId: values.planId,
                shotId: values.shotId,
                clipId: values.clipId,
                materialId:this.code
            }
            fileEditAll(params).then(res=>{
                console.log(res)
                if(res.success){
                    this.$message.success('修改成功')
                    this.loadingPerson = false
                    this.closePerson()
                    this.loadData()
                }else{
                    this.$message.error(res.message)
                }
            })

        }
      })
    },
    handleOkImage() {
        // if(this.urlListImage.url.length>0){
            var params = {}
            params.projectId = this.addImageData.projectId
            params.videoId = this.addImageData.code
            params.imageArr = this.imageArrList
            this.loadingImage = true
            postAction('/insertImage', params).then(res => {
                console.log(res)
                if (res.code == 0) {
                this.urlListImage = {
                    url: [],
                    md5: [],
                    name: [],
                    size: []
                }
                this.imageArrList = []
                this.addImageVisible = false
                this.loadingImage = false
                this.loadData()
                }else{
                this.loadingImage = false
                }
            })
        // }
     
    },
    handleOk() {
      this.loading = true
      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 = 'VIDEO'
          params.ascription =
            this.activeKey == 'image'
              ? roleCode
              : {
                  planId: values.planId,
                  shotId: values.shotId,
                  clipId: values.clipId
                }
          params.tag = this.tags
          params.imageArr = this.imageArrList
          if (this.add) {
            fileInsertV2(params).then(res => {
              if (res.success) {
                this.form.resetFields()
                this.urlList = {
                  url: '',
                  md5: '',
                  name: ''
                }
                this.watermarkUrl = {
                  url: '',
                  md5: '',
                  name: ''
                }
                this.urlListImage = {
                  url: [],
                  md5: [],
                  name: [],
                  size: []
                }
                this.imageArrList = []
                this.tags = []
                this.loadData()
                this.visible = false
                this.add = true
                this.loading = false
                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('素材上传成功')
                this.loading = false
                
              } else {
                this.$message.error(res.message)
                this.loading = false
              }
            })
          } else {
            fileEdit({
              ...params,
              status: '0'
            }).then(res => {
                if(res.success){
                    this.form.resetFields()
                    this.urlList = {
                        url: '',
                        md5: '',
                        name: ''
                    }
                    this.watermarkUrl = {
                        url: '',
                        md5: '',
                        name: ''
                    }
                    this.tags = []
                    this.loadData()
                    this.visible = false
                    this.add = true
                    this.loading = false
                    for (const key in this.role) {
                        if (key == 'roleCode') {
                        this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
                        }
                    } 
                }else{
                    this.$message.error(res.message)
                    this.loading = false
                }
              
            })
          }
        }
      })
    },
    close() {
      this.visible = false
      this.form.resetFields()
      this.urlList = { url: '', md5: '', name: '' }
      this.tags = []
      this.urlListImage = {
        url: [],
        md5: [],
        name: [],
        size: []
      }
      this.imageArrList = []
    },
    addImage(item) {
      this.addImageVisible = true
      this.addImageData = item
    },
    showImage(item){
        this.chouzhen = true
        this.chouzhenList = []
        var params = {
            videoSignature:item.code,
            pageSize:20,
            pageNo:1
        }
        getAction('/cutFrame/material/list',params).then(res=>{
            console.log(res)
            if(res.success){
                this.chouzhenList.push(...res.result.records)
            }
        })
    },
    closeImage() {
      this.addImageVisible = false
      this.urlListImage = {
        url: [],
        md5: [],
        name: [],
        size: []
      }
      this.imageArrList = []
    },
    onChange(date, dateString) {},
    callbackTwo(key) {
      this.checkAll = false
      this.checkArr = []

      if(key == '3'){ 
        this.url.list = "/ctop/materialInfo/effiMaterialInfo" 
        this.queryParam = { 
        } 
      }else{ 
        this.url.list = "/ctop/materialInfo/list" 
        this.queryParam = { 
            type: 'VIDEO', 
            userId: this.userInfo().id, 
            status: key ,
            projectId:this.queryParam.projectId
        } 
        if (this.form.getFieldValue('projectId')) { 
            this.form.setFieldsValue({ 
            projectId: '' 
            }) 
        } 
      }
    //   if (this.form.getFieldValue('projectId')) {
    //     this.form.setFieldsValue({
    //       projectId: ''
    //     })
    //   }
    //   this.queryParam.status = key
      this.loadData(1)
    },
    removeUpload(){

    },
    overUpload(urlAll) {
      console.log(urlAll)
      this.confirmLoading = true
      this.repeat = false
      this.urlList.url = urlAll[0].url
      this.$message.success('上传成功')
    },
    deleteImage(url){
       console.log(url, this.urlListImage.url)
        var index = this.imageArrList.findIndex(v => v.url === url)
        this.imageArrList.splice(index,1)
        console.log(index)

    },
    overUploadImage(urlAll) {
      //   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)
      var that = this
      that.material = []
      that.imageArrList = []
      var img
      if(urlAll.length>0){
        for (var i = 0; i < urlAll.length; i++) {
            that.imageArrList.push({
                // width: img.width,
                // height: img.height,
                // size: this.urlListImage.size[i],
                code: this.urlListImage.md5[i],
                url: urlAll[i].url,
                materialName: this.urlListImage.name[i]
            })
            img = new Image()
            img.src = urlAll[i].url
            // 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)
            // }
            // } else {

            // img.onload = () => {
            //     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)
            //     }
                
            // }
            // }
        }
      }else{

      }

    },
    file(file) {
      var bmf = new BMF()
      var that = this
      return new Promise(function(resolve, reject) {
        bmf.md5(file, (err, md5) => {
          that.urlList.name = file.name
          that.urlList.md5 = md5
          fileCheck({
            code: md5,
            projectId: that.getData('projectId')
          }).then(res => {
            if (res.code == 0) {
              that.$message.error('此素材已经上传')
              that.repeat = true
              reject()
            } else {
              that.repeat = false
              resolve()
              //   reject()
            }
          })
        })
      })
    },
    fileWater(file) {
      var bmf = new BMF()
      var that = this
      var codeData = that.urlList.md5!=''?that.urlList.md5:that.addImageData.code
      console.log(codeData)
      this.urlListImage= {
        url: [],
        md5: [],
        name: [],
        size: []
      }
      return new Promise(function(resolve, reject) {
          bmf.md5(file, (err, md5) => {
            fileCheckImage({
              code: md5,
              projectId: that.getData('projectId'),
              videoId:codeData
            }).then(res => {
              if (res.code == 0) {
                that.$message.error('此素材已经上传')
                reject()
              } else {
                that.urlListImage.name.push(file.name)
                that.urlListImage.md5.push(md5)
                that.urlListImage.size.push(file.size)
                resolve()
                //   reject()
              }
            })
          })
      })
    },
    getParticipateList() {
      getAction('/ctop/projectMember/participateList', {
        userId: this.userInfo().id
      }).then(res => {
        if (res.code == 0) {
          this.dataElse = res.result
        }
      })
    },
    getProjectId(items) {
      this.form.resetFields(['clipId', 'planId', 'shotId'])
      getAction('/ctop/projectMember/getMemberList', {
        projectId: items
      }).then(res => {
        if (res.code == 0) {
          this.ascription.clipId = res.result.filter(item => {
            if (
              item.roleCode == 'clip' ||
              item.roleCode == 'plan' ||
              item.roleCode == 'designTeamLeader' ||
              item.roleCode == 'shot' ||
              item.roleCode == 'plane'
            ) {
              return {
                userId: item.userId,
                userName: item.userName
              }
            }
          })
          this.ascription.shotId = res.result.filter(item => {
            if (
              item.roleCode == 'clip' ||
              item.roleCode == 'shot' ||
              item.roleCode == 'plan' ||
              item.roleCode == 'designTeamLeader' ||
              item.roleCode == 'plane'
            ) {
              return {
                userId: item.userId,
                userName: item.userName
              }
            }
          })
          this.ascription.planId = res.result.filter(item => {
            if (
              item.roleCode == 'shot' ||
              item.roleCode == 'plan' ||
              item.roleCode == 'designTeamLeader' ||
              item.roleCode == 'clip' ||
              item.roleCode == 'plane'
            ) {
              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>
