<template>
  <div>
    <div class="searchDiv flex justify-between items-center mb-6">
      <el-form ref="ruleFormRef" :inline="true" :model="searchForm" size="small">
        <el-form-item>
          <remote-select placeholder="全部年级" v-model="searchForm.tjzn_id" to="jcxxgl_zyflgl_nj" :fields="['tjzn_id', 'tjzn_njmc']"></remote-select>
        </el-form-item>
        <el-form-item>
          <remote-select placeholder="全部学科" v-model="searchForm.tjzx_id" to="jcxxgl_zyflgl_xk" :fields="['tjzx_id', 'tjzx_xkmc']"></remote-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="全部周期" v-model="searchForm.tmk_zq" clearable>
            <el-option v-for="(item, index) in termData" :key="index" :label="item.n" :value="item.v" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <remote-select placeholder="全部机构" v-model="searchForm.tmk_ssjg_id" url="/school/main/index" :fields="['id', 'sm_name']"></remote-select>
        </el-form-item>
      </el-form>
      <div style="color: red;">已选{{ selectData.length }}个章节</div>
    </div>
    <div class="resultContent grid grid-cols-4 gap-6">
      <div class="res-item rounded-10px" v-for="(item, index) in chapterData" :key="index">
        <div class="relative">
          <img class="w-full h-140px" :src="getFullUrl(item.tmz_img_url)" alt="">
          <div class="absolute top-0px w-full h-27px flex justify-between items-center pl-8px">
            <el-checkbox v-model="item.checked" @change="handleChange(item)"></el-checkbox>
            <div class="authority">{{ item.kc_info.tmk_kcqxsz_name }}</div>
          </div>
        </div>
        <div class="title p-x-8px" :title="item.tmz_zjmc">{{ item.tmz_zjmc }}</div>
        <div class="production p-x-8px">
          {{ item.kc_info.tjzn_name }}
          <el-divider direction="vertical"></el-divider>
          {{ item.kc_info.tjzx_name }}
          <el-divider direction="vertical"></el-divider>
          {{ item.kc_info.tmk_zq_name }}
        </div>
        <div class="production2 p-x-8px flex">
          <div>责任教师：{{ item.tmz_zrjs_mc }}</div>
          <div class="flex-1 text-right ssjg" :title="item.kc_info.tmk_ssjg_name">{{ item.kc_info.tmk_ssjg_name }}</div>
        </div>
      </div>
    </div>
    <div class="flex justify-end my-10">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="limit" :pager-count="5" :small="true" layout="total,sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
    </div>

    <div class="mt-5 text-center">
      <el-button type="primary" plain @click="handleClose()">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { getFullUrl } from '~/utils/helper';
const props = defineProps({
  parentId: String,
})

const emits = defineEmits(["close"])

const total = ref(0)
const limit = ref(8)
const currentPage = ref(1);
const chapterData = ref([]);

const searchForm = ref({});
const termData = $ref([
  { v: "1", n: "春季" },
  { v: "2", n: "暑期" },
  { v: "3", n: "秋季" },
  { v: "4", n: "寒假" }
])

const qxData = $ref([
  { v: "1", n: "公开" },
  { v: "2", n: "私有" },
  { v: "3", n: "指定可见" }
])

const selectData = ref([]);

initChapterData();
async function initChapterData() {
  let obj = {
    page: currentPage.value,
    limit: limit.value,
  };
  let { code, data } = await request({ url: "/txwx/mszy_zj/index", data: Object.assign(obj, searchForm.value) });
  if (code == 1) {
    data.page_data.map(item => {
      if (selectData.value.indexOf(item.tmz_id) == -1) {
        item.checked = false;
      } else {
        item.checked = true;
      }
      termData.map(val => {
        if (val.v == item.kc_info.tmk_zq) {
          item.kc_info.tmk_zq_name = val.n;
        }
      })
      qxData.map(val => {
        if (val.v == item.kc_info.tmk_kcqxsz) {
          item.kc_info.tmk_kcqxsz_name = val.n;
        }
      })
    })
    chapterData.value = data.page_data;
    total.value = Number(data.total_rows);
  }
}

function handleCurrentChange(val) {
  currentPage.value = val;
  initChapterData();
}

const handleChange = (data) => {
  if (data.checked) {
    selectData.value.push(data.tmz_id);
  } else {
    selectData.value = selectData.value.filter(item => item != data.tmz_id);
  }
}

const handleClose = (type) => {
  emits("close", type)
}

const submit = async () => {
  let obj = {
    tmk_id: props.parentId,
    tmz_id: selectData.value.join()
  }
  let { code } = await request({ url: "/txwx/mszy_kc/copy", data: obj });
  if (code == 1) {
    ElMessage.success("保存成功！");
    handleClose(1);
  }
}

watch(
  () => searchForm.value,
  (val) => {
    initChapterData();
  },
  { deep: true },
)
</script>

<style lang="scss" scoped>
.searchDiv {
  :deep() {
    .el-form-item {
      margin-bottom: 0;
    }
    .el-select .el-input {
      height: 44px;
      border-radius: 10px;
      box-shadow: 0px 2px 10px 0px rgba(143, 149, 178, 0.15);
      .el-input__wrapper {
        border-radius: 10px;
      }
    }
  }
}
.resultContent {
  .res-item {
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
  }
  img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .authority {
    background: rgba(0, 0, 0, 0.7);
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #fff;
    text-align: center;
    width: 49px;
    line-height: 27px;
  }
  .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .production {
    text-align: right;
    color: #999;
    font-size: 12px;
  }
  .production2 {
    border-top: 1px solid #eee;
    line-height: 32px;
  }
  .ssjg {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #999;
  }
}
</style>