<template>
  <div class="newCreate">
    <a-form :form="form">
      <div class="moduler">
        <div v-if="projectInfo.length>0">
         <span style="margin-right:8px"> 项目：<strong>{{projectInfo[0].name||''}}</strong></span>
         <span style="margin-right:8px"> 推广目的：<strong>{{projectInfo[0].landingType=='APP'?'应用推广':'销售线索收集'||''}}</strong></span>
         <span style="margin-right:8px"> 投放媒体：<strong>{{projectInfo[0].deliveryRange=="DEFAULT"?'默认':'穿山甲'||''}}</strong></span>
         <span style="margin-right:8px"> 投放方式：
             <strong v-if="projectInfo[0].adTarget=='CPA'">优先成本</strong>
             <strong v-if="projectInfo[0].adTarget=='COST'">优先跑量</strong>
             <strong v-if="projectInfo[0].adTarget=='PUSH'">激进抢量</strong>
        </span>
          
        </div>
      </div>
      
      
      <!-- 制作创意 -->
      <div class="moduler">
        <div class="moduler-title">创意素材</div>
        <div class="ad-range">
          

          <div class="row-item">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">创意内容</div>
              <div class="required-item"></div>
            </div>
           <div class="input-item">
              <a-form-item>
                <p>已选广告位：
                  <span v-if="projectInfo.length>0&&projectInfo[0].inventoryType.length>0">
                    <span v-for="(item,index) in projectInfo[0].inventoryType" :key='index' style="margin-right:8px">
                      <span v-if="item==1">今日头条</span>
                      <span v-if="item==10001">西瓜视频</span>
                      <span v-if="item==30001">抖音火山版</span>
                      <span v-if="item==40001">抖音</span>
                      <span v-if="item==900000000">穿山甲</span>
                    </span>
                  </span>
                  <span v-if="projectInfo.length>0&&projectInfo[0].inventoryType.length==0"> 
                      <span v-if="projectInfo[0].deliveryRange=='UNION'">穿山甲</span>
                      <span v-else>优选广告位</span>
                  </span>
                </p>
                <p>
                  <span>视频创意个数：3-50</span> 
                  <!-- <span style="margin-left:20px" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange!='UNION'">图片创意个数：5-50</span> -->
                </p>
                <a-radio-group  style="margin-bottom: 32px;" v-model="materialType" @change="materialTypeChange">                  
                  <a-badge :count="videoList.length" :numberStyle="{backgroundColor: '#52c41a',zIndex:99} ">
                    <a-radio-button value="VIDEO">视频素材</a-radio-button>
                  </a-badge>
                  <!-- <a-badge :count="imageList.length" :numberStyle="{backgroundColor: '#52c41a',zIndex:99} " v-if="projectInfo.length>0&&projectInfo[0].deliveryRange!='UNION'">
                    <a-radio-button value="IMAGE">图片素材</a-radio-button>
                  </a-badge> -->
                  
                </a-radio-group>
                
              </a-form-item>
                <div class="adlab-video-uploader material-panel">
                    <div class="head">
                        <a-button type='primary' @click="openMaterialLibrary">选择素材库</a-button>
                    </div>
                    <div class="content-panel relative" >
                        <div class="content-wrapper">
                            <div class="content-item" v-for="(item,index) in showList" :key="index">
                                <div class="img-wrapper" :style="materialType=='VIDEO'?videoStyle:imgStyle">
                                  <div class="img" style="background: rgb(0, 0, 0);">
                                      <!-- <div class="material-desc"></div> -->
                                      <div class="operation">
                                          <div class="wrapper">
                                              <a-button type='primary' v-if="item.type=='VIDEO'" style="margin-bottom:10px;min-width:80px" @click="playvideo(item)">播放 </a-button>
                                              <a-button type='default' style="margin-bottom:10px;min-width:80px" @click='deleteItem(item)'>删除</a-button>
                                          </div>
                                      </div>
                                      <img :src="item.coverUrl" alt="" class="portraitImg" v-if="materialType=='VIDEO'">
                                      <img :src="item.url" alt="" class="horizontalImg" v-if="materialType=='IMAGE'">
                                      
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <material ref="material" :creativeType="getFormData('creativeWay')"></material> -->
          </div>
          <div class="row-item">
            <div class="hint-item">
                <a-tooltip>
                    <template slot="title">
                        <span>开启素材同步功能后，将自动选取账户内相同投放链接下表现好的标题补充到本项目中</span>
                    </template>
                    <a-icon type="question-circle" />
                </a-tooltip>
            </div>
            <div class="label-item">
              <div class="text-item">创意标题</div>
              <div class="required-item"></div>
            </div>
            <div class="input-item">
              <div style="margin-bottom:15px">
                <a-button type='primary' @click="addTitle"><a-icon type="plus" />创意标题</a-button>
                <a-button type='default' @click="batchAddTitle" style="margin-left:20px">批量添加标题</a-button>
                <a-button type='default' @click="SystemRecommendTitle"  style="margin-left:20px">系统推荐</a-button>

              </div>
            
                <div v-for="(item,index) of createTitle" :key="index" style="width:600px">
                  <a-input style="width:90%;" v-model="item.title" class="rending-all" @change="judge($event,item)">
                  </a-input>
                  <a-icon type="delete" style="margin-left:20px;cursor: pointer;" v-show="createTitle.length>1"
                    @click="titleDelete(index)" />
                  <br />
                  <a-tag style="margin-bottom:10px;margin-top:10px" v-for="(itemTag,indexTag) of DTtags" :key="indexTag"
                    @click="getChangeAllTitle(item,itemTag,index)" v-show="indexTag<item.titleMany">
                    {{itemTag.name}}</a-tag>
                    <span @click="showElseClick(item)" class="moreTags">{{item.showElse?"更多":"关闭"}}</span>
                </div>
              
            </div>
            
          </div>
          <div class="row-item">
            <div class="hint-item">
               <a-tooltip>
                    <template slot="title">
                        <span>开启素材同步功能后，将自动选取账户内相同投放链接下表现好的素材补充到本项目中</span>
                    </template>
                    <a-icon type="question-circle" />
                </a-tooltip>
            </div>
            <div class="label-item">
              <div class="text-item">素材同步</div>
              <div class="required-item"></div>
            </div>
            <div class="input-item">
              <a-form-item>
                <a-radio-group v-decorator="['isFollowMaterial', { initialValue:0 }]">
                  <a-radio-button :value="1">开启</a-radio-button>
                  <a-radio-button :value="0">关闭</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </div>
          </div>

          <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].landingType=='APP'">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">应用名</div>
              <div class="required-item"></div>
            </div>
            <div class="input-item">
              <a-form-item>
                <a-input placeholder="请输入2-10个字的应用名，" :maxLength='10' v-decorator="['appName', {rules:validationRules.name}]" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].landingType=='LINK'">
            <div class="hint-item">
                <a-tooltip>
                    <template slot="title">
                        <span>来源即广告来源，展示在广告左下角，修改来源触发审核，来源需与公司名称或公司名称简称保持一致</span>
                    </template>
                    <a-icon type="question-circle" />
                </a-tooltip>
            </div>
            <div class="label-item">
              <div class="text-item">来源</div>
              <div class="required-item"></div>
            </div>
            <div class="input-item">
              <a-form-item>
                <a-input placeholder="请输入2-10个字的应用名，" :maxLength='10' v-decorator="['source', {rules:validationRules.name}]" />
              </a-form-item>
            </div>
          </div>
          <!-- <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange=='UNION'">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">试玩素材</div>
              <div class="required-item"></div>
            </div>
            <div class="input-item">
              <a-form-item>
                <a-radio-group v-decorator="['isPlayerMaterial', { initialValue:0 }]">
                  <a-radio-button :value="1">开启</a-radio-button>
                  <a-radio-button :value="0">关闭</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-if="getFormData('isPlayerMaterial')==1">
              <div class="hint-item"></div>
              <div class="label-item">
                  <div class="text-item">链接地址</div>              
                  <div class="required-item"></div>
              </div>
              <div class="input-item">
                  <a-form-item>
                      <a-input v-decorator="['playableUrl', {rules:validationRules.url}]" />
                  </a-form-item>
              </div>
          </div>     -->
          
        </div>
      </div>
      <!-- 创意分类 -->
      <div class="moduler">
        <div class="moduler-title">创意分类</div>
        <div class="ad-range">
          <div class="row-item">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">创意分类</div>
              <div class="required-item"></div>
            </div>
            <div class="input-item">
              <a-form-item>
                <a-cascader :options="createOptions" v-model="thirdIndustryIds" :fieldNames="fieldNames"  placeholder="请选择创意分类" @change="createChange" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">创意标签</div>
              <div class="required-item"></div>
            </div>
            <div class="input-item">
              <a-form-item>
                
                 <a-select mode="tags" style="width: 100%" placeholder="按空格生成标签" v-model="createTipList" :token-separators="[' ']" >
                  
                </a-select>
              </a-form-item>
            </div>
          </div>

        </div>
      </div>
      <!-- 监测链接 -->
      <div class="moduler">
        <div class="moduler-title">监测链接</div>
        <div class="ad-range">
          <div class="row-item">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">监测类型</div>
              <!-- <div class="required-item"></div> -->
            </div>
            <div class="input-item">
              <a-form-item>
                <a-radio-group v-decorator="['MonitoringType', { initialValue:0 }]">
                  <a-radio-button :value="0">使用项目监测链接</a-radio-button>
                  <!-- <a-radio-button :value="1">使用素材监测链接</a-radio-button> -->
                </a-radio-group>
              </a-form-item>
            </div>
          </div>
          <div v-if="getFormData('MonitoringType')==0">
          <div class="row-item">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">展示</div>
              <!-- <div class="required-item"></div> -->
            </div>
            <div class="input-item">
              <a-form-item>
                <a-input v-decorator="['trackUrl']" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">点击</div>
              <!-- <div class="required-item"></div> -->
            </div>
            <div class="input-item">
              <a-form-item>
                <a-input v-decorator="['actionTrackUrl']" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange!='UNION'">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">视频播放</div>
              <!-- <div class="required-item"></div> -->
            </div>
            <div class="input-item">
              <a-form-item>
                <a-input v-decorator="['videoPlayTrackUrl']" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange!='UNION'">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">视频播完</div>
              <!-- <div class="required-item"></div> -->
            </div>
            <div class="input-item">
              <a-form-item>
                <a-input v-decorator="['videoPlayDoneTrackUrl']" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange!='UNION'">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item">视频有效播放</div>
              <!-- <div class="required-item"></div> -->
            </div>
            <div class="input-item">
              <a-form-item>
                <a-input v-decorator="['videoPlayEffectiveTrackUrl']" />
              </a-form-item>
            </div>
          </div>         
          </div>

          <div v-if="getFormData('MonitoringType')==1" style="margin-top:15px;padding-top:15px;width:580px">
            <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange!='UNION'">
            <div class="hint-item"></div>
            <div class="label-item">
              <div class="text-item"></div>
              <!-- <div class="required-item"></div> -->
            </div>
            <div class="input-item">
              <a-table bordered :columns="MonitoringTypeColumns" :data-source="MonitoringTypeData" :scroll="{ y: 240 }">
                <a slot="name" slot-scope="text,records">
                  <a-popover placement="right">
                    <template slot="content">
                        <!-- {{record.videoId_dictText}}  -->
                        <video :src="records.url" style="width:250px" controls  v-if="records.type=='VIDEO'"></video>
                        <img :src="records.url" alt="" style="width:250px" controls  v-if="records.type=='IMAGE'">
                    </template>
                    <template slot="title">
                    <!-- <span>Title</span> -->
                    </template>
                    <!-- <a-button>Right</a-button> -->
                    <img :src="records.coverUrl" alt="" style="width:50px" v-if="records.type=='VIDEO'"> 
                    <img :src="records.url" alt="" style="width:50px" v-if="records.type=='IMAGE'">
                  </a-popover>
                                      
                    
                    <a href="javascript:;" class="recordsName">{{records.materialName}}</a>
                </a>
                <a slot="options" slot-scope="text,records">
                   <a href="javascript:;" @click="editDetectLinks(records)">设置监测链接</a>
                </a>
              </a-table>
            </div>
          </div>     
              
          </div>
        </div>
      </div>

      <div class="moduler">
          <div class="adName">
              <span>当前账户：</span> 
              <div class="nameList">
                  <strong v-for="item in LHKaccountInfo" :key="item.value" class="item">{{item.title+'('+item.value+')'}}</strong>
              </div>
          </div>
      </div>
      <!-- 操作 -->
      <div class="moduler">
        <!-- <div class="moduler-title">计划名称</div> -->
        <div class="opt">
          <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
          <a-button type="primary" style="margin-right:15px" @click="goSave" :loading="btnloading">下一步</a-button>
        </div>
      </div>
    </a-form>
      <div class="infoModal">
         <a-modal v-model="visible" title="提示"  @ok="handleOk" :keyboard='false' :maskClosable='false'>
            <ul>
              <li v-for="(item,index) in errorInfo" :key="index">
                  <span>账户{{LHKaccountInfo[index].title}}：</span>{{item.message || '设置创意信息成功'}}
              </li>
            </ul>
            <template slot="footer">
              <a-button key="back" @click="handleBack">
                返回本页
              </a-button>
              <a-button key="submit" type="primary"  @click="handleOk">
               下一步
              </a-button>
            </template>
          </a-modal>
      </div>
      <!-- 批量推荐标题 -->
      <div>
        <a-modal v-model="batchAddTitleVisible" title="批量生成标题"  width='50%'  @ok="batchAddTitleOk" :keyboard='false' :maskClosable='false'>
           <a-textarea
              v-model="batchAddTitles"
              placeholder="请输入需要创建的标题，回车分割"
              :auto-size="{ minRows: 20,  }"
            />
            
        </a-modal>
      </div>

      <!-- 系统推荐标题 -->
      <div>
        <a-modal v-model="systemRecommendTitleVisible" title="系统推荐标题" width='50%'  @ok="systemRecommendTitleOk" :keyboard='false' :maskClosable='false'>
          <div>
            <span style="margin-right:20px">行业：</span> 
            <a-cascader
              :options="cascaderOptions"
              v-model="cascaderValue"
              :default-value='[1,65]'
              @change="cascaderChange"
            />

            <span style="margin:0 20px 0 30px">关键词</span>
            <a-input-search placeholder="请输入关键词" style="width: 250px" v-model="titleKeyWords" />
            <a-button type='primary' style='float:right' @click="sysGeneratedTitle"> 生成</a-button>
          </div>
          <a-spin :spinning="titleSpinning">
          <div class="title-list">           
               <a-checkbox-group v-model="titleCheckedList"  @change="titleChange" >
                 <div class="title-item" v-for="(item,index) in sysTitleShowList" :key='index'>
                    <label>
                        <a-checkbox :value='item'>
                            {{item}}
                        </a-checkbox>
                    </label>
                 </div>
               </a-checkbox-group>             
          </div>
          </a-spin>
        </a-modal> 
      </div>
      <!-- 素材库 -->
      <div>
        <a-modal v-model="MaterialLibraryVisible" title="选择素材库" width='900px'  @ok="MaterialLibraryOk" :keyboard='false' :maskClosable='false' >
          <a-spin :spinning="spinning">
          <div class="adlab-video-uploader material-panel"   >
           <div class="content-panel relative" ref="materialLibrary" >
                <div class="content-wrapper" v-if="this.MaterialLibraryList.length>0">
                  <a-checkbox-group v-model="checkedList"  @change="onChange" >                   
                    <div class="content-item" v-for="(item,index) in MaterialLibraryList " :key="index">
                       <label >
                        <div class="img-wrapper" :style="materialType=='VIDEO'?videoStyle:imgStyle">
                          <div class="img with-panel" style="background: rgb(0, 0, 0);">
                              <!-- <div class="material-desc"></div> -->
                              <div class="operation">
                                  
                                   <a-checkbox :value='item.id' style="width:12px"></a-checkbox>
                              </div>
                              <img :src="item.coverUrl" alt="" class="portraitImg" v-if="materialType=='VIDEO'" >
                              <img :src="item.url" alt="" class="horizontalImg" v-if="materialType=='IMAGE'" >
                              
                          </div>
                          <div class="name-panel">{{item.materialName}}</div>
                        </div>
                        </label>
                    </div>
                    
                  </a-checkbox-group>
                  <div class="bottom-loading">
                      <a-button type="link" block @click="loadingMoreMaterial" v-show="!MaterialSpinning" :disabled='noMoreData'>{{noMoreData?'暂无更多':'查看更多'}}</a-button>
                      <a-spin :spinning="MaterialSpinning" style="text-align:center" />
                  </div>
                  
                </div>
                <div class="zanwu" style="text-align:center" v-else>
                    <img src="../../../assets/nodata.png" alt="" style="width:400px">
                </div>
            </div>          
          </div>
          <!-- <a-pagination size="small" style="margin-top:20px;text-align:right" :current="currentMaterialPage" :hideOnSinglePage='true' :total="totalMaterial" v-if="totalMaterial>0"  @change='pageChange'/> -->
          </a-spin>
        </a-modal> 
      </div>

      <!-- 设置检测链接 -->
      <div>
        <a-modal v-model="DetectLinksVisible" title="监测链接设置"   @ok="setDetectLinksOK" :keyboard='false' :maskClosable='false'>
          <a-form :form="DetectLinksobject" >
            <div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">监测名称</div>
                  <!-- <div class="required-item"></div> -->
                </div>
                <div class="input-item">
                  <a-form-item>
                       <a-input placeholder="请输入2-40个字，" :maxLength='40' v-decorator="['trackUrlName']" />
                  </a-form-item>
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">展示</div>
                  <!-- <div class="required-item"></div> -->
                </div>
                <div class="input-item">
                  <a-form-item>
                    <a-input v-decorator="['trackUrl']" />
                  </a-form-item>
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">点击</div>
                  <!-- <div class="required-item"></div> -->
                </div>
                <div class="input-item">
                  <a-form-item>
                    <a-input v-decorator="['actionTrackUrl', {rules:validationRules.url}]" />
                  </a-form-item>
                </div>
              </div>
              <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange!='UNION'&&setCurrentRecordsLink.type=='VIDEO'">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">视频播放</div>
                  <!-- <div class="required-item"></div> -->
                </div>
                <div class="input-item">
                  <a-form-item>
                    <a-input v-decorator="['videoPlayTrackUrl']" />
                  </a-form-item>
                </div>
              </div>
              <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange!='UNION'&&setCurrentRecordsLink.type=='VIDEO'">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">视频播完</div>
                  <!-- <div class="required-item"></div> -->
                </div>
                <div class="input-item">
                  <a-form-item>
                    <a-input v-decorator="['videoPlayDoneTrackUrl']" />
                  </a-form-item>
                </div>
              </div>
              <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange!='UNION'&&setCurrentRecordsLink.type=='VIDEO'">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">视频有效播放</div>
                  <!-- <div class="required-item"></div> -->
                </div>
                <div class="input-item">
                  <a-form-item>
                    <a-input v-decorator="['videoPlayEffectiveTrackUrl']" />
                  </a-form-item>
                </div>
              </div>         
            </div>
          </a-form>
        </a-modal> 
      </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import {
    getAction,
    postAction,
    downFile,
    downFilePost
  } from '@/api/manage'
import material from './material'
import infiniteScroll from 'vue-infinite-scroll'
import qs from 'qs'

let MonitoringTypeColumns=[
  {
    title: '素材',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '操作',
    dataIndex: 'options',
    key: 'options',
    width: 120,
    scopedSlots: { customRender: 'options' },
  },
]

  export default {
    data() {
      return {
        MaterialSpinning:false,

        currentMaterialPage:1,
        totalMaterial:0,

        cascaderOptions:[],
        cascaderValue:[1,65],
        titleKeyWords:undefined,
        sysTitleShowList:[],
        titleCheckedList:[],
        titleSpinning:false,

        DetectLinksVisible:false,
        setCurrentRecordsLink:{},
        DetectLinksobject:this.$form.createForm(this),
        MonitoringTypeColumns,
        MonitoringTypeData:[],
        spinning:false,
        projectInfo:[],
        LHKaccountInfo:[],

        createTip: "",
        createTipList: [],
        actionTextList: [],
        createTitle:[
          {
            title: '',
            creativeWordIds: [],
            showElse: true,
            titleMany: 5
          }
        ],
        batchAddTitles:'',
        batchAddTitleVisible:false,
        systemRecommendTitleVisible:false,
        systemRecommendTitleList:[],
        DTtags:[],

        form: this.$form.createForm(this),
        positionvalue: undefined,
        validationRules: {
          url: [         
            {          
              required: true,
              validator: this.validateURL,
            },
          ],
          name:[{
            required: true,
            message:'应用名必须填写',
          }],
          bid:[{
            required: true,
            message:'出价信息必须填写',
            // validator: this.validateBid,
          }]
        },
        createType: undefined, //创意分类的页面
        createOptions: [], //创意分类的数组
        fieldNames: {
          label: 'name',
          value: 'id',
          children: 'children'
        },
        thirdIndustryId:undefined,
        thirdIndustryIds:undefined,
        adposition:'smartInventorys',
        sceneInventory:'VIDEO_SCENE',

        errorInfo:[],
        visible:false,
        btnloading:false,

        creativeWayDisable:false,//创意方式是否禁用
        currentCreateData:{}, //   编辑当前的创意的数据

        showList:[],
        // 创意素材的个数
        videoList:[],
        imageList:[],
        materialType:'VIDEO',
        videoStyle:{
          width: '148px',
          height: '264px'
        },
        imgStyle:{
          width: '257px',
          height: '145px',
        },
        MaterialLibraryVisible:false,
        MaterialLibraryList:[],
        userInfo:{},
        checkedList:[],

        // 滚动加载更多
        loadingMore: true,//是否还有数据允许加载 
        pageIndex: 1,
        pageSize: 16,
        loading: false,
        busy: false,

        noMoreData:false,
      }
    },
    directives: { infiniteScroll },
    components: {
      material
    },
    methods: {
      // s视频播放
      playvideo(item){
        // console.log(item);
        window.open(item.url,'_blank'); 
      },
      deleteItem(item){
        console.log(item);
        if(this.materialType=='VIDEO'){
          
          this.videoList=this.videoList.filter(ele=>{
            return ele.id!=item.id
          })
          this.showList=[];
          this.showList=this.videoList;
        }else if(this.materialType=='IMAGE'){
          this.imageList=this.imageList.filter(ele=>{
            return ele.id!=item.id
          })
          this.showList=[];
          this.showList=this.imageList;
        }
      },
      // 系统推荐分类标签改变
      cascaderChange(){

      },
      // 系统推荐生成标题的按钮
      sysGeneratedTitle(){
        
        if(this.titleKeyWords&&this.cascaderValue.length>0){
            this.titleSpinning=true;
            getAction('/ctop/creativeTitle/titleSearch',{
                firstCategory:this.cascaderValue[0],
                secondCategory: this.cascaderValue[1],
                keywords: this.titleKeyWords==undefined?'':this.titleKeyWords,
            }).then(res=>{
              console.log(res);
              this.titleSpinning=false;
              if(res.success){
                this.sysTitleShowList=res.result
              }else{
                this.$message.error('请求出错')
              }
              
            })
        }else{
          this.$message.error('请输入关键字并且选择行业分类')
        }
        
      },
      // 系统推荐标题生成之后选中
      titleChange(checkedList){
        console.log(checkedList);

      },
      // 编辑检测链接
      editDetectLinks(records){
        console.log(records);
        this.DetectLinksVisible=true;
        this.setCurrentRecordsLink=records
      },
      // 检测链接确定------------------------------------------------------------检测链接什么的设置改在了table的数据里MonitoringTypeData
      setDetectLinksOK(){
          this.DetectLinksVisible=false;
          this.DetectLinksobject.validateFields((err, values) => {
            if (!err) {
                this.MonitoringTypeData.forEach(item=>{
                  if(item.id==this.setCurrentRecordsLink.id){
                    item=[...item,...values]
                  }
                })
            } else {
              this.$message.error('请正确填写必填项目')
            }
          })

      },
      // q切换成视频或者图片
      materialTypeChange(val){
        console.log(this.materialType)
        if(this.materialType=='VIDEO'){
          this.showList=this.videoList

        }else if (this.materialType=='IMAGE'){
          this.showList=this.imageList
        }
      },

      addTitle() {
        this.createTitle.push({
          title: '',
          creativeWordIds: [],
          titleMany: 5,
          showElse:true,
        })
      },
      batchAddTitle(){
        this.batchAddTitleVisible=true;
      },
      batchAddTitleOk(){
        this.batchAddTitleVisible=false;
        console.log(this.batchAddTitles)
        
        let string=this.splitString(this.batchAddTitles);
        console.log(string);
        this.createTitle=[];
        string.forEach(item=>{
          this.createTitle.push({
            title: item,
            creativeWordIds: [],
            showElse: true,
            titleMany: 5
          })
        })
      },
      SystemRecommendTitle(){
        this.systemRecommendTitleVisible=true;
      },
      systemRecommendTitleOk(){
        this.systemRecommendTitleVisible=false;
        if(this.titleCheckedList.length>0){
            this.createTitle=[];
            this.titleCheckedList.forEach(element => {
                this.createTitle.push({
                  title: element,
                  creativeWordIds: [],
                  showElse: true,
                  titleMany: 5
                })
            });
        } 
        
        
      },
      titleDelete(index) {
        this.createTitle.splice(index, 1)
      },
      showElseClick(item) {
        console.log(item)
        item.showElse = !item.showElse
        if (!item.showElse) {
          item.titleMany = this.DTtags.length
        } else {
          item.titleMany = 5
        }
      },
      judge(item) {
        // console.log(item)
        var re = /{(.*?)}/g
        var array = []
        var temp
        while ((temp = re.exec(item.title))) {
          array.push(temp[1])
        }
        // console.log(array)
        item.countTag = array.length;
        // console.log(item.countTag )
      },
      getChangeAllTitle(item, tag, index) {
        this.judge(item)
        if (item.title == '') {
          item.countTag = 0
        }
        if (item.countTag >= 2) {
          this.$message.error('最多插入两条词包')
          // item.countTag = 2
          return
        }
        var node = document.getElementsByClassName('rending-all')[index]
        var v = '{' + tag.name + '}'
        item.creativeWordIds.push(tag.creative_word_id)
        if (document.selection) {
          //IE
          node.focus()
          var sel = document.selection.createRange()
          sel.text = v
          sel.select()
        } else if (node.selectionStart || node.selectionStart == '0') {
          //MOZILLA/GOOGLE
          var startPos = node.selectionStart
          var endPos = node.selectionEnd
          var restoreTop = node.scrollTop
          node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
          if (restoreTop > 0) {
            node.scrollTop = restoreTop
          }
          item.title = node.value
          node.focus()
          node.selectionStart = startPos + v.length
          node.selectionEnd = startPos + v.length
        } else {
          //OTHER
          node.value += v
          item.title = node.value
          node.focus()
        }
      },

      //打开素材库
      openMaterialLibrary(){
        this.MaterialLibraryVisible=true;
        this.spinning=true;
        this.noMoreData=false
        this.checkedList=[];
        this.MaterialLibraryList=[];
        this.pageIndex=1;
        
        this.$nextTick(()=>{
          if(this.MaterialLibraryVisible){
            console.log(this.$refs)

            this.checkedList=this.showList.map(item=>{
              return item.id
            })
            if(this.materialType=="VIDEO"){
              this.getMaterialLibrary('/ctop/materialInfo/listByAccountIds')
            }else{
              this.getMaterialLibrary('/ctop/MaterialImageInfo/listByAccountIds')
            }

          }
          
        })
        
      },
      // 页面改变
      pageChange(page, pageSize){
        console.log(page,pageSize);
        this.currentMaterialPage=page;
        this.spinning=true;
        if(this.materialType=="VIDEO"){
          this.getMaterialLibrary('/ctop/materialInfo/listByAccountIds')
        }else{
          this.getMaterialLibrary('/ctop/MaterialImageInfo/listByAccountIds')
        }
      },
      loadingMoreMaterial(){
        
        this.MaterialSpinning=true;
        if(this.materialType=="VIDEO"){
          this.getMaterialLibrary('/ctop/materialInfo/listByAccountIds')
        }else{
          this.getMaterialLibrary('/ctop/MaterialImageInfo/listByAccountIds')
        }
      },
      // 获取素材
      getMaterialLibrary(url){
        let accountIds=this.LHKaccountInfo.map(item=>{
          return item.value
        })

        postAction(url,{
          type: this.materialType,
          userId:this.userInfo.id,
          status: 0,
          column: 'createTime',
          order: 'desc',
          pageNo: this.pageIndex,
          pageSize: 10,
          accountIds,
        }).then(res=>{
          console.log(res);
          this.spinning=false;
          this.MaterialSpinning=false;
          if(res.success){
            if(res.result.records.length>0){
              this.MaterialLibraryList=[...this.MaterialLibraryList,...res.result.records];
              this.pageIndex++;
            }else{
              this.noMoreData=true;
            }
            
            
          }
        })
      },

      // 素材库选择完毕OK按钮
      MaterialLibraryOk(){
        this.showList=[];
        if(this.materialType=='VIDEO'){
          this.videoList=[]
        }else{
          this.imageList=[]
        }
        this.checkedList.map(item=>{
          this.MaterialLibraryList.map(ele=>{
            if(ele.id==item){
              this.showList.push(ele);
              if(this.materialType=='VIDEO'){
                this.videoList.push(ele)
              }else{
                this.imageList.push(ele)
              }
            }
          })
        })
        console.log(this.showList);
        this.MaterialLibraryVisible=false;

        let accountArray=this.LHKaccountInfo.map(item=>{
          return item.value
        })
        let materialArray=[...this.videoList,...this.imageList].map(item=>{
          return item.id
        })
        postAction('/ctop/materialUpload/uploadAccount',{
            mediaId:'1',
            materialArray,
            accountArray,
        }).then(res=>{
          // console.log(res)
        })

        this.MonitoringTypeData=[...this.videoList,...this.imageList]
      },
      onChange(checkedList) {
        console.log(checkedList);
        
      },
      handleChange(){
        console.log(this.createTipList)
      },

      handleOk(e) {
          this.visible=false;
          this.$router.push({path:'/LaunchHousekeeper/setProjectBudget'})        
      },
      handleBack(e) {
        this.visible = false;
      },
      
      // 滚动事件
      handleInfiniteOnLoad(){  
        this.loading=true;
        // alert(1)
        console.log(this.pageIndex,1)
          if(this.loadingMore){
              
          }         
      },
        
      disabledDate(current) {
            // console.log(current)
            return current && current < moment()
      },
     
      createChange(value){
        console.log(value);
        this.thirdIndustryId=value[2]
       
        console.log(this.form.getFieldsValue())
      },
      // //获取表单的某一个属性值
      getFormData(className) {
        return this.form.getFieldValue(className)
      },
      
      
      // 验证网址
      IsURL(res) {
        //   var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
        var strRegex =
          /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
        var re = new RegExp(strRegex)
        // console.log(re.test(res))
        if (re.test(res)) {
          return true
        } else {
          return false
        }
      },
      validateURL(rule, value, callback) {
        // console.log(rule, value, callback);

        if (this.IsURL(value)) {
          callback()
        } else if (value && !this.IsURL(value)) {
          callback('链接地址无法访问，请正确输入')
        } else {
          //     callback('下载链接必须填写')
        }
      },
      goBack() {
        this.$router.replace('/modules/LaunchHousekeeper/LaunchHousekeeperList')
        this.$bus.$emit('remove', '/LaunchHousekeeper/setProjectCreate')
      },
      goSave() {
        console.log(this.videoList,this.imageList)
        let createList=[...this.videoList,...this.imageList]
        let flag=false;
        let signaturesImage=[];
        let signaturesVideo=[]
        let videoInfoList=[];
        let imageInfoList=[];

        if(createList.length>=3&&this.videoList.length>0&&this.imageList.length>0||this.videoList.length>=3 ||this.imageList.length>=5){
            if(this.createTitle.length>=3){
                flag=true;
                this.btnloading=true;
              // 获取一下视频和图片的数据
              let videoHttp=new Promise((resolve,reject)=>{
                if(this.videoList.length>0){
                    signaturesVideo=this.videoList.map(item=>{
                      return item.code
                    })
                    postAction('/ctop/queryTool/queryVideoInfo',{
                      accountId:this.LHKaccountInfo[0].value,
                      signatures:signaturesVideo,
                    }).then(res=>{
                      console.log(res)
                      if(res.result){
                        res.result.forEach(item=>{
                          item.url=item.poster_url;
                          item.video_id=item.id
                        })
                        if(res.result.length==this.videoList.length){
                          videoInfoList=res.result;
                          resolve();
                        }else{
                          this.$message.error('视频上传丢失，请重新上传')
                          reject();
                        }                        
                      }
                    })
                }else{
                  resolve();
                }
              })

              let imageHttp=new Promise((resolve,reject)=>{
                if(this.imageList.length>0){
                    signaturesImage=this.imageList.map(item=>{
                      return item.code
                    })
                    postAction('/ctop/queryTool/queryImageInfo',{
                      accountId:this.LHKaccountInfo[0].value,
                      signatures:signaturesImage,
                    }).then(res=>{
                      console.log(res)
                      if(res.result){
                        res.result.forEach(item=>{
                          item.web_uri=item.id
                          // item.web_uri=item.url
                        })
                        if(res.result.length==this.videoList.length){
                          imageInfoList=res.result;
                          resolve();
                        }else{
                          this.$message.error('视频上传丢失，请重新上传')
                          reject();
                        }
                      }
                    })
                }else{
                  resolve();
                }
              })

              
                Promise.all([imageHttp,videoHttp]).then(res=>{
                    this.form.validateFields((err, values) => {
                      if (!err) {

                        values.adKeywords=this.createTipList;
                        values.thirdIndustryId=this.thirdIndustryId;
                        values.videoInfo=videoInfoList;
                        values.imageInfo=imageInfoList;
                        values.title=this.createTitle.map(item=>{
                          return item.title
                        })

                        console.log('Received values of form: ', values)
                        
                      let params=[];

                        params=this.projectInfo.map(item=>{
                          return {
                            ...item,
                            ...values,
                          }
                        })
                          console.log(params)
                          postAction('/adlab/Project/setCreative',params).then((res) => {
                            console.log(res)
                            if (res.success) {
                              this.errorInfo=res.result;
                              this.btnloading=false;
                              this.visible=true;
                             let projectInfo=[]
                              res.result.forEach(item=>{
                                  if(item.code==0){
                                    projectInfo.push(item)
                                  }
                              })

                              sessionStorage.setItem('projectInfo',JSON.stringify(projectInfo))
                            } else {
                              this.btnloading=false;
                            }
                          })
                      } else {
                        this.$message.error('请正确填写必填项目')
                      }
                    })
              
                })
                
                

            }else{
              this.$message.error('创意标题个数最少三个！')
            }
        }else{
          this.$message.error('最少选择三个视频创意或者五个图片创意！')
        }
        
      },
      
      // 分割字符串方法
      splitString(str){
        var temp = str.split(/[\n|\r]/g);
          for(var i =0;i<temp.length;i++){
          if(temp[i] == ""){
            temp.splice(i, 1);
            //删除数组索引位置应保持不变
            i--;
          }
        }
        // console.log(temp);
        return temp
      },

      getTags() {

        getAction('/bytedance/batch/creative/words/get', {
          accountId: this.LHKaccountInfo[0].value
        }).then(res => {
          console.log(res)
          if (res.code == '0') {
            this.DTtags = res.creative_word
          } else {
            this.DTtags = []
          }
        })
      },

    },
   
    mounted() {
      
      this.$bus.$emit('remove', '/LaunchHousekeeper/setProjectDirectional')
      getAction('/bytedance/batch/industry/list').then(res => {
        this.createOptions = res.data
      })
      let projectInfo=sessionStorage.getItem('projectInfo');
      if(projectInfo){
          this.projectInfo=JSON.parse(projectInfo)
      }
      let LHKaccountInfo=sessionStorage.getItem('LHKaccountInfo');
      if(LHKaccountInfo){
          this.LHKaccountInfo=JSON.parse(LHKaccountInfo)
      }
      let userinfo=localStorage.getItem('pro__Login_Userinfo')
      if(userinfo){
          this.userInfo=JSON.parse(userinfo).value
      }
      this.getTags()
      getAction('/ctop/creativeTitle/getTitleLabel',{}).then(res=>{
        console.log(res)
        this.cascaderOptions=res.result
      })

      // this.sysGeneratedTitle()
    },
  }
</script>

<style lang="scss">
.newCreate{
  .ant-btn-danger {
    background-color: #ff4d4f !important; 
  }
}

  .ant-tooltip-inner,
  .ant-tooltip-arrow::before {
    background-color: #fff;
    color: #333;
  }

  .ant-tooltip-inner {
    span {
      display: block;
    }
  }

  .ant-tooltip {
    max-width: 450px;
  }

  .newCreate {
    .ant-radio-button-wrapper {
      min-width: 80px;
      text-align: center;
    }

    .ant-form-item {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      -webkit-font-feature-settings: 'tnum';
      font-feature-settings: 'tnum';
      vertical-align: top;
    }

    .directedBody {
      .ant-form-item {
        margin-bottom: 20px;
      }
    }

    .ant-checkbox-wrapper,
    .ant-checkbox-group-item {
      display: block;
      padding: 5px 15px;
    }

    .ant-checkbox-wrapper:first-child {
      padding: 0 15px 5px;
    }
  }
</style>
<style lang="scss" scoped>
  .newCreate {
    font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
    color: #333;

    ul,
    li {
      margin: 0;
      padding: 0;
    }

    .moduler {
      background: #fff;
      margin-bottom: 16px;
      position: relative;
      padding: 32px 24px 48px 32px;
      border-radius: 4px;
      box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);

      .moduler-title {
        display: flex;
        align-items: center;
        font-size: 22px;
        margin-bottom: 20px;
      }

      .row-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 32px;
      }

      .row-item:last-of-type {
        margin-bottom: 0;
      }

      .row-item .hint-item {
        width: 24px;
        min-width: 24px;
        align-self: flex-start;
        line-height: 20px;
        height: 20px;
        margin-top: 9px;
      }

      .row-item .label-item {
        position: relative;
        align-items: flex-start;
        align-self: flex-start;
        line-height: 20px;
        height: 20px;
        margin-top: 10px;
        width: 80px;
        min-width: 80px;

        .text-item {
          font-size: 14px;
          width: 60px;
        }
      }

      .row-item .required-item {
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background: #f45858;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }

      .row-item .input-item {
        min-width: 580px;
        position: relative;

        // height: 35px;
        .tip {
          font-size: 12px;
          color: tomato;
        }

        .inventory-tags-lists-header {
          background-color: #F8F9FA;
          border: 1px solid #E4E9ED;
          height: 36px;
          line-height: 33px;
          border-radius: 4px 4px 0 0;
          font-weight: bold;
          display: flex;
        }

        .inventory-tags-lists-container {
          border: 1px solid #E4E9ED;
          margin-top: -1px;
          height: 100%;
          padding: 4px 0px;
          border-radius: 0 0 4px 4px;
        }

        .inventory-tags-lists-item {
          width: 100%;
          height: 37px;
          line-height: 37px;
          padding-left: 12px;
          padding-right: 12px;
          display: flex;
          font-size: 14px;
          color: #333;
        }
        .moreTags{
          color:#1890ff;
          cursor: pointer;
          position: relative;
          right: 0px;
        }


        .material-panel{
            width: 852px;
            height: 403px;
            border-radius: 2px 2px 2px 4px;
        }
        .adlab-video-uploader .head{
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -ms-flex-wrap: wrap;
              flex-wrap: wrap;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              padding: 13px 24px;
              border: 1px solid #e4e9ed;
              border-top-left-radius: inherit;
              border-top-right-radius: inherit;
        }
        .adlab-video-uploader .content-panel {
            overflow-y: auto;
            overflow-x: hidden;
            height: 346px;
            border: 1px solid #e4e9ed;
            padding: 8px;
            padding-bottom: 24px;
            border-top-width: 0;
            border-bottom-left-radius: inherit;
            // background: #f8f9fa;
        }
        .relative{
            position: relative;
        }
        .adlab-video-uploader .content-panel .content-wrapper{
            width: calc(100% + 17px);
        }
        .adlab-video-uploader .content-panel .content-item {
            display: inline-block;
            vertical-align: top;
            margin-left: 8px;
            margin-top: 8px;
        }
        .img-wrapper{
            display: inline-block;
            width: 200px;
            height: 400px;
            border-radius: 4px;
            position: relative;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all .1s ease-out;
            transition: all .1s ease-out;
        }
        .img-wrapper .img{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        .img-wrapper .material-desc, .img-wrapper .video-duration {
            position: absolute;
            color: #fff;
            font-size: 12px;
            background: rgba(0,0,0,.398601);
            z-index: 10;
            border: 1px solid hsla(0,0%,100%,.598558);
            border-radius: 4px;
            line-height: 18px;
            padding: 0 7px;
        }
        .img-wrapper .material-desc{
            top: 8px;
            left: 8px;
        }
        .img-wrapper .img .portraitImg{
              max-width: 100%;
          }
        .img-wrapper .img .horizontalImg{
              max-height: 100%;
          }

          .img-wrapper .name-panel {
              padding: 16px;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
              color: #333;
              background: #fff;
              border-bottom-left-radius: inherit;
              border-bottom-right-radius: inherit;
          }
          .img-wrapper .img .operation {
              display: none;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
          }
          .img-wrapper .img:hover .operation{
            display: block;
          }
          .img-wrapper .img .operation .wrapper{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-line-pack: center;
            align-content: center;
            height: 100%;
            width: 100%;
            background: rgba(0,0,0,.3);
        }
      }
    }
    .recordsName{
        width: 300px;
        margin: 0 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        color: #333;
        background: #fff;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
    }

    .opt {
      text-align: right;
    }
    .adName{
      display: flex;
      .nameList{
        width: 90%;
      }
      .item{
        display: inline-block;
        width: 30%;
        margin-left: 15px;
        margin-bottom: 10px;
      }
    }

    
  }
  
  .ant-modal-body{
    background: #f8f9fa;
        .material-panel{
            width: 852px;
            height: 403px;
            border-radius: 2px 2px 2px 4px;
        }
        .adlab-video-uploader .head{
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -ms-flex-wrap: wrap;
              flex-wrap: wrap;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              padding: 13px 24px;
              border: 1px solid #e4e9ed;
              border-top-left-radius: inherit;
              border-top-right-radius: inherit;
        }
        .adlab-video-uploader .content-panel {
            overflow-y: auto;
            overflow-x: hidden;
            height: 404px;
            border: 1px solid #e4e9ed;
            padding: 8px;
            padding-bottom: 24px;
            // border-top-width: 0;
            border-bottom-left-radius: inherit;
            background: #f8f9fa;
        }
        .relative{
            position: relative;
        }
        .adlab-video-uploader .content-panel .content-wrapper{
            width: calc(100% + 17px);
            background: #f8f9fa;
            position: relative;
            padding-bottom: 40px;
            min-height: 370px;
        }
        .bottom-loading{
          position: absolute;
          bottom: 0px;
          width: 100%;
          left: 0;
          text-align:center
        }
        .adlab-video-uploader .content-panel .content-item {
            display: inline-block;
            vertical-align: top;
            margin-left: 8px;
            margin-top: 8px;
        }
        .img-wrapper{
            display: inline-block;
            width: 200px;
            height: 400px;
            border-radius: 4px;
            position: relative;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all .1s ease-out;
            transition: all .1s ease-out;
        }
        .img-wrapper .img{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        .img-wrapper .material-desc, .img-wrapper .video-duration {
            position: absolute;
            color: #fff;
            font-size: 12px;
            background: rgba(0,0,0,.398601);
            z-index: 10;
            border: 1px solid hsla(0,0%,100%,.598558);
            border-radius: 4px;
            line-height: 18px;
            padding: 0 7px;
        }
        .img-wrapper .material-desc{
            top: 8px;
            left: 8px;
        }
        .img-wrapper .img .portraitImg{
              max-width: 100%;
          }
          .img-wrapper .img .horizontalImg{
              max-height: 100%;
          }
          .img-wrapper .name-panel {
              padding: 16px;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
              color: #333;
              background: #fff;
              border-bottom-left-radius: inherit;
              border-bottom-right-radius: inherit;
          }
          .img-wrapper .img .operation {
              // display: none;
              position: absolute;
              top: 4px;
              bottom: 0;
              left: 6px;
              right: 0;
          }
          .img-wrapper .img .operation .wrapper{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-line-pack: center;
            align-content: center;
            height: 100%;
            width: 100%;
            background: rgba(0,0,0,.3);
        }
        .ant-checkbox-inner {
          position: relative;
          top: 0;
          left: 0;
          display: block;
          width: 16px;
          height: 16px;
          background-color: rgba(255,255,255,0.4);
          
          border-radius: 2px;
          border-collapse: separate;
          -webkit-transition: all 0.3s;
          transition: all 0.3s;
          
      }
      .img-wrapper .img.with-panel {
          border: none;
          height: calc(100% - 55px);
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
      }



      // 标题选择
      .title-list {
          width: calc(100% + 48px);
          margin: 16px -24px;
          margin-bottom: 0;
          padding: 16px  30px;
          background: #f9f9f9;
          height: 363px;
          border: 1px solid #eaeaea;
          overflow: scroll;
      }
      .title-list .title-item{
        height: 30px;
        line-height: 30px;
      }
  }
</style>