<template>
  <div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always">
    <div v-if="!onlyRead" class="btnBox">
      <el-button v-print="print" size="small">打印</el-button>
      <el-button type="primary" size="small" @click="handleSaveTable">保存</el-button>
      <el-button type="danger" size="small" @click="handleDelete">删除</el-button>
    </div>
    <div id="optomeFunc" style="width: 840px;padding-right: 8px" class="printBox">
      <div class="flex j-c" style="border-bottom: 1px solid #000;padding-bottom: 5px">
        <img width="320" src="@/assets/img/xianganlogo.png">
      </div>
      <p style="color:#000000;font-size:24px;text-align:center;">
        验光报告单
      </p>
      <div style="display: flex;justify-content: space-around">
        <span>登记号：<el-input v-model="dataForm.patientId" style="width: 80px" size="small" clearable placeholder="" /></span>
        <span>姓名：<el-input v-model="dataForm.patientName" style="width: 80px" size="small" clearable placeholder="" /></span>
        <span>性别：<el-input v-model="dataForm.patientSex" style="width: 60px" size="small" clearable placeholder="" /></span>
        <span>年龄：<el-input v-model="dataForm.patientAge" style="width: 60px" size="small" clearable placeholder="" /></span>
        <span>屈光发育档案：<el-input v-model="dataForm.file" style="width: 60px" size="small" clearable placeholder="" /></span>
        <span>档案号：<el-input v-model="dataForm.fileNUm" style="width: 80px" size="small" clearable placeholder="" /></span>
      </div>
      <div class="operation-record-table">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 5px">
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == 1">
                <div class="width-180 center">
                  瞳孔
                </div>
              </div>
              <div v-else-if="scope.row.name == 2">
                <div class="width-180 center">
                  检查方法
                </div>
              </div>
              <div v-else-if="scope.row.name == 3">
                <div class="width-180 center">
                  右眼
                </div>
              </div>
              <div v-else-if="scope.row.name == 4">
                <div class="width-180 center">
                  左眼
                </div>
              </div>
              <div v-else-if="scope.row.name == 5">
                <div class="width-180 center">
                  右眼
                </div>
              </div>
              <div v-else-if="scope.row.name == 6">
                <div class="width-180 center">
                  左眼
                </div>
              </div>
              <div v-else-if="scope.row.name == 7" style="display: flex;justify-content: space-between">
                <div class="width-180" style="text-align: left">
                  <span style="display: inline-block;margin-top: 16px">视光师:</span>
                  <img v-if="scope.row.a" :src="scope.row.a" alt="" style="width: 80px;height: 60px">
                </div>
                <div class="width-180" style="text-align: left">
                  <el-input v-model="scope.row.b" placeholder="" style="margin-top: 16px">
                    <template slot="prepend">医师:</template>
                  </el-input>
                </div>
                <div class="width-180" style="text-align: left;margin-top: 16px">
                  日期：<el-date-picker
                    v-model="scope.row.c"
                    type="date"
                    placeholder="选择日期"
                  />
                </div>
              </div>
              <div v-else-if="scope.row.name == '最终处方'">
                <div class="width-180 center" @click="copyData">
                  <el-button type="text" plain style="font-size: 14px">最终处方</el-button>
                </div>
              </div>
              <p v-else>{{ scope.row.name }}</p>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '1'">
                <div class="">
                  <div style="display: flex;flex-wrap: wrap">
                    <el-select v-model="scope.row.value" multiple placeholder="请选择" style="width: 100%">
                      <el-option
                        v-for="item in scope.row.pupil"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </div>
                </div>
              </div>
              <div v-if="scope.row.name == '2'">
                <div class="width-180">
                  <div style="display: flex;flex-wrap: wrap">
                    <el-select v-model="scope.row.value" multiple placeholder="请选择">
                      <el-option
                        v-for="item in scope.row.examine"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                    <!--                    <div v-for="(item,index) in scope.row.examine" :key="index" class="check" @click="item.isSelect = !item.isSelect">-->
                    <!--                      <input type="checkbox" :checked="item.isSelect">-->
                    <!--                      <div>{{ item.name }}</div>-->
                    <!--                    </div>-->
                  </div>
                </div>
              </div>
              <div v-if="scope.row.name == '3'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.a" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '4'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.a" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '5'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.a" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '6'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.a" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '基本信息'">
                <div class="width-100 center">
                  裸眼视力
                </div>
              </div>
              <div v-if="scope.row.name == '最终处方'">
                <div class="width-100">
                  <div style="display: flex;flex-wrap: wrap">
                    <div v-for="(item,index) in scope.row.value" :key="index" class="check" @click="item.isSelect = !item.isSelect">
                      <input type="checkbox" :checked="item.isSelect">
                      <div>{{ item.name }}</div>
                    </div>
                  </div>
                  <!--                  <el-checkbox-group v-model="scope.row.value">-->
                  <!--                    <el-checkbox label="远用" />-->
                  <!--                    <el-checkbox label="近用" />-->
                  <!--                  </el-checkbox-group>-->
                </div>
              </div>
              <div v-if="scope.row.name == '配镜建议'">
                <div style="display: flex">
                  <div style="display: flex;flex-wrap: wrap">
                    <div v-for="(item,index) in scope.row.suggest" :key="index" class="check" @click="item.isSelect = !item.isSelect">
                      <input type="checkbox" :checked="item.isSelect">
                      <div>{{ item.name }}</div>
                    </div>
                  </div>
                  <p style="margin-left: 16px">
                    <el-input v-model="scope.row.value" placeholder="" style="width: 180px">
                      <template slot="prepend">其他:</template>
                    </el-input>
                  </p>
                </div>
              </div>
              <div v-if="scope.row.name == '备注'">
                <div class="width-180">
                  <el-input v-model="scope.row.value" placeholder="" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '基本信息'">
                <div class="width-180 center">
                  右眼
                </div>
              </div>
              <div v-if="scope.row.name == '验光检查'">
                <div class="width-180 center">
                  球镜(DS)
                </div>
              </div>
              <div v-if="scope.row.name == '3'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.b" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '4'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.b" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '5'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.b" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '6'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.b" placeholder="" />
                </div>
              </div>
              <!--            <div v-if="scope.row.name == '最终处方'">-->
              <!--              <div class="width-100 center">-->
              <!--                恢复点：<el-input v-model="scope.row.value" placeholder="" />-->
              <!--              </div>-->
              <!--            </div>-->
              <!--            <div v-if="scope.row.name == '立体视(stereo)'">-->
              <!--              <div class="width-100 center">-->
              <!--                TNO(近)：<el-input v-model="scope.row.value" placeholder="" />-->
              <!--              </div>-->
              <!--            </div>-->

            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '基本信息'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.od" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '验光检查'">
                <div class="width-100 center">
                  柱镜(DC)
                </div>
              </div>
              <div v-if="scope.row.name == '3'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.c" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '4'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.c" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '5'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.c" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '6'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.c" placeholder="" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '基本信息'">
                <div class="width-180 center">
                  左眼
                </div>
              </div>
              <div v-if="scope.row.name == '验光检查'">
                <div class="width-180 center">
                  轴位(A)
                </div>
              </div>
              <div v-if="scope.row.name == '3'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.d" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '4'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.d" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '5'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.d" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '6'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.d" placeholder="" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '基本信息'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.os" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '验光检查'">
                <div class="width-180 center">
                  矫正视力(VA)
                </div>
              </div>
              <div v-if="scope.row.name == '3'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.e" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '4'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.e" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '5'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.e" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '6'">
                <div class="width-100 center">
                  <el-input v-model="scope.row.e" placeholder="" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '验光检查'">
                <div class="width-180 center">
                  下加光(ADD)
                </div>
              </div>
              <div v-if="scope.row.name == '3'">
                <div class="width-80 center">
                  <el-input v-model="scope.row.f" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '4'">
                <div class="width-80 center">
                  <el-input v-model="scope.row.f" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '5'">
                <div class="width-80 center">
                  <el-input v-model="scope.row.f" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '6'">
                <div class="width-80 center">
                  <el-input v-model="scope.row.f" placeholder="" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '验光检查'">
                <div class="width-180 center">
                  瞳距(PD)
                </div>
              </div>
              <div v-if="scope.row.name == '3'">
                <div class="width-80 center">
                  <el-input v-model="scope.row.g" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '4'">
                <div class="width-80 center">
                  <el-input v-model="scope.row.g" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '5'">
                <div class="width-80 center">
                  <el-input v-model="scope.row.g" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '6'">
                <div class="width-80 center">
                  <el-input v-model="scope.row.g" placeholder="" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '验光检查'">
                <div class="width-180 center">
                  棱镜
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <p style="text-align: left;margin-top: 3px">说明：1.持本报告但配镜仅供参考。              2.本报告单有效期3个月</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isSearch: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    },
    formContent: {
      type: Object,
      default: () => { }
    },
    onlyRead: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ws: null, // 建立的连接
      lockReconnect: false, // 是否真正建立连接
      timeout: 28 * 1000, // 30秒一次心跳
      timeoutObj: null, // 心跳心跳倒计时
      serverTimeoutObj: null, // 心跳倒计时
      timeoutnum: null, // 断开 重连倒计时
      dataForm: {
        patientId: '',
        patientName: '',
        patientSex: '',
        patientAge: '',
        file: '',
        fileNUm: ''
      },
      originTableData: [],
      tableData: [
        {
          name: '基本信息',
          od: '',
          os: '',
          type: ''
        }, {
          name: '1',
          value: '',
          pupil: [
            {
              name: '正常瞳孔',
              id: '1',
              isSelect: false
            }, {
              name: '复方托吡卡胺',
              id: '2',
              isSelect: false
            }, {
              name: '美多丽',
              id: '3',
              isSelect: false
            }, {
              name: '赛飞杰',
              id: '4',
              isSelect: false
            }, {
              name: '阿托品',
              id: '5',
              isSelect: false
            }
          ],
          type: ''
        }, {
          name: '2',
          value: '',
          examine: [
            {
              name: '检影',
              id: '1',
              isSelect: false
            }, {
              name: '综合',
              id: '2',
              isSelect: false
            }
          ],
          type: ''
        }, {
          name: '验光检查',
          type: ''
        }, {
          name: '3',
          type: '',
          a: '',
          b: '',
          c: '',
          d: '',
          e: '',
          f: '',
          g: ''
        }, {
          name: '4',
          type: '',
          a: '',
          b: '',
          c: '',
          d: '',
          e: '',
          f: '',
          g: ''
        }, {
          name: '最终处方',
          value: [
            {
              name: '远用',
              isSelect: false
            }, {
              name: '近用',
              isSelect: false
            }
          ],
          type: ''
        }, {
          name: '5',
          type: '',
          a: '',
          b: '',
          c: '',
          d: '',
          e: '',
          f: '',
          g: ''
        }, {
          name: '6',
          type: '',
          a: '',
          b: '',
          c: '',
          d: '',
          e: '',
          f: '',
          g: ''
        }, {
          name: '配镜建议',
          suggest: [
            {
              name: '单光',
              isSelect: false
            }, {
              name: '离焦镜片',
              isSelect: false
            }, {
              name: '软镜',
              isSelect: false
            }, {
              name: 'RGP',
              isSelect: false
            }, {
              name: 'OK镜',
              isSelect: false
            }
          ],
          value: ''
        }, {
          name: '备注',
          value: ''
        }, {
          name: '7',
          a: '',
          b: '',
          c: ''
        }],
      print: {
        id: 'optomeFunc'
      }
    }
  },
  destroyed() {
    this.ws.close()
  },
  mounted() {
    this.setSign()
    this.initWebSoket()
    this.originTableData = JSON.parse(JSON.stringify(this.tableData))
    this.getPatientData()
  },
  methods: {
    setSign() {
      const userData = JSON.parse(window.localStorage.getItem('qg-userData'))
      const date = this.$moment().format('YYYY-MM-DD')
      const mzName = window.localStorage.getItem('mzDoctorName')
      this.tableData.forEach(item => {
        if (item.name == '7') {
          item.a = userData.signImgBase
          item.b = mzName
          item.c = date
        }
      })
    },
    setData() {
      this.dataForm = this.formContent.a
      this.tableData = this.formContent.b
      this.setSign()
      this.getPatientData()
    },
    reSet() {
      this.dataForm = {
        patientId: '',
        patientName: '',
        patientSex: '',
        patientAge: '',
        file: '',
        fileNUm: ''
      }
      this.tableData = this.originTableData
      this.setSign()
      this.getPatientData()
    },
    copyData() {
      const ods = this.tableData.filter(item => item.name === '3')
      const oss = this.tableData.filter(item => item.name === '4')
      this.tableData.forEach(item => {
        if (item.name === '5') {
          item.a = ods[0].a
          item.b = ods[0].b
          item.c = ods[0].c
          item.d = ods[0].d
          item.e = ods[0].e
          item.f = ods[0].f
          item.g = ods[0].g
        }
        if (item.name === '6') {
          item.a = oss[0].a
          item.b = oss[0].b
          item.c = oss[0].c
          item.d = oss[0].d
          item.e = oss[0].e
          item.f = oss[0].f
          item.g = oss[0].g
        }
      })
    },
    async getPatientData() {
      const shili = window.localStorage.getItem('shili') ? JSON.parse(window.localStorage.getItem('shili')) : []
      if (shili.length) {
        this.tableData[0].od = shili[0].odVan
        this.tableData[0].os = shili[0].osVan
      }
      const { data: res } = await this.$http.get(
        '/patient/view/getPatientData',
        {
          params: {
            patientId: this.patientId
          }
        }
      )
      if (res.code === 0) {
        const data = res.data
        this.dataForm.patientId = data.patientId
        this.dataForm.patientName = data.patientName
        this.dataForm.patientSex = data.patientSex
        this.dataForm.patientAge = data.patientAge
      } else {
        this.$message.error(res.msg)
      }
    },
    reconnect() { // 重新连接
      const that = this
      if (that.lockReconnect) {
        return
      }
      that.lockReconnect = true
      // 没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum)
      that.timeoutnum = setTimeout(function() {
        // 新连接
        that.initWebSoket()
        that.lockReconnect = false
      }, 5000)
    },
    reset() { // 重置心跳
      const that = this
      // 清除时间
      clearTimeout(that.timeoutObj)
      clearTimeout(that.serverTimeoutObj)
      // 重启心跳
      that.start()
    },
    start() { // 开启心跳
      const self = this
      self.timeoutObj && clearTimeout(self.timeoutObj)
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
      self.timeoutObj = setTimeout(function() {
        // 这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.ws.readyState == 1) { // 如果连接正常
          self.ws.send('heartCheck')
        } else { // 否则重连
          self.reconnect()
        }
        self.serverTimeoutObj = setTimeout(function() {
          // 超时关闭
          self.ws.close()
        }, self.timeout)
      }, self.timeout)
    },
    initWebSoket() {
      // wss://127.0.0.1:8030/data
      // const url = 'ws://47.110.224.240:8036/xiangan-crf/websocket/0071'
      // const url = 'ws://192.168.0.167:8036/xiangan-crf/websocket/0071'
      const url = 'ws://127.0.0.1:8030/data'
      const self = this
      this.ws = new WebSocket(url)
      this.ws.onopen = function() {
        console.log('连接成功')
        self.start()
      }
      this.ws.onclose = function() {
        // console.log('连接关闭')
        self.reconnect()
      }
      this.ws.onerror = function() {
        // console.log('连接失败')
        self.reconnect()
      }
      this.ws.onmessage = function(msg) {
        const message = JSON.parse(msg.data)
        // const message = JSON.parse(data.msgTxt)
        console.log(message)
        self.tableData.forEach(item => {
          if (item.name == '3') {
            item.a = message.RData.DS
            item.b = message.RData.DC
            item.c = message.RData.AXIS
            item.d = message.RData.VA
            item.e = message.RData.ADD
          } else if (item.name == '4') {
            item.a = message.LData.DS
            item.b = message.LData.DC
            item.c = message.LData.AXIS
            item.d = message.LData.VA
            item.e = message.LData.ADD
          }
        })
        self.reset()
      }
    },
    handleSaveTable() {
      const data = {
        a: this.dataForm,
        b: this.tableData
      }
      this.$emit('save', data)
    },
    handleDelete() {
      this.$emit('del')
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 || rowIndex === 3 || rowIndex === 6) {
          // [0,0][0,3][0,6] 合并单元格 3行合并1列
          return {
            rowspan: 3,
            colspan: 1
          }
        }
        // [0,11] 最后一行 9列合并城1行
        if (rowIndex === 11) {
          return {
            rowspan: 1,
            colspan: 9
          }
        }
      } else if (columnIndex === 1) {
        if (rowIndex === 6 || rowIndex === 9 || rowIndex === 10) {
          return {
            rowspan: 1,
            colspan: 8
          }
        }
        if (rowIndex === 1 || rowIndex === 2) {
          return {
            rowspan: 1,
            colspan: 7
          }
        }
      } else if (columnIndex === 3) {
        if (rowIndex === 0) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
      } else if (columnIndex === 5) {
        if (rowIndex === 0) {
          return {
            rowspan: 1,
            colspan: 3
          }
        }
      } else if (rowIndex === 6 || rowIndex === 9 || rowIndex === 10) {
        if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 3) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
}
.j-c{
  justify-content: center;
}
#optomeFunc{
  ::v-deep .el-table__cell{
    padding: 0 !important;
  }
}
.printBox{
  page-break-inside: avoid !important;
  .el-input__inner {
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    padding: 0;
  }
}
//@media print{
//  @page {
//    size:A5 landscape !important;
//  }
//}
#operation-record {
  //height: 93%;
  // overflow: auto;
  .operation-record-table {
    width: 100%;
    .operation-text {
      font-weight: 700;
    }
    .text {
      font-weight: 700;
    }
    .sign {
      cursor: pointer;
      color: #46a1ff;
      font-weight: 400;
    }
  }
  .center {
    text-align: center;
  }
  .left {
    text-align: left;
  }

  .width-50 {
    .el-input {
      width: 50px;
    }
  }
  .width-70 {
    .el-input {
      width: 70px;
    }
  }

  .width-100 {
    .el-input {
      width: 100px;
    }
  }
  .width-120 {
    .el-input {
      width: 120px;
    }
  }
  .width-160 {
    .el-input {
      width: 160px;
    }
  }
  .width-80 {
    .el-input {
      width: 80px;
    }
  }
  .el-input__inner {
    border: none;
    height: 26px !important;
    line-height: 26px !important;
    text-align: center;
  }

  .el-input__inner {
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    padding: 0;
  }
  .el-input__prefix {
    display: none;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 140px;
  }
  .el-input__suffix {
    //top: -7px;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #767676;
    border-color: #767676;
  }
  .el-checkbox__inner:hover,
  .el-checkbox__inner {
    border-color: #767676;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #606266;
  }
  .el-radio__input.is-checked .el-radio__inner {
    background: #767676;
    border-color: #767676;
  }
  .el-radio {
    margin-right: 8px;
    display: block;
  }
  .el-radio__inner {
    border: 1px solid #767676 !important;
  }
  .el-radio__inner:hover {
    border-color: #767676;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background: none !important;
  }
  .has-gutter {
    display: none;
    .cell {
      font-weight: 700;
    }
    .el-table__cell {
      background: #ced4d9;
    }
  }
  ::v-deep .el-table .el-table__cell{
    padding: 5px 0;
  }
}
</style>
