<template>
  <a-drawer :visible="addfaceteachVisible" class="drawerStyle addfaceteachDrawer" width="90%" title="添加面授"
            placement="right" @after-visible-change="afterVisibleChange">
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">添加面授</div>
        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
             @click="closeDrawer"/>
      </div>
      <div class="contentMain">
        <div class="main_left">
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img src="@/assets/images/coursewareManage/asterisk.png" alt=""/>
              </div>
              <span style="margin-right: 3px">课程名称：</span>
            </div>
            <div class="btnbox">
              <a-input v-model:value="courseName" style="width: 384px; height: 32px" placeholder="请输入名称"
                       maxlength="20"/>
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img src="@/assets/images/coursewareManage/asterisk.png" alt=""/>
              </div>
              <span style="margin-right: 3px">选择课程：</span>
            </div>
            <div class="btnbox">
              <button class="xkbtn" @click="showDrawerSelFacet">
              <!--
                {{ chooseCourse == null ? "选择" : chooseCourseName }}面授课
              </button> -->
               
                {{ chooseCourse == null ? "选择" : "重选" }}面授课
              </button> 
              <div v-if="chooseCourse">
                <a-tag closable color="processing" @close="logC">
                  <span style="font-size:14px;line-height: 33px;">删除课程</span>
                </a-tag>
              </div>

            </div>
            <!-- 选择面授侧弹窗 -->
            <div>
              <sel-facet v-model:selfacetVisible="selfacetvisible" v-model:chooseCourse="chooseCourse" v-model:chooseCourseName="chooseCourseName"/>
            </div>
            <!-- 选择面授侧弹窗 -->
          </div>
          <div class="main_item2">
            <div class="signbox">
              <span style="margin-right: 3px">面授说明：</span>
            </div>
            <div class="textarea">
              <a-textarea v-model:value="description" placeholder="请输入说明" allow-clear maxlength="100"/>
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img src="@/assets/images/coursewareManage/asterisk.png" alt=""/>
              </div>
              <span style="margin-right: 3px">授课教师：</span>
            </div>
            <div class="btnbox">
<!--              <a-auto-complete placeholder="选择老师" :value="memberValue.label" style="width: 364px"-->
<!--                               :options="options" @change="handleChange2" @search="handleSearch"></a-auto-complete>-->
              <ProjectManager v-model:value="memberValue.value" v-model:name="memberValue.label"></ProjectManager>
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img src="@/assets/images/coursewareManage/asterisk.png" alt=""/>
              </div>
              <span style="margin-right: 3px">面授时间：</span>
            </div>
            <div class="btnbox">
              <a-range-picker v-model:value="chooseTime" :placeholder="['      开始时间', '        结束时间']"/>
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img src="@/assets/images/coursewareManage/asterisk.png" alt=""/>
              </div>
              <span style="margin-right: 3px">面授时长：</span>
            </div>
            <div class="btnbox">
              <a-input-number :min="0" :max="300" :precision="0" style="
                  width: 364px;
                  height: 32px;
                  border-radius: 8px;
                  overflow: hidden;
                " v-model:value="duration"></a-input-number>
              <span style="margin-left: 5px; width: 30px">分钟</span>
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img src="@/assets/images/coursewareManage/asterisk.png" alt=""/>
              </div>
              <span style="margin-right: 3px">上课地址：</span>
            </div>
            <div class="btnbox">
              <a-input v-model:value="address" style="width: 384px; height: 32px" placeholder="请输入上课地址"
                       maxlength="100"/>
            </div>
          </div>
          <div class="main_item2">
            <div class="signbox">
              <span style="margin-right: 3px">考勤设置：</span>
            </div>
            <div class="kqszbox">
              <div class="qdqtbox">
                <div class="qdbtn">
                  <div class="btntext">签到</div>
                </div>
              </div>
              <div class="setbox">
                <div class="timerbox">
                  <span>开始前：</span>
                  <a-input-number :min="0" :max="300" :precision="0" style="
                  width: 100px;
                  height: 32px;
                  border-radius: 8px;
                  overflow: hidden; " v-model:value="before"></a-input-number>
                  <span style="color: #999999; margin-left: 8px">分钟</span>
                </div>
                <div class="timerbox">
                  <span>开始后：</span>
                  <a-input-number :min="0" :max="300" :precision="0" style="
                      width: 100px;
                      height: 32px;
                      border-radius: 8px;
                      overflow: hidden;" v-model:value="afterStartValue"></a-input-number>
                  <span style="color: #999999; margin-left: 8px">分钟</span>
                </div>
              </div>


            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">完成标准设置：</span>
            </div>
            <div class="btnbox">


              <a-checkbox v-model:checked="onlySign" @click="onlySign = !onlySign">仅签到</a-checkbox>


            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">其他设置：</span>
            </div>
            <div class="btnbox">
              <a-checkbox v-model:checked="completeLeave"
                          @click="completeLeave = !completeLeave">学员请假后记为任务完成
              </a-checkbox>
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">现场参与：</span>
            </div>
            <div class="btnbox">
              <a-checkbox v-model:checked="innerPersion"
                          @click="innerPersion = !innerPersion">允许项目内人员临时到场参加
              </a-checkbox>
              <a-checkbox v-model:checked="outPersion" @click="outPersion = !outPersion">允许项目外人员临时到场参加
              </a-checkbox>
            </div>
          </div>
          <div class="main_item2">
            <div class="signbox">
              <span style="margin-right: 3px">评估：</span>
            </div>
            <div class="btnbox2">
              <a-checkbox v-model:checked="needEval" @click="needEval = !needEval">需要评估</a-checkbox>
            </div>
          </div>
          <div v-if="needEval" class="main_item">
            <div class="signbox">
            </div>
            <div class="btnbox">
              <button class="xkbtn" @click="showAssessment">选择评估</button>
              <div v-if="assessmentId > 0">
                <a-tag closable color="processing" @close="logA">
                  <span style="font-size:14px;line-height: 33px;">删除评估</span>
                </a-tag>
              </div>
              <AssessmentList v-model:assessmentVisible="assessmentVisible" v-model:titleTag="titleTag"
                              v-model:assessmentId="assessmentId"/>

            </div>
          </div>


        </div>
        <div class="main_right">
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">配置作业：</span>
            </div>
            <div class="btnbox" @click="showDrawerAddHomework">
              <button class="xkbtn">配置</button>
              <div v-if="EditWorkId > 0">
                <a-tag closable color="processing" @close="logW">
                  <span style="font-size:14px;line-height: 33px;">删除作业</span>
                </a-tag>
              </div>

            </div>

            <!-- 添加作业侧弹窗 -->
            <div>
              <add-homework v-model:addhomeworkVisible="addhomeworkvisible" @getWork="getWork" :faceLevel="true"
                            v-model:EditWorkId="EditWorkId"/>
            </div>
            <!-- 添加作业侧弹窗 -->
          </div>
          <div>

          </div>
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">配置考试:</span>
            </div>
            <div class="btnbox" @click="showDrawerAddTest">
              <button class="xkbtn">配置</button>
              <div v-if="EditTestId > 0">
                <a-tag closable color="processing" @close="logT">
                  <span style="font-size:14px;line-height: 33px;">删除考试</span>
                </a-tag>
              </div>

            </div>
            <!-- 添加考试侧弹窗 -->
            <div>
              <add-test v-model:addtestVisible="addtestvisible" v-model:EditTestId="EditTestId" :faceLevel="true"/>
            </div>
            <!-- 添加考试侧弹窗 -->
          </div>
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">附件：</span>
            </div>
            <div class="btnbox">
              <a-upload @change="handleChange" action="/manageApi/file/upload" v-model:file-list="fileList">
                <button class="xkbtn">上传附件</button>
              </a-upload>
            </div>
          </div>
        </div>
      </div>
      <div class="main_btns">
        <button class="btn1" @click="exitAdd">取消</button>
        <button class="btn2" @click="updateFaceTeach">确定</button>
      </div>

    </div>
  </a-drawer>
</template>
<script>
import {reactive, toRefs, ref} from "vue";
import SelFacet from "../../components/drawers/SelFacet.vue";
import AddHomework from "../../components/drawers/AddHomework.vue";
import AddTest from "../../components/drawers/AddTest.vue";
import {ProjectEditTask, RouterEditTask} from "@/api/indexTask";
// import * as method from "../../api/method"
import {message} from "ant-design-vue";
import {getMemberInfo} from "@/api/index1";
import {debounce} from "lodash-es";
import {queryFaceDetailById, editPlan} from "../../api/indexFace";
import dayjs from "dayjs";
import AssessmentList from "../drawers/ AssessmentList.vue";
// import { toDate } from "../../api/method";、
import {addTempTask} from "../../api/indexTaskadd";
import ProjectManager from "@/components/project/ProjectManager";

export default {
  name: "AddFaceteach",
  components: {
    SelFacet,
    AddHomework,
    AddTest,
    AssessmentList,
    ProjectManager,
  },
  props: {
    addfaceteachVisible: {
      type: Boolean,
      default: false,
    },
    EditFaceId: {
      // 要编辑的workId
      type: Number,
      default: null,
    },
    edit: {
      //  是否为编辑
      type: Boolean,
      default: null,
    },
    projectId: {
      type: Number,
      default: null,
    },
    chooseStageId: {
      type: Number,
      default: null,
    },
    routerTaskId: {
      type: Number,
      default: 0,
    },
    isLevel: {
      // 是否是关卡页面触发
      type: Number,
      default: null,
    },

    projectTaskId: {
      // 要编辑的projectId
      type: Number,
      default: null,
    },
    routerId: {
      type: Number,
      default: null,
    },
    isactive: {
      type: Number,
      default: null,
    },
    projectTemplateId: {
      type: Number,
      default: null,
    },
    projectName: {
      type: String,
      default: null,
    },
  },
  setup(props, ctx) {
    const options = ref([]);
    const state = reactive({
      loading:false,
      selfacetvisible: false,
      addhomeworkvisible: false,
      addtestvisible: false,
      memberValue: {
        value: "",
        label: ""
      },
      fetching: false,
      totalPages: 0,
      currentPage: 1,
      tableDataTotal: 100,
      memberId: 0,
      pageSize: 10,
      courseName: "",
      duration: null,
      address: null,
      before: null,
      afterStartValue: null,
      description: "",
      chooseTime: [],
      fileList: [],
      chooseCourse: null, //选择的在线课程
      chooseCourseName: null, //选择的在线课程
      assessmentId: null,
      EditTestId: null,
      EditWorkId: null,
      assessmentVisible: false,
      needEval: false,
      onlySign: false,
      completeLeave: false,
      innerPersion: false,
      outPersion: false,

    });
    const clear = () => {
      state.courseName = "";
      state.memberValue = {};
      state.duration = null;
      state.address = null;
      state.before = null;
      state.afterStartValue = null;
      state.chooseTime = [];
      state.description = "";
      state.onlySign = false;
      state.completeLeave = false;
      state.innerPersion = false;
      state.outPersion = false;
      state.chooseCourse = null;
      state.EditTestId = null;
      state.assessmentId = null;
      state.EditWorkId = null;
      state.EditEvalId = null;
      state.applyFlag = "";
      state.needEval = false;
    };
    const closeDrawer = () => {
      ctx.emit("update:addfaceteachVisible", false);
      localStorage.setItem("stageId", props.chooseStageId);
      localStorage.setItem("chapterId", props.isactive);
      clear();
    };
    const afterVisibleChange = (bool) => {
      if (bool && props.edit) {
        // 该页面显示同时 edit为true 时，发送查询请求,
        queryFaceTeach();

      }
    };

    const logC = e => {
      state.chooseCourse = null;
      state.chooseCourseName = null;
      console.log(e);
    };
    const logW = e => {
      state.EditWorkId = null;
      console.log(e);
    };
    const logT = e => {
      state.EditTestId = null;
      console.log(e);
    };
    const logA = e => {
      state.EditEvalId = null;
      console.log(e);
    };

    const showDrawerSelFacet = () => {
      state.selfacetvisible = true;
    };
    const showDrawerAddHomework = () => {
      state.addhomeworkvisible = true;

    };
    const showDrawerAddTest = () => {
      state.addtestvisible = true;
    };


    //查询面授
    const queryFaceTeach = () => {

      queryFaceDetailById(props.EditFaceId).then((res) => {
        console.log("获取到了面授课开课详情", res.data.data);
        let result = res.data.data;
        state.courseName = result.name;
        state.description = result.description;
        state.memberValue = {value: result.teacherId, label: result.teacher}
        state.duration = result.duration;
        if (result.beginTime && result.endTime) {
          state.chooseTime = [
            dayjs(result.beginTime, "YYYY-MM-DD"),
            dayjs(result.endTime, "YYYY-MM-DD"),
          ];
        } else {
          state.chooseTime = [];
        }
        state.address = result.address;
        state.before = result.beforeStart;
        state.afterStartValue = result.afterStart;
        state.fileList = JSON.parse(result.attach);
        state.EditWorkId = result.homeWorkId;
        state.onlySign = result.completeType.split(",")[0] == "1" ? true : false;
        state.completeLeave = result.completeType.split(",")[1] == "1" ? true : false;
        state.chooseCourse = result.offcourseId;
        state.innerPersion = result.projectMember.split(",")[0] == "1" ? true : false;
        state.outPersion = result.projectMember.split(",")[1] == "1" ? true : false;
        state.EditTestId = result.testId;
        state.EditWorkId = result.homeWorkId;
        state.assessmentId = result.evaluateId;
        state.needEval = result.evaluateId;

        console.log("state=======", state);
      });
    };

    // 点击取消按钮
    const exitAdd = () => {
      closeDrawer();
    }

    //新建或编辑面授
    // 新增任务
    const updateFaceTeach = () => {

      if (
          state.courseName == "" ||
          state.chooseCourse == null ||
          state.memberValue == {} ||
          state.chooseTime == [] ||
          state.duration == "" ||
          state.address == ""

      ) {
        message.destroy();
        return message.warning("请输入必填字段");
      } else {
        let type = state.onlySign ? "1," : "0,";
        let t = state.completeLeave ? "1" : "0";
        let p = state.innerPersion ? "1," : "0,";
        let p1 = state.outPersion ? "1" : "0";
        let obj = {
          teacherId: state.memberValue.value,
          teacher: state.memberValue.label,
          address: state.address,
          applyFlag: state.applyFlag,
          attach: JSON.stringify(state.fileList),
          afterStart: state.afterStartValue || 0,
          beforeStart: state.before || 0,
          beginTime: parseInt(new Date(state.chooseTime[0].$d).getTime() / 1000),
          completeType: type.concat(t),
          description: state.description,
          endTime: parseInt(new Date(state.chooseTime[1].$d).getTime() / 1000),
          evalFlag: state.needEval ? 1 : 0,
          evaluateId: state.assessmentId,
          homeWorkId: state.EditWorkId,
          name: state.courseName,
          projectMember: p.concat(p1),
          offcourseId: state.chooseCourse,
          offcoursePlanId: props.EditFaceId > 0 ? props.EditFaceId : 0,
          testId: state.EditTestId,
          duration:state.duration,
        };
        console.log("obj============", obj, "6" + "9");
        console.log("222222222");

        editPlan(obj).then(async (res) => {
              message.destroy();
              message.success(`添加成功`);
              await updateTask(res);
              ctx.emit("changeData", false);
              closeDrawer();
                }).catch((e) => {
              console.log(e)
              message.destroy();
              message.error(`添加失败`);
            });

      }
    };


    //更新任务列表
    // 新增编辑或新增项目任务
    const updateTask = async (res) => {
      console.log("props.isLevel=====", props.isLevel);
      if (props.isLevel == 1) {
        let editObj1 = {
          chapterId: props.isactive,
          courseId: res.data.data.offcoursePlanId,
          name: res.data.data.name,
          duration: res.data.data.duration,
          routerId: props.routerId,
          routerTaskId: props.routerTaskId || 0,
          type: 2,
        };
        await RouterEditTask(editObj1)
            .then(() => {
              //message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);

              // state.addLoading = false;
              closeDrawer();
            })
            .catch(() => {
              //message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
            });
      } else if (props.isLevel == 2) {
        let editObj = {
          courseId: res.data.data.offcoursePlanId,
          duration: res.data.data.duration,
          name: res.data.data.name,
          projectId: props.projectId,
          projectTaskId: props.projectTaskId || 0,
          stageId: props.chooseStageId || 0,
          type: 2,
        };
        // 新增编辑或新增项目
        await ProjectEditTask(editObj)
            .then(() => {
              message.success(`${props.EditFaceId ? "编辑" : "新增"}阶段任务成功`);

            })
            .catch(() => {
              //message.error(`${props.EditFaceId ? "编辑" : "新增"}阶段任务失败`);
            });
      } else if (props.isLevel == 3) {
        console.log("dddddddddddd33333333");
        await addTempTask({
          courseId: res.data.data.offcoursePlanId,
          name: res.data.data.name,
          duration: res.data.data.duration,
          projectTemplateId: props.projectTemplateId,
          projectTaskId: props.projectTaskId || 0,
          stageId: props.chooseStageId || 0,
          type: 2,
        })
            .then(() => {
              //message.success(`${props.EditFaceId ? "编辑" : "新增"}阶段任务成功` );

            })
            .catch(() => {
              //message.error(`${props.EditFaceId ? "编辑" : "新增"}阶段任务失败`);
            });
      }
    };

    const handleChange = ({file, fileList}) => {
      if (file.status !== "uploading") {
        console.log(file, fileList);
      }
    };
    const showAssessment = () => {
      state.assessmentVisible = true;

    };
    const faceAssess = (value) => {
      console.log(value);
      state.chooseMent = value;
      state.chooseMentName = value.name;
    };
    // 员工滚动
    const templateScroll = (e) => {
      console.log("滚动", e);
      const {target} = e;
      const scrllHeight = target.scrollHeight - target.scrollTop;
      const clientHeight = target.clientHeight;
      // console.log("scrllHeight", scrllHeight, clientHeight);
      if (scrllHeight === 0 && clientHeight === 0) {
        state.currentPage = 1;
      } else if (scrllHeight - clientHeight == 0) {
        // 下拉到底部时
        if (state.currentPage < state.totalPages) {
          // 如果滑到底部，则加载下一页
          state.currentPage++;
          // queryMember();
        }
      }
    };
    // 获取员工
    const queryMember = () => {
      if (!state.memberValue || !state.memberValue.label) return;
      let obj = {
        keyWord: state.memberValue.label,
        id: 0,
        org: 0,
        pageNo: state.currentPage,
        pageSize: state.pageSize,
      };
      getMemberInfo(obj)
          .then((res) => {
            let data = res.data.data.rows;
            state.totalPages = res.data.data.total;
            for (let i in data) {
              options.value.push({
                value: data[i].id,
                label: data[i].realName,
              });
            }
          })
          .catch((err) => {
            message.destroy();
            message.error("获取员工失败" + err);
          });
    };
    const handleSearch = debounce((memberValue) => {
      console.log("fetching user", memberValue);
      options.value = [];
      state.fetching = true;
      state.currentPage = 1;
      state.memberValue.label = memberValue;
      queryMember();
      state.fetching = false;
    }, 300);
    const handleChange2 = (value, label) => {
      console.log(`selected ${value}`);
      state.memberId = value;
      // console.log(label)
      state.memberValue = label;
    };
    const handleFocus = () => {
      queryMember();
    };
    return {
      ...toRefs(state),
      showDrawerSelFacet,
      showDrawerAddHomework,
      showDrawerAddTest,
      afterVisibleChange,
      closeDrawer,
      updateFaceTeach,
      exitAdd,
      updateTask,
      clear,
      handleChange,
      showAssessment,
      faceAssess,
      // change,
      options,
      handleFocus,
      handleSearch,
      handleChange2,
      templateScroll,
      logC,
      logT,
      logW,
      logA,

    };
  },
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa !important;
}

.addfaceteachDrawer {
  .drawerMain {
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;

      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        margin-left: 24px;
      }
    }

    .contentMain {
      display: flex;
      justify-content: space-between;

      .main_left {
        height: 1080px;
        padding-right: 30px;
        flex: 1;
        border-right: 1px solid #e8e8e8;

        .main_item {
          display: flex;
          align-items: center;
          margin-top: 32px;
          margin-bottom: 32px;

          .signbox {
            width: 120px;
            display: flex;
            justify-content: end;
            align-items: center;

            .sign {
              margin-right: 5px;
            }
          }

          .btnbox {
            display: flex;
            flex: 1;
            align-items: center;

            .xkbtn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              background: #388be1;
              border-radius: 8px;
              border: 0;
              margin-right: 8px;
              color: #fff;
            }
          }
        }

        .main_item2 {
          display: flex;
          align-items: flex-start;
          margin-bottom: 32px;

          .signbox {
            width: 120px;
            display: flex;
            justify-content: end;
            align-items: center;
          }

          .kqszbox {
            .qdqtbox {
              margin-left: 5px;
              cursor: pointer;
            }

            .qdbtn,
            .qtbtn {
              width: 75px;
              height: 24px;
              background: rgba(56, 139, 225, 0.16);
              border-radius: 2px;
              border: 1px solid #387df7;
              display: flex;
              align-items: center;
              justify-content: center;

              .btntext {
                color: #387df7;
              }
            }

            .setbox {
              display: flex;
              flex-wrap: wrap;
              margin-top: 10px;
              // margin-bottom: 24px;

              .timerbox {
                margin-top: 6px;
                margin-right: 32px;
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
              }
            }
          }

          .btnbox2 {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .xkbtn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              background: #388be1;
              border-radius: 8px;
              border: 0;
              margin-right: 16px 8px 32px 0;
              color: #fff;

            }
          }
        }
      }

      .main_right {
        width: 337px;

        .main_item {
          display: flex;
          align-items: center;
          margin-top: 32px;
          margin-bottom: 32px;

          .signbox {
            width: 120px;
            display: flex;
            justify-content: end;
            align-items: center;
          }

          .btnbox {
            display: flex;
            flex: 1;
            align-items: center;

            .xkbtn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              background: #388be1;
              border-radius: 8px;
              border: 0;
              margin-right: 8px;
              color: #fff;
            }
          }
        }
      }
    }

    .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>
