<!-- 不符合要求情况分析报告新建 -->
<script name="QualityNoAyalysisAdd" lang="ts" setup>
import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
import recordDialog from '@/views/quality/supervise/report/components/recordDialog.vue'
import { getDictByCode } from '@/api/system/dict'
import { getSearchDept } from '@/api/quality/supervise/record'
import useUserStore from '@/store/modules/user'
import { addQualityAnalyse, approvalDelete, cancelApproval, delteQualityAnalyse, detailQualityAnalyse, draftDelete, getQualityNoReportFile, refuseApproval, rejectApproval, submitQualityAnalyse, updateQualityAnalyse } from '@/api/quality/supervise/analysis'
import ApprovalDialog from '@/components/ApprovalCustom/ApprovalDialog.vue'
import { SCHEDULE } from '@/utils/scheduleDict'
import { AGREE, TASKNAME } from '@/views/quality/agree'
import { UploadFile, getPhotoUrl } from '@/api/file'
import { fetchApproval } from '@/api/approval'
import ApprovalOpinion from '@/views/quality/correct/handle/components/approvalOpinion.vue'
import selectUser from '@/views/quality/components/selectUser.vue'
import filePreview from '@/views/quality/supervise/record/components/filePreviewMultiple.vue'
import pdfFile from '@/views/quality/supervise/record/components/pdfFile.vue'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const approvalStatusName = $route.query.approvalStatusName as string
const ruleFormRef = ref<FormInstance>()
const localName = 'supervise-analyse-detail'
const decisionItem = ref('')
// 表单
const ruleForm = ref({
  bizLabCode: '',
  deptId: '',
  fileCode: '',
  fileName: '不符合要求情况分析报告',
  creatorName: '',
  creator: '',
  logTime: '',
  id: '',
  taskId: '',
  problem: '',
  record: {
    fileName: '',
    fileCode: '',
    id: '',
  },
  conformanceFileRels: [] as any[],
  superRecordId: '',
  groupNo: '',
})

const rules = ref<FormRules>({
  bizLabCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
  deptId: [{ required: true, message: '部门必选', trigger: ['blur', 'change'] }],
  logTime: [{ required: true, message: '时间必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则
// 获取字典值
const labelList = ref<{ id: string; value: string; name: string }[]>()// 实验室
const deptList = ref<{ deptName: string; deptId: string; groupNo: string }[]>([]) // 部门列表
const fetchDict = () => {
  // 获取实验室字典
  getDictByCode('bizLabCode').then((res) => {
    labelList.value = res.data
  })
  getSearchDept({ labCode: '' }).then((res) => {
    deptList.value = res.data
  })
}
fetchDict()
const watchFlag = ref(true)
watch(() => ruleForm.value.bizLabCode, (newVal) => {
  if (newVal) {
    if ($route.path.includes('detail') || watchFlag.value) { return }
    ruleForm.value.deptId = ''
    getSearchDept({ labCode: newVal }).then((res) => {
      deptList.value = res.data
    })
  }
  else {
    getSearchDept({}).then((res) => {
      deptList.value = res.data
    })
  }
}, {
  deep: true,
})
watch(() => ruleForm.value.deptId, (newVal) => {
  if ($route.path.includes('detail') || watchFlag.value) { return }
  ruleForm.value.groupNo = ''
  if (newVal) {
    ruleForm.value.groupNo = deptList.value.filter((item: any) => item.deptId === newVal)[0].groupNo
  }
})
// const qualityRecord = ref({
//   director: '', // 质量负责人
//   time1: '',
//   comment1: '', // 质量负责人意见
//   chairman: '', // 主任
//   time2: '',
//   comment2: '', // 主任意见
// })
const infoId = ref('')
onMounted(() => {
  if ($route.path.includes('create')) {
    watchFlag.value = false
    ruleForm.value.creator = userStore.id
    ruleForm.value.creatorName = userStore.name
    ruleForm.value.logTime = dayjs().format('YYYY-MM-DD HH:mm')
  }
  else {
    rules.value.fileCode = [{ required: true, message: '文件编号必填', trigger: ['blur', 'change'] }]
    detailQualityAnalyse({ id: $route.params.id as string }).then((res) => {
      if (sessionStorage.getItem(localName) && sessionStorage.getItem('supervise-analyse-detail-flag')) {
        ruleForm.value = JSON.parse(sessionStorage.getItem(localName) as string)
        infoId.value = ruleForm.value.id
      }
      else {
        ruleForm.value = res.data
        infoId.value = res.data.id
      }
      setTimeout(() => {
        watchFlag.value = false
      }, 500)
      nextTick(() => {
        ruleFormRef.value!.clearValidate()
      })
    })
  }
  decisionItem.value = $route.query.decisionItem as string
  // if ($route.path.includes('detail')) {
  //   // 获取审批详情
  //   if (approvalStatusName === '全部' || approvalStatusName === '草稿箱') {
  //     return
  //   }
  //   fetchApproval($route.query.processId as string).then((res) => {
  //     const arr = [] as any[]
  //     res.data.forEach((item: any) => {
  //       item.forEach((citem: any) => {
  //         arr.push(citem)
  //       })
  //     })
  //     // 质量负责人
  //     const director = arr.filter((item: any) => item.taskName.includes('质量负责人'))
  //     if (director.length) {
  //       qualityRecord.value.director = director[director.length - 1].assigneeName
  //       qualityRecord.value.time1 = director[director.length - 1].finishTime
  //       qualityRecord.value.comment1 = director[director.length - 1].comment.comment
  //     }
  //     // 计量站主任
  //     const chairman = arr.filter((item: any) => item.taskName.includes('记录测试站主任'))
  //     if (chairman.length) {
  //       qualityRecord.value.chairman = chairman[chairman.length - 1].assigneeName
  //       qualityRecord.value.time2 = chairman[chairman.length - 1].finishTime
  //       qualityRecord.value.comment2 = chairman[chairman.length - 1].comment.comment
  //     }
  //   })
  // }
})
onBeforeUnmount(() => {
  sessionStorage.removeItem('supervise-analyse-detail-flag')
})
// 质量监督记录弹窗
const recordRef = ref()
// 选择质量监督记录
const selectRecord = () => {
  recordRef.value.initDialog()
}
// 确认选择质量监督记录
const confirmRecord = (val: any) => {
  console.log(val, '选中')
  const data = val[0]
  ruleForm.value.problem = `${data.description}
${data.standard}`
  ruleForm.value.record = data
  ruleForm.value.superRecordId = data.id
  // val.forEach((ele: any) => {
  //   const data = JSON.parse(JSON.stringify(ele))
  //   for (const i in data) {
  //     console.log(data[i], '1111')
  //     if (typeof data[i] === 'object') {
  //       data[i] = []
  //     }
  //   }
  //   // problem
  //   ruleForm.value.record = ele
  //   ruleForm.value.superRecordId = ele.id
  // })
}

const createRow = () => {
  addQualityAnalyse({ ...ruleForm.value, record: {} }).then((res) => {
    ElMessage.success('操作成功')
    infoId.value = res.data
  })
}
const updateRow = () => {
  updateQualityAnalyse({ ...ruleForm.value, record: {}, id: infoId.value }).then((res) => {
    ElMessage.success('操作成功')
    // infoId.value = res.data
    if (approvalStatusName === '已取消' || approvalStatusName === '未通过') {
      handleSubmit()
    }
    if (approvalStatusName === '全部') {
      $router.go(-1)
    }
  })
}
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      if ($route.path.includes('create') && !infoId.value) {
        createRow()
      }
      else if ($route.path.includes('update') || infoId.value) {
        updateRow()
      }
    }
  })
}
// ---------------------------------------------审批--------------------------------------
const taskId = ref($route.query.taskId as string || '') // 任务id，用于同意、驳回、拒绝审批
const processId = ref($route.query.processId as string || '') // 流程实例id
const approvalDialog = ref() // 审批组件ref
const showApprovalButton = ref(true) // 是否展示审批按钮
// 审批结束回调
const approvalSuccess = () => {
  showApprovalButton.value = false
}
// 审批
const handleApprove = (val: string) => {
  if (val === '取消') {
    const params = {
      processInstanceId: processId.value!,
      comments: '',
      id: ruleForm.value.id,
    }
    ElMessageBox.confirm(
      '确认取消该审批吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        cancelApproval(params).then((res) => {
          ElMessage({
            type: 'success',
            message: '已取消',
          })
          showApprovalButton.value = false
        })
      })
  }
  else if (val === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value, ruleForm.value.id, processId.value!)
  }
  else if (val === '驳回') {
    approvalDialog.value.initDialog('reject', taskId.value, ruleForm.value.id, processId.value!)
  }
  else if (val === '拒绝') {
    approvalDialog.value.initDialog('refuse', taskId.value, ruleForm.value.id, processId.value!)
  }
}
// 拒绝
const refuse = (comments: string, taskId: string, id: string) => {
  const params = {
    id,
    taskId, // 任务id
    comments, // 拒绝原因
  }
  refuseApproval(params).then((res) => {
    ElMessage({
      type: 'success',
      message: '已拒绝',
    })
    showApprovalButton.value = false
  })
}
// 驳回
const reject = (comments: string, taskId: string, id: string) => {
  const param = {
    id,
    taskId, // 任务id
    comments, // 拒绝原因
  }
  rejectApproval(param).then((res) => {
    if (res.code === 200) {
      ElMessage.success('已驳回')
    }
    else {
      ElMessage.error(`驳回失败：${res.message}`)
    }
    showApprovalButton.value = false
  })
}
// 选择审批人
const userRef = ref()
// 点击提交
function handleSubmit() {
  if (infoId.value || ruleForm.value.id) {
    // 选择审批人
    userRef.value.initDialog()
  }
  else {
    ElMessage.warning('请先保存')
  }
}
// 确认审批人
const confirmUser = (data: any) => {
  // ruleForm.value.assignees = data
  submitQualityAnalyse({
    formId: SCHEDULE.NONCONFORMITY_ANALYSIS_APPROVAL,
    // processId: infoId.value,
    id: infoId.value || ruleForm.value.id,
    assignees: data,
  }).then(() => {
    ElMessage.success('提交成功')
    $router.go(-1)
  })
}
// 点击编辑
const handleEdit = () => {
  $router.push({
    path: `/superviseanalysis/update/${ruleForm.value.id}`,
    query: { ...$route.query },
  })
}
const del = () => {
  if (approvalStatusName === '草稿箱') {
    draftDelete({ id: ruleForm.value.id }).then(() => {
      ElMessage.success('已删除')
      $router.go(-1)
    })
  }
  else if (approvalStatusName === '已取消') {
    approvalDelete({ id: ruleForm.value.id, taskId: ruleForm.value.taskId }).then(() => {
      ElMessage.success('已删除')
      $router.go(-1)
    })
  }
  else if (approvalStatusName === '全部') { // 全部的删除
    delteQualityAnalyse({ id: ruleForm.value.id }).then(() => {
      ElMessage.success('已删除')
      $router.go(-1)
    })
  }
}
const closePage = () => {
  $router.go(-1)
  sessionStorage.removeItem(localName)
}
// 上传附件
const fileRef = ref() // 文件上传input，获取input的引用
const onFileChange = (event: any) => {
  // 原生上传
  if (event.target.files?.length !== 0) {
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    UploadFile(fd).then((res1) => {
      fileRef.value.value = ''
      if (res1.code === 200) {
        ElMessage.success('上传成功')
        getPhotoUrl(res1.data[0]).then((res) => {
          ruleForm.value.conformanceFileRels.push({
            fileName: res1.data[0],
            filePath: res.data,
          })
        })
      }
    })
  }
}
// 导入
const importList = () => {
  fileRef.value.click()
}
// 删除
const close = (index: number) => {
  ruleForm.value.conformanceFileRels.splice(index, 1)
}
// 质量监督记录详情
const goRecord = () => {
  // 先保存数据再跳转
  sessionStorage.setItem(localName, JSON.stringify(ruleForm.value))
  $router.push({
    path: '/superviserecord/detail',
    query: {
      status: '0',
      statusName: '全部',
      id: ruleForm.value.record.id,
    },
  })
}
const closeRecord = () => {
  ruleForm.value.record = {
    fileName: '',
    fileCode: '',
    id: '',
  }
}
const showMenu = ref('基本信息')
defineExpose({
  ruleForm, showMenu,
})
const { proxy } = getCurrentInstance() as any
const handlingSuggestions = ref('处理意见')
// const nextText = ref('')
const getApprovalRecord = (data: any[]) => {
  if (!data.length) {
    handlingSuggestions.value = '处理意见'
    return
  }
  if (data[data.length - 1].filter((item: any) => item.taskName.includes('质量负责人'))) {
    handlingSuggestions.value = '对问题的分析确认及处理意见'
  }
  else {
    handlingSuggestions.value = '处理意见'
  }
}

// 获取文件流
const file = ref()
const getFile = (fun: any) => {
  getQualityNoReportFile({
    id: $route.query.id,
    pdf: true,
  }).then((res) => {
    if (res.data.type.includes('json')) {
      ElMessage.error('文件获取失败')
      fun()
      return
    }
    file.value = res.data
    fun(res)
  }).catch(() => {
    fun()
    ElMessage.error('文件获取失败')
  })
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 监督记录弹窗 -->
    <record-dialog ref="recordRef" :is-multi="false" @add="confirmRecord" />
    <!-- 审批弹窗 -->
    <approval-dialog
      ref="approvalDialog" :title="handlingSuggestions" :last-name="TASKNAME.NONCONFORMITY_ANALYSIS_APPROVAL"
      :agree="AGREE.NONCONFORMITY_ANALYSIS_APPROVAL" :form-id="SCHEDULE.NONCONFORMITY_ANALYSIS_APPROVAL"
      :show-next-text="true" @send-approval-record="getApprovalRecord" @on-success="approvalSuccess" @refuse="refuse"
      @reject="reject"
    />
    <!-- 选择审批人 -->
    <select-user
      ref="userRef" :form-id="SCHEDULE.NONCONFORMITY_ANALYSIS_APPROVAL" :show-next-text="true"
      @confirm="confirmUser"
    />
    <detail-page title="不符合要求情况分析报告" class="info-header">
      <template #btns>
        <el-button
          v-if="$route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton && proxy.hasPerm('/quality/supervise/analysis/agree')"
          type="primary" @click="handleApprove('同意')"
        >
          同意
        </el-button>
        <el-button
          v-if="(`${decisionItem}` === '1' || `${decisionItem}` === '2') && $route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton && proxy.hasPerm('/quality/supervise/report/reject')"
          type="warning" @click="handleApprove('驳回')"
        >
          驳回
        </el-button>
        <el-button
          v-if="(`${decisionItem}` === '1' || `${decisionItem}` === '3') && $route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton && proxy.hasPerm('/quality/supervise/analysis/reject')"
          type="danger" @click="handleApprove('拒绝')"
        >
          拒绝
        </el-button>
        <el-button
          v-if="$route.path.includes('detail') && approvalStatusName === '审批中' && showApprovalButton && proxy.hasPerm('/quality/supervise/analysis/cancel')"
          type="info" @click="handleApprove('取消')"
        >
          取消
        </el-button>
        <!-- :disabled="!infoId" -->
        <el-button
          v-if="($route.path.includes('create') || ($route.path.includes('update') && approvalStatusName !== '未通过' && approvalStatusName !== '已取消' && approvalStatusName !== '全部')) && proxy.hasPerm('/quality/supervise/analysis/submit')"
          type="primary" @click="handleSubmit"
        >
          提交
        </el-button>
        <el-button
          v-if="approvalStatusName !== '已审批' && $route.path.includes('detail') && approvalStatusName === '未通过' && proxy.hasPerm('/quality/supervise/analysis/update')"
          type="primary" @click="handleEdit"
        >
          编辑
        </el-button>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button v-if="approvalStatusName === '已取消'" type="danger" @click="del">
          删除
        </el-button>
        <el-button type="info" @click="closePage">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-page v-if="approvalStatusName !== '草稿箱' && !$route.path.includes('create')" title="" class="info-radio">
      <el-radio-group v-model="showMenu">
        <el-radio-button label="基本信息" />
        <el-radio-button label="审批详情" />
      </el-radio-group>
    </detail-page>
    <div v-show="showMenu === '基本信息'">
      <el-form
        ref="ruleFormRef" :model="ruleForm" :class="$route.path.includes('detail') ? 'isDetail' : ''"
        :rules="rules" label-position="right" label-width="120px" class="form"
        :disabled="$route.path.includes('detail')"
      >
        <detail-block title="">
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="实验室" prop="bizLabCode">
                <el-select
                  v-model="ruleForm.bizLabCode" placeholder="实验室" class="short-input" filterable
                  style="width: 100%;"
                >
                  <el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="部门" prop="deptId">
                <el-select
                  v-model="ruleForm.deptId" placeholder="部门" class="short-input" filterable
                  style="width: 100%;"
                >
                  <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="文件编号" prop="fileCode">
                <el-input
                  v-model.trim="ruleForm.fileCode"
                  disabled
                  :placeholder="$route.path.includes('create') ? '系统自动生成' : ''"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="文件名称">
                <el-input v-model.trim="ruleForm.fileName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="质量监督员">
                <el-input v-model.trim="ruleForm.creatorName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="记录时间" prop="logTime">
                <el-date-picker
                  v-model="ruleForm.logTime" type="datetime" style="width: 100%;"
                  format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="12">
              <el-form-item label="关联质量监督记录" label-width="160px">
                <a v-if="ruleForm.record.fileName" type="primary" class="link" @click="goRecord">
                  {{ `${ruleForm.record.fileName}-${ruleForm.record.fileCode}` }}
                  <span
                    v-if="!$route.path.includes('detail')" class="close"
                    @click.stop.capture.prevent="closeRecord"
                  >x</span>
                </a>
                <el-button
                  v-if="!$route.path.includes('detail')" type="primary" style="margin-left: 10px;"
                  @click="selectRecord"
                >
                  选择
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </detail-block>
        <detail-block title="">
          <el-row :gutter="24" class="marg">
            <el-col :span="20">
              <el-form-item label="所发现问题">
                <el-input v-model="ruleForm.problem" type="textarea" :rows="5" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!(approvalStatusName === '全部' && $route.path.includes('detail'))" :gutter="24" class="marg">
            <el-col :span="20">
              <el-form-item label="问题文件附件">
                <a
                  v-for="(item, index) in ruleForm.conformanceFileRels" :key="item.fileName" class="link"
                  :href="item.filePath" type="primary" style="margin-right: 10px;" target="_blank"
                >
                  {{ item.fileName }}
                  <span
                    v-if="!$route.path.includes('detail')" class="close"
                    @click.stop.capture.prevent="close(index)"
                  >x</span>
                </a>
                <el-button v-if="!$route.path.includes('detail')" type="primary" @click="importList">
                  上传
                </el-button>
                <input
                  ref="fileRef" style="display: none;" type="file" accept=".doc,.docx,.pdf,.xls,.xlsx"
                  @change="onFileChange"
                >
              </el-form-item>
            </el-col>
          </el-row>
        </detail-block>
      </el-form>
      <!-- <el-form v-if="$route.path.includes('detail') && approvalStatusName !== '草稿箱' && approvalStatusName !== '全部'" :model="qualityRecord" :class="$route.path.includes('detail') ? 'isDetail' : ''" label-position="right" label-width="120px" class="form" :disabled="$route.path.includes('detail')">
        <detail-block title="">
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="质量负责人">
                <el-input v-model.trim="qualityRecord.director" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="时间">
                <el-input v-model.trim="qualityRecord.time1" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="20">
              <el-form-item label="对问题的分析确认及处理意见">
                <el-input v-model.trim="qualityRecord.comment1" :rows="3" type="textarea" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </detail-block>
        <detail-block title="">
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="计量测试站主任">
                <el-input v-model.trim="qualityRecord.chairman" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="时间">
                <el-input v-model.trim="qualityRecord.time2" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="20">
              <el-form-item label="意见">
                <el-input v-model.trim="qualityRecord.comment2" :rows="3" type="textarea" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </detail-block>
      </el-form> -->
      <approval-opinion
        v-show="showMenu === '基本信息' && approvalStatusName !== '草稿箱' && approvalStatusName !== '全部' && $route.path.includes('detail')"
        :file-list="[]" type="noConform"
      />
      <pdf-file
        v-if="$route.path.includes('detail') && (approvalStatusName === '待审批' || approvalStatusName === '审批中' || approvalStatusName === '已审批')"
        @get-file="getFile"
      />
    </div>
    <!-- 审批详情 -->
    <approval-record-table-custom v-if="showMenu === '审批详情'" :process-id="processId" />
  </app-container>
</template>

<style lang="scss" scoped>
// 详情页面隐藏小红点
.isDetail {
  ::v-deep {

    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before {
      content: "";
      display: none;
    }
  }
}

.info-radio {
  ::v-deep(.header) {
    display: none;
  }
}

.link {
  position: relative;
  color: #5d93ff;
  display: inline-block;
  font-size: 16px;
  text-decoration: none;
  // margin-right: 10px;
  padding-right: 10px;
  height: 33px;
  line-height: 33px;

  &:hover {
    text-decoration: underline;

    .close {
      display: block;
    }
  }

  .close {
    position: absolute;
    top: -20px;
    right: -10px;
    display: none;
    z-index: 99;
    height: 40px;
    width: 40px;
    color: rgb(121 118 115);
    // background-color: #ccc;
    text-align: center;
  }

  // &::before {
  //   content: "x";
  //   width: 15px;
  //   height: 15px;
  //   position: absolute;
  //   right: -4px;
  //   top: -16px;
  //   color: #817d7d;
  //   font-size: 16px;
  //   // background-color: #ccc;
  //   // border-radius: 50%;
  //   display: none;
  // }

  // &:hover {
  //   &::before {
  //     display: block;
  //   }
  // }
}
</style>