<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>
.home-item {
  overflow: hidden;
}

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

/*>=1024的设备*/

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

/*>=1280的设备*/

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

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

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

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

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

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

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

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

  .home-right {
    width: 100%;
  }

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

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

.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;
}
</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-select
                placeholder="请输入项目名称"
                showSearch
                optionFilterProp="children"
                :filterOption="filterOption"
                v-model="queryParam.projectId"
                @change="getList"
              >
                <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
                  {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                    item.mediaId == '1' ? '头条' : '快手'
                  }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
                </a-select-option>
              </a-select> -->
            <!-- </a-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-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
        "
        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: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
                  >
                    {{ items.materialName }}
                  </span>
                  <a-icon
                    type="close-circle"
                    @click="deleteData(items.id)"
                    v-show="active == '0'"
                    v-if="items.userId == userInfo().id"
                  />
                </a-badge>
                <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative;">
                  <!-- <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>
                  <img
                    :src="items.url + '?x-oss-process=video/snapshot,t_00000,m_fast'"
                    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>
                  {{ 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
                      href="javascript:;"
                      style="margin-left:20px"
                      @click="edit(items, '2')"
                      v-show="active == '0' || active == '1'"
                      v-if="
                        role.roleCode == 'operator' ||
                          role.roleCode == 'kuaishouOperationManager' ||
                          role.roleCode == 'admin'
                      "
                    >
                      驳回</a
                    > -->
                  <a-popconfirm
                    @confirm="okEditShow(items, '2')"
                    v-show="active != '2'"
                    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>
                        截图:
                        <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' ||
                        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-left: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-checkbox :value="items.id" style="float:right" v-show="active == '1'"></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;">
          <a-empty />
        </div>
      </a-tab-pane>
    </a-tabs>

    <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="添加素材" v-model="visible" :maskClosable="false" :width="800">
      <template slot="footer">
        <a-button key="back" @click="close">取消</a-button>
        <a-button key="submit" type="primary" :disabled="!confirmLoading" @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"
          >
            <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
              {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                item.mediaId == '1' ? '头条' : '快手'
              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传" v-if="getData('projectId')">
          <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>
        <div>
          <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: '请选择策划!' }] }
              ]"
            >
              <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
              ]"
            >
              <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: '请选择剪辑!' }] }
              ]"
            >
              <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="标签"
        >
          <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="描述"
        >
          <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%">
        <a-button type="primary" @click="setSuccess" style="float:right">
          {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
        </a-button>
      </div>
      <div style="display:flex;height:700px">
        <div
          style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2"
        >
          <video class="video" :src="showUrl" controls="controls" style="width:100%">
            您的浏览器不支持 video 标签。
          </video>
        </div>
        <div style="flex:3;padding:10px;box-sizing:border-box;">
          <a-form v-if="detail" class="detail">
            <div v-if="detail.parameter">
              <a-form-item
                label="视频时长"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                v-if="detail.parameter.second"
              >
                {{ detail.parameter.second }}秒
              </a-form-item>
              <a-form-item
                label="尺寸"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                v-if="detail.parameter.width"
              >
                {{ detail.parameter.width }}*{{ detail.parameter.height }}
              </a-form-item>
              <a-form-item
                label="大小"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                v-if="detail.parameter.size"
              >
                {{ detail.parameter.size }}
              </a-form-item>
            </div>
            <div v-if="detail.ascription">
              <a-form-item label="策划" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                {{ detail.ascription.planName }}
              </a-form-item>
              <a-form-item label="拍摄" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                {{ detail.ascription.shotName }}
              </a-form-item>
              <a-form-item
                label="剪辑"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                v-if="detail.ascription.clipName"
              >
                {{ detail.ascription.clipName }}
              </a-form-item>
            </div>

            <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.tag">
              <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
            </a-form-item>
            <a-form-item label="无水印素材下载" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="name">
              <a-button type="primary" @click="downloadByBlobShowUrl">下载</a-button>
            </a-form-item>
            <a-form-item label="水印素材下载" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="name">
              <a-button type="primary" @click="downloadByBlob" v-if="showUrlWater">下载</a-button>
              <span v-else>水印素材生成中,请一分钟后刷新</span>
            </a-form-item>
            <a-form-item label="水印素材链接" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="showUrlWater">
              <a-input v-model="showUrlWater" type="text" readonly />
            </a-form-item>
            <a-form-item label="生成水印素材" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-select :defaultValue="4" style="width:50%" v-model="size">
                <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>
            <a-form-item
              label="审核人"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }"
              v-if="active == '2' && detail.auditorName"
            >
              {{ 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' ||
                    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>
                    截图:
                    <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>
          </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, deleteAction } 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 { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
import accountCheck from './accountCheck'
export default {
  name: 'YardList',
  mixins: [JeecgListMixin],
  components: {
    JEllipsis,
    UploadToAli,
    accountCheck,
    selectTable
  },

  data() {
    return {
      projectId: '',
      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,
      confirmLoading: false,
      activeKey: 'video',
      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: '',
      materialName: '',
      materialDescribe: '',
      name: '',
      detail: null,
      add: true,
      id: '',
      role: {
        roleCode: '',
        roleName: ''
      },
      key: '0',
      mediaId: null,
      sizeType: [],
      size: 4,
      repeat: false,
      excellent: 0,
      code: '',
      showDataBool: false,
      kuaishouData: null,
      douyinData: 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 = '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 => {
      console.log(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)
      }
    }
  },
  methods: {
    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/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
    },

    downloadByBlobShowUrl() {
      console.log(this.showUrl)
      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
    },
    searchRe() {
      this.queryParam.projectId = ''
      if (this.queryParam.createTime) {
        this.queryParam.createTime = ''
      }
      this.loadData(1)
    },
    getList(value) {
      if (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: ''
      })
    },
    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
          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
      })
      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
        }
      })
    },
    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
            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
        })
      }
    },
    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 = 'VIDEO'
          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 => {
              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
                for (const key in this.role) {
                  if (key == 'roleCode') {
                    this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
                  }
                }
                this.$message.success('素材上传成功')
              } else {
                this.$message.error(res.message)
              }
            })
          } 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(1)
    },
    overUpload(urlAll) {
      this.confirmLoading = true
      this.repeat = false
      this.$message.success('上传成功')

      //   var img = null
      //   img = new Image()
      //   img.src = urlAll[0]
      //   if (img.complete) {
      //     // 打印
      //     if (img.width == 720) {
      //       if (img.height == 1280) {
      //         that.material.push(true)
      //       } else {
      //         that.material.push(false)
      //       }
      //     } else if (img.width == 1080) {
      //       if (img.height == 1920) {
      //         that.material.push(true)
      //       } else {
      //         that.material.push(false)
      //       }
      //     } else if (img.width == 1280) {
      //       if (img.height == 720) {
      //         that.material.push(true)
      //       } else {
      //         that.material.push(false)
      //       }
      //     } else if (img.width == 1920) {
      //       if (img.height == 1080) {
      //         that.material.push(true)
      //       } else {
      //         that.material.push(false)
      //       }
      //     } else {
      //       that.material.push(false)
      //     }
      //     console.log(this.material)
      //   } else {
      //     // 加载完成执行
      //     img.onload = function() {
      //       // 打印
      //       // alert('from:onload : width:' + img.width + ',height:' + img.height)
      //       if (img.width == 720) {
      //         if (img.height == 1280) {
      //           that.material.push(true)
      //         } else {
      //           that.material.push(false)
      //         }
      //       } else if (img.width == 1080) {
      //         if (img.height == 1920) {
      //           that.material.push(true)
      //         } else {
      //           that.material.push(false)
      //         }
      //       } else if (img.width == 1280) {
      //         if (img.height == 720) {
      //           that.material.push(true)
      //         } else {
      //           that.material.push(false)
      //         }
      //       } else if (img.width == 1920) {
      //         if (img.height == 1080) {
      //           that.material.push(true)
      //         } else {
      //           that.material.push(false)
      //         }
      //       } else {
      //         that.material.push(false)
      //       }
      //     }
      //   }
    },
    file(file) {
      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,
            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
      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) {
      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>
