<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="12">
        <el-row>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>患者信息</span>
            </div>
            <div>
              <el-row class="partOfInfo">
                <el-row :gutter="20">
                  <el-col :span="6"
                    ><span class="tap_name">病人标识:</span
                    >{{ activePatientAndapplyInfo.patientId }}</el-col
                  >
                  <el-col :span="6"
                    ><span class="tap_name">病人类型:</span
                    >{{ activePatientAndapplyInfo.visitName }}病人</el-col
                  >
                  <el-col :span="6"
                    ><span class="tap_name">患者姓名:</span
                    >{{ activePatientAndapplyInfo.patientName }}</el-col
                  >
                  <el-col :span="6"
                    ><span class="tap_name">性别:</span
                    >{{
                      genderFormat(activePatientAndapplyInfo.gender)
                    }}</el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6"
                    ><span class="tap_name">年龄:</span
                    >{{ activePatientAndapplyInfo.age }}</el-col
                  >
                  <el-col :span="6"
                    ><span class="tap_name">电话号码:</span
                    >{{ activePatientAndapplyInfo.phone }}</el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div>
                      <span class="tap_name">是否加急:</span>
                      <el-radio-group
                        v-model="activePatientAndapplyInfo.isUrgent"
                      >
                        <el-radio :label="0" disabled>普通</el-radio>
                        <el-radio :label="1" disabled>急诊</el-radio>
                      </el-radio-group>
                    </div>
                  </el-col>
                  <!-- <el-col :span="6"
          ><span class="tap_name">检查体位:</span>
          <el-radio v-model="radioadfa" label="1">站立</el-radio>
          <el-radio v-model="radioadfa" label="3">平卧</el-radio>
        </el-col> -->
                </el-row>
              </el-row>
            </div>
          </el-card>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>检查项目</span>
            </div>
            <div>
              <el-row>
                <el-table
                  ref="examItemTable"
                  :data="examItemList"
                  :row-class-name="tableRowClassName"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="申请单号"
                    prop="applyNum"
                    width="180"
                  />
                  <el-table-column
                    align="center"
                    label="项目名称"
                    prop="outExamItemName"
                    width="180"
                  />
                  <el-table-column
                    :formatter="isPayFormat"
                    align="center"
                    label="缴费状态"
                    prop="isPay"
                  />
                  <el-table-column
                    align="center"
                    label="预约院区"
                    prop="yardId"
                  />
                  <el-table-column
                    :formatter="applyStateFormat"
                    align="center"
                    label="预约状态"
                    prop="applyState"
                  />
                  <el-table-column
                    :formatter="reservationDateFormat"
                    align="center"
                    label="预约时间"
                    prop="reservationDate"
                    width="180"
                  />
                </el-table>
              </el-row>
            </div>
          </el-card>

          <el-card class="box-card">
            <div>
              <el-tabs
                v-model="activeName"
                type="card"
                @tab-click="handleApplyClick"
              >
                <el-tab-pane
                  v-for="(item, index) in examItemList"
                  :key="index"
                  :label="item.applyNum"
                  :name="item.applyNum"
                >
                  <el-row class="partOfInfo">
                    <el-row :gutter="10">
                      <el-col :span="12"
                        ><span class="tap_name">申请单号:</span
                        >{{ item.applyNum }}</el-col
                      >

                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span="8"
                        ><span class="tap_name">性别:</span
                        >{{
                          genderFormat(activePatientAndapplyInfo.gender)
                        }}</el-col
                      >
                      <el-col :span="8"
                        ><span class="tap_name">年龄:</span
                        >{{ activePatientAndapplyInfo.age }}</el-col
                      >
                      <el-col :span="8"
                        ><span class="tap_name">姓名:</span
                        >{{ activePatientAndapplyInfo.patientName }}</el-col
                      >
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span="8"
                        ><span class="tap_name">申请院区:</span
                        >{{ item.yardId }}</el-col
                      >
                      <el-col :span="8"
                        ><span class="tap_name">申请科室:</span
                        >{{ item.applyDeptName }}</el-col
                      >
                      <el-col :span="8"
                        ><span class="tap_name">预约日期:</span
                        >{{ item.reservationDate }}</el-col
                      >

                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span="8"
                        ><span class="tap_name">检查科室:</span
                        >{{ item.examDeptName }}</el-col
                      >
                      <el-col :span="8"
                        ><span class="tap_name">检查类别:</span
                        >{{ item.examName }}</el-col
                      >
                    </el-row>
                    <el-row :gutter="10">
                      <el-col
                        ><span class="tap_name">外部检查项目:</span
                        >{{ item.outExamItemName }}</el-col
                      >
                    </el-row>
                    <el-row :gutter="10">
                      <el-col
                        ><span class="tap_name">内部检查项目:</span
                        >{{ item.inExamItemName }}</el-col
                      >
                    </el-row>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <div class="lefe-calendar">
            <el-calendar v-model="calendarValue">
              <template slot="dateCell" slot-scope="{ data }">
                <div
                  :class="[
                    { is_calender_item: isDayFormat(data) },
                    'calender_item',
                  ]"
                  @click="handleCalendarValue(formatQueueList(data))"
                >
                  {{ data.day.split("-").slice(2).join("-") }}
                  <div v-if="isDayFormat(data)" class="is_havSource">
                    <span
                      v-for="(item, index) in formatQueueList(data)"
                      :key="index"
                      :style="{ 'background-color': item.status ? '' : '#ccc' }"
                      class="source_name"
                      >{{ item.title }}</span
                    >
                  </div>
                  <div v-if="data.isSelected" class="is_select">✔</div>
                  <div v-if="data.isSelected" class="is_triangle"></div>
                </div>
              </template>
            </el-calendar>
          </div>
        </el-row>
        <el-row
          v-for="(item, index) in sourcePoolList"
          :key="index"
          style="margin-bottom: 25px"
        >
          <el-col :span="2">{{ item.title }}</el-col>
          <el-col :span="22">
            <el-row :gutter="0">
              <el-col
                v-for="(a, b) in item.list"
                :key="b"
                :span="8"
                class="timeFrame_button_style"
              >
                <el-button
                  v-if="activePatientAndapplyInfo.visitTypeId == '2'"
                  :disabled="isDisabledFormat(a, item.currentDay)"
                  round
                  size="medium"
                  v-bind:class="{
                    hasSourceCount:
                      a.inSourceCount < a.inNumSourceCount &&
                      !isDisabledFormat(a, item.currentDay),
                    active:
                      item.currentIndex === b &&
                      item.currentDay == item.reservationDate,
                  }"
                  @click="handleSourcePool(a, item)"
                  @dblclick.native="dbhandleSourcePool(a, item)"
                  >{{ a.timeSlot }} ( {{ a.inSourceCount }}/{{
                    a.inNumSourceCount
                  }}
                  )</el-button
                >
                <el-button
                  v-else-if="activePatientAndapplyInfo.visitTypeId == '1'"
                  :disabled="isDisabledFormat(a, item.currentDay)"
                  round
                  size="medium"
                  v-bind:class="{
                    active:
                      item.currentIndex === b &&
                      item.currentDay === item.reservationDate,
                  }"
                  @click="handleSourcePool(a, item)"
                  @dblclick.native="dbhandleSourcePool(a, item)"
                  >{{ a.timeSlot }} ( {{ a.outSourceCount }}/{{
                    a.outSourceCount
                  }}
                  )</el-button
                >
                <el-button
                  v-else
                  :disabled="isDisabledFormat(a, item.currentDay)"
                  round
                  size="medium"
                  v-bind:class="{
                    active:
                      item.currentIndex === b &&
                      item.currentDay === item.reservationDate,
                  }"
                  @click="handleSourcePool(a, item)"
                  @dblclick.native="dbhandleSourcePool(a, item)"
                  >{{ a.timeSlot }} ( {{ a.phySourceCount }}/{{
                    a.phySourceCount
                  }}
                  )</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-button size="small" @click="cancelApplys">取消预约</el-button>
          </el-col>
          <el-col :offset="16" :span="4">
            <el-button
              :disabled="!isApply"
              size="small"
              type="success"
              @click="modifyApply"
              >预约</el-button
            >
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listSourcePoolToManage } from "@/api/resource/sourcePool";
import {
  listApply,
  updateApply,
  changeApply,
  cancelApply,
} from "@/api/resource/apply";

export default {
  name: "Apply",
  data() {
    return {
      // 显示出来的患者和申请单信息
      activePatientAndapplyInfo: {},
      // 选中日历的值
      calendarValue: null,
      // 选中申请单标签
      activeName: " ",
      // 检查项目列表
      examItemList: [],
      // 号源信息
      sourcePoolList: [],
      // 七天内的号源数据
      sourcePoolData: [],
      // 申请单状态字典
      applyStateOptions: [],
      // 性别字典
      genderOptions: [],
      // 是否交费字典
      isPayOptions: [],
      currentIndex: 0,
      // 日历选中的当前日期
      currentDay: undefined,
      // 预约参数
      form: {},
      // 选中的检查项目信息
      selectExamItem: {},
      // 选中检查项目列表
      selectExamItemList: [],
      // 七天日期
      dateArr: [],
      // 七天中队列信息
      queueList: [],
      // 当前日期
      startDay: null,
      // 七天后日期
      endDay: null,
      isApply: false,
      visitType: [
        { id: "1", name: "门诊" },
        { id: "2", name: "住院" },
        { id: "3", name: "体检" },
      ],
    };
  },
  created() {
    this.initApplyInfo();
    this.getDayAndQTDay();
    this.getDicts("apply_status").then((response) => {
      this.applyStateOptions = response.data;
    });
    this.getDicts("sys_user_sex").then((response) => {
      this.genderOptions = response.data;
    });
    this.getDicts("pay_status").then((response) => {
      this.isPayOptions = response.data;
    });
  },

  methods: {
    // 初始化申请单数据
    initApplyInfo() {
      let fromRouter = this.$store.getters.fromRouter;
      if (fromRouter == 1) {
        this.activePatientAndapplyInfo = this.$store.getters.applyInfo;
        this.examItemList.push(this.activePatientAndapplyInfo);
      } else if (fromRouter == 2) {
        this.activePatientAndapplyInfo = this.$store.getters.applyInfo;
        this.examItemList = this.activePatientAndapplyInfo.examItemList;
      } else {
        this.$router.push("/");
        return;
      }
      this.$nextTick(() => {
        this.$refs.examItemTable.setCurrentRow(this.examItemList[0]);
      });
    },
    // 初始化获取七天内的号源
    initsource_qt(option) {
      listSourcePoolToManage({
        timeFlag: "true",
        queueId: option.queueId,
        startExamDate: this.startDay,
        endExamDate: this.endDay,
      }).then((response) => {
        this.sourcePoolData = response.rows;
        this.dateArr.forEach((date) => {
          let source_sum = 0;
          let use_source_sum = 0;
          this.sourcePoolData.forEach((item) => {
            if (item.examDate == date) {
              source_sum += item.singleSourceCount;
              use_source_sum += item.reservedNum;
            }
          });
          this.queueList.push({
            id: option.id,
            sourceId: option.sourceId,
            applyNum: option.applyNum,
            visitTypeId: option.visitTypeId,
            reservationDate: option.reservationDate,
            itemCode: option.itemCode,
            outExamItemName: option.outExamItemName,
            timeSlot: option.reservationTimeSlot,
            positionCount: option.positionCount,
            isEmpty: option.isEmpty,
            title: option.examName,
            currentDay: date,
            sourceSum: source_sum,
            useSourceSum: use_source_sum,
            status: source_sum > use_source_sum,
          });
        });
      });
    },
    /** 查询检查申请单列表 */
    getApplyInfo() {
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        patientName: this.activePatientAndapplyInfo.patientName,
        applyNum: this.selectExamItem.applyNum,
      };
      listApply(queryParams).then((response) => {
        this.activePatientAndapplyInfo = response.rows[0];
        this.$store.dispatch(
          "apply/setApplyInfo",
          this.activePatientAndapplyInfo
        );
        this.examItemList = [];
        this.examItemList.push(this.activePatientAndapplyInfo);
        this.$refs.examItemTable.setCurrentRow(
          this.examItemList[this.selectExamItem.index]
        );
      });
    },
    // 点击项目单元操作
    handleCurrentChange(row) {
      this.selectExamItem = row;
      this.activeName = this.selectExamItem.applyNum;
      // this.getDataAndSource();
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 选中项目单元操作
    handleSelectionChange(select) {
      this.selectExamItemList = select;
      this.sourcePoolList = [];
      this.queueList = [];
      this.selectExamItemList.forEach((item) => {
        if (item.queueId != null) {
          this.initsource_qt(item);
        }
      });
    },
    // 点击日历单元格操作
    handleCalendarValue(queue) {
      this.sourcePoolList = queue.map((item) => {
        let arr = this.sourcePoolData.filter(
          (data) => data.examDate == item.currentDay
        );
        let currentIndex = null;
        arr.forEach((value, index) => {
          if (item.timeSlot == value.timeSlot) {
            currentIndex = index;
          }
        });
        return {
          currentIndex: currentIndex,
          list: arr,
          ...item,
        };
      });
      // this.initsource(this.selectExamItem.queueId, data.day);
    },
    // 获取当前时间和号源信息
    getDataAndSource() {
      if (this.selectExamItem.reservationDate != "") {
        this.calendarValue = new Date(this.selectExamItem.reservationDate);
        this.currentDay = this.selectExamItem.reservationDate;
        this.initsource(
          this.selectExamItem.queueId,
          this.selectExamItem.reservationDate
        );
      }
    },
    // 获取号源信息
    initsource(queue, day) {
      this.sourcePoolList = [];
      if (queue == null) {
        return;
      }
      listSourcePoolToManage({
        timeFlag: "true",
        queueId: queue,
        examDate: day,
      }).then((response) => {
        this.sourcePoolList = response.rows;
        this.sourcePoolList.forEach((value, index) => {
          if (this.selectExamItem.reservationTimeSlot == value.timeSlot) {
            this.currentIndex = index;
          }
        });
      });
    },
    // 申请单状态字典翻译
    applyStateFormat(row, column) {
      return this.selectDictLabel(this.applyStateOptions, row.applyState);
    },
    // 性别字典翻译
    genderFormat(gender) {
      return this.selectDictLabel(this.genderOptions, gender);
    },
    // 是否交费字典翻译
    isPayFormat(row) {
      return this.selectDictLabel(this.isPayOptions, row.isPay);
    },
    // 是否为七天以内的日期
    isDayFormat(date) {
      let currentDate = new Date(date.day);
      let toDay = new Date();
      toDay.setDate(toDay.getDate() - 1);
      let to_qt_day = new Date();
      to_qt_day.setDate(to_qt_day.getDate() + 7);
      return currentDate >= toDay && currentDate <= to_qt_day;
    },
    // 在日历单元格中显示检查类型
    formatQueueList(data) {
      return this.queueList.filter((item) => item.currentDay == data.day);
    },
    // 选中申请单标签操作
    handleApplyClick(tab, event) {
      this.$refs.examItemTable.setCurrentRow(this.examItemList[tab.index]);
    },
    // 当前时间以前的号源应该不可以选中
    isDisabledFormat(value, currentDay) {
      let now = new Date();
      let timeSlotEnd = value.timeSlot.split("-")[1];
      let buttonTime = new Date(currentDay + " " + timeSlotEnd + ":00");
      if (now >= buttonTime) {
        return true;
      } else {
        return false;
      }
    },
    // 预约时间+预约时间段
    reservationDateFormat(row, column) {
      return row.reservationDate + " " + row.reservationTimeSlot;
    },
    // 点击时段按钮操作
    handleSourcePool(option1, option2) {
      this.setForm(option1, option2);
    },
    // 设置添加参数
    setForm(option1, option2) {
      if (!(JSON.stringify(option1) == "{}")) {
        this.form.id = option2.id;
        this.form.sourceId = option2.sourceId;
        this.form.phone = option2.phone;
        this.form.applyNum = option2.applyNum;
        this.form.visitTypeId = option2.visitTypeId;
        this.form.useReservationDate = option2.reservationDate;
        this.form.itemCode = option2.itemCode;
        this.form.outExamItemName = option2.outExamItemName;
        this.form.useReservationTime = option2.reservationTimeSlot;
        this.form.positionCount = option2.positionCount;
        this.form.isEmpty = option2.isEmpty;
        this.form.primaryDate =
          option2.reservationDate + " " + option2.reservationTimeSlot;

        this.form.reservationDate = option1.examDate;
        this.form.reservationTimeSlot = option1.timeSlot;
        this.form.reservationNum = option1.reservationSerialNum;
        this.form.timeFrame = option1.timeFrame;
        this.form.queueId = option1.queueId;
        this.form.examTypeId = option1.examTypeId;

        this.isApply = true;

        if (this.form.visitTypeId != "3") {
          switch (this.form.visitTypeId) {
            //门诊
            case "1":
              if (option1.outSourceCount >= option1.outNumSourceCount) {
                this.applyFlag = true;
              } else {
                this.applyFlag = false;
              }

              break;
            //住院
            case "2":
              if (option1.inSourceCount >= option1.inNumSourceCount) {
                this.applyFlag = true;
              } else {
                this.applyFlag = false;
              }
              break;
            default:
              break;
          }
          //体检
        } else {
          if (option1.phySourceCount >= option1.phyNumSourceCount) {
            this.applyFlag = true;
          } else {
            this.applyFlag = false;
          }
        }
      }
    },
    // 双击时间段按钮事件操作
    dbhandleSourcePool(option1, option2) {
      this.setForm(option1, option2);
      if (this.applyFlag) {
        this.$message({
          showClose: true,
          message: "该时段号源已满，请选择其他时段！",
          type: "warning",
        });
        return;
      }
      var myDate = new Date(this.form.reservationDate);
      var str = "星期" + "日一二三四五六".charAt(myDate.getDay());
      let message =
        "确定预约" +
        this.form.primaryDate +
        " " +
        str +
        " " +
        this.selectExamItem.examName +
        " " +
        this.selectExamItem.outExamItemName;
      this.$confirm(message, "预约", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      })
        .then(() => {
          return this.modifyApply();
        })
        .catch(() => {});
    },
    // 预约按钮操作
    modifyApply() {
      if (this.applyFlag) {
        this.$message({
          showClose: true,
          message: "该时段号源已满，请选择其他时段！",
          type: "warning",
        });
        return;
      }
      changeApply(this.form).then((res) => {
        this.getApplyInfo();
        this.sourcePoolList = [];
        this.msgSuccess("预约成功");
      });
    },
    // 取消预约操作
    cancelApplys() {
      let id = this.activePatientAndapplyInfo.id;
      let applyNum = this.activePatientAndapplyInfo.applyNum;
      this.$confirm("确认取消预约?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return cancelApply({
            id: id,
            applyNum: applyNum,
          });
        })
        .then(() => {
          this.getApplyInfo();
          // this.cancel();
          this.msgSuccess("取消成功");
        })
        .catch(function () {});
    },
    cancel() {
      this.form = {};
      //关闭当前页 跳转上一页
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      );
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      );
    },

    // 获取当前日期和七天后日期
    getDayAndQTDay() {
      var now = new Date();
      var nowTime = now.getTime();
      var oneDayTime = 24 * 60 * 60 * 1000;
      for (let i = 0; i <= 7; i++) {
        var ShowTime = nowTime + i * oneDayTime;
        var myDate = new Date(ShowTime);
        var year = myDate.getFullYear();
        var month = myDate.getMonth() + 1;
        var date = myDate.getDate();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        let dateStr = year + "-" + month + "-" + date;
        this.dateArr.push(dateStr);
      }
      this.startDay = this.dateArr[0];
      this.endDay = this.dateArr[7];
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-bottom: 25px;
}

.box-card ::v-deep .el-tabs__item {
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.partOfInfo {
  font-size: 14px;
  font-weight: bold;
}
.tap_name {
  color: #c0c0c0;
  margin-right: 10px;
  font-weight: normal;
}
.lefe-calendar ::v-deep .el-calendar__body {
  padding: 12px 20px 10px;
}
.lefe-calendar ::v-deep .el-calendar-table .el-calendar-day {
  height: 50px;
}
.lefe-calendar ::v-deep .el-calendar-table .el-calendar-day {
  padding: 0px;
}
.timeFrame_button_style {
  margin-bottom: 4px;
}

.timeFrame_button_style ::v-deep .el-button--medium {
  font-size: calc(100vw * 16 / 1920);
  width: 90%;
}

.timeFrame_button_style ::v-deep .el-button:active,
.el-button:hover,
.el-button:focus {
  color: #07a072 !important;
  border-color: #e2e1e1 !important;
  outline: none !important;
  border-style: outset;
  border-width: 1px;
}

.calender_item {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 2px;
  position: relative;
  background-color: #e2e2e259;
}
.is_calender_item {
  background-color: rgb(255, 255, 255);
}
.active {
  border-color: #e67416 !important;
  outline: none !important;
  background-color: #e6741662 !important;
  color: #fff;
}

.hasSourceCount {
  border-color: #0eb91d;
  outline: none;
  background-color: #0dad1b6e;
  color: #fff;
}

.lefe-calendar ::v-deep .el-calendar-day {
  //color: rgb(117, 117, 117);
  text-align: right;
}

.lefe-calendar ::v-deep .current {
  position: relative;
}

.lefe-calendar ::v-deep .is-today::before {
  content: "今";
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 10px;
  color: #fff;
  border-radius: 50%;
  background-color: #1890ff;
  padding: 2px;
  z-index: 50;
}

.is_havSource {
  width: 90%;
  display: flex;
  position: absolute;
  bottom: 4px;
  left: 4px;
  overflow: hidden;
}
.is_havSource .source_name {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  color: #fff;
  padding: 3px;
  background-color: #10ddb1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  margin-right: 3px;
}

.calender_item .is_select {
  position: absolute;
  bottom: 2px;
  right: 2px;
  color: #fff;
  font-size: 14px;
  z-index: 100;
}

.is_triangle {
  width: 0;
  height: 0;
  border-bottom: 30px solid rgb(243, 159, 4);
  border-left: 30px solid transparent;
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 9;
}
</style>
