<template>
  <page-layer>
    <template #header>
      <el-date-picker
          v-model="dateRange"
          :shortcuts="maxHalfYear"
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          style="width: 260px"
          type="daterange"
      ></el-date-picker>
      <el-select v-model="overviewParam.ward" clearable filterable placeholder="请选择科室" style="width: 130px">
        <el-option v-for="item in userWards" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-select v-model="overviewParam.fileStatus" style="width: 90px">
        <el-option label="未签收" value="0"></el-option>
        <el-option label="已签收" value="1"></el-option>
      </el-select>
      <el-select v-model="overviewParam.lateFlag" style="width: 90px">
        <el-option label="全部" value="3"></el-option>
        <el-option label="迟交" value="1"></el-option>
        <el-option label="未迟交" value="0"></el-option>
      </el-select>
      <el-input v-model="overviewParam.bah" clearable placeholder="住院号" style="width: 110px"></el-input>
      <el-button icon="Search" type="primary" @click="searchPatient">检索</el-button>
      <el-button icon="Check" type="primary" @click="archiveBa">签收</el-button>
      <el-button icon="Operation" type="primary" @click="showAdvanceSearch = true">高级条件检索</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-dropdown trigger="click" type="primary" @command="handleCommand">
        <el-button type="primary">功能菜单<i class="el-icon-arrow-down el-icon--right"></i></el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="unSign" icon="Link">解除签收</el-dropdown-item>
            <el-dropdown-item command="dismissCount" divided icon="OfficeBuilding">出院患者统计</el-dropdown-item>
            <el-dropdown-item command="exportLateData" icon="Clock">导出迟交病案</el-dropdown-item>
            <el-dropdown-item command="exportUnsignedData" icon="Files">导出未签收病案</el-dropdown-item>
            <el-dropdown-item command="print1" divided icon="Printer">打印正面</el-dropdown-item>
            <el-dropdown-item command="print2" icon="Printer">打印反面</el-dropdown-item>
            <el-dropdown-item command="quality" divided icon="DataLine">病案质控</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
    <template #aside>
      <el-table :data="overview.slice((currentPage - 1) * 15, currentPage * 15)" :height="tableHeight"
                highlight-current-row stripe @row-click="fetchSheetInfo">
        <el-table-column label="姓名" width="70">
          <template #default="scope">
            <img :src="scope.row.sex === 1 ? maleIcon : femaleIcon" class="sex-icon"/>
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="住院号-次数" width="80">
          <template #default="scope">
              <span style="font-weight: bold; color: black">{{ scope.row.bah }}</span
              >-{{ scope.row.times }}
          </template>
        </el-table-column>
        <el-table-column label="医生" prop="doctorName" width="60"></el-table-column>
        <el-table-column label="签收日期" prop="signDate"></el-table-column>
      </el-table>
      <el-pagination :page-size="15"
                     :total="overview.length"
                     layout="total, pager"
                     small
                     @current-change="handleCurrentPageChange">
      </el-pagination>
    </template>
    <template #main>
      <div :style="mainInfo">
        <div id="headpage">
          <HeadPage :dics="dics" :patient="sheet"/>
        </div>
        <div id="tailpage" style="margin-left: 70px">
          <TailPage :dics="dics" :patient="sheet"/>
        </div>
      </div>

      <el-drawer v-model="showMessageDrawer" title="首页签收校验结果">
        <div class="page-inner">
          <div v-if="forceVerifies.length === 0 && adviceVerifies.length === 0" class="no-verify-message">暂无校验内容
          </div>
          <div v-show="forceVerifies.length > 0" style="padding: 8px 0 4px 0; font-weight: bold">
            以下条目为强制要求，请完善。
          </div>
          <div v-for="(item, index) in forceVerifies" :key="index" :style="messageColor(index)" class="message-item"
               @click="currentMessageIndex = index">
            {{ index + 1 }}、{{ item.name }}
          </div>
          <div v-show="adviceVerifies.length > 0" style="padding: 8px 0 4px 0; font-weight: bold">
            以下条目为建议执行，不做强制要求。
          </div>
          <div v-for="(item, index) in adviceVerifies" :key="index"
               style="padding: 6px; margin-bottom: 6px; border-radius: 4px; background: #eea7a752; color: #ff2b2b">
            {{ index + 1 }}、{{ item.name }}
          </div>
        </div>
      </el-drawer>
      <div class="rightside-btn" @click="showMessageDrawer = !showMessageDrawer">首页签收校验结果</div>
      <el-dialog v-model="showAdvanceSearch" title="高级条件检索" width="380px">
        <div style="margin-top: 10px">
          <el-tag type="info">病案条件</el-tag>
          <div style="margin-top: 5px; display: flex">
            &nbsp;&nbsp;病例分型：
            <el-checkbox-group v-model="advanceSearch.blfxChkbox">
              <el-checkbox label="1">A</el-checkbox>
              <el-checkbox label="2">B</el-checkbox>
              <el-checkbox label="3">C</el-checkbox>
              <el-checkbox label="4">D</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div style="margin-top: 10px">
          <el-tag type="info">医生条件</el-tag>
          <div style="margin-top: 5px">
            &nbsp;&nbsp;医生姓名：
            <el-input v-model="advanceSearch.doctorName" clearable style="width: 160px"
                      @click="showSearchData('advanceSearchDoctor')"></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <el-tag type="info">患者条件</el-tag>
          <div style="margin-top: 5px">
            &nbsp;&nbsp;医疗类别：
            <el-select v-model="advanceSearch.medType" clearable style="width: 160px; margin-left: -4px">
              <el-option v-for="item in frontSheetMedTypes" :key="item.code" :label="item.name"
                         :value="item.code"></el-option>
            </el-select>
          </div>
          <div style="margin-top: 5px">
            &nbsp;&nbsp;诊断编码：
            <el-input v-model="advanceSearch.icdCode" clearable style="width: 160px"
                      @click="showSearchData('advanceSearchDiag')"></el-input>
          </div>
          <div style="margin-top: 5px">
            &nbsp;&nbsp;手术编码：
            <el-input v-model="advanceSearch.surgeryCode" clearable style="width: 160px"
                      @click="showSearchData('advanceSearchSurgery')"></el-input>
          </div>
          <div style="margin-top: 5px">
            &nbsp;&nbsp;患者性别：
            <el-select v-model="advanceSearch.sex" clearable style="width: 160px; margin-left: -4px">
              <el-option v-for="item in dics.getSexCode" :key="item.code" :label="item.name"
                         :value="item.code"></el-option>
            </el-select>
          </div>
        </div>
        <div style="width: 100%; text-align: right; margin-top: 20px">
          <el-button icon="Search" type="primary" @click="doAdvanceSearch">开始检索</el-button>
        </div>
      </el-dialog>

      <el-dialog v-model="showSearch" title="数据搜索" width="700px">
        检索依据：
        <el-select v-model="searchMethod" style="width: 100px">
          <el-option v-for="item in searchMethods" :key="item.code" :label="item.name" :value="item.code"></el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp; 搜索内容：
        <el-input ref="searchInput" v-model="searchContent" clearable placeholder="请输入搜索内容" prefix-icon="Search"
                  style="width: 160px" @input="executeSearch"></el-input>
        <el-table :data="searchResults" height="400" highlight-current-row stripe @row-click="handleSelectSearch">
          <el-table-column label="编码" prop="code" width="200"></el-table-column>
          <el-table-column label="名称" prop="name" width="450"></el-table-column>
        </el-table>
        <div style="margin-top: 15px; width: 100%; text-align: right">
          <el-button :disabled="currentSRPage === 1" icon="ArrowLeft" type="primary" @click="lastPage">上一页
          </el-button>
          <el-button :disabled="currentSRPage > 1 && searchResults.length < 10" icon="ArrowRight" type="primary"
                     @click="nextPage">下一页
          </el-button>
        </div>
      </el-dialog>
      <el-dialog v-model="showDismissCount" title="出院患者统计" width="70%">
        <el-date-picker v-model="disCountParams.month" :clearable="false" placeholder="请选择" style="width: 110px"
                        type="month"></el-date-picker>
        <el-select v-model="disCountParams.type" style="width: 120px" @change="dismissCountdata = []">
          <el-option :value="1" label="按科室计数"></el-option>
          <el-option :value="2" label="按明细计数"></el-option>
          <el-option :value="3" label="死亡患者计数"></el-option>
        </el-select>
        <el-select v-model="disCountParams.dept" :disabled="disCountParams.type === 1" clearable filterable
                   placeholder="请选择科室" style="width: 130px">
          <el-option v-for="item in userWards" :key="item.code" :label="item.name" :value="item.code"></el-option>
        </el-select>
        <el-divider direction="vertical"></el-divider>
        <el-button icon="Search" type="primary" @click="fetchDismissCount">获取统计数据</el-button>
        <el-button icon="Download" type="primary" @click="exportDismissCount">导出Excel</el-button>
        <div v-if="disCountParams.type === 1">
          <el-table :data="dismissCountdata" height="360" stripe>
            <el-table-column label="科室" prop="deptName"></el-table-column>
            <el-table-column label="出院人数" prop="dismissCount"></el-table-column>
            <el-table-column label="已签收" prop="signedCount"></el-table-column>
            <el-table-column label="未签收" prop="unsignCount"></el-table-column>
          </el-table>
        </div>
        <div v-else>
          <el-table :data="dismissCountdata.slice((currentDismissCountPage - 1) * 10, currentDismissCountPage * 10)"
                    height="360" stripe>
            <el-table-column label="住院号" prop="patNo"></el-table-column>
            <el-table-column label="住院次数" prop="times"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="性别" prop="gender"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column label="入院时间" prop="admissDate"></el-table-column>
            <el-table-column v-if="disCountParams.type === 2" label="出院时间" prop="disDate"></el-table-column>
            <el-table-column v-if="disCountParams.type === 3" label="死亡时间" prop="disDate"></el-table-column>
            <el-table-column label="住院天数" prop="inHospDays"></el-table-column>
            <el-table-column label="住院费用" prop="totalCharge"></el-table-column>
            <el-table-column label="入院科室" prop="admissDept"></el-table-column>
            <el-table-column label="出院科室" prop="disDept"></el-table-column>
            <el-table-column label="转科科室" prop="zkWard"></el-table-column>
            <el-table-column label="出院主诊断" prop="disDiag"></el-table-column>
            <el-table-column label="病例分型" prop="blfx"></el-table-column>
            <el-table-column label="科主任" prop="kzr"></el-table-column>
            <el-table-column label="主治医师" prop="zzys"></el-table-column>
            <el-table-column label="住院医师" prop="zyys"></el-table-column>
            <el-table-column label="法定传染病" prop="fdcrb"></el-table-column>
          </el-table>
          <el-pagination
              :hide-on-single-page="false"
              :page-size="10"
              :total="dismissCountdata.length"
              layout="prev, pager, next, total"
              @current-change="handleCurrentDismissCountPageChange"
          >
          </el-pagination>
        </div>
      </el-dialog>
      <el-dialog v-model="showSheetQuality" title="病案质控" width="70%">
        <SheetQuality/>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script name="AllCaseFrontSheet" setup>
import {autopsies, haveOrNot, searchMethods, yesOrNo} from './common'
import {onActivated, onMounted, reactive, watchEffect} from 'vue'
import store from '@/store'
import {frontSheetMedTypes, operations} from '@/data'
import {
  analyzeDismissCount,
  basOutPatients,
  executeAdvanceSearch,
  executePrintVerify,
  executeSaveVerify,
  executeUnArchiveBa,
  getAllDictionary,
  getAllWards,
  getSheetInfo,
  sheetSearch,
} from '@/api/case-front-sheet'
import maleIcon from '@/assets/male-icon.png'
import femaleIcon from '@/assets/female-icon.png'
import {ElMessage, ElMessageBox} from 'element-plus'
import {maxHalfYear} from '@/data/shortcuts'
import {formatDate, formatMonth, getOneMonthOffset} from '@/utils/date'
import {getLodop, initLodop} from '@/utils/c-lodop'
import HeadPage from '../../../components/inpatient/frontsheet-printpage/HeadPage.vue'
import TailPage from '../../../components/inpatient/frontsheet-printpage/TailPage.vue'
import {Export} from '@/utils/ExportExcel'
import SheetQuality from '@/components/inpatient/CaseFrontSheetQuality.vue'
import PageLayer from "@/layout/PageLayer";

let showSheetQuality = $ref(false)
let currentPage = $ref(1)
const handleCurrentPageChange = (val) => {
  currentPage = val
}
let userWards = $ref([])
const windowSize = store.state.app.windowSize
const tableHeight = windowSize.h - 50
let overview = $ref([])
let sheet = $ref({
  disdiagList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
  surgeryList: [{}, {}, {}, {}, {}],
})
const mainInfo = {
  height: windowSize.h - 45 + 'px',
  padding: '0 20px',
  overflowY: 'scroll',
}
let dics = $ref({})
const overviewParam = reactive({
  ward: '',
  start: '',
  end: '',
  fileStatus: '0',
  lateFlag: '3',
  bah: '',
})
let isLateDataMode = $ref(false)
let isUnsignedMode = $ref(false)
const searchPatient = () => {
  overviewParam.start = formatDate(dateRange[0])
  overviewParam.end = formatDate(dateRange[1])
  basOutPatients(overviewParam).then((res) => {
    isLateDataMode = overviewParam.lateFlag === '1'
    isUnsignedMode = overviewParam.fileStatus === '0'
    overview = res.list
    if (res.list.length === 1) {
      fetchSheetInfo(res.list[0])
    }
  })
}

let dateRange = $ref([])

const fetchSheetInfo = (row) => {
  if (row.bah !== sheet.bah || row.times !== sheet.admissTimes) {
    forceVerifies = []
    adviceVerifies = []
  }
  row.inOutFlag = 2
  getSheetInfo(row).then((res) => {
    sheet = res
  })
}

let showSearch = $ref(false)
let insertDiag = $ref(false)
watchEffect(() => {
  if (showSearch) {
    searchResults = []
    setTimeout(() => {
      searchInput.focus()
    }, 300)
  } else {
    insertDiag = false
  }
})
let searchInput = $ref(null)
let searchUrl = $ref('')
let searchTargetCode = $ref('')
let searchTargetName = $ref('')
let searchContent = $ref('')
let currentSRPage = $ref(1)
const lastPage = () => {
  currentSRPage -= 1
  fetchSearchData()
}
const nextPage = () => {
  currentSRPage += 1
  fetchSearchData()
}
const fetchSearchData = () => {
  const param = {
    method: searchMethod,
    target: searchUrl,
    content: searchContent,
    responceType: sheet.responceType,
    page: currentSRPage,
    ybType: sheet.ybType,
    treatType: sheet.treatType,
  }
  sheetSearch(param).then((res) => {
    searchResults = res
  })
}
const executeSearch = () => {
  if (searchContent.length < 2 && searchContent !== '-') return
  currentSRPage = 1
  if (searchContent === '-') {
    searchResults = [{code: '-', name: '-'}]
  } else {
    fetchSearchData()
  }
}

let showDismissCount = $ref(false)
let dismissCountdata = $ref([])
const disCountParams = reactive({
  month: formatMonth(new Date()),
  type: 1,
  dept: null,
})
const fetchDismissCount = () => {
  disCountParams.month = formatMonth(disCountParams.month)
  analyzeDismissCount(disCountParams).then((res) => {
    dismissCountdata = res
  })
}
const exportDismissCount = () => {
  if (dismissCountdata.length === 0) {
    ElMessage({
      message: '没有可以导出的数据！',
      type: 'warning',
      duration: 2000,
      showClose: true,
    })
    return
  }
  let name = ''
  let title = {}
  if (disCountParams.type === 1) {
    title = {
      deptName: '科室',
      dismissCount: '出院人数',
      signedCount: '已签收',
      unsignCount: '未签收',
    }
    name = '科室出院人数统计'
  } else {
    title = {
      patNo: '住院号',
      times: '住院次数',
      name: '姓名',
      gender: '性别',
      age: '年龄',
      admissDate: '入院时间',
      admissDept: '入院科室',
      zkWard: '转科科室',
      disDate: disCountParams.type === 2 ? '出院时间' : '死亡时间',
      inHospDays: '住院天数',
      totalCharge: '住院费用',
      disDept: '出院科室',
      disDiag: '出院主诊断',
      blfx: '病例分型',
      kzr: '科主任',
      zzys: '主治医师',
      zyys: '住院医师',
      fdcrb: '法定传染病',
    }
    name = disCountParams.type === 2 ? '出院明细统计' : '死亡患者统计'
  }
  const fileName = `【${disCountParams.month}】${name}`
  Export(dismissCountdata, title, fileName)
}
const handleCommand = (val) => {
  switch (val) {
    case 'dismissCount':
      showDismissCount = true
      break
    case 'exportLateData':
      exportSpecialDataExel(1)
      break
    case 'exportUnsignedData':
      exportSpecialDataExel(2)
      break
    case 'print1':
      beforePrint(1)
      break
    case 'print2':
      beforePrint(2)
      break
    case 'unSign':
      unArchiveBa()
      break
    case 'quality':
      showSheetQuality = true
      break
  }
}

const exportSpecialDataExel = (flag) => {
  if (flag === 1) {
    if (!isLateDataMode) {
      ElMessage({
        message: '请先查询迟交病案。',
        type: 'warning',
        duration: 2500,
        showClose: true,
      })
      return
    }
  } else {
    if (!isUnsignedMode) {
      ElMessage({
        message: '请先查询未签收病案。',
        type: 'warning',
        duration: 2500,
        showClose: true,
      })
      return
    }
  }
  if (overview.length === 0) {
    ElMessage({
      message: '没有可以导出的数据！',
      type: 'warning',
      duration: 2000,
      showClose: true,
    })
    return
  }
  const fields = {
    name: '姓名',
    genderName: '性别',
    bah: '住院号',
    times: '住院次数',
    bedNo: '床位',
    admissDate: '入院时间',
    disDate: '出院时间',
    deptName: '出院科室',
    doctorName: '管床医生',
  }
  if (flag === 1) {
    fields.lateDays = '迟交天数'
    fields.signDate = '签收日期'
  }
  Export(overview, fields, flag === 1 ? '迟交病案' : '未签收病案')
}

let searchMethod = $ref('alpha')
let searchResults = $ref([])
const showSearchData = (flag) => {
  if (flag === 'advanceSearchDoctor') {
    searchUrl = 'employee'
    searchTargetCode = 'advanceSearch'
    searchTargetName = 'doctor'
  } else if (flag === 'advanceSearchDiag') {
    searchUrl = 'normalDiag'
    searchTargetCode = 'advanceSearch'
    searchTargetName = 'icd'
  } else {
    searchUrl = 'surgery'
    searchTargetCode = 'advanceSearch'
    searchTargetName = 'surgery'
  }
  showSearch = true
}

let showAdvanceSearch = $ref(false)
const advanceSearch = reactive({
  blfxChkbox: [],
  medType: '',
  doctorCode: '',
  doctorName: '',
  icdCode: '',
  icdName: '',
  surgeryCode: '',
  surgeryName: '',
  sex: null,
})
const doAdvanceSearch = () => {
  advanceSearch.start = formatDate(dateRange[0])
  advanceSearch.end = formatDate(dateRange[1])
  console.log(advanceSearch)
  if (!advanceSearch.doctorName) {
    advanceSearch.doctorCode = ''
  }
  executeAdvanceSearch(advanceSearch).then((res) => {
    overview = res
    showAdvanceSearch = false
  })
}

const handleSelectSearch = (item) => {
  switch (searchTargetName) {
    case 'doctor':
      advanceSearch.doctorCode = item.code
      advanceSearch.doctorName = item.name
      break
    case 'icd':
      advanceSearch.icdCode = item.code
      advanceSearch.icdName = item.name
      break
    case 'surgery':
      advanceSearch.surgeryCode = item.code
      advanceSearch.surgeryName = item.name
      break
  }
  searchContent = ''
  showSearch = false
}

const nullPatient = () => {
  if (!sheet.bah) {
    ElMessage({
      message: '请先选择患者！',
      type: 'warning',
      duration: 2500,
      showClose: true,
    })
    return true
  }
  return false
}

let showMessageDrawer = $ref(false)
const beforePrint = (flag) => {
  if (nullPatient()) return
  const param = {
    sheet: sheet,
    opType: 2,
  }
  executePrintVerify(param)
      .then(() => {
        execPrint(flag)
      })
      .catch((e) => {
        forceVerifies = e.data.force
        adviceVerifies = e.data.advice
        showMessageDrawer = true
        if (e.data.force.length === 0) {
          execPrint(flag)
        }
      })
}
const execPrint = (flag) => {
  LODOP = getLodop()
  const prntStyle = `<style>*{font-size:10pt} table,th,td {border: 1px solid black;border-collapse: collapse;} td,th {height: 24px;padding-left: 4px;}</style>`
  const prntContent = flag === 1 ? document.getElementById('headpage').innerHTML : document.getElementById('tailpage').innerHTML
  let pagePrint = prntStyle + '<body>' + prntContent + '</body>'
  LODOP.PRINT_INIT('casefrontsheet')
  LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
  LODOP.SET_PRINT_MODE('FULL_WIDTH_FOR_OVERFLOW', true) // 整宽不变形
  LODOP.ADD_PRINT_HTM('2mm', '0.5mm', '209.5mm', '295mm', pagePrint)
  LODOP.SET_PRINT_STYLE('ItemType', 3)
  LODOP.PREVIEW()
}

const archiveBa = () => {
  if (nullPatient()) {
    return
  }
  const param = {
    opType: 2,
    sheet: sheet,
  }
  executeSaveVerify(param).then(() => {
    ElMessage({
      message: '操作成功。',
      type: 'success',
      duration: 2500,
      showClose: true,
    })
  }).catch((e) => {
    forceVerifies = e.data
    showMessageDrawer = true
  })
}

const unArchiveBa = () => {
  if (nullPatient()) {
    return
  }

  ElMessageBox.confirm('是否确认解除签收患者【' + sheet.name + '】的病案首页？', '提示', {
    type: 'warning',
    confirmButtonText: '解除签收',
    cancelButtonText: '取消',
  })
      .then(() => {
        const param = {
          opType: 3,
          sheet: sheet,
        }
        executeUnArchiveBa(param).then((res) => {
          ElMessage({
            message: res,
            type: 'success',
            duration: 2500,
            showClose: true,
          })
        })
      })
      .catch(() => {
      })
}

let forceVerifies = $ref([])
let adviceVerifies = $ref([])
let currentMessageIndex = $ref(null)
const messageColor = (id) => {
  return currentMessageIndex === id
      ? {
        background: '#ff2b2b',
        color: 'white',
      }
      : {
        background: '#eea7a752',
        color: '#ff2b2b',
      }
}

let currentDismissCountPage = $ref(1)
const handleCurrentDismissCountPageChange = (val) => {
  currentDismissCountPage = val
}

onActivated(() => {
  initLodop()
})

onMounted(() => {
  getAllDictionary().then((res) => {
    res.getOperations = operations
    res.getYesOrNo = yesOrNo
    res.getHaveOrNot = haveOrNot
    res.getAutopsies = autopsies
    dics = res
    getAllWards().then((res1) => {
      userWards = res1
      const t = getOneMonthOffset()
      dateRange[0] = t.start
      dateRange[1] = t.end
    })
  })
})
</script>

<style scoped>
:deep(.el-dialog__body) {
  padding-top: 0;
}

:deep(.el-drawer__header) {
  margin-bottom: 8px;
}

:deep(.el-checkbox) {
  margin-right: 15px;
}

:deep(.el-checkbox__label) {
  padding-left: 4px;
}

.page-inner {
  padding: 0 20px 10px 26px;
  border-radius: 12px;
  text-align: justify;
}

.message-item {
  padding: 6px;
  margin-bottom: 6px;
  border-radius: 4px;
}

.message-item:hover {
  cursor: pointer;
}

.rightside-btn {
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
  border-radius: 4px;
  width: 20px;
  height: 135px;
  position: fixed;
  background: rgb(238, 98, 5);
  top: 260px;
  right: 10px;
  cursor: pointer;
}

.no-verify-message {
  width: 100%;
  text-align: center;
  margin-top: 50px;
  font-size: 18px;
  color: gray;
}
</style>
