canvasScreen_admin/src/views/immediateRelease/index.vue

<template>
  <div class="app-container">
    <el-form ref="form" :model="form" size="small">
      <!-- 创建标题 -->
      <el-row class="in_release_item" type="flex" justify="space-between">
        <el-col :span="3" class="item_title">创建{{ publishType == 0 ? "即时发布" : "定时发布" }}</el-col>
        <el-col :span="18">
          <div class="input_wrap">
            <span class="input_label">名称</span>
            <el-input v-model="form.relaase_name" :placeholder="changePlaceholder" class="input_name" />
          </div>
        </el-col>
        <el-col :span="4" class="release_right">
          <el-button round class="release_btn" type="primary" @click="releaseSubmit">发布</el-button>
          <el-button round type="primary">关闭</el-button>
        </el-col>
      </el-row>
      <!-- 第一步：设置时间 -->
      <el-row class="in_release_item">
        <el-col class="step_1">第一步：设置时间</el-col>
        <el-col class="step_form">
          <el-form-item label="发布时间" prop="release_start" :rules="[
              { required: true, message: '请选择发布时间', trigger: 'change' }
            ]" label-width="100px">
            <el-date-picker v-if="publishType == 0" v-model="form.release_start" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期" />
            <el-date-picker v-else v-model="form.release_start" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item v-if="publishType == 1" label="设置周期" prop="release_cycle" :rules="[
              { required: true, message: '请设置周期：', trigger: 'change' },
            ]" :class="['set_weekly',{'no_margin': form.release_cycle == 2}]" label-width="100px">
            <el-radio-group v-model="form.release_cycle" @change="clearCheckbox()">
              <el-radio :label="1">每天</el-radio>
              <el-radio :label="2">每周</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.release_cycle == 2" :class="{'weekly_margin': form.release_cycle == 2}" prop="release_weekly" :rules="[
              { required: true, message: '请选择周期时间', trigger: 'change' },
            ]">
            <el-checkbox-group v-model="selectWeekly">
              <el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- :rules="[
              { required: true, message: '请选择是否置顶', trigger: 'change' }
            ]" -->
          <el-form-item label="是否置顶" prop="is_topping" label-width="100px">
            <el-checkbox v-model="form.is_topping">置顶</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二步：选择内容 -->
      <el-row class="in_release_item">
        <el-col class="step_1">第二步：选择内容</el-col>
        <el-col class="step_form">
          <div class="step_select">
            <div>已选内容： 0</div>
            <div>内容总时长：0.00s</div>
            <div>添加BGM：<el-button class="step_select_audio" type="primary" round @click="selectAudioCont(0,-1)">选择文件</el-button>
            </div>
          </div>
          <div class="step_select_list">
            <div class="step_upload" @click="selectContVisible = true"></div>
            <draggable v-model="selectedMaterial" class="drag_list" @end="dragEnd">
              <div v-for="(item, index) in selectedMaterial" :key="'list-'+index" :class="['material_item', 'item_cont']" @click="clickMaterialItem(item.material_id,item)">
                <img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
                <div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
                <div class="item_format">
                  <span class="item_type">{{ materialPostfix[index] }}</span>
                  <span v-if="item.material_type != '0'" class="item_time">{{ item.duration | getSeconds }}</span>
                </div>
                <div class="file_name">{{ item.material_name }}</div>
                <div v-if="contentIds.includes(item.material_id)" class="select_handle">
                  <div class="select_delt" @click.stop="selectDelt(item.material_id,index)">
                    <svg class="font-icon icon1" aria-hidden="true">
                      <use xlink:href="#icon-guanbi2" />
                    </svg>
                  </div>
                  <div class="select_edit" @click.stop="selectEdit()">
                    <svg class="font-icon icon1" aria-hidden="true">
                      <use xlink:href="#icon-bianji" />
                    </svg>
                  </div>
                </div>
              </div>
            </draggable>
          </div>
        </el-col>
      </el-row>
      <!-- 第三步-选择设备 -->
      <el-row class="in_release_item">
        <el-col class="step_1">第三步：选择设备</el-col>
        <el-col class="step_form">
          <el-form-item label="" prop="release_device" :rules="[
              { required: true, message: '请选择设备', trigger: 'change' },
            ]">
            <el-radio-group v-model="form.release_device" @change="clearDevice()">
              <el-radio label="1">所有设备</el-radio>
              <el-radio label="2">部分设备<i v-if="form.release_device == 2" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="form.release_device == 1" class="select_all_tip">所有设备都将被发送</div>
          <div v-if="deviceTags.length > 0 && form.release_device == 2" class="select_other">
            <el-row>
              <el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
              <el-col :span="4">
                <el-button round class="delt_btn" @click="clearDevice()">清空</el-button>
              </el-col>
            </el-row>
            <el-tag v-for="tag in deviceTags" :key="tag.device_id" closable :disable-transitions="true" :hit="false" color="#cbe3ff" @close="deltTags(tag)">
              {{ tag.device_name }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 第二步：选择内容 - 选择素材 -->
    <div class="release_layer upload_layer">
      <el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="selectContVisible" width="1200px">
        <div slot="title" class="layer_tab_title">
          <span :class="{'active': activeIndex === 0}" @click="tabAll(0)">素材库</span>
          <span :class="{'active': activeIndex === 1}" @click="tabAll(1)">主题库</span>
        </div>
        <!-- 素材库 -->
        <div v-if="activeIndex === 0">
          <ul class="tab_item">
            <li v-for="(item, index) in materialTabItem" :key="index" :class="{'active': activeItemIndex === index}" @click="tab(index)">{{ item.name }}<span>{{ item.num }}</span>
            </li>
          </ul>
          <div class="material_list" style="min-height: 260px">
            <MaterialList ref="MaterialList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" />
          </div>
        </div>
        <!-- 主题库 -->
        <div v-if="activeIndex === 1" class="theme_cont">
          <!-- 主题库list -->
          <ThemeGalleryList ref="ThemeGalleryList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :show-item-info="false" />
        </div>
        <div class="upload_list_right">
          <div class="mulit_btn" @click="multiSelectBtn">{{ mulitText }}</div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" round @click="uploadSelected()">确 定</el-button>
          <el-button round @click="cancelContSelect">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 编辑播放内容 -->
    <div class="upload_layer">
      <el-dialog title="请选择播放内容" :close-on-click-modal="false" :visible.sync="listEditVisible">
        <div class="total_time">
          内容总时长：3m15s
        </div>
        <div v-for="(item, index) in selectedEditData" :key="index" class="edit_material">
          <div class="edit_img">
            <img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
            <div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
            <span class="">{{ index+1 }}</span>
          </div>
          <div class="edit_cont">
            <div class="edit_cont_base">
              <p>{{ item.material_name }}</p>
              <span>{{ materialPostfix[index] }}</span>
              <span>{{ item.file_size | formatBytes }}</span>
            </div>
            <!-- <div v-if="item.material_type == 0" class="edit_cont_set"> -->
            <el-form v-if="item.material_type == 0" :ref="setMaterialForm" :model="setMaterialForm.form" class="edit_cont_set" size="small">
              <div class="set_time">
                <span>展示时长</span>
                <el-form-item :prop="'form.'+index+'.showTime'" style="width: 100px">
                  <el-input v-model="item.showTime" type="text" placeholder="15" style="width: 66px" />
                </el-form-item>
                <em>秒</em>
              </div>
              <div class="set_animation">
                <span class="set_item">切换动效</span>
                <el-form-item :prop="'form.'+index+'.showAnimation'" style="width: 100px">
                  <el-select v-model="item.showAnimationName" size="small" class="filter-item" value-key="name" @change="selectAnimation($event, item)">
                    <el-option v-for="items in animationData" :key="items.key" :label="items.name" :value="items" />
                  </el-select>
                </el-form-item>
              </div>
              <div class="set_time set_audio">
                <span>音频：</span>
                <p class="audio_name">{{ item.showAudioName }}</p>
                <!-- 主题库音频文件不可选择 -->
                <el-button type="primary" round @click="selectAudioCont(1,index)">选择文件</el-button>
              </div>
            </el-form>
            <!-- </div> -->
            <div v-else class="edit_cont_other">内容时长：{{ item.duration | getSeconds }}</div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" round @click="listEditVisible = false">保 存</el-button>
          <el-button round @click="listEditVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 素材库 - 音频选择 -->
    <div class="release_layer upload_layer">
      <el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="selectAudioVisible" width="1200px">
        <div slot="title" class="layer_tab_title">
          <span class="active">素材库</span>
        </div>
        <div>
          <ul class="tab_item">
            <li>音频<span>{{ audioListData.length }}</span></li>
          </ul>
          <div class="material_list">
            <div v-for="(item, index) in audioListData" :key="index" :class="['material_item', 'item_cont',{ 'item_multi': audioChecked == index }]" @click="audioCheckedHandle(index)">
              <img v-if="item.img_path" :src="item.img_path" alt />
              <div v-else class="radio_img"></div>
              <div class="item_format">
                <span class="item_type">mp3</span>
                <span class="item_time">{{ item.duration | getSeconds }}</span>
              </div>
              <div class="file_name">{{ item.material_name }}</div>
              <span v-if="audioChecked == index" class="checked_btn"></span>
            </div>
          </div>
        </div>
        <!-- <div class="upload_list_right">
          <div class="mulit_btn" @click="multiSelectBtn('audio')">{{ mulitText }}</div>
        </div> -->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" round @click="audioCheckedSubmit">确 定</el-button>
          <el-button round @click="cancelContSelect('audio')">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 添加发布的设备 -->
    <div class="add_device_layer">
      <el-dialog title="请选择设备" :close-on-click-modal="false" :visible.sync="selectDeviceVisible" width="400px">
        <el-tag v-for="tag in deviceAllTags" :key="tag.device_id" :disable-transitions="true" :hit="false" color="#cbe3ff" class="all_tags" @click="tagHandle(tag)">
          {{ tag.device_name }}
        </el-tag>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import ThemeGalleryList from '../components/ThemeGalleryList.vue'
import MaterialList from '../components/MaterialCompontentList.vue'
import { getMaterialByType } from '@/api/material/material'
import { ReqDeviceList } from '@/api/device/deviceList.js'
import { saveRelease } from '@/api/release/release.js'
import { getSeconds, formatBytes } from '@/utils/index.js'
export default {
  name: 'ImmediateRelease',
  components: {
    draggable,
    ThemeGalleryList,
    MaterialList
  },
  filters: {
    getSeconds (s) {
      return getSeconds(s)
    },
    formatBytes (bytes, decimals) {
      return formatBytes(bytes, decimals)
    }
  },
  data () {
    return {
      orga_id: '133221333123111',
      selectedMaterial: [], // 从其他页面选择带过来的素材
      materialPostfix: [],
      publishType: 0, // 判断是定时发布还是即时发布页面
      themeType: null,
      page: 1,
      pageSize: 10,
      audioListData: [], // 音频list
      isMainBgm: null, //是最外层的bgm还是里面的
      selectDeviceVisible: false, // 设备list - layer
      deviceAllTags: [], // 设备list
      deviceTags: [], // 已选择设备list
      selectContVisible: false, // 选择内容素材/主题 - layer
      selectAudioVisible: false, // 音频list-layer
      audioChecked: null, // 音频已选中的
      mulitText: '多选',
      isMultiSelected: false,
      form: {
        actual_end: '', // “实际结束时间 yyyy-MM-dd HH:mm:ss”,
        is_topping: false, // 是否置顶,
        orga_id: '', // "机构id"
        bgm_main: '',
        relaase_name: '', // 发布名称
        release_cycle: '', // 发布周期 0.无 1.每天 2.每周
        release_weekly: '', // 发布每周 如果设置为每天则为空
        release_device: '', // 发布设备 1.全部 2.部分
        release_deviceDTOs: [], // {"device_id": "设备id"}
        release_end: '', // “发布结束时间 yyyy-MM-dd HH:mm:ss”
        release_id: null, // 发布id 为null则为新增
        // {
        // "duration": 时长(s),
        // "effect": 切换动效,
        // "material_id": "素材id",
        // "material_name": "素材名称",
        // "img_path","显示图片路径",
        // "bgm_path":"背景音乐",
        // "file_size":"文件大小",
        // "ranking": 排序,
        // "rm_id": "关联id 新增则为null"
        // }
        release_materialDTOs: [],
        release_start: '', // 发布开始时间 yyyy-MM-dd HH:mm:ss
        release_type: '' // 发布类型
      },
      contentIds: [],
      listEditVisible: false, // 可编辑list素材-layer
      selectedEditData: [], // 可编辑list内容 - 选择的item
      thisEditIndex: null, // 当前音乐选择的index
      setMaterialForm: [],
      animationData: [ // 图片素材切换动态 - 编辑动画
        {
          key: '0',
          name: '无动画'
        },
        {
          key: '1',
          name: '动画1'
        },
        {
          key: '2',
          name: '动画2'
        }
      ],
      selectWeekly: [],
      weeklyList: [
        {
          id: '1',
          name: '周一'
        },
        {
          id: '2',
          name: '周二'
        },
        {
          id: '3',
          name: '周三'
        },
        {
          id: '4',
          name: '周四'
        },
        {
          id: '5',
          name: '周五'
        },
        {
          id: '6',
          name: '周六'
        },
        {
          id: '7',
          name: '周七'
        }
      ],
      materialTabItem: [ // 素材库 - tab切换title
        {
          key: 1,
          name: '全部',
          num: '3'
        },
        {
          key: 2,
          name: '图片',
          num: '1'
        },
        {
          key: 3,
          name: '视频',
          num: '1'
        },
        {
          key: 4,
          name: '音频',
          num: '1'
        }
      ],
      activeIndex: 0,
      activeItemIndex: 0,
    }
  },
  computed: {
    changePlaceholder () {
      return this.publishType == 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01'
    },
    defaultImg () {
      return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
    }
  },
  created () {
    this.selectedMaterial = []
    this.selectedMaterial = JSON.parse(localStorage.getItem('selectedMaterial'))
    // 素材类型格式处理
    if (this.selectedMaterial.length != 0) {
      this.selectedMaterial.forEach((item, key) => {
        this.materialPostfix[key] = item.deposit_url.substring(
          item.deposit_url.lastIndexOf('.') + 1,
          item.deposit_url.length
        )
      })
    }
  },
  mounted () {
    if (this.$route.path === '/release') {
      this.materialTabItem.pop()
    }
    if (this.$route.query.tag) {
      this.publishType = this.$route.query.tag
    }
    // 设备list
    this.ReqDeviceList()
  },
  methods: {
    // 发布提交
    releaseSubmit () {
      console.log(this.form)
      this.form.orga_id = this.orga_id
      if (this.form.release_device == 1) {
        this.form.release_deviceDTOs = []
      } else {
        if (this.deviceTags.length == 0) {
          this.$message.error('请选择设备 ！')
          return
        }
        this.form.release_deviceDTOs = this.deviceTags.map(item => {
          const json = {}
          json.device_id = item.device_id
          return json
        })
      }
      this.form.release_type = this.publishType
      // 先判断编辑还是新增
      this.form.actual_end = this.publishType == 0 ? null : ''
      if (this.publishType == 0) {
        this.form.release_cycle = 0
        this.form.release_weekly = null
        this.form.release_end = this.form.release_start
      }
      if (this.form.release_cycle == 2) {
        this.form.release_weekly = this.selectWeekly.join(',')
      }
      if (this.form.release_start instanceof Array) {
        const arrDate = this.form.release_start
        this.form.release_start = arrDate[0]
        this.form.release_end = arrDate[1]
      }
      this.form.release_materialDTOs = this.selectedMaterial.map((item, index) => {
        const json = {}
        if (item.material_type == 0) {
          json.duration = (item.showTime || item.showAnimationName || item.showAnimation) ? item.showTime : 15
          json.effect = (item.showTime || item.showAnimationName || item.showAnimation) ? item.showAnimation : 0
          json.bgm_path = (item.showAudioName || item.showAudioUrl) ? item.showAudioUrl : null
        } else {
          json.duration = 0
          json.effect = 0
          json.bgm_path = null
        }
        json.material_id = item.material_id
        json.material_name = item.material_name
        json.img_path = item.img_path
        json.file_size = item.file_size
        json.rm_id = null
        json.ranking = index + 1
        return json
      })
      const isBgm = this.selectedMaterial.find(item => {
        return item.material_type == 2
      })
      if (isBgm) {
        this.form.bgm_main = isBgm.deposit_url
      } else {
        this.form.bgm_main = null
      }
      saveRelease(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success('发布成功！')
          localStorage.removeItem('selectedMaterial')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取设备列表
    ReqDeviceList () {
      const params = {
        device_id: '',
        device_name: '',
        is_state: '',
        page: 1,
        size: 10
      }
      ReqDeviceList(params).then(res => {
        if (res.code == 200) {
          this.deviceAllTags = res.data.content
        } else {
          return this.$message.error('获取设备列表失败！')
        }
      })
    },
    // 设备list - show
    addDeviceTag () {
      this.selectDeviceVisible = true
    },
    // 设备选中list
    tagHandle (tag) {
      if (this.deviceTags.length == 0) {
        this.deviceTags.push(tag)
      } else {
        const result = this.deviceTags.find((item) => {
          return item == tag
        })
        if (!result) {
          this.deviceTags.push(tag)
        } else {
          this.$message.error('已选择过了~')
        }
      }
    },
    // 删除已选择的设备
    deltTags (tag) {
      this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
    },
    // 清空已选择的设备
    clearDevice () {
      this.deviceTags = []
    },
    // 根据素材类型获取素材
    getMaterialByType () {
      const params = {
        'theme_name': '',
        'theme_type': this.themeType,
        'theme_type_not': '',
        'orga_id': this.orga_id,
        'page': this.page,
        'size': this.pageSize
      }
      getMaterialByType(params).then(res => {
        if (res.code == 200) {
          this.audioListData = res.data.content
          // 素材类型格式处理
          this.audioListData.forEach((item, key) => {
            this.materialPostfix[key] = item.deposit_url.substring(
              item.deposit_url.lastIndexOf('.') + 1,
              item.deposit_url.length
            )
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    // 删除选择的素材
    selectDelt (id, i) {
      const index = this.contentIds.indexOf(id)
      this.contentIds.splice(index, 1)
      this.selectedEditData.splice(index, 1)
      this.selectedMaterial.splice(i, 1)
      localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial))
    },
    // 选中可编辑的
    clickMaterialItem (id, item) {
      const arr = this.contentIds
      if (arr.includes(id)) {
        const index = arr.indexOf(id)
        if (index > -1) {
          arr.splice(index, 1)
          this.selectedEditData.splice(index, 1)
        }
      } else {
        this.contentIds.push(id)
        this.selectedEditData.push(item)
      }
    },
    // 编辑-已选择的
    selectEdit () {
      this.listEditVisible = true
      let form = {
        showTime: '15',
        showAnimation: '',
        showAnimationName: ''
      }
      this.selectedEditData.map((item, index) => {
        if (item.material_type == 0) {
          this.setMaterialForm.push(form)
        }
      })
    },
    dragEnd () {
      // console.log(this.selectedEditData)
      // console.log(this.selectedMaterial)
    },
    // 选择音频
    selectAudioCont (type, index) {
      this.audioChecked = -1
      this.thisEditIndex = index
      this.isMultiSelected = false
      this.mulitText = '选择'
      this.selectAudioVisible = true
      // 根据类型获取素材 - audio - 2
      this.themeType = 2
      this.getMaterialByType()
      this.isMainBgm = type == 0 ? 0 : 1
    },
    // 音频选中-单选
    audioCheckedHandle (index) {
      if (index != this.audioChecked) {
        this.audioChecked = index
      } else {
        this.audioChecked = -1
      }
    },
    // 音频选中 - 提交
    audioCheckedSubmit () {
      this.selectAudioVisible = false
      if (this.audioChecked != -1) {
        const index = this.audioChecked
        if (!this.isMainBgm) {
          this.audioListData[index].material_type = 2
          const resultIndex = this.selectedMaterial.findIndex((item, key) => {
            return item.material_type == 2
          })
          if (resultIndex == -1) {
            this.selectedMaterial.push(this.audioListData[index])
          } else {
            this.selectedMaterial.splice(resultIndex, 1, this.audioListData[index])
          }
          localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial))
        } else {
          this.selectedEditData[this.thisEditIndex].showAudioName = this.audioListData[index].material_name
          this.selectedEditData[this.thisEditIndex].showAudioUrl = this.audioListData[index].deposit_url
        }
      } else {
        this.selectedEditData[this.thisEditIndex].showAudioName = ''
        this.selectedEditData[this.thisEditIndex].showAudioUrl = ''
      }
    },
    // 时间设置-切换到每天时
    clearCheckbox () {
      if (this.form.release_cycle == 2) {
        this.selectWeekly = []
        this.form.release_weekly = []
      }
    },
    // 动画切换
    selectAnimation (event, item) {
      item.showAnimationName = event.name
      item.showAnimation = event.key
    },
    // 选择内容-素材库/主题库 tab
    tabAll (index) {
      this.activeIndex = index
      this.activeItemIndex = 0
      this.isMultiSelected = false
      this.mulitText = '多选'
    },
    tab (index) {
      this.activeItemIndex = index
    },
    // 多选btn
    multiSelectBtn (type) {
      this.isMultiSelected = !this.isMultiSelected
      if (this.isMultiSelected) {
        this.mulitText = '取消'
        // 已选择的内容中-list是否包含，包含即选中状态
        this.selectedMaterial.forEach(item => {
          this.$refs.MaterialList.selectedListId.push(item.material_id)
          this.$refs.MaterialList.selectedMaterial.push(item)
        })
      } else {
        if (type == 'audio') {
          this.mulitText = '选择'
          this.audioChecked = -1
        } else {
          this.mulitText = '多选'
        }
      }
    },
    // 素材选择 - 确认按钮
    uploadSelected () {
      this.selectContVisible = false
      this.selectedMaterial = []
      this.selectedMaterial = this.$refs.MaterialList.selectedMaterial
      // 素材类型格式处理
      this.selectedMaterial.forEach((item, key) => {
        this.materialPostfix[key] = item.deposit_url.substring(
          item.deposit_url.lastIndexOf('.') + 1,
          item.deposit_url.length
        )
      })
      localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial))
      this.mulitText = '多选'
    },
    // 素材选择 - 取消按钮
    cancelContSelect (type) {
      this.isMultiSelected = false
      if (type == 'audio') {
        this.selectAudioVisible = false
      } else {
        this.selectContVisible = false
        this.mulitText = '多选'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: none;
  padding: 0;
}

.in_release_item {
  padding: 16px 24px;
  margin-bottom: 10px;
  line-height: 34px;
  background: #fff;
  border-radius: 6px;
  .item_title {
    font-size: 16px;
    font-weight: bold;
    color: #3a8aeb;
  }
  .input_wrap {
    display: flex;
    width: 282px;
    height: 34px;
    padding: 0 24px;
    font-size: 14px;
    background: #f5f6fa;
    line-height: 34px;
    border-radius: 34px;
    .input_label {
      &::after {
        content: "|";
        padding-left: 8px;
        color: #ccc;
      }
    }
    .input_name {
      width: 194px;
      ::v-deep .el-input__inner {
        border: none;
        background: #f5f6fa;
      }
    }
  }

  .release_right {
    text-align: right;
    .el-button {
      font-size: 14px;
      padding: 8px 24px;
      border: none !important;
    }
    .release_btn {
      color: #fff;
      background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
    }
  }
}

.step_1 {
  font-size: 16px;
  line-height: 54px;
  border-bottom: 1px solid #eee;
}
.set_weekly {
  ::v-deep .el-form-item__label {
    line-height: 40px;
  }
}
.no_margin {
  margin: 0;
}
.weekly_margin {
  margin: 0 0 6px 100px;
  ::v-deep .el-form-item__error {
    top: 70%;
  }
}
.step_select {
  display: flex;
  font-size: 14px;
  margin-bottom: 20px;
  div {
    margin-right: 30px;
  }
  .step_select_audio {
    margin-left: 5px;
    padding: 5px;
  }
}
.step_select_list {
  display: flex;
  .step_upload {
    width: 164px;
    height: 172px;
    margin-right: 16px;
    border: 1px dashed #dcdde3;
    background: url(~@/assets/images/t-sc.png) #f2f7ff no-repeat center center;
    background-size: 36px 29px;
    border-radius: 6px;
  }
}
.material_item {
  position: relative;
  .select_delt {
    position: absolute;
    top: 12px;
    right: 12px;
    .font-icon {
      width: 19px;
      height: 19px;
    }
  }
  .select_edit {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    .font-icon {
      width: 16px;
      height: 17px;
      margin-top: 12px;
    }
  }
}

.step_form {
  padding-top: 30px;
  .select_all_tip {
    margin: -20px 0 0 0;
  }
  .select_other {
    margin: -20px 0 0 0;
  }
}

.drag_list {
  display: flex;
  flex-wrap: wrap;
}
.upload_return {
  color: #8ebcfe;
}
.total_time {
  position: absolute;
  top: 72px;
  right: 24px;
  font-size: 14px;
  color: #000;
}
.edit_material {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f2f6fd;
  &:nth-last-child(2) {
    border-bottom: none;
  }
  .edit_img {
    position: relative;
    width: 58px;
    height: 77px;
    border-radius: 4px;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .radio_img {
      width: 58px;
      height: 77px;
      background: url(~@/assets/images/t-yp.png) no-repeat #b3e8fa center;
      background-size: 40px 40px;
    }
    span {
      position: absolute;
      top: -1px;
      left: -1px;
      display: block;
      width: 20px;
      height: 14px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      line-height: 14px;
    }
  }
  &:nth-child(odd) {
    .edit_img {
      span {
        background: url(~@/assets/images/num_bg2.png) no-repeat;
        background-size: 20px 14px;
      }
    }
  }
  &:nth-child(even) {
    .edit_img {
      span {
        background: url(~@/assets/images/num_bg1.png) no-repeat;
        background-size: 20px 14px;
      }
    }
  }

  .edit_cont {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: 10px 0 8px 0;
    font-size: 14px;
    margin-left: 25px;
    .edit_cont_base {
      display: flex;
      p {
        margin-right: 14px;
        color: #000;
      }
      span {
        display: inline-block;
        padding: 0 5px;
        margin-right: 8px;
        font-size: 12px;
        line-height: 16px;
        color: #3a8aeb;
        background: #cde4ff;
        border-radius: 2px;
      }
    }
    .edit_cont_set {
      display: flex;
      font-size: 12px;
      color: #666;
      height: 30px;
      line-height: 30px;
      .set_time {
        display: flex;
        margin-right: 30px;
        span {
          margin-right: 8px;
        }
        em {
          display: block;
          margin-left: 8px;
          font-style: normal;
        }
      }
      .set_animation {
        display: flex;
        margin-right: 30px;
        span.set_item {
          margin-right: 8px;
        }
        ::v-deep .el-form-item__content {
          height: 28px;
        }
        ::v-deep .el-input__suffix {
          height: 26px;
        }
      }
      .set_audio {
        flex: 1;
        .audio_name {
          margin-right: 10px;
        }
        ::v-deep .el-button--small {
          padding: 0 15px;
          border: none;
        }
      }
      ::v-deep .el-input__inner {
        text-align: center;
        height: 27px;
        line-height: 27px;
      }
      ::v-deep .el-input__icon {
        line-height: 27px;
      }
    }
    .edit_cont_other {
      line-height: 27px;
      font-size: 12px;
      color: #666;
    }
  }
}
.release_layer {
  ::v-deep .el-dialog__header {
    padding: 0;
    height: 60px;
  }
  .layer_tab_title {
    display: flex;
    span {
      position: relative;
      display: block;
      margin-right: 32px;
      line-height: 60px;
      font-size: 18px;
      color: #666;
      cursor: pointer;
      &.active {
        color: #333;
      }
      &.active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background: #3a8aeb;
      }
    }
  }
  .tab_item {
    display: flex;
    font-size: 14px;
    color: #666;
    margin: -14px 0 16px 0;
    li {
      margin-right: 30px;
      cursor: pointer;
      span {
        display: inline-block;
        margin-left: 4px;
      }
      &.active {
        color: #3a8aeb;
      }
    }
  }
  .material_list {
    display: flex;
    flex-wrap: wrap;
    .item_cont {
      margin: 0 24px 20px 0;
    }
  }
}
.theme_cont {
  ::v-deep .el-tabs__header {
    padding: 0;
    margin-bottom: 0;
  }
}

.release_layer {
  ::v-deep .el-tabs {
    margin: -26px 0 8px 0;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    display: none;
  }
  ::v-deep .el-tabs__active-bar {
    display: none;
  }
}
</style>