<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }" v-if="multipleSelection.name">
      <template #header>
        <div class="text-base font-bold card-header">
          <span>所选短剧：</span>
        </div>
      </template>
      <div class="flex flex-wrap items-start ml-6 choose-wrapper">
        <el-form-item label="" class="font-bold">
          <el-input v-model="multipleSelection.name" :disabled="true" placeholder="短剧名称" style="width:300px;"
            class="input-with-select">
          </el-input>
          <el-icon class="ml-3 cursor-pointer" @click="chooseDel">
            <Delete />
          </el-icon>
        </el-form-item>
      </div>
    </el-card>
    <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">
      <el-table :data="tableData" ref="multipleTableRef" height="380px" class="mt-3" v-loading="loading" row-key="id"
        @current-change="handleCurrentChange">
        <el-table-column>
          <template #default="scope">
            <el-radio class="radio" v-model="selVal" :label="scope.row.id"><span></span></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="id" 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 label="短剧名称" show-overflow-tooltip min-width="250">
          <template #default="scope">
            <div class="wrapper">
              <span class="text-lg font-bold text-blue-400 cursor-pointer content">
                {{ scope.row.name }}
              </span>
              <span>
                【 {{ scope.row.update_type_str }} 】
              </span>
            </div>
            <div class="wrapper">
              <span class="label">上架时间:</span>
              <span class="content">{{ scope.row.shelf_at }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total_episode_num" label="集数">
          <template #default="scope">
            <div class="flex wrapper">
              <div v-if="scope.row.update_type == 1">
                <span class="content">
                  {{ scope.row.updated_episode_num }}
                </span>
                <span>/</span>
              </div>
              <div>
                <span class="content">
                  {{ scope.row.total_episode_num }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="category_str" label="频道" />
        <el-table-column prop="shelf_type_str" label="上架状态" />
        <el-table-column prop="charge_sequence" label="起始集" />
        <el-table-column prop="charge_coin" label="定价">
          <template #header>
            <div class="flex items-center">
              <span>定价</span>
              <el-tooltip placement="top">
                <template #content> 定价为所需看剧币<br />1元等于100币 </template>
                <el-icon>
                  <InfoFilled />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
          <template #default="scope">
            <span>{{ scope.row.charge_coin }}</span>
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
    <div class="flex justify-end">
      <el-button type="primary" @click="confirm">{{
        $t('system.confirm')
      }}</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { downloadImage } from '@/utils/index'
import { InfoFilled, Delete } from '@element-plus/icons-vue';
import { provide } from 'vue'
import { useGetList } from '@/hook/curd/useGetList';
import { useDestroy } from '@/hook/curd/useDestroy';
import { useOpen } from '@/hook/curd/useOpen';
import { videoStockVideoCategoryList, videoStockVideoList } from '@/api/video/index'
const api = 'videoStock/video/list';
const multipleTableRef = ref()
const multipleSelection = ref({});
const { data, query, search, reset, loading } = useGetList(api);
const selectType = ref([])
const statusOptions = ref([{ label: '连载中', value: '1' }, { label: '完结', value: '2' }]);
const cooperations = ref([]);
const emit = defineEmits(['confirm']);
const wxstatusOptions = ref([{ label: '未通过', value: 0 }, { label: '已通过', value: 1 }]);
const props = defineProps({
  primary: Object,
});
const selVal = ref("")
const rowSelectFlag = ref(false)// 禁止toggleRowSelection默认触发handleSelectionChange
const handleCascaderChange = (val: any) => {
  console.log(val, 'valval');
  if (val) {
    // 获取最后一级选项的值
    const lastOptionValue = val[val.length - 1];
    // 更新 selectedOptions 的值
    query.value.categoryId = lastOptionValue;
  } else {
    delete query.value.categoryId
  }
}

const resetQuery = () => {
  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, shelfType: 2 });
  search()
  selectType.value = []
}
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 chooseDel = () => {
  multipleSelection.value = ''
  selVal.value = ''
}
const handleCurrentChange = (val: any) => {
  if (rowSelectFlag.value) return
  multipleSelection.value = val;
  selVal.value = val.id
};
const confirm = () => {
  // 执行提交逻辑
  emit('confirm', multipleSelection.value)
}

if (props.primary) {
  // console.log(props.primary, 'props.primaryprops.primary');
  multipleSelection.value = JSON.parse(JSON.stringify(props.primary)) || {}
  selVal.value = props.primary.id
}

onMounted(() => {
  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, shelfType: 2, wechatPass: 1 });
  initType()
  search();
});
</script>

<style scoped lang="scss">
.choose-wrapper {
  height: fit-content;
  max-height: 150px;
  overflow: auto;
}

.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>
