<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-container style="height: 100%;">
        <el-header style="height: max-content">
          <el-row :gutter="10" class="mb8" justify="space-between">
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
              <el-form-item label="" prop="searchKey">
                <el-input
                    v-model="queryParams.searchKey"
                    :placeholder="$t('course.placeholder')"
                    clearable
                    style="width: 240px"
                    @keyup.enter="btn_search"
                />
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" icon="Plus" :disabled="multiple" @click="handleBatchDisplay">批量显示</el-button>
              </el-form-item>
              <el-form-item label="">
                <el-button type="success" icon="Edit" :disabled="multiple" @click="handleBatchHide">批量隐藏</el-button>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" icon="Search" @click="btn_search">查询</el-button>
              </el-form-item>
            </el-form>
            <!-- 列表操作 -->
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="Plus"
                @click="btn_add()"
              >{{ $t('course.controlsAddName') }}</el-button>
            </el-col>
          </el-row>
        </el-header>
        <el-main id="max-height">
          <!-- 列表内容 -->
          <el-table
            v-loading="status.loading"
            :data="list"
            :max-height="windowSize.height - 70"
            :header-cell-style="{textAlign:'center'}"
            :cell-style="{textAlign:'center'}"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"
                             width="50"
                             align="center" />
            <el-table-column :label="$t('course.indexName')" type="index" width="80" />
            <el-table-column :label="$t('course.courseName')" prop="name" />
            <el-table-column :label="$t('course.entiretyName')" prop="entiretyName" />
            <el-table-column :label="$t('course.tableSortName')" prop="sort" />
            <el-table-column :label="$t('course.buildName')" prop="type" />
            <el-table-column :label="$t('course.caseName')" prop="caseName" />
            <el-table-column :label="$t('course.packName')" prop="canPack">
              <template #default="{ row }">
                <dict-tag
                  :options="constrain_status"
                  :value="row.canPack"
                ></dict-tag>
              </template>
            </el-table-column>
            <el-table-column :label="$t('course.visibleName')" prop="display" />
            <el-table-column :label="$t('course.tableControlsName')" class-name="small-padding fixed-width">
              <template #default="{ row }">
                <el-button
                  link
                  type="text"
                  @click="handleEdit(row)"
                >{{ $t('course.controlsEditName') }}</el-button>
                <el-button
                  link
                  type="text"
                  @click="handleDel(row)"
                >{{ $t('course.controlsDelName') }}</el-button>
                <el-button
                  link
                  type="text"
                  @click="handleDisplay(row)"
                  v-if="!row.visible"
                >{{ $t('course.controlsDisplayName') }}</el-button>
                <el-button
                  link
                  type="text"
                  @click="handleHide(row)"
                  v-if="row.visible"
                >{{ $t('course.controlsHideName') }}</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0"
                      :total="total"
                      v-model:page="queryParams.pageNum"
                      v-model:limit="queryParams.pageSize"
                      @pagination="getList" />

        </el-main>
      </el-container>
      <el-dialog :title="showForm.title" v-model="showForm.open" width="500px" append-to-body @close="closeDialog">
        <el-form ref="tableRefs" :model="showForm.form" :rules="rules">
          <el-form-item :label="$t('course.dialogName')" prop="name" label-width="80">
            <el-input v-model="showForm.form.name" placeholder="请输入课程名称" />
          </el-form-item>
          <el-form-item :label="$t('course.dialogEntirety')" prop="entiretyId" label-width="80">
            <el-select-v2
              v-model="showForm.form.entiretyId"
              :options="entiretyLists"
              :props="props"
              placeholder="请选择套件"
              style="width: 180px;"
            />
          </el-form-item>
          <el-form-item :label="$t('course.dialogCate')" prop="programType" label-width="80">
            <el-select v-model="showForm.form.programType" placeholder="请选择编程类别" clearable>
              <el-option
                  v-for="dict in program_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('course.dialogPack')" prop="canPack" label-width="80">
            <el-select
              v-model="showForm.form.canPack"
              placeholder="请选择是否打包"
              closeabled
              style="width: 180px;"
            >
              <el-option
                v-for="item in constrain_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('course.dialogTypes')" prop="type" label-width="80">
            <el-checkbox-group v-model="showForm.form.type">
              <div style="display: flex;align-items: center;">
                <el-checkbox label="2D" value="2D" />
                <el-checkbox label="3D" value="3D" />
              </div>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-if="determineStatus('2D')" :label="$t('course.dialogTwoD')" label-width="80">
            <template v-if="true">
              <imageUpload v-model="showForm.form.twoDimensionalOssId" :limit='10' :fileType='["png", "jpg", "jpeg", "ico"]'/>
              <fileUpload v-model="showForm.form.twoDimensionalUrl" :fileType='["ldr","png","jpg","jpeg","ico","json","pdf","mp4"]'/>
              <fileUpload v-model="showForm.form.twoDimensionalType" :fileType='["ldr","png","jpg","jpeg","ico","json","pdf","mp4"]'/>
            </template>
            <template v-else>
              <el-input v-model="showForm.form.twoDimensionalUrl" placeholder="请输入链接URL" />
            </template>
          </el-form-item>
          <el-form-item v-if="determineStatus('3D')" :label="$t('course.dialogThreeD')" label-width="80">
            <template v-if="true">
              <imageUpload v-model="showForm.form.threeDimensionalOssId" :limit='10' :fileType='["png", "jpg", "jpeg", "ico"]'/>
              <fileUpload v-model="showForm.form.threeDimensionalUrl" :fileType='["ldr"]'/><!--ldr.json-->
              <fileUpload v-model="showForm.form.threeDimensionalType" :fileType='["json"]'/>
            </template>
            <template v-else>
              <el-input v-model="showForm.form.threeDimensionalUrl" placeholder="请输入链接URL" />
            </template>
          </el-form-item>
          <el-form-item :label="$t('course.dialogCase')" prop="caseOssId" label-width="80">
            <fileUpload v-model="showForm.form.caseOssId" :limit="10" :fileType='["mp4", "avi", "mov", "flv","pdf"]'/>
          </el-form-item>
          <el-form-item :label="$t('course.dialogTeaching')" label-width="80">
            <fileUpload v-model="showForm.form.teachingOssId" :limit="10" :fileType='["pdf","mp4"]'/>
          </el-form-item>
          <el-form-item :label="$t('course.dialogPpt')" label-width="80">
            <fileUpload v-model="showForm.form.pptOssId" :limit="10" :fileType='["pdf","mp4"]'/>
          </el-form-item>
          <el-form-item :label="$t('course.dialogPhoto')" prop="ossId" label-width="80">
            <imageUpload v-model="showForm.form.ossId" :limit='1' :fileType='["png", "jpg", "jpeg", "ico"]'/>
          </el-form-item>
          <el-form-item :label="$t('course.tableSortName')" label-width="80">
            <el-input-number v-model="showForm.form.sort" controls-position="right" :min="0" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="info" @click="submitForm">{{ $t('course.dialogConfim') }}</el-button>
            <el-button type="info" @click="showForm.open = false">{{ $t('course.dialogExit') }}</el-button>
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>

</template>
<script setup name="ruleManager">
import { useTableHeight } from '@/hooks/useTableHeight'
// 导入api接口
import { getCourseList, addCourse, editCourse, delCourse, displayCourse, batchDisplayCourse, hideCourse, batchHideCourse } from '@/api/legao/course'
import { getEntiretyists } from '@/api/legao/kit'
import { reactive, toRefs } from 'vue';
const { windowSize } = useTableHeight('max-height')

// 导入字典
const { proxy } = getCurrentInstance();
const { program_type } = proxy.useDict("program_type");
const { dimensional_type, constrain_status} = proxy.useDict("dimensional_type", "constrain_status");

const props = {
  label: 'name',
  value: 'id',
}
const data = reactive({
  status: {
    loading: false,
    unselected: true,
    showForm: false,
    showCodePart: false
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  total: 0,
  list: [],
  entiretyLists: [],
  showForm: {
    title: '',
    open: false,
    form: {

    }
  },
  rules: {
    name: [{ required: true, message: "课程名称不能为空", trigger: "blur" }],
    buildingBlockId: [{ required: true, message: "系列不能为空", trigger: "blur" }],
    caseOssId: [{ required: true, message: "案例不能为空", trigger: "blur" }],
    ossId: [{ required: true, message: "课程图片不能为空", trigger: "blur" }]
  }
})
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const { status, queryParams, total, list, showForm, rules, entiretyLists } = toRefs(data)


//#region 初始化
btn_search()
//#endregion

function determineStatus(val) {
  // console.log((showForm.value?.form?.type || []).findIndex(i => i == val));

  const findIndex = (showForm.value?.form?.type || []).findIndex(i => i == val)
  console.log(findIndex);
  return findIndex > -1
}


// 获取列表数据
function getList () {
  status.loading = true

  getCourseList(queryParams.value)
    .then((res) => {
      list.value = res.rows
      total.value = res.total
    })
    .finally(() => {
      status.loading = false
    })
}

// 系列
function getBlockLists () {
  getEntiretyists().then((res) => {
    entiretyLists.value = res.data
  })
}

// 搜索
function btn_search () {
  queryParams.value.pageNum = 1
  getList()
}

// 单条编辑
function handleEdit (row) {
  getBlockLists()
  showForm.value.title = proxy.$t('advertisement.dialogTitleEdit')
  showForm.value = {
    ...showForm.value,
    open: true,
    form: {
      ...row,
      type: row.type.split('、'),
      canPack: row.canPack ? String(row.canPack) : '0'  // 将数字转换为字符串
    }
  }
  console.log('编辑表单数据：', showForm.value.form)  // 添加日志查看数据
}

function btn_add () {
  getBlockLists()
  showForm.value.title = proxy.$t('advertisement.dialogTitleAdd')
  showForm.value = {
    ...showForm.value,
    open: true,
    form: {
      canPack: '0' // 设置默认值
    }
  }
}

function handleDel(row) {
  proxy.$modal.confirm(`是否删除课程名称：${row.name}的数据`).then(() => {
    return delCourse(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess(res.msg);
  }).finally(() => {

  });
}

/** 选择条数  */
function handleSelectionChange (selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

function handleDisplay(row) {
  proxy.$modal.confirm(`确认显示该课程吗？`).then(() => {
    return displayCourse(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess(res.msg);
  }).finally(() => {

  });
}

function handleBatchDisplay(row) {
  const courseIds = row.id || ids.value;
  proxy.$modal.confirm(`确认显示这些课程吗？`).then(() => {
    return batchDisplayCourse(courseIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess(res.msg);
  }).finally(() => {

  });
}

function handleHide(row) {
  proxy.$modal.confirm(`确认隐藏该课程吗？隐藏后APP端将不可见。`).then(() => {
    return hideCourse(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess(res.msg);
  }).finally(() => {

  });
}

function handleBatchHide(row) {
  const courseIds = row.id || ids.value;
  proxy.$modal.confirm(`确认隐藏这些课程吗？隐藏后APP端将不可见。`).then(() => {
    return batchHideCourse(courseIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess(res.msg);
  }).finally(() => {

  });
}

function submitForm(type) {
  const data = {
    ...showForm.value.form,
    type: ''
  }
  if(showForm.value.form?.type===undefined || showForm.value.form?.type==''){
    proxy.$modal.alert('搭建类型不能为空');
  }
  else{
    data.type = showForm.value.form?.type.join('、')
    const fun = showForm.value.form?.id ? editCourse : addCourse
    fun(data).then(res => {
      // console.log(res);
      proxy.$modal.msgSuccess(res.msg);
      getList()
      showForm.value.open = false
    })
  }
}

function closeDialog() {
  showForm.value = {
    ...showForm.value,
    form: {}
  }
}
</script>