<!-- 面授列表 -->
<template>
    <div class="main_item">
      <div class="fi_input addfaceclass">
        <a-input
          v-model:value="params.offcourseNumber"
          style="width: 220px; height: 40px; border-radius: 8px;margin-right: 32px;"
          placeholder="请输入课程编号"
          maxlength="20"
        />
        <a-input
          v-model:value="params.courseName"
          style="width: 220px; height: 40px; border-radius: 8px;margin-right: 32px;"
          placeholder="请输入课程名称"
          maxlength="20"
        />
        <a-tree-select
            :getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
            v-model:value="valueproj" 
            show-search 
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :fieldNames="{
                children: 'children',
                label: 'name',
                value: 'code',
            }"
            placeholder="请选择内容分类" 
            allow-clear 
            tree-default-expand-all 
            :tree-data="sysTypeOptions">
        </a-tree-select>
      </div>
      <div class="btns" @click="search" style="margin-left: 16px;">
        <div class="search"></div>
        <div class="btnText">搜索</div>
      </div>
      <div class="btnsn" @click="reset">
        <div class="search"></div>
        <div class="btnText">重置</div>
      </div>
    </div>
  
    <div class="main_item">
      <button class="xkbtn" style="margin: 0" @click="goResearchmanage">
        新建课程
      </button>
    </div>
  
    <div class="main_notice" style="display: none">
      <div class="mntc_left">
        <div class="notice_icon"></div>
      </div>
    </div>
    <div class="main_table">
      <a-table
        :customRow="customRow"
        class="ant-table-striped"
        :row-class-name="(_, index) => (index % 2 === 1 ? 'table-striped' : null)"
        row-key="id"
        :columns="columns"
        :data-source="data"
        :loading="loading"
        :pagination="pagination"
        :row-selection="rowSelection"
      />
    </div>
    <!-- 新建面授课 -->
    <CourseModal
      ref="CourseModalRef"
      v-model:xzinputV1="xzinputV1"
      @visibleClose="visibleClose"
    />
  </template>
  <script setup>
  import { computed, defineEmits, defineProps, ref, watch } from "vue";
  import { list } from "@/api/indexCourse";
  import CourseModal from "../../views/courselibrary/courseModal.vue";
  import {useStore} from "vuex";

  const props = defineProps({
    id: String,
    name: String,
  });
  const emit = defineEmits([]);
  const store = useStore();
  const sysTypeOptions = computed(() => store.state.content_type);
  const valueproj = ref(null);
  const columns = ref([
    {
      title: "课程编号",
      dataIndex: "offcourseNumber",
      key: "offcourseNumber",
      width: "40%",
      ellipsis: true,
    },
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
      width: "40%",
      ellipsis: true,
    },
    {
      title: "内容分类",
      dataIndex: "sysTypeId",
      key: "sysTypeId",
      width: "20%",
      align: "center",
      ellipsis: true,
      customRender: (text) => (
        <div>
            {sHX(text.record.sysTypeId)}
        </div>
      ),
    },
    {
      title: "创建人",
      dataIndex: "createName",
      key: "createName",
      width: "20%",
      align: "center",
      ellipsis: true,
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      width: "20%",
      align: "center",
      ellipsis: true,
    },
  ]);
  const initParams = {
    courseName: "",
    offcourseNumber: "",
    pageNo: 1,
    pageSize: 10,
    releaseStatus: 2,
  };
  // const router = useRouter();
  const params = ref(initParams);
  
  const rowSelectKeys = ref([]);
  const selectsData = ref([]);
  const total = ref(0);
  const data = ref([]);
  const loading = ref(false);

  const sysTypeOption = computed(() => store.state.content_type);

  function findClassFullName(list,classify,name=''){
    return list && list.length && list.map(e=>{
    return  classify == e.code ? name?name+'-'+e.name:e.name : findClassFullName(e.children,classify,name?name+'-'+e.name:e.name)
    }).filter(name=>name).join('')
  }

  // 课程三级分类回显
  const sHX = (classify) => {
    return findClassFullName(sysTypeOption.value,classify) || '-'
  }

  const getList = () => {
    loading.value = true
    let objn = {
        auditStatus: 2,
        sysTypeId: valueproj.value,
        offcourseNumber: params.value.offcourseNumber,
        name: params.value.courseName,
        pageNo: params.value.pageNo,
        pageSize: 10,
    };
    console.log(objn);
    list(objn)
      .then((res) => {
          console.log("获取已审核课程成功", res.data.data);
          data.value = res.data.data.rows;
          total.value = Number(res.data.data.total);
          loading.value = false;
      })
      .catch((err) => {
          console.log("获取已审核课程失败", err);
          loading.value = false;
      });
  };

  getList()   

  // 新建面授课
  const CourseModalRef = ref(null);

  const visibleClose = () => {
    getList()
  };

  watch(
    () => props.id,
    () => {
      if (props.id) {
        console.log(props)
        rowSelectKeys.value = [props.id];
        selectsData.value = [{ id: props.id, name: props.name }];
      } else {
        rowSelectKeys.value = [];
        selectsData.value = [];
      }
    }
  );
  
  const customRow = (record) => ({
    onClick: () => {
      rowSelectKeys.value = [record.id];
      selectsData.value = [record];
      emit("update:id", selectsData.value[0].id);
      emit("update:name", selectsData.value[0].name);
    },
  });
  
  const pagination = computed(() => ({
    total: total.value,
    showSizeChanger: false,
    current: params.value.pageNo,
    pageSize: params.value.pageSize,
    onChange: changePagination,
  }));
  
  const changePagination = (e) => {
    params.value.pageNo = e;
    getList();
  };
  const rowSelection = computed(() => ({
    type: "radio",
    columnWidth: 20,
    selectedRowKeys: rowSelectKeys.value,
    onChange: onSelectChange,
    preserveSelectedRowKeys: true,
    getCheckboxProps: getCheckboxProps,
  }));
  const getCheckboxProps = () => ({
    // 某几项默认禁止选中(R: 当state等于1时)
    disabled: false,
  });
  
  function onSelectChange(e, l) {
    console.log(e,l)
    rowSelectKeys.value = e;
    selectsData.value = l;
    console.log('112233',selectsData.value)
    emit("update:id", selectsData.value[0].id);
    emit("update:name", selectsData.value[0].name);
  }
  
  function search() {
    params.value.pageIndex = 1;
    getList();
  }
  
  function reset() {
    rowSelectKeys.value = [];
    selectsData.value = [];
    params.value.pageIndex = 1;
    params.value.keyWord = "";
    params.value.courseName = "";
    params.value.offcourseNumber = "";
    valueproj.value = null;
    getList();
  }
  
  const goResearchmanage = () => {
    CourseModalRef.value.visibleOpen(null, "");
  };
  </script>
  <style lang="scss">
  .addfaceclass {
    .ant-select-selector {
      border-radius: 8px !important;
      align-items: center !important;
      width: 220px !important;
      height: 40px !important;
      padding-top: 5px;
      margin-right: 32px;
    }

    .ant-select-show-search {
      width: 220px !important;
    }
  }

  .xkbtn {
    cursor: pointer;
    width: 130px;
    height: 40px;
    margin-top: 32px;
    margin-bottom: 32px;
    background: #4ea6ff;
    border-radius: 8px;
    border: 0;
    margin-right: 8px;
    color: #fff;
  }
  
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa !important;
  }
  
  .addinvistDrawer {
    .drawerMain {
      .header {
        height: 73px;
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        justify-content: space-between;
        align-items: center;
  
        .headerTitle {
          font-size: 18px;
          font-weight: 600;
          color: #333333;
          line-height: 25px;
          margin-left: 24px;
        }
      }
  
      .contentMain {
        .main_left {
          padding-right: 30px;
          margin-top: 32px;
  
          .main_item {
            display: flex;
            align-items: center;
            margin-top: 20px;
            margin-bottom: 20px;
  
            .fi_input {
              margin-right: 20px;
            }
  
            .btns {
              margin-right: 20px;
              padding: 0px 26px 0px 26px;
              height: 38px;
              background: #4ea6ff;
              border-radius: 8px;
              //border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;
  
              .search {
                width: 15px;
                height: 17px;
                background-image: url("../../assets/images/courseManage/search0.png");
                background-size: 100% 100%;
              }
  
              .btnText {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 36px;
                margin-left: 5px;
              }
            }
  
            .btnsn {
              padding: 0px 26px 0px 26px;
              height: 38px;
              background: rgba(64, 158, 255, 1) !important;
              border-radius: 8px;
              border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;
  
              .search {
                width: 16px;
                height: 18px;
                background-image: url("../../assets/images/courseManage/reset0.png") !important;
                background-size: 100% 100%;
              }
  
              .btnText {
                font-size: 14px;
                font-weight: 400;
                color: #fff !important;
                line-height: 36px;
                margin-left: 5px;
              }
            }
          }
  
          .main_item2 {
            .pa {
              width: 100%;
              margin: 15px auto;
              display: flex;
              justify-content: center;
            }
          }
        }
      }
  
      .main_table {
        position: relative;
        padding-bottom: 80px;
  
        .ant-checkbox-wrapper {
          align-items: center;
          margin-top: -2px;
        }
  
        .ant-table-selection-column {
          padding: 0px !important;
          padding-left: 5px !important;
        }
  
        .ant-table-thead > tr > th {
          background-color: rgba(239, 244, 252, 1);
        }
  
        th.h {
          background-color: #eff4fc !important;
        }
  
        .ant-table-tbody
          > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
          > td {
          background: #f6f9fd;
        }
  
        .pa {
          left: 0;
          width: 100%;
          display: flex;
          justify-content: center;
          position: absolute;
          bottom: 20px;
        }
      }
  
      .main_btns {
        height: 72px;
        width: 100%;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
  
        .btn1 {
          width: 100px;
          height: 40px;
          border: 1px solid #4ea6ff;
          border-radius: 8px;
          color: #4ea6ff;
          background-color: #fff;
          cursor: pointer;
        }
  
        .btn2 {
          cursor: pointer;
          width: 100px;
          height: 40px;
          background: #4ea6ff;
          border-radius: 8px;
          border: 0;
          margin-left: 15px;
          color: #fff;
        }
      }
    }
  }
  </style>
  