<template>
  <div class="app-container">
    <el-form
      ref="queryForm"
      :inline="true"
      :model="queryParams"
      label-width="68px"
    >
      <el-form-item label="病区" prop="wardCode">
        <el-select v-model="queryParams.wardCode" :disabled="wardDisabled" filterable placeholder="请选择病区">
          <el-option
            v-for="item in wardList"
            :key="item.wardCode"
            :label="item['wardName']"
            :value="item.wardCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="住院号" prop="visitNum">
        <el-input
          v-model="queryParams.visitNum"
          clearable
          placeholder="请输入住院号"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="patientName">
        <el-input
          v-model="queryParams.patientName"
          clearable
          placeholder="请输入患者名称"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="床位号" prop="bedNumber">
        <el-input
          v-model="queryParams.bedNumber"
          clearable
          placeholder="请输入床位号"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="医嘱日期" prop="dataRange">
        <el-date-picker
          v-model="dateRange"
          clearable
          end-placeholder="结束日期"
          range-separator="至"
          size="small"
          start-placeholder="开始日期"
          style="width: 250px"
          type="daterange"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="patientLoading"
          icon="el-icon-search"
          size="mini"
          type="cyan"
          @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置
        </el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-table
          ref="multipleTable"
          v-loading="patientLoading"
          :data="patientList"
          border height="600px"
          max-height="800" stripe tooltip-effect="light" @selection-change="handleSelectionPatientChange" @row-click="handleRowPatientClick"
        >
          <el-table-column align="center" type="selection" width="55"/>
          <el-table-column align="left" fixed="left" label="姓名" min-width="80" prop="patientName"
                           show-overflow-tooltip
          />
          <el-table-column align="left" fixed="left" label="床位号" min-width="70" prop="bedNumber"
                           show-overflow-tooltip
          />
          <el-table-column align="center" label="住院号" min-width="120" prop="visitNum" show-overflow-tooltip/>
          <el-table-column align="center" label="病区" min-width="150" prop="wardName" show-overflow-tooltip/>
          <el-table-column :formatter="genderFormat" align="center" label="性别" prop="gender" width="50"/>
        </el-table>
      </el-col>
      <el-col :span="16" style="height: 500px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button :disabled="multipleApplyList.length===0" size="mini" type="primary" @click="autoReservation">
              一键预约
            </el-button>
            <el-button :disabled="multipleApplyList.length!==1" size="mini" type="primary" @click="manualReservation">
              手动预约
            </el-button>
            <el-button :disabled="multipleApplyList.length!==1 || ![1,6].includes(multipleApplyList[0].applyState)" size="mini" type="primary"
                       @click="cancelReservation"
            >
              取消预约
            </el-button>
            <el-button :disabled="multipleApplyList.length===0" size="mini" type="warning" @click="exportExcel">导出
            </el-button>
            <el-button :disabled="printDisabled()" size="mini" type="warning" @click="printApply">打印
            </el-button>
          </el-col>
          <el-dialog v-dialog-drag
                     :center="true"
                     :close-on-click-modal="false"
                     :close-on-press-escape="false"
                     :show-close="false"
                     :visible.sync="autoDialog.visible"
                     title="自动预约"
                     @close="closeByAutoReservation"
                     @open="openAutoReservation"
          >
            <div style="max-height: 600px;overflow-y: scroll">
              <el-card v-for="item in autoDialog.list"
                       :key="item.reservationId"
                       :body-style="{padding:'8px',cursor: 'pointer'}"
                       shadow="hover"
              >
                <div class="card-item">
                  <div class="card-item-left">
                    <div style="margin-bottom: 8px">
                      <span style="margin-right: 15px">姓名:{{ item.patientName }}</span>
                      <span style="margin-right: 15px">床位号:{{ item.bedNum }}</span>
                      <span>住院号:{{ item.visitNum }}</span>
                    </div>
                    <div>
                      检查项目:{{ item.itemName }}
                    </div>
                  </div>
                  <div v-if="item.status === 3" style="width: auto;margin:0 16px;">
                    <div style="margin-bottom: 8px">
                      预约时段: {{ item.msg.reservationDate + ' ' + item.msg.timeSlot }}
                    </div>
                    <div>
                      预约序号: {{ item.msg.reservationNum }}
                    </div>
                  </div>
                  <div class="card-item-right">
                    <i v-if="item.status === 1" class="el-icon-receiving"/>
                    <i v-if="item.status === 2" class="el-icon-loading"/>
                    <el-tooltip v-if="item.status === 4" :content="item.msg" effect="light" placement="top">
                      <i class="el-icon-view" style="color: #F56C6C"/>
                    </el-tooltip>
                    <!--特殊提示-->
                    <el-tooltip v-if="item.status === 3" :content="item.msg" effect="light" placement="top">
                      <i class="el-icon-view" style="color: #67C23A"/>
                    </el-tooltip>
                    <span style="margin-left: 8px">{{ item.statusMessage }}</span>
                  </div>
                </div>
              </el-card>
            </div>
            <div slot="footer">
              <el-button :disabled="autoDialog.cancelDisabled"
                         type="primary"
                         @click="autoDialog.visible=false"
              >关 闭
              </el-button>
            </div>
          </el-dialog>
          <el-col :span="4">
            <el-input
              v-model="searchText"
              clearable
              placeholder="请输入项目名称查询"
              size="small"
              @input="searchFilter"
              @keyup.enter.native="searchFilter"
            />
          </el-col>
          <el-col :span="6">
            <el-button
              icon="el-icon-search"
              size="mini"
              type="cyan"
              @click="searchFilter"
            >搜索
            </el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetSearch"
            >重置
            </el-button
            >
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable2"
          v-loading="applyLoading"
          :data="searchText?filterApplyList:applyList"
          :span-method="mergeCell"
          border height="600px" max-height="800" stripe
          tooltip-effect="light"
          @selection-change="handleSelectionApplyChange" @row-click="handleRowApplyClick"
        >
          <el-table-column align="center" type="selection" width="45"/>
          <el-table-column align="left" fixed="left" label="姓名" min-width="80" prop="patientName" show-overflow-tooltip
                           width="80"
          />
          <el-table-column :formatter="applyStateFormat" align="center" label="预约状态"
                           show-overflow-tooltip width="100"
          />
          <el-table-column
            align="left"
            label="项目"
            min-width="240"
            prop="itemName" show-overflow-tooltip
          />
          <el-table-column
            :formatter="reservationDateFormat"
            align="center"
            label="预约时段"
            prop="reservationDate"
            show-overflow-tooltip
            width="180"
          />
          <el-table-column :formatter="isUrgentFormatter" align="center" label="是否加急" prop="visitTypeCode"
                           width="80"
          >
            <template slot-scope="scope">
              <div @click="stop">
                <el-switch v-model="scope.row.isUrgent" :active-value="1"
                           :disabled="!['0','4'].includes(scope.row.applyState+'')"
                           :inactive-value="0" active-color="#13ce66"
                           @change="statusChange(scope.row,'isUrgent')"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否推床" prop="stretcher"
                           width="80"
          >
            <template slot-scope="scope">
              <div @click="stop">
                <el-switch v-model="scope.row.stretcher" :disabled="!['0','4'].includes(scope.row.applyState+'')"
                           active-color="#13ce66"
                           active-value="1" inactive-value="0"
                           @change="statusChange(scope.row,'stretcher')"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column :formatter="examTypeFormatter" align="left" label="项目类型" min-width="100"
                           prop="examTypeCode" show-overflow-tooltip
          />
          <el-table-column
            align="left"
            label="项目编码"
            min-width="100"
            prop="itemCode" show-overflow-tooltip
          />
          <el-table-column
            align="left"
            label="申请医生" min-width="80"
            prop="applyDoctorName"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="申请时间"
            prop="reservationTime"
            show-overflow-tooltip
            width="150"
          />
          <el-table-column
            align="left"
            label="申请单号"
            min-width="200"
            prop="applyNum" show-overflow-tooltip
          />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  patientList,
  reservation,
  exportExam,
  getApplyListByPatient, updateApply
} from '@/api/resource/hospitalizationSubscribe'
import { autoReservation, cancelReservation, getWardList } from '@/api/reservation'
import { listExamtype } from '@/api/basis/examtype'
import moment from 'moment'
import { debounce } from '@/utils'
import { getLodop } from '@/utils/LodopFuncs'
import AsyncUtils from '@/utils/AsyncUtils'
import StorageUtils from '@/utils/Storage'

export default {
  name: 'HospitalizationSubscribe',
  data() {
    return {
      // 综合查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wardCode: null,
        visitNum: null, // 住院号
        patientName: null,
        bedNumber: null, // 床位号
        startDate: null,
        endDate: null
      },
      dateRange: [], // 日期范围
      wardList: [], // 病区列表
      patientList: [], // 住院患者表格数据
      patientLoading: false,
      multipleList: [], // 多选数组数据
      multipleApplyList: [], // 申请单多选数组数据
      applyList: [], // 申请单列表
      filterApplyList: [], // 过滤后的申请单列表
      applyLoading: false, // 申请单表格loading
      examTypeDict: [],// 检查类型字典
      visitTypeDict: [], // 就诊类型字典
      genderDict: [],// 性别字典
      searchText: '',
      // 一件预约对话框
      autoDialog: {
        list: [], // 自动预约列表
        visible: false,
        cancelDisabled: true // 取消按钮可点击状态
      },
      Examtypes: [],
      wardDisabled: false // 病区选择是否禁用
    }
  },
  created() {
    this.queryParams.startDate = moment().subtract(0, 'days').format('YYYY-MM-DD')
    this.queryParams.endDate = moment().format('YYYY-MM-DD')
    this.dateRange = [this.queryParams.startDate, this.queryParams.endDate]
    this.initDict()
    getWardList().then(({ data }) => {
      this.wardList = data
      try {
        if (this.$route.query && this.$route.query.wardCode) {
          this.queryParams.wardCode = this.$route.query.wardCode
        } else {
          // 判断当前用户是否可以切换病区
          const user = this.$store.getters.loginUser.user
          // 住院医生与护士需要固定病区
          if (user.roles.findIndex(item => ['indoctor', 'nurse'].includes(item.roleKey)) !== -1) {
            //this.wardDisabled = true
            this.queryParams.wardCode = user.deptId
          }
        }
      } catch (e) {

      }
      this.getPatientList()
    })
    listExamtype().then((response) => {
      this.Examtypes = response.rows
    })
  },
  methods: {
    printDisabled() {
      if (this.multipleApplyList.length === 0) {
        return true
      }
      let index = this.multipleApplyList.findIndex(item => {
        return ['1'].includes(item.applyState + '')
      })
      return index === -1
    },
    stop(event) {
      event.stopPropagation()
    },
    // 加急与推床状态修改
    statusChange(row, key) {
      updateApply({
        reservationId: row.reservationId,
        [key]: row[key]
      })
    },
    // 预约状态
    applyStateFormat(row, column) {
      switch (row.applyState + '') {
        case '0':
          return '未预约'
        case '1':
          return '已预约'
        case '2':
          return '已检查'
        case '3':
          return '已自动取消'
        case '4':
          return '已手动取消'
        case '5':
          return '已强制取消'
        case '6':
          return '已登记'
        case '7':
          return '已作废'
        default:
          return ''
      }
    },
    // 初始化字典
    initDict() {
      listExamtype().then(({ rows }) => {
        this.examTypeDict = rows
      })
      this.visitTypeDict.push({ label: '门诊', value: '1' }, { label: '住院', value: '2' }, {
        label: '体检',
        value: '3'
      })
      this.getDicts('sys_user_sex').then((response) => {
        this.genderDict = response.data
      })
    },
    // 获取住院患者列表
    getPatientList(callback) {
      this.patientLoading = true
      patientList(this.queryParams).then(({ data }) => {
        this.patientList = data
        if (callback) {
          this.$nextTick(_ => {
            callback()
          })
        }
      }).finally(_ => {
        this.patientLoading = false
      })
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.startDate = this.dateRange[0]
      this.queryParams.endDate = this.dateRange[1]
      this.multipleList = []
      this.multipleApplyList = []
      this.applyList = []
      this.getPatientList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetSearch()
      this.resetForm('queryForm')
      this.queryParams.startDate = moment().subtract(3, 'days').format('YYYY-MM-DD')
      this.queryParams.endDate = moment().format('YYYY-MM-DD')
      this.dateRange = [this.queryParams.startDate, this.queryParams.endDate]
      this.handleQuery()
    },
    // 多选变化
    handleSelectionPatientChange(val) {
      // 计算变化
      let change = this.multipleList.length - val.length
      if (change > 0) {
        // 说明减少了数据
        if (val.length === 0) {
          this.applyList = []
        } else {
          let temp = []
          this.multipleList.forEach(item => {
            let index = val.findIndex(f => f.patientId === item.patientId)
            if (index === -1) {
              temp.push(item.patientId)
            }
          })
          this.applyList = this.applyList.filter(item => {
            return !temp.includes(item.patientId)
          })
        }
      } else if (change < 0) {
        // 说明新加了数据
        let temp = []
        val.forEach(item => {
          let index = this.multipleList.findIndex(f => f.patientId === item.patientId)
          if (index === -1) {
            temp.push(item.patientId)
          }
        })
        this.applyLoading = true
        getApplyListByPatient({
          ...this.queryParams,
          patientName: temp.join(',')
        }).then(res => {
          let keys = []
          res.data.forEach(item => {
            if (!keys.includes(item.patientId)) {
              keys.push(item.patientId)
            }
          })
          keys.forEach(item => {
            res.data.forEach(cell => {
              if (item === cell.patientId) {
                this.applyList.push(cell)
              }
            })
          })
        }).finally(_ => {
          this.applyLoading = false
        })
      }
      this.multipleList = val
    },
    // 申请单表格多选变化
    handleSelectionApplyChange(val) {
      this.multipleApplyList = val
    },
    // 患者列表点击
    handleRowPatientClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // 申请单列表点击
    handleRowApplyClick(row, column, event) {
      this.$refs.multipleTable2.toggleRowSelection(row)
    },
    // 检查类型格式化
    examTypeFormatter({ examTypeCode }) {
      return this.examTypeDict.find(item => item.typeCode === examTypeCode)?.typeName
    },
    // 就诊类型格式化
    visitTypeFormatter({ visitTypeCode }) {
      return this.visitTypeDict.find(item => item.typeCode === visitTypeCode)?.typeName
    },
    // 加急信息格式化
    isUrgentFormatter({ isUrgent }) {
      return isUrgent === 0 ? '常规' : '加急'
    },
    // 预约时段拼接
    reservationDateFormat(row, column) {
      if (row.reservationDate) {
        return row.reservationDate + '  ' + row.timeSlot
      }
      return ''
    },
    // 性别格式化
    genderFormat({ gender }) {
      return this.selectDictLabel(this.genderDict, gender)
    },
    // 搜索过滤
    searchFilter: debounce(function() {
      if (this.searchText) {
        this.filterApplyList = this.applyList.filter(item => {
          return item.itemName.includes(this.searchText)
        })
      }
    }, 300),
    resetSearch() {
      this.searchText = ''
      this.filterApplyList = []
    },
    // 相同患者信息合并
    mergeCell({ row, column, rowIndex, columnIndex }) {
      let rowspan = 0
      let colspan = 0
      if (columnIndex === 1) {
        colspan = 1
        // 计算当前行的午段数据是不是列表中第一个,当前行索引=0 或者当前行的timeFrame值不等于上一行
        if (rowIndex === 0 || row.patientId !== this.applyList[rowIndex - 1].patientId) {
          // 计算需要合并的数量
          rowspan = this.applyList.filter(item => item.patientId === row.patientId).length
        }
        return { rowspan, colspan }
      }
    },
    // 一键预约,打开一个弹框显示预约进度
    autoReservation() {
      const tempArr = this.multipleApplyList
        .filter(item => ['0', '4'].includes(item.applyState + ''))
        .map(item => {
          return {
            ...item,
            status: 1, // 当前预约状态  1-等待预约 2-正在预约 3.预约成功 4.预约失败
            statusMessage: '等待'
          }
        })
      if (tempArr.length <= 0) {
        this.$message.warning('请至少选择一个未预约申请单')
      } else {
        this.autoDialog = {
          visible: true,
          list: tempArr,
          cancelDisabled: true
        }
      }
    },
    // 进入手动预约
    manualReservation() {
      let temp = this.multipleApplyList[0]
      if (temp) {
        StorageUtils.setWisLocal('applyNum', {
          applyNum: temp.applyNum,
          type: '1'
        })
        this.$router.push({ path: `/open/manualReservation` })
      }
    },
    // dialog打开回调进行自动预约
    async openAutoReservation() {
      for (let i = 0; i < this.autoDialog.list.length; i++) {
        this.autoDialog.list[i].status = 2
        this.autoDialog.list[i].statusMessage = '正在预约'
        const { code, msg, data } = await AsyncUtils.wrapper(autoReservation(this.autoDialog.list[i]))
        if (code === 200) {
          this.autoDialog.list[i].status = 3
          this.autoDialog.list[i].statusMessage = '预约成功'
          this.autoDialog.list[i].msg = data
        } else {
          this.autoDialog.list[i].status = 4
          this.autoDialog.list[i].statusMessage = '预约失败'
          this.autoDialog.list[i].msg = msg
        }
      }
      this.autoDialog.cancelDisabled = false
    },
    // 取消预约
    cancelReservation() {
      let apply = this.multipleApplyList[0]
      this.$confirm(
        `是否取消 ${apply.itemName} 在 ${apply.reservationDate} ${apply.timeSlot} 的预约`,
        '申请单取消预约',
        {
          type: 'warning',
          customClass: 'reservationBox',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              AsyncUtils.wrapper(cancelReservation(apply))
                .then(({ code, msg, data }) => {
                  if (code === 200) {
                    this.$message.success(`取消成功`)
                    done()
                    this.closeByAutoReservation()
                  } else {
                    //this.$message.error(`${msg}`)
                    done()
                  }
                }).finally(_ => {
                instance.confirmButtonLoading = false
              })
            } else {
              done()
            }
          }
        }
      )
    },
    // 关闭回调
    closeByAutoReservation() {
      this.filterApplyList = []
      this.searchText = ''
      this.applyList = []
      this.multipleApplyList = []
      this.applyLoading = true
      getApplyListByPatient({
        ...this.queryParams,
        patientName: this.multipleList.map(item => item.patientId).join(',')
      }).then(res => {
        let keys = []
        res.data.forEach(item => {
          if (!keys.includes(item.patientId)) {
            keys.push(item.patientId)
          }
        })
        keys.forEach(item => {
          res.data.forEach(cell => {
            if (item === cell.patientId) {
              this.applyList.push(cell)
            }
          })
        })
      }).finally(_ => {
        this.applyLoading = false
      })
    },
    // 导出按钮操作
    exportExcel() {
      this.$confirm('是否确认导出申请单数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            exportExam(this.multipleApplyList.map(item => {
              return {
                ...item,
                gender: this.genderFormat({ gender: item.gender }),
                cancelReason: this.isUrgentFormatter({ isUrgent: item.isUrgent })
              }
            }))
              .then(res => {
                this.download(res.msg)
                  .finally(_ => {
                    done()
                  })
              }).finally(_ => {
              instance.confirmButtonLoading = false
            })
          } else {
            done()
          }
        }
      })
    },
    examTypeFormat(row) {
      return this.Examtypes.find(item => item.typeCode === row.examTypeCode)?.typeName
    },
    // 打印功能
    printApply() {
      const rows = this.multipleApplyList.filter(item => {
        return ['1'].includes(item.applyState + '')
      }).map(row => {
        return {
          examTypeName: this.examTypeFormat(row),
          remarks: row.remarks,
          region: row['visitTypeCode'] === '1' ? row['applyDeptName'] : row['wardName'],
          visitNum: row.visitNum,
          patientName: row.patientName,
          reservationDate: row.reservationDate,
          timeFrame: row.timeFrame,
          timeSlot: row.timeSlot,
          examDeptName: row.examDeptName,
          itemName: row.itemName,
          examAddress: row['examTypeCode'] === '3' ? row['stretcher'] === '1' ? '德馨楼四楼' : '德馨楼三楼' : row.examAddress,
          isUrgent: row.isUrgent
        }
      })
      if (rows.length > 0) {
        AsyncUtils.print(rows)
      }
    },
    async lodop(apply) {
      const LODOP = getLodop()
      LODOP.PRINT_INIT('reservation')
      LODOP.SET_PRINT_STYLE('FontSize', 10) //设置字体大小
      LODOP.SET_PRINT_PAGESIZE(1, 550, 550, '') //设置打印方向,宽,高,纸张类型(例:A4)
      //这里的数字是调整相应位置
      //LODOP.ADD_PRINT_TEXT(10, 10, 500, 5, '患者编码：' + data.PatientId);
      LODOP.ADD_PRINT_TEXT(
        5,
        8,
        550,
        10,
        apply.patientName +
        '(' +
        apply.patientId +
        ')'
      )
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '黑体')
      //LODOP.ADD_PRINT_TEXT(5, 150, 550, 10, this.applyPrintList.reservationId);
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '黑体')
      LODOP.ADD_PRINT_TEXT(20, 8, 550, 10, apply.applyNum)
      //LODOP.ADD_PRINT_TEXT(35, 8, 550, 10, data.ExamDeptName);
      LODOP.ADD_PRINT_TEXT(35, 8, 550, 10, apply.queueName)
      LODOP.ADD_PRINT_TEXT(
        50,
        8,
        550,
        10,
        '预约时间:' + apply.reservationDate
      )
      LODOP.ADD_PRINT_TEXT(
        65,
        8,
        550,
        10,
        '检查时段:' + apply.timeSlot
      )
      //LODOP.ADD_PRINT_TEXT(65, 3, 500, 10, data.OutExamItemName);
      LODOP.ADD_PRINT_TEXT(80, 8, 550, 10, '注意事项:')
      let generalRemarks = apply.remarks
      if (generalRemarks != null && generalRemarks !== '') {
        generalRemarks = generalRemarks
          .replace(/[^\x00-\xff]/g, '$&\x01')
          .replace(/.{28}\x01?/g, '$&\n')
          .replace(/\x01/g, '') //每40个换行
        LODOP.ADD_PRINT_TEXT(95, 8, 550, 100, generalRemarks)
      }
      LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
      //二维码
      LODOP.ADD_PRINT_BARCODE(
        50,
        145,
        60,
        60,
        'QRCode',
        apply.patientId
      )
      if (
        LODOP.SET_PRINTER_INDEX('瓶贴单') ||
        LODOP.SET_PRINTER_INDEX('瓶签打印机')
      ) {
        //LODOP.PREVIEW();  //打印预览
        LODOP.PRINT() //直接打印
      } else {
        LODOP.PREVIEW() //打印预览
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.card-item {
  display: flex;

  .card-item-left {
    flex: 1;
  }

  .card-item-right {
    min-width: 30px;
    display: flex;
    align-items: center;

    i {
      font-size: 24px;
    }
  }
}
</style>
