<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2022-11-16 20:59:33
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2022-12-07 08:49:02
 * @FilePath: /fe-manage/src/views/examine/CourseReviewedN.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 待审核课程页面 coursereviewedn-->
<template>
  <div class="coursereviewedn">
    <div class="tmpl">
      <div class="tmpl_header">
        <div class="tmplh_inp">
          <div class="inpbox">
            <div class="inpbox1">
              <a-select
                v-model:value="valueproj"
                :options="[
                  { label: '请选择内容分类', value: '' },
                  ...calssifyList,
                ]"
              />
            </div>
            <div class="inpbox1">
              <a-input
                v-model:value="valuecreater"
                style="
                  width: 270px;
                  height: 40px;
                  border-radius: 8px;
                  margin-right: 14px;
                "
                placeholder="请输入创建人"
              />
            </div>
            <div class="inpbox1">
              <a-input
                v-model:value="valuename"
                style="
                  width: 270px;
                  height: 40px;
                  border-radius: 8px;
                  margin-right: 14px;
                "
                placeholder="请输入名称"
              />
            </div>
          </div>
        </div>
        <div class="tmplh_btn">
          <div class="btn btn1" @click="searchList">
            <div class="search"></div>
            <div class="btnText btnText1">搜索</div>
          </div>
          <div class="btn btn2" @click="reset">
            <div class="search"></div>
            <div class="btnText btnText2">重置</div>
          </div>
        </div>
      </div>
      <div class="tmpl_body">
        <div class="tmpl_tabbox">
          <a-table
            :columns="columns1"
            :data-source="tableData1"
            :loading="loading"
            expandRowByClick="true"
            @expand="expandTable"
            :scroll="{ x: 1300 }"
            :pagination="false"
          />
        </div>
        <div class="tableBox">
          <div class="pa">
            <a-pagination
              v-if="total > 10"
              :showSizeChanger="false"
              show-quick-jumper
              :pageSize="pageSize"
              v-model:current="currentPage"
              :total="total"
              class="pagination"
              @change="changePagination"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 审核弹窗 -->
    <a-modal
      v-model:visible="courAuditModal"
      :footer="null"
      :closable="closeBack"
      wrapClassName="courAuditModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>审核</span>
            <div class="close_exit" @click="closeCourAuditModal"></div>
          </div>
          <div class="body">
            <div class="item">
              <div class="left">审核：</div>
              <div class="rig">
                <a-radio-group name="radioGroup" v-model:value="valuepass">
                  <a-radio value="1">通过</a-radio>
                  <a-radio value="2" style="margin-left: 40px">不通过</a-radio>
                </a-radio-group>
              </div>
            </div>
            <div class="item" style="margin-top: 20px">
              <div
                class="sign"
                style="position: relative; left: 30px; top: -2px"
              >
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <div class="left">审核意见：</div>
              <div class="rig">
                <a-textarea v-model:value="valueSugg" :rows="4"   show-count
                  :maxlength="20"/>
              </div>
            </div>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeCourAuditModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="sureCourAuditModal">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 预览弹窗 -->
    <SeeModal
      :visible="lookCourseModal"
      :detail="faceDetailObj"
      @cancel="ft_exit"
    />

    <!-- 审核在线课 -->
    <a-modal
      v-model:visible="onlineClassesVisible"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle onlineClassesStyle"
      :zIndex="9999"
    >
      <iframe
        id="iframe"
        style="width: 100%; height: 100%"
        :src="iframeUrl + 'course/noapproved'"
        name="myframe"
        sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
      ></iframe>
    </a-modal>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from "vue";
import { list, courseAuditView, courseDetail } from "../../api/indexAudit";
import { message } from "ant-design-vue";
import SeeModal from "../courselibrary/components/seeModal.vue";
import { iframeUrl } from "../../api/method";
import * as api1 from "@/api/index1";

export default {
  name: "CoursereViewedN",
  components: {
    SeeModal,
  },
  setup() {
    const state = reactive({
      loading:false,
      optionsproj: [
        {
          value: "jack",
          label: "Jack",
        },
        {
          value: "rose",
          label: "rose",
        },
      ],
      calssifyList: [], //分类字典
      valueproj: "",
      valuecreater: "",
      valuename: "",
      // currentFacePage: 1,
      currentPage: 1,
      total: null,
      pageSize: 10,
      courAuditModal: false, //审核弹窗
      closeBack: false,
      valuepass: "1",
      valueSugg: null,
      chooseId: null,
      chooseCreater: null,
      chooseOffId: null,
      lookCourseModal: false, //预览
      faceDetailObj: null,
      columns1: [
       // {
        //  title: "序号",
         // dataIndex: "number",
        //  key: "number",
        // align: "center",
       // },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
          align: "center",
          ellipsis: true,
          width:"20%",
        },
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          align: "center",
          width:"10%",
        },
        {
          title: "内容分类",
          dataIndex: "content",
          key: "content",
          align: "center",
          ellipsis: true,
          width:"10%",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          align: "center",
          width:"10%",
        },
        // {
        //   title: "转审",
        //   dataIndex: "change",
        //   key: "change",
        //   align: "center",
        // },
        {
          title: "创建人",
          dataIndex: "creater",
          key: "creater",
          align: "center",
          ellipsis: true,
          width:"15%",
        },
        {
          title: "创建时间",
          dataIndex: "time",
          key: "time",
          align: "center",
          ellipsis: true,
          width:"15%",
        },

        {
          title: "操作",
          dataIndex: "opt",
          key: "opt",
          align: "center",
          width:"20%",
          customRender: (value) => {
            return (
              <div>
                <span
                  style="cursor:pointer;color:#387DF7"
                  onClick={() => {
                    showAudit(
                      value.record.createId,
                      value.record.creater,
                      value.record.offId
                    );
                  }}
                >
                  审核
                </span>
                &nbsp;
                <span
                  onClick={() => {
                    getFaceDetail(value.record.offId);
                    console.log(value.record);
                  }}
                  style="cursor:pointer;color:#387DF7"
                >
                  预览
                </span>
              </div>
            );
          },
        },
      ],
      // 待审核课程的数据
      tableData1: [],

      //审核在线课嵌套页面
      onlineClassesVisible: false,
      iframeUrl: iframeUrl,
      // 课程三级分类
      options2222:[
        {
          title: '领导力',
          value: '100',
          selectable:false,
          children: [
            {
              title: '领导业务',
              value: '1001',
            },
            {
              title: '领导团队',
              value: '1002',
            },
            {
              title: '领导自我',
              value: '1003',
            },
          ],
        },
        {
          title: '专业力',
          value: '200',
          selectable:false,
          children: [
            {
              title: '研发',
              value: '2001',
            },
            {
              title: '产品和解决方案',
              value: '2002',
            },
            {
              title: '生产技术与制造',
              value: '2003',
            },
            {
              title: '供应链',
              value: '2004',
            },
            {
              title: '营销',
              value: '2005',
            },
            {
              title: '品质',
              value: '2006',
            },
            {
              title: '战略与企划',
              value: '2007',
            },
            {
              title: '流程管理',
              value: '2008',
            },
            {
              title: '业绩管理',
              value: '2009',
            },
            {
              title: '项目管理',
              value: '20010',
            },
            {
              title: '信息技术',
              value: '20011',
            },
            {
              title: '环境与安全',
              value: '20012',
            },
            {
              title: '人力资源',
              value: '20013',
            },
            {
              title: '企业文化',
              value: '20014',
            },
            {
              title: '品牌',
              value: '20015',
            },
            {
              title: '财务',
              value: '20016',
            },
            {
              title: '法务',
              value: '20017',
            },
            {
              title: '行政',
              value: '20018',
            },
            {
              title: '医工',
              value: '20019',
            }
          ],
        },
        {
          title: '通用力',
          value: '300',
          selectable:false,
          children: [
            {
              title: '职业操守与道德',
              value: '3001',
            },
            {
              title: '职业素养与技能',
              value: '3002',
            },
            {
              title: '规章制度',
              value: '3003',
            },
          ], 
        }
      ],
    });

    // 课程三级分类回显
    const sHX = (data) => {
      let str = '-'
      let sdata = state.options2222
      for(let i =0; i<sdata.length;i++){
          for(let j=0;j<sdata[i].children.length;j++){
            if (String(sdata[i].children[j].value) === String(data)) {
               str = sdata[i].children[j].title;
            }
          }
      }
      return str
    }

    /*
     * 获取字典列表
     * param faceclassPic | faceclassClass | faceclassScene
     * */
    const getDictList = (param) =>
      api1
        .getDict({
          pageNo: 1,
          pageSize: 20,
          setCode: param,
        })
        .then((res) => res.data.data.rows);

    const getFaceList = () => {
      state.loading=true
      let objn = {
        auditStatus: 1,
        categoryId: state.valueproj,
        createName: state.valuecreater,
        name: state.valuename,
        pageNo: state.currentPage,
        pageSize: 10,
        projectName: "",
      };

      console.log(objn);
      // 测试数据先放下
      // setFaceData([{ name: "面授课审核", category_id: "8", scene_id: "8" }]);

      list(objn)
        .then((res) => {
          console.log("获取面授列表成功", res);
          let result = res.data.data;
          state.total = result.total;
          if (result.total > 0) {
            setFaceData(result.rows);
          } else {
            setFaceData([]);
          }
          state.loading=false
        })
        .catch((err) => {
          console.log("获取面授列表失败", err);
        });
    };

    // 获取面授详情
    const heroImg = ref(null);
    const valueHtml = ref(null);
    const attachMap = ref([]);

    const getFaceDetail = (id) => {
      console.log(id);
      courseDetail(id)
        .then((res) => {
          console.log("获取面授详情信息成功", res);
          let result = res.data.data;
          state.lookCourseModal = true;
          result.attach = result.attach == "" ? [] : result.attach.split(",");
          state.faceDetailObj = result;

          heroImg.value.src = result.picUrl;
          valueHtml.value = result.outline;
          attachMap.value = result.attach == "" ? [] : result.attach.split(",");
          console.log(result, attachMap.value);
        })
        .catch((err) => {
          console.log("获取面授详情信息失败", err);
        });
    };

    //  内容分类 场景 -- 目前直接写死的
    const sceneist11 = [
      { dictCode: "6", dictValue: "场景一" },
      { dictCode: "7", dictValue: "场景二" },
    ];
    const contentList11 = [
      { dictCode: "8", dictValue: "分类一" },
      { dictCode: "5", dictValue: "分类二" },
    ];

    // contentList11.find(e => e.dictCode == text)?.dictValue

    const searchList = () => {
      let objn = {
        auditStatus: 1,
        categoryId: state.valueproj,
        createName: state.valuecreater,
        name: state.valuename,
        pageNo: state.currentPage,
        pageSize: 10,
        projectName: "",
      };

      console.log(objn);

      list(objn)
        .then((res) => {
          console.log("获取面授列表成功", res);
          let result = res.data.data;
          state.total = result.total;
          if (result.total > 0) {
            setFaceData(result.rows);
          } else {
            setFaceData([]);
          }
        })
        .catch((err) => {
          console.log("获取面授列表失败", err);
        });
    };

    // 预览弹框 开启和关闭
    const ft_exit = () => {
      state.lookCourseModal = false;
    };

    const setFaceData = (tableData) => {
      if (!tableData || !tableData.length) {
        state.tableData1 = [];
        return;
      }
      let data = tableData;
      let array = [];
      data.map((item, i) => {
        let obj = {
          number: i + 1 + (state.currentPage - 1) * 10,
          name: item.name,
          type: item.type == 1 ? "线上" : "线下",
          content: sHX(item.categoryId),
          status:
            item.status == 0
              ? "未提交"
              : item.status == 1
              ? "待审核"
              : item.status == 2
              ? "通过"
              : item.status == -1
              ? "拒绝"
              : "-",
          change: "-",
          creater: item.createName,
          time: item.processTime,
          createrId: item.createId,
          offId: item.offcourseId,
        };
        array.push(obj);
      });
      state.tableData1 = array;
    };
    const reset = () => {
      state.valueproj = "";
      state.valuecreater = null;
      state.valuename = null;
      getFaceList();
    };
    const changePagination = (pagina) => {
      state.currentPage = pagina;
      getFaceList();
    };
    const showAudit = (id, creater, offId) => {
      state.courAuditModal = true;
      state.chooseId = id;
      state.chooseCreater = creater;
      state.chooseOffId = offId;
      getFaceList();
    };
    const closeCourAuditModal = () => {
      state.courAuditModal = false;
      state.valueSugg = null;
      state.valuepass = "1";
      state.chooseId = null;
      state.chooseCreater = null;
      state.chooseOffId = null;
    };
    const sureCourAuditModal = () => {
      console.log(state.valueSugg);
      if (
        state.valueSugg == null ||
        state.valueSugg == undefined ||
        state.valueSugg == ""
      ) {
        message.destroy();
        message.error("请输入审核意见");
        return;
      }

      courseAuditView({
        createId: state.chooseId,
        createName: state.chooseCreater,
        description: state.valueSugg,
        offcourseId: state.chooseOffId,
        pass: state.valuepass == "1" ? 1 : 0,
      })
        .then((res) => {
          console.log(res);
          state.courAuditModal = false;
          message.destroy();
          message.success("审核提交成功");
          state.valueSugg = null;
          state.valuepass = "1";
          getFaceList();
        })
        .catch((err) => {
          console.log(err);
          message.destroy();
          message.warning("审核提交失败");
          state.valueSugg = null;
          state.valuepass = "1";
        });
    };
    onMounted(async () => {
      getFaceList();
      //获取分类列表
      state.calssifyList = (await getDictList("faceclassClass")).map((e) => ({
        label: e.dictName,
        value: e.dictCode,
      }));
    });

    // 禁止用户编辑文本框内容
    const onEditorFocus = (event) => {
      event.enable(false);
    };
    return {
      ...toRefs(state),
      getFaceList,
      searchList,
      setFaceData,
      reset,
      changePagination,
      showAudit,
      closeCourAuditModal,
      sureCourAuditModal,
      ft_exit,
      getFaceDetail,
      heroImg,
      valueHtml,
      attachMap,
      contentList11,
      sceneist11,
      onEditorFocus,
      sHX
    };
  },
};
</script>
<style lang="scss">
.courAuditModal {
  .ant-modal {
    width: 640px !important;
    height: 400px !important;

    .ant-modal-content {
      width: 640px !important;
      height: 400px !important;

      .ant-modal-body {
        width: 640px !important;
        height: 400px !important;
        padding: 0 !important;

        .delete {
          z-index: 999;
          width: 640px;
          height: 400px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;

          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 68px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }

          .del_main {
            width: 100%;
            position: relative;

            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;

              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/taskpage/gan.png);
                background-size: 100% 100%;
              }

              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }

            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              // background-color: red;
              position: relative;

              .item {
                display: flex;
                width: 100%;

                .left {
                  width: 110px;
                  text-align: right;
                }

                .rig {
                  width: 450px;

                  .ant-input {
                    border-radius: 8px;
                    resize: none !important;
                  }
                }
              }
            }

            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;

              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-shrink: 0;
                cursor: pointer;

                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }

              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
                margin-right: 14px;
              }

              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}

.lookCourseModal {
  .ant-modal {
    .ant-modal-content {
      // width:1358px !important;
      .ant-modal-body {
        .modalHeader {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .headerLeft {
            margin-left: 27px;
            display: flex;
            align-items: center;

            .headerLeftText {
              font-size: 16px;
              font-weight: 400;
              color: #000000;
              line-height: 36px;
            }
          }
        }

        .modalMain {
          .m_title {
            margin-bottom: 20px;
          }

          .m_body {
            display: flex;
            flex-wrap: wrap;

            .mb_left {
              width: 50%;

              .mbl_items {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 10px;

                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }

                .item_inp {
                  flex: 1;
                  position: relative;

                  .inp_num {
                    position: absolute;
                    left: 398px;
                    top: 10px;
                  }
                }
              }

              .mbl_items2 {
                display: flex;
                align-items: start;
                margin-top: 10px;
                margin-bottom: 10px;

                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }

                .item_inp {
                  flex: 1;

                  .i_upload_img {
                    width: 100px;
                    height: 100px;
                    border-radius: 8px;
                  }

                  .i_upload {
                    width: 100px;
                    height: 100px;
                    border: 1px solid #4ea6ff;
                    border-radius: 8px;
                    text-align: center;
                    align-items: center;
                    cursor: pointer;

                    .addimg {
                      position: relative;

                      .heng {
                        position: absolute;
                        top: 50px;
                        left: 25px;
                        width: 50px;
                        border: 1px solid #4ea6ff;
                      }

                      .shu {
                        position: absolute;
                        top: 25px;
                        left: 50px;
                        height: 50px;
                        border: 1px solid #4ea6ff;
                      }
                    }
                  }
                }
              }

              .i2_cz {
                width: 440px;
                margin-left: 100px;

                .i2_top {
                  display: flex;
                  justify-content: space-between;
                }
              }

              .i8_bottom {
                display: flex;
                width: 440px;
                margin-left: 100px;
              }
            }

            .mb_right {
              width: 50%;

              .mbl_items {
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
                margin-bottom: 10px;

                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-top: -15px;
                    margin-right: 5px;
                  }
                }

                .item_inp {
                  flex: 1;
                }

                .accessory {
                  display: flex;
                  align-items: center;

                  .accessory_icon {
                    width: 16px;
                    height: 16px;
                    margin-top: -8px;
                    margin-right: 5px;
                  }
                }
              }

              .mbl_items2 {
                display: flex;
                align-items: start;
                margin-bottom: 10px;

                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }

                .item_inp {
                  flex: 1;
                  position: relative;

                  .inp_num {
                    position: absolute;
                    left: 395px;
                    bottom: 10px;
                  }
                }
              }

              .mbl_items12 {
                width: 440px;
                margin-left: 100px;

                .i12_box1 {
                  display: flex;
                  align-items: center;
                  padding: 17px 0px 17px 21px;
                  border: 1px solid #eff4fc;
                  border-radius: 8px;
                  margin-bottom: 10px;

                  .file_img {
                    width: 27px;
                    height: 32px;
                    // background-image: url(@/assets/images/coursewareManage/imgs.png);
                    margin-right: 22px;

                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }

                  .file_detail {
                    width: 250px;
                    margin-right: 21px;

                    .file_updata {
                      display: flex;
                      align-items: center;

                      .updatabox {
                        position: relative;
                        width: 230px;
                        height: 5px;
                        background-color: rgba(192, 192, 192, 0.25);
                        border-radius: 3px;

                        .updatacolor {
                          position: absolute;
                          left: 0;
                          width: 100%;
                          height: 5px;
                          background-color: #57c887;
                          border-radius: 3px;
                        }

                        .updatacolor2 {
                          position: absolute;
                          left: 0;
                          width: 80%;
                          height: 5px;
                          background-color: #ff7474;
                          border-radius: 3px;
                        }

                        .updatacolor3 {
                          position: absolute;
                          left: 0;
                          width: 60%;
                          height: 5px;
                          background-color: #4ea6ff;
                          border-radius: 3px;
                        }

                        .updataxq {
                          position: absolute;
                          right: 2px;
                          top: -30px;
                          color: #57c887;
                        }

                        .updataxq2 {
                          position: absolute;
                          right: 2px;
                          top: -30px;
                          color: #ff7474;
                        }

                        .updataxq3 {
                          position: absolute;
                          right: 2px;
                          top: -30px;
                          color: #4ea6ff;
                        }
                      }
                    }
                  }

                  .file_operation {
                    display: flex;

                    .fobox {
                      margin-right: 5px;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }

          .m_footer {
            display: flex;
            margin: 20px 0;

            .fotnam {
              width: 100px;
              display: flex;
              justify-content: end;
              padding-right: 15px;
            }

            .fotarea {
              position: relative;

              .fuwenben {
                width: 90%;
                height: 20px;
                background-color: rgb(95, 95, 95);
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                top: 3px;
                z-index: 9999;
              }
            }
          }

          .m_btn {
            width: 100%;
            margin-top: 25px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-content: center;

            .btn {
              width: 100px;
              height: 40px;
              background: rgba(64, 158, 255, 0);
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;

              .btnText {
                font-size: 14px;
                font-weight: 400;
                line-height: 40px;
              }
            }

            .btn5 {
              border: 1px solid rgba(64, 158, 255, 1);
              color: #4ea6ff;
            }

            .btn6 {
              background-color: #4ea6ff;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}

.coursereviewedn {
  width: 100%;

  .tmpl {
    width: 100%;

    .tmpl_header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 32px;

      margin-left: 32px;
      margin-right: 32px;

      .tmplh_inp {
        .inpbox {
          display: flex;
          margin-top: 32px;
          flex-wrap: wrap;

          .inpbox1 {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 24px;
            margin-top: 10px;

            .ant-select-selector {
              border-radius: 8px;
              width: 270px;
              height: 40px;
              padding-top: 5px;
            }

            span {
              white-space: nowrap;
            }
          }
        }
      }

      .tmplh_btn {
        display: flex;
        // margin-left: 38px;
        margin-top: 42px;

        .btn {
          padding: 0px 26px 0px 26px;
          height: 38px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 14px;
          cursor: pointer;
          flex-shrink: 0;

          .search {
            background-size: 100%;
          }

          .btnText {
            font-size: 14px;
            font-weight: 400;
            line-height: 36px;
            margin-left: 5px;
          }

          .btnText1 {
            color: rgb(255, 255, 255);
          }

          .btnText2 {
            color: rgba(64, 158, 255, 1);
          }
        }

        .btn1 {
          background: #4ea6ff;

          .search {
            width: 15px;
            height: 17px;
            background-image: url("../../assets/images/courseManage/search0.png");
          }
        }

        .btn2 {
          background: #ffffff;
          border: 1px solid #4ea6ff;

          .search {
            width: 16px;
            height: 18px;
            background-image: url("../../assets/images/courseManage/reset1.png");
          }
        }

        .btn1:hover {
          background: rgb(255, 255, 255);
          border: 1px solid #4ea6ff;

          .search {
            background-image: url("../../assets/images/courseManage/search1.png");
          }

          .btnText {
            color: rgba(64, 158, 255, 1);
          }
        }

        .btn2:hover {
          background: rgba(64, 158, 255, 1);

          .search {
            background-image: url("../../assets/images/courseManage/reset0.png");
          }

          .btnText {
            color: #ffffff;
          }
        }
      }
    }

    .tmpl_body {
      padding: 0px 30px;

      .tmpl_tabbox {
        .operation {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #4ea6ff;

          .nselect {
            justify-content: center;
            align-items: center;
            display: flex;

            .jc {
              margin-left: 20px;
              white-space: nowrap;
              cursor: pointer;
            }
          }
        }
      }

      .pa {
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>