<template>
  <div class='app-container'>
    <div class="left">
      <el-calendar ref="calendar" v-model="nowDate">
        <template #header="{ date }">
          <span>{{ date }}</span>
          <el-button link icon="ArrowLeftBold" @click="selectDate('prev-month')" />
          <el-button link icon="ArrowRightBold" @click="selectDate('next-month')" />
        </template>
      </el-calendar>
      <div class="list">
        <el-input v-model="audioData.form.name" placeholder="搜索" clearable>
          <template #append>
            <el-button icon="Search" @click="getSearch" />
          </template>
        </el-input>
        <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
          <el-tab-pane v-for="item in data.tabOptions" :key="item.value" :name="item.value" :label="item.label"
            v-loading="audioData.loading">
            <el-scrollbar :height="260">
              <draggable class="contentList" :style="[activeName !== 2 ? 'flex-direction: column' : 'flex-wrap: wrap;']"
                v-model="audioData.tableData" item-key="id" chosen-class="chosenClass" data-id="content"
                :group="{ name: 'componentGroup', pull: 'clone', put: false }" :sort="false" @end="onEnd">
                <template #item="{ element, index }">
                  <div class="item" :style="{'width': activeName == 2 ? 'calc(100% / 3)' : '100%'}">
                    <span v-show="activeName !== 2" class="item_line" :title="element.name">
                      <el-icon style="margin-right: 10px; line-height:40px">
                        <VideoPlay />
                      </el-icon>
                      <span>{{ element.name }}</span>
                    </span>
                    <span v-show="activeName === 2" class="item_box">
                      <img src="@/assets/icons/svg/file.svg" width="50" height="50" />
                      <span class="takeName" :title="element.name">{{ element.name }}</span>
                    </span>
                  </div>
                </template>
              </draggable>
            </el-scrollbar>
            <el-pagination v-show="audioData.total > 0" layout="prev,pager,next" :total="audioData.total"
              @current-change="handleChangeCurrent" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="right">
      <gantt-chart path="/content/setting/detail" type="setting" :date="nowDate" />
    </div>
  </div>
</template>

<script setup>
import { useAudioList } from '@/hooks/index'
import { checkPermi } from '@/utils/permission'
import GanttChart from '@/components/GanttChart'

const { proxy } = getCurrentInstance();

const { audioData, getAudio } = useAudioList()
getAudio()

// 遮罩层
const loading = ref(false)
// tab页
const activeName = ref(0)
// 日历
const nowDate = ref(new Date())
// 数据
const data = reactive({
  // tab数组
  tabOptions: [{
    value: 0,
    label: '内容列表'
  }, {
    value: 1,
    label: 'ohplay音频'
  }, {
    value: 2,
    label: '场景预设'
  }],
  // 表单
  form: {
    pageNum: 1,
    pageSize: 10
  }
})

// 日历
const calendar = ref()
function selectDate(val) {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

function getDate(e) {
  nowDate.value = e
}

// 切换tab
const handleChangeTabs = (e) => {
  audioData.tableData = []
  audioData.form = {
    pageNum: 1,
    pageSize: 10,
    type: e.props.name
  }
  getAudio()
}

// 翻页
const handleChangeCurrent = (e) => {
  audioData.form.pageNum = e
  getAudio()
}

// 搜索
const getSearch = () => {
  audioData.form.pageNum = 1
  getAudio()
}

// 拖拽结束
function onEnd(params) {
  if (checkPermi(['content:setting:add'])) {
    if (params.from.className !== params.to.className) {
      proxy.$modal.confirm(`是否要添加?`).then(() => {
        getRouter({ audioList: JSON.stringify(params.item.__draggable_context.element) })
      }).catch(() => { })
    }
  } else {
    proxy.$modal.msgError('暂无权限')
  }
}

// 新增
function getRouter(query) {
  proxy.$router.push({
    path: `/content/setting/detail`,
    query
  })
}

// 拖动样式
const chosenClass = () => {
  return '  background: none !important;color: #3979F9 !important; line-height: 60px;'
}

</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
}

.left {
  width: 400px;
  background-color: #f4f4f5;
  display: flex;
  flex-direction: column;

  :deep(.el-calendar-day) {
    height: 42px;
  }

  :deep(.el-tabs__nav) {
    justify-content: space-around;
    float: none;
  }

  .list {
    padding: 20px;

    .contentList {
      display: flex;

      .item {
        display: flex;

        .item_line {
          width: 100%;
          padding: 8px 10px;
          background-color: #FFF;
          margin-bottom: 10px;
          border-radius: 5px;
          color: #3979F9;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .item_box {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0px 10px;
          font-size: 14px;
          margin-bottom: 20px;

          .takeName {
            width: 100%;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 15px;
          }
        }
      }
    }
  }
}

.noScene {
  flex-direction: column;
}

.scene {
  flex-wrap: wrap;
}

.right {
  display: flex;
  flex-direction: column;
  min-width: 700px;
  width: calc(100% - 400px);
  height: 792px;
}

draggable,
.label {
  user-select: none;
}

.chosenClass {
  display: none;
  background: none !important;
}

.el-scrollbar {
  margin-bottom: 20px;
}
</style>