<template>
  <div>
    <Search :search="search" :reset="resetQuery">
      <template v-slot:body>
        <el-form-item label="短剧" prop="name">
          <el-input v-model="query.videoName" placeholder="请输入短剧名称" clearable />
        </el-form-item>
        <el-form-item label="状态" prop="updateType">
          <el-select v-model="query.updateType" filterable clearable placeholder="请选择状态">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="频道" prop="categoryId">
          <el-cascader v-model="selectType" :options="cooperations" filterable clearable :change-on-select="true"
            @change="handleCascaderChange" />
        </el-form-item>
        <el-form-item label="微信审核状态" prop="wechatPass">
          <el-select v-model="query.wechatPass" filterable clearable placeholder="请选择微信审核状态">
            <el-option v-for="item in wxstatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </template>
    </Search>
    <div class="table-default">
      <div class="set-warpper">
        <el-button type="primary" @click="mulSet" size="default" v-action="'video.video.mulSet'">批量提审</el-button>
      </div>
      <Operate :show="open" v-action="'video.video.add'" />
      <el-table :data="tableData" class="mt-3" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="id" label="剧号" />
        <el-table-column label="剧目名称" prop="name" min-width="150">
        </el-table-column>
        <el-table-column label="制作方名称" prop="name" min-width="150">
        </el-table-column>
        <el-table-column prop="note" label="剧目简介" min-width="250">
          <template #default="scope">
            <span class="note-content">
              {{ scope.row.note }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="category_str" label="编剧姓名" />
        <el-table-column prop="category_str" label="总集数" />
        <el-table-column label="剧目海报" show-overflow-tooltip>
          <template #default="scope">
            <div class="flex flex-col items-start justify-center wrapper">
              <el-popover placement="top" :width="200" trigger="click">
                <template #reference>
                  <el-image :src="scope.row.cover_image" class="cursor-pointer" style="width:48px;height:48px;"
                    fit="contain" :lazy="true"></el-image>
                </template>
                <el-image :src="scope.row.cover_image" style="width:100%;" fit="contain"></el-image>
              </el-popover>
              <el-button type="primary" link size="default" @click="dowload(scope.row)">下载</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="shelf_type_str" label="《广播电视节目制作许可证》" min-width="250">
          <template #default="scope">
            <div class="flex flex-col items-start justify-center wrapper">
              <el-popover placement="top" :width="200" trigger="hover">
                <template #reference>
                  <el-image :src="scope.row.cover_image" class="cursor-pointer" style="width:48px;height:48px;"
                    fit="contain" :lazy="true"></el-image>
                </template>
                <el-image :src="scope.row.cover_image" style="width:100%;" fit="contain"></el-image>
              </el-popover>
              <el-button type="primary" link size="default" @click="dowload(scope.row)">下载</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="shelf_type_str" label="授权材料" min-width="250">
          <template #default="scope">
            <div class="flex flex-col items-start justify-center wrapper">
              <el-popover placement="top" :width="200" trigger="click">
                <template #reference>
                  <el-image :src="scope.row.cover_image" class="cursor-pointer" style="width:48px;height:48px;"
                    fit="contain" :lazy="true"></el-image>
                </template>
                <el-image :src="scope.row.cover_image" style="width:100%;" fit="contain"></el-image>
              </el-popover>
              <el-button type="primary" link size="default" @click="dowload(scope.row)">下载</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openType('uploadVisible', scope.row)"
              v-action="'video.episode.add'">上传视频</el-button><br />
            <el-button @click="open(scope.row)" link type="primary" size="small"
              v-action="'video.video.update'">编辑</el-button><br />
            <el-button @click="openType('takeVisible', scope.row)" link type="primary" size="small"
              v-action="'video.video.setChargeConfig'">订阅设置</el-button><br />
            <el-button link type="primary" size="small" @click="openType('videoSyncVisible', scope.row)"
              v-action="'video.episode.downloadList'">同步视频</el-button>
            <br />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(search)" :primary="id" :eidapi="addApi" :addapi="addApi" :ismulSet="ismulSet" />
    </Dialog>
    <Dialog v-model="videoSyncVisible" width="80%" title="视频下载" destroy-on-close>
      <videoSync @close="closeType('videoSyncVisible')" :primary="depotsData"></videoSync>
    </Dialog>
    <Dialog v-model="takeVisible" width="50%" title="订阅设置" destroy-on-close>
      <subscribeSet @close="closeType('takeVisible')" :primary="takeData"></subscribeSet>
    </Dialog>
    <Dialog v-model="uploadVisible" width="50%" title="上传视频" destroy-on-close>
      <uploadVideo @close="closeType('uploadVisible')" :primary="uploadData"></uploadVideo>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { downloadImage } from '@/utils/index'
import { InfoFilled } from '@element-plus/icons-vue';
import { provide } from 'vue'
import Create from './form/create.vue';
import videoSync from './form/videoSync.vue';
import subscribeSet from './form/subscribeSet.vue';
import uploadVideo from './form/uploadVideo.vue';
import { useGetList } from '@/hook/curd/useGetList';
import { useDestroy } from '@/hook/curd/useDestroy';
import { useOpen } from '@/hook/curd/useOpen';
import { shortcuts } from '@/utils/shortcuts';
import moment from 'moment';
import { videoStockVideoUpdate, videoStockVideoAdd, videoStockVideoCategoryList } from '@/api/video/index'
import { useUserStore } from '@/stores/modules/user/index'
import Cache from '@/support/cache';
import { fa } from 'element-plus/es/locale';
const ismulSet = ref(false)
const api = 'videoStock/video/list';
const addApi = 'contentManage/book/edit_author';
const multipleSelection = ref([]);
const { data, query, search, reset, loading } = useGetList(api);
const { deleted } = useDestroy();
const uploadBooksVisible = ref(false)
const videoSyncVisible = ref(false)
const depotsData = ref({})
const uploadVisible = ref(false)
const uploadData = ref({})
const takeVisible = ref(false)
const takeData = ref({})
const current = ref({})
const selectType = ref([])
const statusOptions = ref([{ label: '连载中', value: '1' }, { label: '完结', value: '2' }]);
const wxstatusOptions = ref([{ label: '未通过', value: 0 }, { label: '已通过', value: 1 }]);
const cooperations = ref([]);
const rolesIdentify = ref([]);
const isShowCreatePromotion = computed(() => JSON.parse(Cache.get('nav_data'))?.advertiser?.miniProgramIds && JSON.parse(Cache.get('nav_data'))?.app)


const userStore = useUserStore()

const handleCascaderChange = (val: any) => {
  console.log(val, 'valval');
  if (val) {
    // 获取最后一级选项的值
    const lastOptionValue = val[val.length - 1];
    console.log('最后一级选项的值：', lastOptionValue, selectType.value);
    // 更新 selectedOptions 的值
    query.value.categoryId = lastOptionValue;
  } else {
    delete query.value.categoryId
  }
}

const resetQuery = () => {
  reset()
  selectType.value = []
}
const openType = (type: string, data: object) => {
  current.value = data;
  switch (type) {
    case 'videoSyncVisible':
      videoSyncVisible.value = true
      depotsData.value = data
      break;
    case 'takeVisible':
      takeVisible.value = true
      takeData.value = data
      break;
    case 'uploadVisible':
      uploadVisible.value = true
      uploadData.value = data
      break;
  }
}
provide('video', current)
const initType = () => {
  videoStockVideoCategoryList().then(res => {
    console.log(res);
    cooperations.value = res.data
  })
}
// 下载封面
const dowload = (e: object) => {
  downloadImage(e.cover_image, e.name)
}

const tableData = computed(() => data.value?.data);
const { open, close, title, visible, id } = useOpen();

const handleSelectionChange = (val: []) => {
  console.log(toRaw(val));
  multipleSelection.value = val;
};

const closeType = (type) => {
  console.log(type, 'typetype');
  switch (type) {
    case 'videoSyncVisible':
      videoSyncVisible.value = false
      break;
    case 'takeVisible':
      takeVisible.value = false
      break;
    case 'uploadVisible':
      uploadVisible.value = false
      break;
  }
  search()
}

const mulSet = () => {
  if (multipleSelection.value.length <= 0) {
    return ElMessage.warning({
      message: '至少选择一条数据',
      type: 'warning'
    });
  } else {
    ElMessageBox({
      title: '提示',
      message: h('p', null, [
        h('span', null, `确认批量设置`),
        h(
          'span',
          { style: 'color:red' },
          multipleSelection.value.map(el => el.name).join(',')
        ),
        h('span', null, `吗？`)
      ]),
      showCancelButton: true,
      confirmButtonText: '确定',
      type: 'warning',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          ismulSet.value = true
          let ids = multipleSelection.value.map(el => el.id);
          console.log(ids);
          open(ids);
        }
        done();
      }
    });
  }
};
onMounted(() => {
  rolesIdentify.value = userStore.getRoles?.map(el => el?.identify)
  console.log(rolesIdentify.value, 'rolesroles');
  if (userStore.getRoles?.some(el => (el?.identify == 'company'))) {
    query.value.operateUserId = JSON.parse(Cache.get('nav_data'))?.advertiser?.id;
  }
  initType()
  search();
});
</script>

<style scoped lang="scss">
.note-content {
  @include text-ellipsis(3);
}

.table-default {
  .set-warpper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .wrapper {
    margin: 8px;

    .label {
      margin-right: 6px;
    }

    .content {
      font-size: 15px;
    }
  }
}
</style>
