<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>简介</span>
      </div>
    </template>
    <div class="flex">
      <div>
        <el-image class="mr-2 rounded-sm" :src="props.primary.cover_image" style="width:128px;height:160px;" fit="cover"
          :lazy="true"></el-image>
      </div>
      <div>
        <div class="flex items-center">
          <span class="text-lg font-bold text-blue-400">
            {{ props.primary.name }}
          </span>
          <div class="ml-3">
            剧号：
            <span class="font-bold">{{ props.primary.id }}</span>
          </div>
        </div>
        <div class="flex items-center mt-2">
          <span>
            集数：
          </span>
          <div class="flex items-center font-bold">
            <div v-if="props.primary.update_type == 1">
              <span class="">
                {{ props.primary.updated_episode_num }}
              </span>
              <span>/</span>
            </div>
            <div>
              <span class="">
                {{ props.primary.total_episode_num }}
              </span>
            </div>
            <span>
              【 {{ props.primary.update_type_str }} 】
            </span>
          </div>
        </div>
        <div class="mt-2">
          简介：
          <span class="font-bold note">{{ props.primary.note }}</span>
        </div>
      </div>
    </div>
  </el-card>

  <div class="flex flex-col justify-between w-full sm:flex-row" style="width:100%;">
    <div class="table-default" style="width:100%;">
      <el-table :data="tableData" class="w-full mt-3" style="width:100%;">
        <el-table-column prop="series_name" label="章节名称" />
        <el-table-column prop="is_charge" label="是否付费">
          <template #default="scope">
            <span :class="scope.row.is_charge ? 'text-red-600' : 'text-green-300'">
              {{ scope.row.is_charge ? '【付费】' : '【免费】' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="duration_str" label="章节时长" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="play(scope.row)">播放</el-button>
            <el-button link type="primary" size="small" @click="createLink(scope.row)" v-if="isShowCreatePromotion"
              v-action="'tuiguang.Promotion.add'">创建推广链接</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
  </div>
  <Dialog v-model="playVisible" title="视频" destroy-on-close height="100%">
    <video id="my-player" class="video-js" controls autoplay preload="auto" ref="myVideo">
      <source :src="current.public_video_url" type="video/mp4">
    </video>
  </Dialog>

  <Dialog v-model="linkVisible" title="创建推广链接" destroy-on-close>
    <el-form :model="formDataForm" label-width="120px" ref="form" v-loading="loading" class="pr-4">
      <el-form-item label="推广名称" prop="name" :rules="[{ required: true, message: '推广名称必须填写' }]">
        <el-input v-model="formDataForm.name" name="name" clearable />
      </el-form-item>
      <el-form-item label="入口章节" prop="series_sequence" :rules="[{ required: false, message: '入口章节必须填写' }]">
        <el-input disabled v-model="current.series_name" name="author" clearable />
      </el-form-item>
      <div class="flex justify-end">
        <el-button type="primary" @click="submitForm(form)">{{
          $t('system.confirm')
        }}</el-button>
      </div>
    </el-form>
  </Dialog>
</template>

<script lang="ts" setup>
// import router from '@/router'
import Cache from '@/support/cache';
import { computed, onMounted, ref } from 'vue';
import { useGetList } from '@/hook/curd/useGetList';
import { useOpen } from '@/hook/curd/useOpen';
import { FormInstance } from 'element-plus';
import { tuiguangPromotionAdd } from '@/api/promotion/index'
const api = 'videoStock/episode/list';
const props = defineProps({
  primary: String | Number,
});
const isShowCreatePromotion = computed(
  () => JSON.parse(Cache.get('nav_data'))?.advertiser?.miniProgramIds
    && JSON.parse(Cache.get('nav_data'))?.app
)
const router = useRouter()
const form = ref()
const formDataForm = ref({})
const current = ref({})
const playVisible = ref(false)
const linkVisible = ref(false)
const { data, query, search, reset, loading } = useGetList(api);
const { open, close, title, visible, id } = useOpen();
if (props.primary) {
  query.value.video_id = props.primary.id
  formDataForm.value.video_id = props.primary.id
  formDataForm.value.miniprogram_id = JSON.parse(Cache.get('nav_data'))?.app?.id
}
const tableData = computed(() => data.value?.data);
const play = (e: object) => {
  current.value = e;
  playVisible.value = true;
}
const createLink = (e: object) => {
  current.value = e;
  formDataForm.value.series_sequence = e.series_sequence
  linkVisible.value = true;
}

const submitForm = (formEl: FormInstance | undefined) => {
  loading.value = true;
  if (!formEl) return;
  formEl
    .validate(valid => {
      if (valid) {
        tuiguangPromotionAdd(formDataForm.value).then(res => {
          console.log(res, 'tuiguangPromotionAddtuiguangPromotionAdd');
          ElMessage.success(res.message)
          loading.value = false;
          linkVisible.value = false;
          router.push({ path: '/promotion/promotionList', query: { tab: 0 } })
        })
      } else {
        loading.value = false;
      }
    })
    .then(() => { });
}

onMounted(() => {
  search();
});
</script>

<style lang="scss" scoped>
//播放器样式
video#my-player.video-js {
  width: 80%;
  height: 500px;
  background-color: #000;
}

.note {
  font-size: 16px;
  width: fit-content;
  word-wrap: break-word;
  word-break: break-all;
}
</style>
