<template>
  <div class="mszyContent">
    <div class="production bg-white p-4 rounded-6px">
      <div class="pro-title">概览</div>
      <div class="productionContent grid grid-cols-4">
        <div v-if="isMszy">
          <div class="font14">名师资源总数</div>
          <div class="font24">{{ production.mszyzs || "_" }}</div>
        </div>
        <div>
          <div class="font14">{{ isMszy ? "设为" : "" }}名师在线数</div>
          <div class="font24">{{ production.swmszxs || "_" }}</div>
        </div>
        <div>
          <div class="font14">总浏览数</div>
          <div class="font24">{{ production.zlls || "_" }}</div>
        </div>
        <div>
          <div class="font14">总点赞数</div>
          <div class="font24">{{ production.zdzs || "_" }}</div>
        </div>
      </div>
    </div>
    <div class="searchContent bg-white p-4 pb-0 my-4 rounded-6px flex justify-between">
      <el-form ref="ruleFormRef" :inline="true" :model="searchForm" size="small">
        <el-form-item>
          <remote-user-select placeholder="全部责任教师" v-model="searchForm.tmk_zrjs_user_id" v-model:model-name="searchForm.tmk_zrjs_user_name" v-model:model-real-name="searchForm.tmk_zrjs_xm" :d="{user_role_id:'75'}"></remote-user-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="全部周期" v-model="searchForm.tmk_zq" @change="initData" 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-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>
      <el-button type="primary" @click="initData">查询</el-button>
    </div>
    <div class="resultDiv bg-white p-4 rounded-6px">
      <div class="operateDiv flex justify-between">
        <div>
          <el-button v-if="isMszy" type="primary" @click="linkTo('mszygl_mszy_course_add')">新增课程</el-button>
          <el-button type="primary" @click="handleExport">导出</el-button>
          <import-button v-if="isMszy" url="/txwx/mszy_kc" :d="{tmk_sftjmszx: isMszy ? '1' : '2'}" @success="initData">
            <template #text>批量导入</template>
          </import-button>
          <el-button type="danger" @click="handleDelete()">删除</el-button>
        </div>
        <div class="flex items-center space-x-4">
          <div class="cursor-pointer underline defaultColor whitespace-nowrap font14" @click="mutiSetDate">批量设置开放时间</div>
          <el-input v-model="searchForm.keyword" placeholder="请输入搜索的关键词" size="small" :suffix-icon="Search" />
          <el-button type="primary" @click="initData">搜索</el-button>
        </div>
      </div>
      <div class="tableList">
        <div class="tableDiv my-20px">
          <el-table :data="tableData" size="large" height="100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column v-for="(item, index) in columnData" :key="index" :prop="item.key" :label="item.name" :width="item.width" :min-width="item.minWidth" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" :width="isMszy ? 250 : 120">
              <template #default="{ row }">
                <el-button type="primary" text @click="linkTo(isMszy ? 'mszygl_mszy_team' : 'mszygl_mszx_team', row.tmk_id, row.title+'团队')">团队</el-button>
                <el-divider direction="vertical" />
                <template v-if="isMszy">
                  <el-button type="primary" text @click="linkTo('mszygl_mszy_course_edit', row.tmk_id)">编辑</el-button>
                  <el-divider direction="vertical" />
                  <el-button type="primary" text @click="linkTo('mszygl_mszy_chapter', row.tmk_id, row.title+'编辑章节')">编辑章节</el-button>
                  <el-divider direction="vertical" />
                </template>
                <el-button type="primary" text @click="linkTo(isMszy ? 'mszygl_mszy_detail' : 'mszygl_mszx_detail', row.tmk_id, row.title+'详情')">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="limit" :page-sizes="[10, 20, 50, 100]" :pager-count="5" :small="true" layout="total,sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>

    <el-dialog v-model="visible" title="批量设置开放时间" width="400px" destroy-on-close :close-on-click-modal="false" @close="handleDateClose">
      <div class="m-auto w-250px">
        <div class="flex items-center">
          <div class="label">开始时间：</div>
          <date-time-picker class="flex-1" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" v-model="tmk_kckqsj" :end="tmk_kcjssj"></date-time-picker>
        </div>
        <div class="flex items-center my-10px">
          <div class="label">结束时间：</div>
          <date-time-picker class="flex-1" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" v-model="tmk_kcjssj" :start="tmk_kckqsj"></date-time-picker>
        </div>
      </div>
      <div class="mt-5 text-center">
        <el-button @click="handleDateClose">取消</el-button>
        <el-button type="primary" @click="handleSubmitDate">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { userBreadStore } from '@/store/bread';
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const breadStore = userBreadStore();

const props = defineProps({
  isMszy: {
    type: Boolean,
    default: true,
  }
})

const production = ref({});

const searchForm = ref({});

watch(() => searchForm.value, () => {
  initData();
}, { deep: true })

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

const total = ref(0)
const limit = ref(10)
const currentPage = ref(1);
const columnData = ref([
  {
    name: "课程ID",
    key: "tmk_id",
  },
  {
    name: "课程名",
    key: "tmk_kcm",
    // minWidth: 180
  },
  {
    name: "责任教师",
    key: "tmk_zrjs_xm",
  },
  {
    name: "所属机构",
    key: "tmk_ssjg_name",
  },
  {
    name: "年级",
    key: "tjzn_name",
  },
  {
    name: "学科",
    key: "tjzx_name",
  },
  {
    name: "周期",
    key: "tmk_zq",
  },
  {
    name: "开放时间",
    key: "kckfsj",
    // minWidth: 340
  },
  {
    name: "课时数",
    key: "tmk_kss",
  },
  {
    name: "浏览量",
    key: "tmk_lll",
  },
  {
    name: "点赞量",
    key: "tmk_dzl",
  }
]);

const tableData = ref([]);
initData();
async function initData() {
  let data = {
    page: currentPage.value,
    limit: limit.value,
    tmk_sftjmszx: props.isMszy ? "1" : "2"
  };
  let res = await request({ url: "/txwx/mszy_kc/index", data: Object.assign(data, searchForm.value) });
  if (res.code == 1) {
    res.data.page_data.map(item => {
      if (new Date(item.tmk_kcjssj).getTime()) {
        item.kckfsj = item.tmk_kckqsj + "~" + item.tmk_kcjssj;
      } else {
        item.kckfsj = item.tmk_kckqsj + "永久开放";
      }
    })
    tableData.value = res.data.page_data;
    total.value = Number(res.data.total_rows);
    production.value = res.data.alyz;
  }
}

function handleSizeChange(val) {
  limit.value = val;
  currentPage.value = 1;
  initData();
}

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

const multiSelection = ref([]);
const handleSelectionChange = (val) => {
  multiSelection.value = val;
}


const handleDelete = (row) => {
  if (!row && multiSelection.value.length == 0) {
    ElMessage.error("请先选择数据！");
    return
  }
  ElMessageBox.confirm('确定要删除该数据吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
  })
    .then(async () => {
      let tmk_id;
      if (row) {
        tmk_id = row.tmk_id;
      } else {
        tmk_id = [];
        multiSelection.value.map(item => {
          tmk_id.push(item.tmk_id);
        })
      }
      let res = await request({ url: "/txwx/mszy_kc/delete", data: { tmk_id: tmk_id } });
      if (res.code == 1) {
        ElMessage.success("删除成功！");
        initData();
      }
    })
    .catch(() => { })
}


const handleExport = () => {
  let arr = [];
  multiSelection.value.map((item) => {
    arr.push(item.tmk_id);
  });
  let obj = {
    limit: "99999",
    tmk_sftjmszx: props.isMszy ? "1" : "2",
    tmk_id: arr.join(",")
  };
  download("/txwx/mszy_kc/index", obj);
}

const visible = ref(false);
const mutiSetDate = () => {
  if (multiSelection.value.length == 0) {
    ElMessage.error("请先选择数据！");
    return
  }
  visible.value = true;
}

const tmk_kckqsj = ref("");
const tmk_kcjssj = ref("");
const handleSubmitDate = async () => {
  let arr = [];
  multiSelection.value.map(item => {
    arr.push(item.tmk_id);
  })

  let data = {
    tmk_id: arr.join(","),
    tmk_kckqsj: tmk_kckqsj.value,
    tmk_kcjssj: tmk_kcjssj.value
  }

  let res = await request({ url: "/txwx/mszy_kc/kc_open", data });
  if (res.code == 1) {
    ElMessage.success("设置成功！");
    handleDateClose();
    initData();
  }
}

const handleDateClose = () => {
  visible.value = false;
  tmk_kckqsj.value = false;
  tmk_kcjssj.value = false;
}

const linkTo = (name, id, title) => {
  if (id == undefined) {
    router.push({ name });
  } else {
    router.push({ name, params: { id } });
  }

  if (title) {
    breadStore.setBread(title);
  }
};
</script>

<style lang="scss" scoped>
@use "~/styles/table.scss";
@use "~/styles/pagination.scss";
.font14 {
  font-size: 14px;
}
.font24 {
  font-size: 24px;
}
.defaultColor {
  color: var(--el-color-primary);
}
.production {
  line-height: 30px;
  .pro-title {
    color: #202020;
  }
}
:deep(.setDate) {
  position: absolute;
  z-index: -1;
}
.resultDiv {
  .tableList {
    height: calc(100% - 32px);
    .tableDiv {
      height: calc(100% - 32px - 50px);
    }
  }
}
</style>