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-form-item prop="relaase_name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
              <el-input v-model="form.relaase_name" :placeholder="changePlaceholder" class="input_name" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="4" class="release_right">
          <el-button round class="release_btn" type="primary" @click="releaseSubmit('form')">发布</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">
            <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">{{ item.deposit_url | getFileFormat }}</span>
                  <span v-if="item.material_type != '0'" class="item_time">{{ item.duration | getSeconds }}</span>
                </div>
                <div class="file_name">{{ item.material_name || item.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 || tag.deviceId)" closable :disable-transitions="true" :hit="false" color="#cbe3ff" @close="deltTags(tag)">
              {{ tag.device_name || tag.deviceName }}
            </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="tabItem(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" :active-item-index="activeItemIndex" />
          </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 || item.name }}</p>
              <span>{{ item.deposit_url | getFileFormat }}</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" @input="$forceUpdate()" />
                </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, FetchFindMaterialById } from '@/api/material/material'
import { ReqDeviceList } from '@/api/device/deviceList.js'
import { FetchSaveRelease, FetchGetReleaseDetailsById } from '@/api/release/release.js'
import { getSeconds, formatBytes, parseTime, getFileFormat } 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)
    },
    getFileFormat(str) {
      return getFileFormat(str)
    }
  },
  data() {
    return {
      isThemeOrMaterial: false,
      orga_id: '133221333123111',
      selectedMaterial: [], // 从其他页面选择带过来的素材
      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"}
        del_rmids: [], // 删除绑定素材关联集合id
        release_end: '', // “发布结束时间 yyyy-MM-dd HH:mm:ss”
        release_id: null, // 发布id 为null则为新增
        release_materialDTOs: [],
        release_start: null, // 发布开始时间 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,
      release_id: null, // 发布编辑
      releaseInfo: null,
      isEditMaterial: []
    }
  },
  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'))
  },
  mounted() {
    if (this.$route.path === '/release') {
      this.materialTabItem.pop()
    }
    if (this.$route.query.tag) {
      this.publishType = this.$route.query.tag
    }
    // 设备list
    this.ReqDeviceList()
    if (localStorage.getItem('releaseId')) {
      this.editRelease()
    }
  },
  methods: {
    // 编辑带来 release_id
    editRelease() {
      const release_id = JSON.parse(localStorage.getItem('releaseId'))
      this.release_id = release_id
      const params = {
        release_id: release_id
      }
      FetchGetReleaseDetailsById(params).then(res => {
        if (res.code == 200) {
          const releaseInfo = res.data.release
          this.releaseInfo = releaseInfo
          this.form.orga_id = releaseInfo.orga_id
          this.form.relaase_name = releaseInfo.relaase_name
          this.form.release_cycle = releaseInfo.release_cycle
          if (this.form.release_cycle == 2) {
            if (releaseInfo.release_weekly) {
              this.selectWeekly = releaseInfo.release_weekly.split(',')
            }
          }
          this.form.is_topping = releaseInfo.is_topping
          if (releaseInfo.release_type == 1) {
            const arr = []
            arr.push(parseTime(releaseInfo.release_start))
            arr.push(parseTime(releaseInfo.release_end))
            this.form.release_start = arr
          } else {
            this.form.release_start = parseTime(releaseInfo.release_start)
          }

          this.form.bgm_main = releaseInfo.bgm_main
          this.form.release_deviceDTOs = res.data.release_devices
          // 获取素材list
          const materialIds = []
          this.isEditMaterial = res.data.release_materials
          res.data.release_materials.map((item) => {
            materialIds.push(item.material_id)
          })
          const params = {
            ids: materialIds
          }
          // 根据ID获取素材内容
          FetchFindMaterialById(params).then(res => {
            if (res.code == 200) {
              this.selectedMaterial = res.data
              // 判断拿ranking来排序
              this.selectedMaterial.filter((item, index) => {
                this.isEditMaterial.some(items => {
                  if (item.material_id == items.material_id) {
                    item.ranking = items.ranking
                  }
                })
              })
              this.selectedMaterial.sort(this.compare('ranking'))
              // 获取图片设置的animation
              this.selectedMaterial.forEach((item, index) => {
                if (item.material_type == 0) {
                  item.showTime = this.isEditMaterial[index].duration
                  item.showAnimation = this.isEditMaterial[index].effect
                  item.showAnimationName = this.animationData[item.showAnimation].name
                  item.showAudioUrl = this.isEditMaterial[index].bgm_path
                  item.showAudioName = this.isEditMaterial[index].bgm_name
                }
              })
            }
          })
          // 设备list
          this.form.release_device = releaseInfo.release_device
          this.deviceTags = res.data.release_devices
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    compare(attr) {
      return function(a, b) {
        var val1 = a[attr]
        var val2 = b[attr]
        return val1 - val2
      }
    },
    // 发布提交
    releaseSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.orga_id = this.orga_id
          // 发布类型
          this.form.release_type = this.publishType
          // 实际结束时间
          if (this.release_id) {
            if (this.releaseInfo.actual_end) {
              this.form.actual_end = this.releaseInfo.actual_end
            } else {
              this.form.actual_end = null
            }
            this.form.release_id = this.release_id
          } else {
            this.form.actual_end = null
            this.form.release_id = null
          }
          // 设备选择判断
          if (this.form.release_device) {
            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 || item.deviceId
                return json
              })
            }
          }
          // 根据发布类型 - 周期-时间
          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]
          }
          // 判断是否有localstorage有相应的list数据
          if (this.selectedMaterial) {
            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
                json.bgm_name = (item.showAudioName || item.showAudioUrl) ? item.showAudioName : null
              } else {
                json.duration = 0
                json.effect = 0
                json.bgm_path = null
                json.bgm_name = 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
              if (this.release_id) {
                if (this.isEditMaterial.length != 0) {
                  if (!item.create_time || (!item.classes && item.material_type == 2)) {
                    json.rm_id = null
                  } else {
                    json.rm_id = this.isEditMaterial[index].id
                  }
                }
              } else {
                json.rm_id = null
              }
              json.ranking = index + 1
              return json
            })
            console.log(this.form.release_materialDTOs)
            // 判断最外层是否有bgm
            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
            }
            console.log(this.form)
            // 保存提交
            FetchSaveRelease(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success('发布成功！')
                localStorage.removeItem('selectedMaterial')
                localStorage.removeItem('releaseId')
                this.$router.push({ path: '/publish' })
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            this.$message.error('请选择发布内容！')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取设备列表
    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.device_id || item.deviceId) == tag.device_id
        })
        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
        } 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)
      // 编辑的情况下
      if (this.release_id) {
        this.isEditMaterial.find(item => {
          if (item.material_id == id) {
            this.form.del_rmids.push(item.id)
          }
        })
      }
      // 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
      const 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])
            if (this.release_id) {
              // 编辑情况下 - 上传选择素材时，取消某一项选中状态-即删除该素材
              const editMaterialId = []
              this.isEditMaterial.map(item => {
                editMaterialId.push(item.material_id)
              })
              const selectedMaterialId = []
              this.selectedMaterial.map(item => {
                selectedMaterialId.push(item.material_id)
              })
              const newArr = editMaterialId.filter(item => selectedMaterialId.indexOf(item) == -1)
              this.isEditMaterial.filter(item => {
                if (newArr.indexOf(item.material_id) != -1) {
                  this.form.del_rmids.push(item.id)
                }
              })
            }
          }
          // 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) {
      this.$forceUpdate()
      item.showAnimationName = event.name
      item.showAnimation = event.key
    },
    // 选择内容-素材库/主题库 tab
    tabAll(index) {
      this.activeIndex = index
      this.activeItemIndex = 0
      this.isMultiSelected = false
      this.mulitText = '多选'
    },
    // 子菜单-tab
    tabItem(index) {
      this.activeItemIndex = index
    },
    // 多选btn
    multiSelectBtn(type) {
      this.isMultiSelected = !this.isMultiSelected
      if (this.isMultiSelected) {
        this.mulitText = '取消'
        console.log(this.activeItemIndex)
        if (this.activeIndex == 0) {
          this.$refs.MaterialList.selectedListId = []
          this.$refs.MaterialList.selectedMaterial = []
          // 已选择的内容中-list是否包含，包含即选中状态
          if (this.selectedMaterial) {
            this.selectedMaterial.forEach(item => {
              this.$refs.MaterialList.selectedListId.push(item.material_id)
              this.$refs.MaterialList.selectedMaterial.push(item)
            })
          }
        } else {
          this.$refs.ThemeGalleryList.selectedListId = []
          this.$refs.ThemeGalleryList.selectedMaterial = []
          // 已选择的内容中-list是否包含，包含即选中状态
          if (this.selectedMaterial) {
            this.selectedMaterial.forEach(item => {
              this.$refs.ThemeGalleryList.selectedListId.push(item.material_id)
              this.$refs.ThemeGalleryList.selectedMaterial.push(item)
            })
          }
          // this.selectedMaterial = this.$refs.ThemeGalleryList.selectedMaterial
        }
      } else {
        if (type == 'audio') {
          this.mulitText = '选择'
          this.audioChecked = -1
        } else {
          this.mulitText = '多选'
        }
      }
    },
    // 素材选择 - 确认按钮
    uploadSelected() {
      this.selectContVisible = false
      this.selectedMaterial = []
      if (this.activeIndex == 0) {
        this.selectedMaterial = this.$refs.MaterialList.selectedMaterial
      } else {
        this.selectedMaterial = this.$refs.ThemeGalleryList.selectedMaterial
      }
      if (this.release_id) {
        // 编辑情况下 - 上传选择素材时，取消某一项选中状态-即删除该素材
        const editMaterialId = []
        this.isEditMaterial.map(item => {
          editMaterialId.push(item.material_id)
        })
        const selectedMaterialId = []
        this.selectedMaterial.map(item => {
          selectedMaterialId.push(item.material_id)
        })
        const newArr = editMaterialId.filter(item => selectedMaterialId.indexOf(item) == -1)
        this.isEditMaterial.filter(item => {
          if (newArr.indexOf(item.material_id) != -1) {
            this.form.del_rmids.push(item.id)
          }
        })
      }
      // 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>