<template>
  <div class="advance">
    <div class="advance__head flex">
      <div class="flex-wrap interfaceLog_head_time">
        <div class="manageTitle">高级查询</div>
        <div class="interfaceLog_head_time_start mr10">
          <el-date-picker
            v-model="FlightDate[0]"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择开始日期时间"
          />
        </div>
        <div class="interfaceLog_head_time_end">
          <el-date-picker
            v-model="FlightDate[1]"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择结束日期时间"
          />
        </div>
      </div>
      <Search
        ref="search"
        class="advanced-search"
        :is-title="false"
        :is-slot="true"
        @getSearchData="getSearchData"
        @clearSearchData="clearSearchData"
      >
        <div class="flex-wrap">
          <button
            class="btnAn"
            @click="dialogShow"
          >高级查询</button>
          <!-- <div
            class="setting"
            @click="show"
          /> -->
        </div>
      </Search>
    </div>
    <!--表格-->
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="advance__table"
    >
      <el-table
        ref="table"
        max-height="100%"
        class="table"
        :data="tableData"
        border
        stripe
        fit
        height="calc(100vh - 155px)"
        style="width: 100%"
        show-summary
        :cell-class-name="cellClass"
        :summary-method="summaryRow(tableData.length)"
        :span-method="arraySpanMethod"
        @cell-click="cellClick"
      >
        <el-table-column
          v-for="item in tableCols"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :sortable="item.sortable"
          :filters="tableDataFilters[item.prop]"
          :filter-method="tableDataFilters[item.prop] && filterHandler"
          filter-placement="top"
        >
          <!-- <template slot-scope="scope">
            <a href="javascript:void(0);">{{ scope.row[item.prop] }}</a>
          </template> -->
        </el-table-column>
      </el-table>
    </div>
    <!--列设置-->
    <!-- <Dialog
      :flag="dialogFlag"
      class="dialog-check-cols"
    >
      <div class="col-dialog">
        <div class="title">列设置</div>
        <div class="content">
          <el-tree
            :data="tableCols"
            :class="colsCheckClass"
            show-checkbox
            node-key="index"
            :default-expand-all="true"
            :props="{
              label: 'label',
              children: 'children'
            }"
            :default-checked-keys="checkedKeysTemp"
            @check="handleCheck"
          />
        </div>
        <div class="foot right t30">
          <el-button
            size="medium"
            class="r24"
            type="primary"
            @click="onCheck"
          >确定</el-button>
          <el-button
            size="medium"
            @click="hide"
          >取消</el-button>
        </div>
      </div>
    </Dialog> -->
    <!--高级查询-->
    <Dialog
      width="852px"
      :flag="gjFlag"
    >
      <div
        ref="dialog"
        class="rowDialog"
        :tabindex="0"
        @keyup.enter="onCheckGj"
        @keyup.self.esc="gjFlag=false"
      >
        <div class="title">高级查询</div>
        <div class="content">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
          >
            <el-row :gutter="20">
              <el-col
                v-for="item in formItems"
                :key="item.prop"
                :span="item.span || 8"
              >
                <el-form-item
                  :label="item.label"
                  :prop="item.prop"
                >
                  <template v-if="item.prop === 'FlightDate'">
                    <el-date-picker
                      v-model="FlightDate"
                      size="small"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @keyup.esc.native="dialogFocus"
                    />
                  </template>
                  <template v-else-if="item.prop === 'status'">
                    <el-select
                      v-model="form.status"
                      size="small"
                      filterable
                      default-first-option
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        v-for="option in statusList"
                        :key="option.ID"
                        :label="option.StatusName"
                        :value="option.StatusCode"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'specialType'">
                    <el-select
                      v-model="form.specialType"
                      size="small"
                      filterable
                      allow-create
                      default-first-option
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        v-for="option in baggageTypeList"
                        :key="option.ID"
                        :label="option.TypeName"
                        :value="option.TypeCode"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'unLoad'">
                    <el-select
                      v-model="form.unLoad"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="已翻减"
                        :value="1"
                      />
                      <el-option
                        label="待翻减"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'checkIn'">
                    <el-select
                      v-model="form.checkIn"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="是"
                        :value="1"
                      />
                      <el-option
                        label="否"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'active'">
                    <el-select
                      v-model="form.active"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="是"
                        :value="1"
                      />
                      <el-option
                        label="否"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'transferIn'">
                    <el-select
                      v-model="form.transferIn"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="是"
                        :value="1"
                      />
                      <el-option
                        label="否"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'canceled'">
                    <el-select
                      v-model="form.canceled"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="是"
                        :value="1"
                      />
                      <el-option
                        label="否"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else>
                    <el-popover
                      v-model="item.hintVisible"
                      placement="right"
                      trigger="manual"
                    >
                      <span>{{ item.hintText }}</span>
                      <el-input
                        :ref="'input-' + item.prop"
                        slot="reference"
                        v-model="form[item.prop]"
                        size="small"
                        @focus="item.hintVisible = true"
                        @blur="item.hintVisible = false"
                        @keyup.esc.native="dialogFocus"
                      />
                    </el-popover>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="foot right t30">
          <el-button
            size="medium"
            class="r24"
            type="primary"
            @click="onCheckGj"
          >确定</el-button>
          <el-button
            size="medium"
            @click="closeCheckGj"
          >取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from '@/layout/components/Search'
import Dialog from '@/layout/components/Dialog'
import { parseTime } from '@/utils/index'
import { queryMap, myQuery } from '@/api/dataIntegration'
import { mapGetters } from 'vuex'
import { setTableFilters } from '@/utils/table'

export default {
  name: 'Advance',
  components: { Search, Dialog },
  data() {
    return {
      loading: false,
      colDialogFlag: false,
      gjFlag: false,
      tableData: [
        // {
        //   FlightNO: '',
        //   FlightDate: '',
        //   SourceAirport: '',
        //   TargetAirport: '',
        //   PassengerNameUpcase: '',
        //   BagSN: '',
        //   SpecialType: '',
        //   checkIn: '',
        //   deleted: '',
        //   activated: '',
        //   BagWeight: '',
        //   latestStatus: '',
        //   bagLocation: '',
        //   TransferFlightNO: ''
        // }
      ],
      checkList: [],
      tableCols: [
        {
          prop: 'FlightNO',
          label: '航班号'
        },
        {
          prop: 'FlightDate',
          label: '航班日期'
        },
        {
          prop: 'DepartureTime',
          label: '起飞时间',
          width: 150
        },
        {
          prop: 'SourceAirport',
          label: '起飞站'
        },
        {
          prop: 'TargetAirport',
          label: '目的地'
        },
        {
          prop: 'PassengerNameUpcase',
          label: '旅客姓名'
        },
        {
          prop: 'BagSN',
          label: '行李牌号',
          sortable: true
        },
        {
          prop: 'SpecialType',
          label: '特殊行李类型'
        },
        {
          prop: 'deleted',
          label: '删除'
        },
        {
          prop: 'activated',
          label: '激活'
        },
        {
          prop: 'BagWeight',
          label: '重量'
        },
        {
          prop: 'latestStatus',
          label: '最新状态'
        },
        {
          prop: 'bagLocation',
          label: '最新位置'
        },
        {
          prop: 'U_Device_ID',
          label: '容器编号'
        },
        {
          prop: 'PreFlightNONotNull',
          label: '中转进航班'
        },
        {
          prop: 'PreFlightNONull',
          label: '中转出航班'
        }
      ],
      FlightDate: [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')],
      form: {
        FlightNO: '',
        destination: '',
        depatureStation: '',
        baggageNO: '',
        specialType: '',
        U_Device_ID: '',
        passengerName: '',
        PNR: '',
        checkInSequence: '',
        transferArrival: '',
        transferDeparture: '',
        unLoad: '',
        checkIn: '',
        active: '',
        transferIn: '',
        canceled: '',
        status: ''
      },
      formItems: [
        {
          prop: 'FlightDate',
          label: '航班日期',
          span: 16
        },
        {
          prop: 'status',
          label: '当前状态'
        },
        {
          prop: 'FlightNO',
          label: '航班号',
          hintText: '示例：CA1111',
          hintVisible: false
        },
        {
          prop: 'departureStation',
          label: '起飞站',
          hintText: '示例：PEK',
          hintVisible: false
        },
        {
          prop: 'destination',
          label: '目的地',
          hintText: '示例：CTU',
          hintVisible: false
        },
        {
          prop: 'baggageNO',
          label: '行李牌号',
          hintText: '示例：1234567890',
          hintVisible: false
        },
        {
          prop: 'specialType',
          label: '特殊行李类型'
        },
        {
          prop: 'U_Device_ID',
          label: '容器编号',
          hintText: '示例：AKE25810CA',
          hintVisible: false
        },
        {
          prop: 'passengerName',
          label: '旅客姓名',
          hintText: '示例：ZHAOWEI',
          hintVisible: false
        },
        {
          prop: 'PNR',
          label: 'PNR',
          hintText: '示例：PZR25X',
          hintVisible: false
        },
        {
          prop: 'checkInSequence',
          label: '值机序号',
          hintText: '示例：1',
          hintVisible: false
        },
        {
          prop: 'transferArrival',
          label: '中转进航班',
          hintText: '示例：CA1111',
          hintVisible: false
        },
        {
          prop: 'transferDeparture',
          label: '中转出航班',
          hintText: '示例：CA1111',
          hintVisible: false
        },
        {
          prop: 'unLoad',
          label: '翻减状态'
        },
        {
          prop: 'checkIn',
          label: '已值机'
        },
        {
          prop: 'active',
          label: '已激活'
        },
        {
          prop: 'transferIn',
          label: '中转行李'
        },
        {
          prop: 'canceled',
          label: '已取消'
        }
      ],
      statusList: [
        {
          ID: 0,
          StatusName: '安检',
          StatusCode: '安检'
        },
        {
          ID: 1,
          StatusName: '分拣',
          StatusCode: '分拣'
        },
        {
          ID: 2,
          StatusName: '装车',
          StatusCode: '装车'
        },
        {
          ID: 3,
          StatusName: '装机',
          StatusCode: '装机'
        },
        {
          ID: 4,
          StatusName: '到达',
          StatusCode: '到达'
        }
      ],
      baggageTypeList: [],
      dataContent: [],
      rules: {
        // 机器信息表单验证
        // FlightNO: [
        //   { required: true, message: "请输入有效航班号", trigger: "blur" },
        // ],
      },
      tableDataFilters: {
        FlightNO: [],
        FlightDate: [],
        SourceAirport: [],
        TargetAirport: [],
        PassengerNameUpcase: [],
        SpecialType: [],
        deleted: [],
        activated: [],
        latestStatus: [],
        bagLocation: [],
        U_Device_ID: [],
        PreFlightNONotNull: [],
        PreFlightNONull: []
      },
      spanArr: [],
      contactDot: 0
    }
  },
  computed: {
    ...mapGetters(['clickedCells', 'queryForm'])
  },
  created() {
    // console.log(this.$store.state.app.queryForm)
    // 参数顺序   【航班开始日期，航班结束日期，航班号，航班号，行李牌号，行李牌号，起飞站，起飞站，目的站，目的站，特殊行李类型，特殊 行李类型，旅客姓名大写拼音，旅客姓名大写拼音，PNR，PNR,值机号，值机号】
    // const dataContent = [this.time[0], this.time[1]]
    // for (let i = 0; i < 18; i++) {
    //   dataContent.push(null)
    // }
    // this.statItemsQueryByStatMain(dataContent);
  },
  mounted() {
    window.addEventListener('keyup', () => {
      console.dir(document.activeElement)
    })
    this.baggageTypeQuery()
    document.querySelector('.interfaceLog_head_time_start .el-input__prefix i').remove()
    document.querySelector('.interfaceLog_head_time_start .el-input__prefix').innerHTML = '开始：'
    document.querySelector('.interfaceLog_head_time_end .el-input__prefix i').remove()
    document.querySelector('.interfaceLog_head_time_end .el-input__prefix').innerHTML = '结束：'

    let flag = false
    const query = this.$route.query
    if (query) {
      const { startDate, endDate } = query
      Object.entries(query).forEach(([key, value]) => {
        if (!['startDate', 'endDate'].includes(key) && (value ?? '') !== '') {
          flag = true
          this.form[key] = ['unLoad', 'checkIn', 'active', 'transferIn', 'canceled'].includes(key)
            ? Number(value)
            : value
        }
      })
      startDate && (this.FlightDate[0] = startDate)
      endDate && (this.FlightDate[1] = endDate)
    }
    if (flag) {
      this.onCheckGj()
    } else if (this.queryForm) {
      Object.keys(this.form).forEach(key => {
        this.form[key] = this.queryForm[key]
      })
      this.FlightDate = this.queryForm.FlightDate
      this.onCheckGj()
    }
  },
  updated() {
    // table数据更新
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  beforeDestroy() {
    // console.log(this.$route.matched.filter(item => item.name && item.meta.title))
    if (this.$route.matched.filter(item => item.name && item.meta.title).length > 1) {
      this.$store.dispatch('app/setQueryForm', {
        ...this.form,
        FlightDate: this.FlightDate
      })
    } else {
      this.$store.dispatch('app/setQueryForm', null)
    }
  },
  methods: {
    dialogShow() {
      this.gjFlag = true
      this.$nextTick(() => {
        this.dialogFocus()
      })
    },
    dialogFocus() {
      this.$refs['dialog'].focus()
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < 5; i++) {
        if (columnIndex === i) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    },
    cellClass({ row, column, rowIndex, columnIndex }) {
      let classString = ''
      if (['FlightNO', 'TransferFlightNO', 'BagSN'].includes(column.property)) {
        classString += 'cell-click'
        if (
          this.clickedCells.some(
            cell =>
              cell.pageName === 'advance' &&
              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
              cell.columnProp === column.property
          )
        ) {
          classString += ' cell-clicked'
        }
      }
      return classString
    },
    cellClick(row, column, cell, event) {
      if (['FlightNO', 'TransferFlightNO', 'BagSN'].includes(column.property)) {
        this.$store.dispatch('keepAlive/addClickedCell', {
          row,
          columnProp: column.property,
          pageName: 'advance'
        })
      }
      switch (column.property) {
        case 'FlightNO':
          this.$router.push({
            path: '/advance/flightView',
            query: {
              FlightNO: row.FlightNO,
              FlightDate: row.FlightDate
            }
          })
          break
        case 'TransferFlightNO':
          this.$router.push({
            path: '/advance/flightView',
            query: {
              FlightNO: row.TransferFlightNO,
              FlightDate: row.FlightDate
            }
          })
          break
        case 'BagSN':
          this.$router.push({
            path: '/advance/baggageView',
            query: {
              FlightNO: row.FlightNO,
              FlightDate: row.FlightDate,
              BagSN: row.BagSN
            }
          })
          break
        default:
          break
      }
    },
    // 查询
    getSearchData(val) {
      // 清除表单
      Object.keys(this.form).forEach(key => {
        this.form[key] = ''
      })

      if (this.FlightDate[0] === '' || this.FlightDate[1] === '' || val === '') {
        this.$message.error('请先输入完整查询信息')
      } else {
        // 点击搜索后清除跳转携带的查询信息
        this.$route.query && this.$router.replace(this.$route.path)

        // let searchData = {dataContent:[this.time[0],this.time[1],val]}
        const az = /^[a-zA-Z]+$/
        const azNum = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
        // const top2 = /^[a-zA-Z]{2}\w*$/
        const top2 = /^([a-zA-Z][0-9])|([0-9][a-zA-Z])|([a-zA-Z]{2})/
        const num = /^[0-9]+$/
        // 纯字母则为旅客姓名
        if (az.test(val)) {
          this.form['passengerName'] = val
          this.onCheckGj()
        } else if (azNum.test(val) && top2.test(val)) {
          // 字母加数字且前两位为字母则为航班号
          this.form['FlightNO'] = val
          this.onCheckGj()
        } else if (num.test(val) && val.length === 10) {
          // 纯数字且位数等于10则为行李牌号
          this.form['baggageNO'] = val
          this.onCheckGj()
        } else {
          this.$message.error('请先输入有效查询信息如航班号、旅客姓名首字母、行李牌号')
        }
        // this.sempleQueryByStatMain(searchData)
      }
    },
    // 清除查询
    clearSearchData() {
      this.tableData = []
    },
    // 高级查询-确定
    onCheckGj() {
      /* 参数顺序
      【航班开始日期，航班结束日期，航班号，航班号，行李牌号，行李牌号，起飞站，起飞站，目的站，目的站，特殊行李类型，特殊行李类型，旅客姓名大写拼音，旅客姓名大写拼音，
      PNR，PNR，值机号，值机号，中转进航班，中转进航班，中转出航班，中转出航班，容器编号，容器编号，
      是否已翻减（null/OFF/其他），是否已翻减（null/OFF/其他），是否值机（null/0/1），是否值机（null/0/1），
      是否激活（null/0/1），是否激活（null/0/1），是否中转（null/0/1），是否中转（null/0/1），是否取消行李（null/0/1)，是否取消行李（null/0/1)】 */
      this.dataContent = []
      const FlightDate = this.FlightDate
      if (FlightDate && FlightDate.length) {
        this.dataContent.push(FlightDate[0])
        this.dataContent.push(FlightDate[1])
        if (Object.values(this.form).every(value => value === '')) {
          this.$message.error('请先输入查询信息')
        } else {
          const {
            FlightNO,
            baggageNO,
            depatureStation,
            destination,
            specialType,
            passengerName,
            PNR,
            checkInSequence,
            transferArrival,
            transferDeparture,
            U_Device_ID,
            unLoad,
            checkIn,
            active,
            transferIn,
            canceled,
            status
          } = this.form
          this.setDataContent(
            FlightNO,
            baggageNO,
            depatureStation,
            destination,
            specialType,
            passengerName,
            PNR,
            checkInSequence,
            transferArrival,
            transferDeparture,
            U_Device_ID,
            unLoad,
            checkIn,
            active,
            transferIn,
            canceled,
            status
          )
          this.statItemsQueryByStatMain(this.dataContent)
          this.gjFlag = false
        }
      } else {
        this.$message.error('请先选择要查询的时间')
      }
    },
    closeCheckGj() {
      this.$refs['form'].resetFields()
      this.gjFlag = false
    },
    setDataContent(...dataContent) {
      dataContent.forEach(target => {
        target = typeof target === 'string' ? target.trim() : target
        if ((target ?? '') !== '') {
          this.dataContent.push(target, target)
        } else {
          this.dataContent.push(null, null)
        }
      })
    },
    // 数据查询
    async statItemsQueryByStatMain(dataContent) {
      this.loading = true
      this.tableData = []
      try {
        const result = await myQuery(queryMap.advacedQuery, ...dataContent)
        if (result.length) {
          const tableData = this._.sortBy(result, ['FlightNO', 'FlightDate'])
          this.spanArr = []
          let contactDot = this.contactDot
          this.tableData = tableData.map((item, index, arr) => {
            item.index = index
            item['deleted'] === 'DEL' || (item['deleted'] = '')
            item['activated'] = item['activated'] === 'I' ? '未激活' : '激活'
            if (index === 0) {
              this.spanArr.push(1)
            } else {
              if (item.FlightNO === arr[index - 1].FlightNO && item.FlightDate === arr[index - 1].FlightDate) {
                this.spanArr[contactDot] += 1
                this.spanArr.push(0)
              } else {
                this.spanArr.push(1)
                contactDot = index
              }
            }
            return item
          })
          setTableFilters(this.tableData, this.tableDataFilters)
        } else {
          this.$message.info('未查询到匹配结果')
        }
      } catch (error) {
        console.log('出错了', error)
      }
      this.loading = false
    },
    // 特殊行李类型下拉选项查询
    async baggageTypeQuery() {
      try {
        const result = await myQuery(queryMap.baggageType)
        this.baggageTypeList = result
      } catch (error) {
        console.log('出错了', error)
      }
    },
    // 简单查询 废弃
    // async sempleQueryByStatMain(dataContent) {
    //   try {
    //     const res = await getQuery({
    //       id: 31,
    //       dataContent
    //     })
    //     if (res.code == 0) {
    //       this.tableData = res.returnData
    //     } else {
    //       this.$message.error(res.message)
    //     }
    //   } catch (error) {
    //     console.log('出错了', error)
    //   }
    // },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    // 统计行数
    summaryRow(num) {
      return function () {
        return ['合计', `共${num}件`]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.advance {
  padding: 8px;
  &__head {
    line-height: 32px;
    margin-top: 8px;
    margin-bottom: 16px;
    .setting {
      height: 32px;
      width: 32px;
      cursor: pointer;
      background-size: 100% 100%;
      background: url('../../../assets/baggage/ic_setting.png') no-repeat;
      margin-left: 12px;
      position: relative;
      top: 2px;
    }
    .mr10 {
      margin-right: 10px;
    }
    ::v-deep .interfaceLog_head_time {
      .el-input__prefix {
        left: 10px;
        color: #101116;
      }
      .el-input--prefix .el-input__inner {
        padding-left: 50px;
      }
    }
  }
}
::v-deep .advanced-search .el-input .el-input__suffix {
  top: -30%;
}
.advance__table {
  width: 100%;
  ::v-deep .table {
    width: 100%;
    .cell {
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: Helvetica, 'Microsoft YaHei';
      letter-spacing: 0;
    }
    .cell-click {
      cursor: pointer;
      color: #2d7cff;
      &.cell-clicked {
        color: purple;
      }
    }
    .el-table__header-wrapper {
      .cell {
        font-weight: bold;
        color: #101116;
      }

      .has-gutter {
        tr {
          .bgl-huang {
            background: #fcf0b1;
          }
        }
      }
    }

    .el-table__body-wrapper {
      tr.bgl-hui {
        background: #d2d6df;
        td {
          background: #d2d6df;
        }
        &.redBorder {
          position: relative;
          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #e83f82;
          }
        }
      }
    }
  }
}
.el-table tbody tr:hover > td {
  background-color: red !important;
}

.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
  background-color: red;
}
</style>
