<script setup lang="ts">
import { ref, unref } from "vue";
import { ElForm } from "element-plus";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import searchConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import modalConfig from "./config/modal.config";
import { PageModal, usePageModal } from "/@/components/PageModalShell";
import { PageContent } from "/@/components/PageContent";
import { ComCard } from "/@/components/RemoteSelect";
import type { PageContentInstance } from "/@/components/PageContent";
import { projectFormConfig } from "./config/_details";
import { projectFormRules } from "./config/_rules";
import {
  BasicForm,
  transform,
  createDefaultData
} from "/@/components/BasicForm";
import { Video } from "/@/components/RemoteSelect";
const { formItems } = projectFormConfig;
const pageContentRef = ref<PageContentInstance | null>(null);
const formData = ref<Record<string, any>>(createDefaultData(formItems));
const basicFormRef = ref<InstanceType<typeof ElForm>>(null);
const pageName = "batchSetVideo";
const Video_id = ref("");
const {
  pageModalRef,
  handleUpdateData,
  handleCreateData,
  handlePreviewData,
  handleConfrim,
  defaultInfo
} = usePageModal({
  pageContentRef
});
const { handleResetClick, handleSearchClick } = usePageSearch();
function handleCreate() {
  basicFormRef.value.validate(isValid => {
    if (!isValid) return;
    const { video_ids } = formData.value;
    const params = unref(formData);
    let arr = [];
    video_ids.forEach(item => {
      arr.push(item.id);
    });
    params.video_ids = arr;
    handleConfrim("create", params);
  });
}
function videoChange(e) {
  if (e) {
    const { id, video_name } = e;
    console.log(e);
    console.log(formData);
    const index = formData.value.video_ids.findIndex(
      e => e.id + "" === id + ""
    );
    if (index == -1) {
      formData.value.video_ids.push({ id, video_name });
    }
  }
}
</script>

<template>
  <!-- <PageAuth :pageName="pageName"> -->
  <PageSearch
    :form-config="searchConfig"
    @search-btn-click="handleSearchClick"
    @reset-btn-click="handleResetClick"
  />
  <PageContent
    ref="pageContentRef"
    :content-config="contentConfig"
    @create-btn-click="handleCreateData"
  >
    <template #expand="{ video_name }">
      <div style="padding: 5px 55px">
        <el-tag
          v-for="(tag, index) in video_name"
          disable-transitions
          :key="tag + index"
          size="mini"
        >
          {{ tag }}
        </el-tag>
      </div>
    </template>
  </PageContent>
  <PageModal
    ref="pageModalRef"
    :modal-config="modalConfig"
    :default-info="defaultInfo"
    @confirm-btn-click="handleConfrim"
  >
    <BasicForm
      ref="basicFormRef"
      v-bind="projectFormConfig"
      :form-data="formData"
      :rules="projectFormRules"
      :disabled="false"
      label-width="120px"
    >
      <template #group_id>
        <ComCard v-model="formData.group_id" placeholder="公司卡类型" />
      </template>
      <template #video_ids>
        <div
          v-show="formData.video_ids && formData.video_ids.length > 0"
          style="width: 100%; padding: 0 0 15px 0"
        >
          <el-tag
            v-for="(tag, index) in formData.video_ids"
            :key="tag.id + index"
            class="mx-1"
            disable-transitions
            closable
            size="large"
            @close="formData.video_ids.splice(index, 1)"
          >
            {{ tag.video_name }}
          </el-tag>
        </div>
        <div style="width: 50%">
          <Video
            v-model="Video_id"
            placeholder="请选择直播视频"
            @change="videoChange"
          />
        </div>
      </template>
      <template #footer>
        <div class="w-full flex justify-end">
          <ElButton type="primary" @click="handleCreate">保存</ElButton>
        </div>
      </template>
    </BasicForm>
  </PageModal>
  <!-- </PageAuth> -->
</template>
