<template>
  <div style="background: #fff;height: calc(100vh - 225px);overflow-y: auto;margin: 10px 0;padding: 15px 0 0 0;">
    <div v-if="showType==0">
      <a-row>
        <a-col :span="24"><span class="title">课程作业次数设置</span><a-divider /></a-col>
        <a-col :span="24" style="text-align:center;">
          <div style="margin-top: 10%;">老师您好，</div>
          <div>请根据课程目标及课程教学大纲的要求，设置学生修完本课程需要完成的作业次数及每次作业在期末成绩中所占的比例。</div>
          <div style="margin-top: 30px;"><a @click="handleShowType(1)">设置作业次数</a></div>
          <div class="tishi">温馨提示：设置完成后，您也可以在课程教学过程中，随时根据实际情况进行调整。</div>
        </a-col>
      </a-row>
    </div>
    <div v-if="showType==1">
      <a-row>
        <a-col :span="24"><span class="title">课程作业次数设置</span><a-divider /></a-col>
        <a-col :span="24" style="margin-top:30px;padding: 0 0 0 30px;">
          <a-row>
            <a-col :span="18">
              <span>学生修完本课程需要完成的作业次数：</span><a-input-number style="width:30%" v-model:value="zycs" @change="handleZycs" :max="100" /><span>次</span>
            </a-col>
            <a-col :span="6" style="text-align:right;padding: 5px 0 0 0 ;">
              <a style="margin-right:30px;" @click="handleAddZycs">新增作业</a>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="24" style="margin-top:10px;">
          <a-table :columns="columns" :data-source="tableData" :pagination="false">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'score'">
                <span>
                  <a-input-number v-model:value="record.score" :max="100"/>
                </span>
              </template>
              <template v-else-if="column.key === 'action'">
                <span>
                  <a @click="handleDelZycs(record.sort)">删除</a>
                </span>
              </template>
            </template>
          </a-table>
        </a-col>
        <a-col :span="24" style="margin-top:30px;font-size:18px;">
          <div style="text-align:center;">
            <a @click="handleBatchAdd">保存</a>
            <a-divider type="vertical" />
            <a @click="reload">返回</a>
          </div>
        </a-col>
      </a-row>
    </div>
    <div v-if="showType==2">
      <a-spin :spinning="confirmLoading">
        <a-row>
          <a-col :span="24"><span class="title">布置作业：设置第{{zyInfo.sort}}次作业内容及要求</span><a-divider /></a-col>
          <a-col :span="24">
            <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-row>
                <a-col :span="24">
                  <a-form-item label="作业题目" v-bind="validateInfos.title" >
                    <a-input v-model:value="zyInfo.title" placeholder="请输入作业题目" :disabled="disabled"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="考察内容" v-bind="validateInfos.kcnr" >
                    <a-textarea v-model:value="zyInfo.kcnr" placeholder="请输入描述" :disabled="disabled"></a-textarea>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="作业截止时间" v-bind="validateInfos.endTime">
                    <a-date-picker placeholder="请选择作业截止时间" v-model:value="zyInfo.endTime" :disabled-date="disabledDate" :show-time="{ format: 'YYYY-MM-DD HH:mm' }" valueFormat="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"  style="width: 100%" :disabled="disabled"/>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="作业发布时间" v-bind="validateInfos.startTime">
                    <a-date-picker placeholder="请选择作业发布时间" v-model:value="zyInfo.startTime" :disabled-date="disabledDate" :show-time="{ format: 'YYYY-MM-DD HH:mm' }" valueFormat="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"  style="width: 100%" :disabled="disabled"/>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="作业要求" v-bind="validateInfos.content" >
                    <a-textarea v-model:value="zyInfo.content" placeholder="请输入作业要求" :disabled="disabled"></a-textarea>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="参考资料" v-bind="validateInfos.filePath" >
                    <j-upload v-model:value="zyInfo.filePath"  :disabled="disabled" ></j-upload>
                  </a-form-item>
                </a-col>
                
                <a-col :span="24">
                  <a-form-item label="评分标准" v-bind="validateInfos.sturead" >
                    评分标准是否允许学生查看
                    <j-dict-select-tag type='radio' v-model:value="zyInfo.sturead" dictCode="yn" placeholder="请选择评分标准是否允许学生查看" :disabled="disabled"/>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="评分标准2" v-bind="validateInfos.pfbz" >
                    <a-textarea v-model:value="zyInfo.pfbz" placeholder="请输入评分标准" :disabled="disabled"></a-textarea>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="学生互评" v-bind="validateInfos.sturead" >
                    <j-dict-select-tag type='radio' v-model:value="zyInfo.sturead" dictCode="yn" placeholder="请选择是否允许学生查看" :disabled="disabled"/>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="查重设置">
                    <a-row>
                      <a-col :span="24">
                        <a-form-item label="检测通过率" v-bind="validateInfos.wwtgl">
                          <a-input-number v-model:value="zyInfo.wwtgl" placeholder="请输入检测通过率" style="width: 60%" :max="100" :disabled="disabled">
                            <template #addonAfter>
                              %
                            </template>
                          </a-input-number>
                        </a-form-item>
                      </a-col>
                    </a-row>
                    
                  </a-form-item>
                    <!-- <a-input-number v-model:value="zyInfo.wwtgl" placeholder="请输入检测通过率" style="width: 60%" :max="100" :disabled="disabled">
                      <template #addonAfter>
                        %
                      </template>
                    </a-input-number> -->
                  <!-- </a-form-item> -->
                </a-col>
                <a-col :span="24">
                  <a-form-item label="" v-bind="validateInfos.wwtgl">
                    比对库设置：
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="" v-bind="validateInfos.wwtgl">
                    维普
                  </a-form-item>
                </a-col>



                <!-- <a-col :span="12">
                  <a-form-item label="是否网络查重" v-bind="validateInfos.wwcc">
                    <j-dict-select-tag type='radio' v-model:value="zyInfo.wwcc" dictCode="yn" placeholder="请选择是否网络查重" :disabled="disabled"/>
                  </a-form-item>
                  <span class="spanSm">说明：是否在外部网络资源内进行查重</span>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="网络通过率" v-bind="validateInfos.wwtgl">
                    <a-input-number v-model:value="zyInfo.wwtgl" placeholder="请输入网络通过率" style="width: 100%" :max="100" :disabled="disabled">
                      <template #addonAfter>
                        %
                      </template>
                    </a-input-number>
                  </a-form-item>
                  
                </a-col>
                <a-col :span="12">
                  <a-form-item label="是否课程内查重" v-bind="validateInfos.nwcc">
                    <j-dict-select-tag type='radio' v-model:value="zyInfo.nwcc" dictCode="yn" placeholder="请选择是否课程内查重" :disabled="disabled"/>
                  </a-form-item>
                  <span class="spanSm">说明：是否在本课程所有提交的作业资源内进行查重</span>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="课程内通过率" v-bind="validateInfos.nwtgl">
                    <a-input-number v-model:value="zyInfo.nwtgl" placeholder="请输入课程内通过率" style="width: 100%" :max="100" :disabled="disabled">
                      <template #addonAfter>
                        %
                      </template>
                    </a-input-number>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="Aigc是否查重" v-bind="validateInfos.aigccc">
                    <j-dict-select-tag type='radio' v-model:value="zyInfo.aigccc" dictCode="yn" placeholder="请选择Aigc查重" :disabled="disabled"/>
                  </a-form-item>
                  <span class="spanSm">说明：是否对AI撰写相似度进行查重</span>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="Aigc通过率" v-bind="validateInfos.aigctgl">
                    <a-input-number v-model:value="zyInfo.aigctgl" placeholder="请输入Aigc通过率" style="width: 100%" :max="100" :disabled="disabled">
                      <template #addonAfter>
                        %
                      </template>
                    </a-input-number>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="是否校内查重" v-bind="validateInfos.xncc">
                    <j-dict-select-tag type='radio' v-model:value="zyInfo.xncc" dictCode="yn" placeholder="请选择是否校内查重" :disabled="disabled"/>
                  </a-form-item>
                  <span class="spanSm">说明：是否在全校范围内提交的作业资源内进行查重</span>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="校内通过率" v-bind="validateInfos.xntgl">
                    <a-input-number v-model:value="zyInfo.xntgl" placeholder="请输入校内通过率" style="width: 100%" :max="100" :disabled="disabled">
                      <template #addonAfter>
                        %
                      </template>
                    </a-input-number>
                  </a-form-item>
                </a-col> -->
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-spin>
    </div>


    <div v-if="showType==999">
      <a-row>
        <a-col :span="24"><span class="title">布置作业</span><a-divider /></a-col>
        <a-col :span="24" style="text-align:right;padding:0 20px 0 0;"><a @click="handleShowType(1)">修改课程作业次数</a><a-divider type="vertical" /><a>新增作业</a></a-col>
        <a-col :span="24">
          <a-row>
            <a-col :lg="12" v-for="(item,index) in tableData" style="padding: 10px;">
              <a-card :title="item.title+'(占比'+item.score+'%)'"  v-if="!item.endTime" class="cardClass">
                <template #extra>
                  待设置
                </template>
                <p class="sznrClass">尚未布置作业题目及具体要求</p>
                <div style="text-align:center;">
                  <a @click="handleSzzynr(item)">设置作业内容及要求</a>
                  <a-divider type="vertical" />
                  <a @click="handleDelete(item)">删除</a>
                </div>
              </a-card>
              <a-card :title="item.title+'(占比'+item.score+'%)'"  v-if="item.endTime" class="cardClass">
                <template #extra>
                  待发布
                </template>
                <p style="text-align:center;">尚未布置作业题目及具体要求</p>
                <div style="text-align:center;">
                  <a>编辑作业</a>
                  <a-divider type="vertical" />
                  <a>发布作业</a>
                  <a-divider type="vertical" />
                  <a @click="handleDelete(item)">删除</a>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    


    <ZyInfoDetailModal ref="registerDetialModal" @success="handleSuccess"></ZyInfoDetailModal>
    <ZyInfoModal ref="registerModal" @success="handleSuccess"></ZyInfoModal>
    <ZyInfoEditModal ref="registerEditModal" @success="handleSuccess"></ZyInfoEditModal>
    <ZyInfoStudentListModal ref="ZyInfoStudentListModalPage" @success="handleSuccess"></ZyInfoStudentListModal>
    <ZyInfoStudentModal ref="ZyInfoStudentModalPage"></ZyInfoStudentModal>
    <XxhbbksListModal ref="XxhbbksListModalPage"></XxhbbksListModal>
  </div>
</template>

<script lang="ts" name="zyInfo-zyInfo" setup>
  import { ref, reactive, onMounted,unref } from 'vue';
  import { list, deleteOne } from './ZyInfo.api';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from "/@/hooks/web/useMessage";
  import { useRouter } from 'vue-router';
  import { JInput } from '/@/components/Form';
  import { Form } from 'ant-design-vue';
  import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import dayjs from 'dayjs';
  import ZyInfoDetailModal from './components/ZyInfoDetailModal.vue';
  import ZyInfoModal from './components/ZyInfoModal.vue';
  import ZyInfoStudentListModal from '/@/views/zy/zyInfoStudent/ZyInfoStudentListModal.vue';
  import ZyInfoStudentModal from '/@/views/zy/zyInfoStudent/components/ZyInfoStudentModal.vue';
  import XxhbbksListModal from '/@/views/kc/xxhbbks/XxhbbksListModal.vue';
  import ZyInfoEditModal from './components/ZyInfoEditModal.vue';

  

  //当前路由信息
  const { currentRoute } = useRouter();
  const { query } = unref(currentRoute);
  const { rwbh,xqxn,type,teano } = query;//获取传递参数
  const APagination = Pagination;
  const { createConfirm,createMessage } = useMessage();
  const queryParam = ref<any>({});
  const toggleSearchStatus = ref<boolean>(false);
  const registerModal = ref();
  const ZyInfoStudentListModalPage = ref();
  const ZyInfoStudentModalPage = ref();
  const XxhbbksListModalPage = ref();
  const registerEditModal  = ref();
  const registerDetialModal  = ref();
  const current = ref<number>(0);
  const total = ref<number>(0);
  const pageNo = ref<number>(0);
  const pageSize = ref<number>(100);
  const tableData = ref<any>([]);
  const showType = ref<number>(0);
  const zycs = ref<number>(0);
  const zyInfo = ref<any>({});
  const formRef = ref();
  const confirmLoading = ref<boolean>(false);


  const useForm = Form.useForm;
  
  //表单验证
  const validatorRules = {
    title: [{ required: true, message: '请输入作业名称!'},],
    endTime: [{ required: true, message: '请输入结束时间!'},],
  };
  const { resetFields, validate, validateInfos } = useForm(zyInfo, validatorRules, { immediate: false });
  const labelCol = reactive({
    xs: { span: 24 },
    sm: { span: 4 },
  });
  const wrapperCol = reactive({
    xs: { span: 24 },
    sm: { span: 16 },
  });
  //尚未布置作业题目及具体要求
  function handleSzzynr(record){
    console.log(`🚀 ~ handleSzzynr ~ record:`, record)
    zyInfo.value = record;
    console.log(`🚀 ~ handleSzzynr ~ zyInfo.value:`, zyInfo.value)
    handleShowType(2);
  }
//批量进行保存
  function handleBatchAdd(){
    var list = tableData.value;
    var sfjx = 0;//是否继续
    var cjbfb = 0;//成绩百分比
    if(list.length==0){
      createMessage.error('作业次数不能为空！');
      return;
    }
    for(var i=0;i<list.length;i++){
      var score = list[i].score;
      if(score==null || score==''){
        createMessage.error('第'+(i+1)+'次作业占期末总成绩的百分比不能为空！');
        sfjx = 1;
        break;
      }
      cjbfb = cjbfb+score;
      if(score<0 || score>100){
        createMessage.error('作业成绩百分比必须在0-100之间！');
        sfjx = 1;
        break;
      }
    }
    if(sfjx == 1){
      return;
    }

    createConfirm({
      iconType: 'warning',
      title: '确认保存',
      content: '设置完课程作业次数后，需要对每次作业的内容和要求进行设置，然后进行发布',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        defHttp.post({url:'/zyInfo/zyInfo/batchAdd',data:list}).then(res=>{
          reload();
        })
      }
    });

    
  }
  //显示第几个类型模块
  function handleShowType(val){
    showType.value = val;
  }
  //新增一次作业，再最后面添加
  function handleAddZycs(){
    var changeZycs = zycs.value;
    zycs.value = changeZycs+1;
    handleZycs()
  }
  //删除指定第几次作业
  function handleDelZycs(index){
    var dataList = tableData.value;
    dataList.splice(index-1,1);
    tableData.value = dataList;
    zycs.value = dataList.length;
    handleZycs()
  }
  //动态添加作业次数
  function handleZycs(){
    var dataList = tableData.value;
    var changeZycs = zycs.value;
    if(changeZycs > dataList.length){
      for(var i=dataList.length;i<changeZycs;i++){
        dataList.push({
          sort:i+1,
          title:'第'+(i+1)+'次作业',
          score:'',
          rwbh:rwbh,
          xqxn:xqxn,
          createBy:teano
        });
      }
    }else if(changeZycs < dataList.length){
      for(var i=dataList.length;i>changeZycs;i--){
        dataList.pop();
      }
    }else{
      var lsdataList = []
      for(var i=0;i<dataList.length;i++){
        lsdataList.push({
          sort:i+1,
          title:'第'+(i+1)+'次作业',
          score:dataList[i].score,
          rwbh:rwbh,
          xqxn:xqxn,
          createBy:teano
        });
      }
      dataList = lsdataList
    }
    tableData.value = dataList
  }



  const columns = [
    {
      title: '序号',
      dataIndex: 'sort',
      key: 'sort',
    },
    {
      title: '作业次数',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '本次作业占期末总成绩的百分比',
      dataIndex: 'score',
      key: 'score',
    },
    {
      title: '操作',
      key: 'action',
    },
  ];



  function classFun(type){
    if(type == '0'){
      return "background: #fe1a1a";
    }else if(type == '1'){
      return "background: #c6c209";
    }else if(type == '2'){
      return "background: #18a689";
    }
  }
  /**
   * 新增事件
   */
  function handleAdd() {
    registerModal.value.disableSubmit = false;
    registerModal.value.add();
  }

  /**
   * 编辑事件
   */
  function handleEdit(record: Recordable) {
    registerModal.value.disableSubmit = false;
    registerModal.value.edit(record);
  }

  function handleBjzy(record){
    registerEditModal.value.disableSubmit = false;
    registerEditModal.value.edit(record);
  }


  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    registerDetialModal.value.disableSubmit = true;
    registerDetialModal.value.edit(record);
  }

  //查看作业信息
  function handleZyxx(record,type){
    record.queryType = type;
    ZyInfoStudentListModalPage.value.disableSubmit = true;
    ZyInfoStudentListModalPage.value.init(record);
  }

  //上传作业附件
  function handleShangchuan(record){
    ZyInfoStudentModalPage.value.disableSubmit = false;
    var param = {mainId:record.id,zyfj:record.filePath}
    ZyInfoStudentModalPage.value.edit(param);
  }

  //获取选课人数
  function openXkrs(record){
    console.log(`🚀 ~ openXkrs ~ record:`, record)
    XxhbbksListModalPage.value.disableSubmit = true;
    XxhbbksListModalPage.value.init(record);
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    createConfirm({
      iconType: 'warning',
      title: '删除',
      content: '是否删除此作业？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        deleteOne({ id: record.id }, handleSuccess2);
      }
    });
  }

  //发布作业
  async function handleFabu(record){
    createConfirm({
    iconType: 'warning',
    title: '确认发布',
    content: '是否发布作业数据',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      var url = "/zyInfo/zyInfo/release";
      var params = {id:record.id,zyStatus:'1'};
      defHttp.post({ url: url, params }).then((res) => {
        handleZySuccess(record.id);
      });
    }
  });
  }


  /**
   * 成功回调,用于删除
   */
  function handleSuccess2() {
    total.value = 1;
    handlePageChange(1);
  }

  /**
   * 成功回调，用于增加、修改、发布和撤回
   */
  function handleSuccess() {
    reload();
  }

  function handleZySuccess(zyid){
    setTimeout(()=>{handleSuccess()}, 1500);
    var url = "/zyInfo/zyInfo/editStudent";
    defHttp.get({ url: url, params:{id:zyid} }).then((res) => {
    });

  }


  /**
   * 查询
   */
  function searchQuery() {
    total.value = 1;
    handlePageChange(1);
  }

  /**
   * 重置
   */
  function searchReset() {
    queryParam.value = {};
    total.value = 1;
    handlePageChange(1);
  }

  //查询列表数据
  function reload(){
    queryParam.value.pageNo = current.value;
    queryParam.value.pageSize = pageSize.value;
    queryParam.value.rwbh = rwbh;
    queryParam.value.xqxn = xqxn;
    queryParam.value.teano = teano;
    // queryParam.value.sflssj = '0';
    queryParam.value.column="endTime";
    queryParam.value.order="desc";
    defHttp.get({ url: '/zyInfo/zyInfo/list', params: queryParam.value }).then(res => {
      console.log(`🚀 ~ defHttp.get ~ res:`, res)

      total.value = res.total;
      pageNo.value = res.pages;
      current.value = res.current;
      tableData.value = res.records;
      zycs.value = tableData.value.length;
      if(tableData.value.length > 0){
        showType.value=999
      }else{
        showType.value=0
      }
    });
  }


  function handlePageChange(record){
    current.value = record;
    reload();
  }

  onMounted(() => {
    searchQuery();
  });

</script>

<style lang="less" scoped>
.title{
  padding: 20px;
    font-size: 18px;
}
.ant-divider-horizontal {
    display: flex;
    clear: both;
    width: 100%;
    min-width: 100%;
    margin: 3px 0 5px;
}
.tishi{
    font-size: 12px;
    color: #adabab;
    margin-top: 50px;
}
.cardClass{
  min-height: 200px;
}
.sznrClass{
  line-height: 150px;
  text-align:center;
}
.ant-card {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgb(0 0 0);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: tnum;
    position: relative;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #dadada;
}
.ant-card-head {
    min-height: 48px;
    margin-bottom: -1px;
    padding: 0 24px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    background: transparent;
    border-bottom: 1px solid #dadada;
    border-radius: 2px 2px 0 0;
}
.ellipsis {
  overflow: hidden; /* 确保超出容器的内容被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.zuanqu:hover{
  cursor: pointer;
  color:#18a689;
}
</style>
