<template>
  <div class="jnpf-table-box" :class="[config.__config__.type]" v-loading="loading">
    <div class="JNPF-common-title" v-if="config.__config__.showTitle && config.__config__.label">
      <h2>{{ config.__config__.label }}</h2>
      <div class="table-actions" @click="addRow($event, true)" v-if="!disabled">
        <el-button type="text" icon="el-icon-plus"> {{ config.actionText }}</el-button>
      </div>
    </div>
    <el-table
      :data="tableFormData"
      class="JNPF-common-table"
      @cell-click="focusInput"
      v-bind="config.tableConf || {}"
      :show-summary="config['show-summary']"
      :summary-method="getTableSummaries"
      size="mini"
      :border="detailType === 'detail'" :fit="true"
    >
      <el-table-column width="50" align="center" label="序号">
        <!-- 序号 -->
        <template slot-scope="scope">
          <div class="row-action">
            <span class="index" :class="{ 'btn-disabled': disabled }"> {{ scope.$index + 1 }}</span>
            <i class="el-icon-delete delete-btn" @click="removeRow(scope.$index, scope.row)"></i>
          </div>
        </template>
      </el-table-column>
      <!-- 组件列 -->
      <el-table-column v-for="(head, cindex) in tableData" :key="head.__config__.formId" :min-width="150" :prop="head.__vModel__" :width="head.__config__.columnWidth">
        <template slot="header">
          <span style="color: #f56c6c" v-if="head.__config__.required">*</span>
          {{ head.__config__['label'] }}
        </template>
        <template slot-scope="scope">
          <template v-if="detailType === 'detail'">
            {{ tableFormData[scope.$index][cindex].value }}
          </template>
          <template v-else>
            <!-- 单选框组 多选框组 都替换成下拉 并添加options -->
            <template v-if="['select', 'checkbox', 'radio'].includes(head.__config__.jnpfKey)">
              <el-select
                v-model="tableFormData[scope.$index][cindex].value"
                v-bind="getConfById(head.__config__.formId)"
                :rowIndex="scope.$index"
                @change="onFormDataChange(scope.$index, cindex, 'el-select')"
              >
                <el-option v-for="(opt, oindex) in tableFormData[scope.$index][cindex].options" :key="oindex" :label="tableFormData[scope.$index][cindex].ApiReturn && tableFormData[scope.$index][cindex].ApiReturn.length ? opt[tableFormData[scope.$index][cindex].apiProps.label] : opt[head.__config__.props.label]" :value="tableFormData[scope.$index][cindex].ApiReturn && tableFormData[scope.$index][cindex].ApiReturn.length ? opt[tableFormData[scope.$index][cindex].apiProps.value] : opt[head.__config__.props.value]">
                </el-option>
              </el-select>
            </template>
            <!-- 单行输入 -->
            <template v-else-if="head.__config__.jnpfKey === 'comInput'">
              <el-input
                v-model="tableFormData[scope.$index][cindex].value"
                v-bind="getConfById(head.__config__.formId)"
                :rowIndex="scope.$index"
                @change="onFormDataChange(scope.$index, cindex, 'el-input', scope)"
              >
                <template v-if="head.__slot__">
                  <template slot="prepend" v-if="head.__slot__.prepend">
                    {{ head.__slot__.prepend }}
                  </template>
                  <template slot="append" v-if="head.__slot__.append">
                    {{ head.__slot__.append }}
                  </template>
                </template>
              </el-input>
            </template>
            <!-- 其他 -->
            <component
              v-else
              :is="head.__config__.tag"
              :rowIndex="scope.$index"
              v-model="tableFormData[scope.$index][cindex].value"
              v-bind="getConfById(head.__config__.formId)"
              :formData="formData"
              @change="onFormDataChange(scope.$index, cindex, head.__config__.tag, scope)"
            >
            </component>
            <div class="error-tip" v-show="!tableFormData[scope.$index][cindex].valid">不能为空</div>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <template v-if="paginationFlag">
      <pagination :total="total" :page.sync="currentPage" :limit.sync="pageSize" @pagination="getInData" />
    </template>
  </div>
</template>
<script>
import { dyOptionsList } from '@/components/Generator/generator/comConfig'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { previewDataInterface } from '@/api/systemData/dataInterface'
import { deteleChildrenModel, deteleModel, getChildrenBrowserData, getChildrenConfigData, NewAddModel, NewupdateModel } from '@/api/onlineDev/visualDev'
import {deepClone, numberChinese} from '@/utils'
import moment from 'moment/moment'
import { getAPIData, getTabelAPIData } from '@/components/Dataset-filter/util'
export default {
  name: 'input-table',
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    value: {
      type: Array,
      default: () => []
    },
    modelId: {
      type: String
    },
    detailType: String,
    formData: Object,
    primaryRow: Object,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      total: 10,
      currentPage: 1,
      pageSize: 20,
      tableFormData: [],
      tableData: [],
      columnDict: [],
      idKey: '',
      modeId: '',
      loading: false,
      paginationFlag: false,
      isAddRow: true, // list类型下 添加行数据 number类型组件会进行校验 产生不需要的结果 在这里进行添加行数据判断 hack
      addRowList: [],
      apiFlag: false,
      oldBatchEditJsonData: []
    }
  },
  async created() {
    this.paginationFlag = false
    this.tableData = this.config.__config__.children
    // 等buildOptions这个方法执行完再执行别的方法
    await this.buildOptions()
    sessionStorage.clear()
    this.getCreated()
    window.addEventListener('setItem', this.handleStorageEvent)
    // if (this.value && this.value.length) {
    //   this.value.forEach(t => this.addRow(t))
    // } else {
    //   this.addRow()
    // }
  },
  beforeDestroy() {
    window.removeEventListener('setItem', this.handleStorageEvent)
  },
  methods: {
    handleStorageEvent() {
      for (const cur of this.tableFormData) {
        for (const i of cur) {
          // 查询是否绑定全局变量 并获取
          if (i.defaultVarType && i.defaultVarType.length) {
            //表单内全局变量
            if (i.defaultVarType[0] === 3) {
              const sessionValue = sessionStorage.getItem(`FORM_${i.defaultVarType[1]}`)
              if (sessionValue) this.$set(i, 'value', sessionValue)
            }
            //api返回值变量
            if (i.defaultVarType[0] === 4) {
              const sessionValue = sessionStorage.getItem(`API_${i.defaultVarType[1]}`)
              if (sessionValue) this.$set(i, 'value', sessionValue)
            }
          }
        }
      }
    },
    getCreated() {
      if (this.config && this.config.dbLinkId && this.primaryRow && this.primaryRow[this.config.relationConf.primaryModel]) {
        this.modeId = this.modelId
        getChildrenConfigData(this.modeId, this.config.dbLinkId).then((res) => {
          this.idKey = res.data.data.idKey
          this.getInData()
        })
      } else {
        this.addRow()
      }
    },
    getInData() {
      this.paginationFlag = true
      let parmes = {
        pageQuery: {
          current: this.currentPage,
          size: this.pageSize,
          descs: ''
        },
        paramList: [{ cubeColumnId: this.config.relationConf.foreignModel, function: 'eq', values: [String(this.primaryRow[this.config.relationConf.primaryModel])] }]
      }
      getChildrenBrowserData(this.config.dbLinkId, parmes).then((res) => {
        this.total = res.data.data.pageData.total
        let data = res.data.data.pageData.records
        this.columnDict = res.data.data.columnDict
        let jsonData = data.map((i) => {
          return this.getBatchEditJsonData(i, this.columnDict)
        })
        this.oldBatchEditJsonData = deepClone(jsonData)
        if (jsonData && jsonData.length) {
          this.tableFormData = []
          jsonData.forEach((t) => this.addRow(t))
          this.tableFormData = this.addRowList.concat(this.tableFormData)
        } else {
          this.tableFormData = []
          this.addRow()
        }
      })
    },
    //整合数据 配合流程进行存储回显数据
    getBatchEditJsonData(row, columnDict) {
      let rows = Object.assign({}, row)
      let jsonData = deepClone(columnDict)
      const obj_ = {}
      // delete jsonData[this.idKey]
      for (let key in jsonData) {
        for (let index in rows) {
          if (jsonData[key] === index) {
            // jsonData[key] = rows[index]
            obj_[key] = rows[index]
          }
        }
      }
      return obj_
    },
    async buildOptions() {
      for (const cur of this.tableData) {
        const config = cur.__config__
        if (dyOptionsList.indexOf(config.jnpfKey) > -1) {
          let isTreeSelect = config.jnpfKey === 'treeSelect' || config.jnpfKey === 'cascader'
          if (config.dataType === 'dictionary') {
            if (!config.dictionaryType) continue
            getDictionaryDataSelector(config.dictionaryType).then((res) => {
              isTreeSelect ? (cur.options = res.data.data.list) : (cur.__slot__.options = res.data.data.list)
            })
          }
          if (config.dataType === 'dynamic') {
            if (!config.propsUrl) continue
            // previewDataInterface(config.propsUrl).then((res) => {
            //   isTreeSelect ? (cur.options = res.data.data) : (cur.__slot__.options = res.data.data)
            // })
            if (isTreeSelect) {
              await getAPIData(cur, config.propsUrl, config.ApiParams, this.tableData, '', config.apiProps).then(async (res) => {
                // this.$set(scheme,'options',res)
                try {
                  res = res.filter((i) => i[cur.__config__.apiProps.idKey] || i[cur.__config__.apiProps.pidKey])
                  let treeData = g.T.toTree(res, cur.props.props.children, cur.__config__.apiProps.idKey, cur.__config__.apiProps.pidKey)
                  await this.$set(cur, 'options', treeData)
                } catch {}
              })
            } else {
              await getAPIData(cur.__slot__, config.propsUrl, config.ApiParams, this.tableData, '', config.apiProps).then(async (res) => {
                await this.$set(cur.__slot__, 'options', res)
              })
            }
          }
        }
      }
    },
    clearAddRowFlag() {
      this.$nextTick(() => {
        this.isAddRow = false
        this.onFormDataChange(0, 0)
      })
    },
    /**
     * @event cell-click Table 单元格点击事件
     * 点击单元格 聚焦单元格中的input
     */
    focusInput(row, column, cell, event) {
      const child = cell.querySelector('.cell').firstElementChild
      const input = child && child.querySelector('input')
      input && input.focus()
    },
    onFormDataChange(rowIndex, colIndex, tag, scope) {
      if (this.isAddRow) return
      this.$emit('change')
      const data = this.tableFormData[rowIndex][colIndex]
      //当为下拉框change时
      //查询当前change的组件是否为表单公共变量
      if (data.allVar) {
        sessionStorage.setItem(`FORM_${rowIndex + '_' + data.__vModel__}`, data.value)
        //在当前行操作
        this.tableFormData[rowIndex].forEach((i, k) => {
          if (i.ApiParams && i.ApiParams.length) {
            if (i.ApiParams.find((o) => o.varType[1] == data.__vModel__)) {
              getTabelAPIData(i.options, i.propsUrl, i.ApiParams, this.tableFormData[rowIndex], '', i.apiProps).then((res) => {
                this.$set(i, 'options', res)
              })
            }
          }
        })
      }
      //当前组件值change时 查询当前组件是否有api变量
      if (tag === 'el-select' && data.ApiReturn && data.ApiReturn.length) {
        // 获取选中的本条数据所有信息
        let selectRow = data.options.find((o) => o[data.apiProps.value] === data.value)
        if (selectRow) {
          for (const cur of data.ApiReturn) {
            // 储存全局变量
            sessionStorage.setItem(`API_${rowIndex + '_' + cur.varName}`, selectRow[cur.keyName])
          }
        }
      }
      this.tableFormData[rowIndex].forEach((i, k) => {
        // 查询是否绑定全局变量 并获取
        if (i.defaultVarType && i.defaultVarType.length) {
          //表单内全局变量
          if (i.defaultVarType[0] === 3) {
            const sessionValue = sessionStorage.getItem(`FORM_${rowIndex + '_' + i.defaultVarType[1]}`)
            if (sessionValue) this.$set(i, 'value', sessionValue)
          }
          //api返回值变量
          if (i.defaultVarType[0] === 4) {
            const sessionValue = sessionStorage.getItem(`API_${rowIndex + '_' + i.defaultVarType[1]}`)
            if (sessionValue) this.$set(i, 'value', sessionValue)
          }
        }
        if (i.defaultValueExp){
          let str = i.defaultValueExp
          // // 使用正则表达式 将匹配到_formulaF_的字符串替换成对应的变量
          // str = str.replace(/(\w+)_formulaF_(\d+)/g, (match, p1, p2) => {
          //   if (/_formulaF_/.test(match)) {
          //     return `[${p1}.${p2}]`;
          //   }
          //   return match;
          // });
          // // 匹配并替换 formulaF_ 后的数字部分
          // str = str.replace(/\bformulaF_(\w+)/g, '[$1]');
          // // 匹配并替换类似 $主表GYSMC 这样的内容
          // str = str.replace(/\$([^\\s]+)/g, '[$$$1]');
          //将当前表达式中的变量提取
          let regs = /\[(.*?)]/gi
          const matches = []
          let match
          while ((match = regs.exec(str)) !== null) {
            matches.push(match[1])
          }
          let matcheList = matches.filter((l) => l !== undefined)
          //将当前表达式中的括号转义
          let executeStr = str.replace(/\[/g, '@').replace(/\]/g, '@')
          window.numberChinese = numberChinese
          if (matcheList && matcheList.length) {
            XEUtils.objectEach(matcheList, (item, key) => {
              let reg = '/@' + item + '@/g'
              if (getConfigDefVal.call(this,item,rowIndex) && getConfigDefVal.call(this,item,rowIndex)[0]) {
                let aa = JSON.stringify(getConfigDefVal.call(this,item,rowIndex)[0])
                if (item && item.indexOf('$') > -1) reg = reg.replace(/\$/g, "")
                if (executeStr && executeStr.indexOf('$') > -1) executeStr = executeStr.replace(/\$/g, "")
                executeStr = g.replaceAll(executeStr, eval(reg), aa, true)
                try {
                  this.$set(i, 'value', eval(executeStr))
                } catch {}
              }
            })
          } else {
            try {
              this.$set(i, 'value', eval(executeStr))
            } catch {}
          }
        }
      })
      function getConfigDefVal(item,rowIndex) {
        // 系统变量
        if (item && item.indexOf('systemGlobal_') > -1){
          let systemItem = item.replace('systemGlobal_', '')
          if (!systemItem) return []
          const systemUserInfo = localStorage.getItem('lowcodeUserInfo')
          if (!systemUserInfo) return []
          return new Array(JSON.parse(systemUserInfo)[systemItem])
        } else if (item && item.indexOf('.') > -1) {
          // 子表单变量
          // 分割变量 arr[0]为子表单 arr[1]为子表单中的字段
          let itemArr = item.split('.')
          if (this.config.__config__.tableName !== itemArr[0]) return []
          // 查询对应子表单的具体信息 获取vmodel
          let itemObj = this.tableData.find(o => o.__vModelName__ === itemArr[1])
          if (!itemObj) return []
          // 通过vmodel找到对应的子表单组件填写数据
          const values = this.tableFormData[rowIndex].find(o => o.__vModel__ === itemObj.__vModel__)
          if (!values) return []
          return [values.value].filter(value => value) || []
        }else if (item && item.indexOf('$') > -1) {
          // API变量
          let APIItem = item.replace(/\$/g, "");
          return new Array(sessionStorage.getItem(`API_${APIItem}`) || sessionStorage.getItem(`API_${rowIndex}_${APIItem}`))
        }
      }
      this.$emit('change')
      data.required && (data.valid = this.checkData(data))
      if (this.config && this.config.dbLinkId && this.primaryRow[this.config.relationConf.primaryModel]) {
        let Jsondata = scope?.row || []
        if (!Jsondata.length) return;
        let integrated = {}
        Jsondata.forEach((item) => {
          integrated[item.__vModel__] = item.value
        })
        integrated = Object.keys(integrated).reduce((obj, key) => {
          if (!key.startsWith('isOnlyRead_')) {
            obj[key] = integrated[key]
          }
          return obj
        }, {})
        let oldData = this.oldBatchEditJsonData.find((item) => item[this.idKey] === Jsondata[0].idKey)
        let primaryId = Jsondata[0].idKey ? Jsondata[0].idKey : ''
        if (!primaryId) return
        let params = [
          {
            data: JSON.stringify(integrated),
            oldData: oldData ? JSON.stringify(oldData) : null,
            id: primaryId,
          }
        ]
        // 将新增数据过滤出来
        this.addRowList = this.filterAddData(this.tableFormData)
        // if (filteredData.length){
        //   this.addRowList = filteredData.map(row => row.reduce((p, c) => (p[c.__vModel__] = c.value, p), {}))
        // }
        // const formMethod = primaryId ? NewupdateModel : NewAddModel
        NewupdateModel(this.modeId, params, primaryId, this.config.dbLinkId, 2).then((res) => {
          this.$message({
            message: res.data.msg,
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getInData()
            }
          })
        })
      }

      if (['JNPF-Amount', 'el-input-number'].includes(tag)) {
        // 金额变动 更新数据 触发计算公式更新
        const newVal = this.tableFormData.map((row) => row.reduce((p, c) => ((p[c.__vModel__] = c.value), p), {}))
        this.$emit('input', newVal)
      }
    },
    /**
     * 校验单个表单数据
     * @param {CmpConfig} 组件配置对象
     */
    checkData({ tag, value }) {
      if ([null, undefined, ''].includes(value)) return false
      // if (tag === 'org-select') return this.checkOrgData(value)
      if (Array.isArray(value)) return value.length > 0
      return true
    },
    /**
     * 对组织机构部门控数据单独校验
     */
    checkOrgData(data) {
      const isArray = Array.isArray
      if (typeof data !== 'object' || isArray(data)) return false
      let count = 0
      for (let key in data) {
        count += isArray(data[key]) ? data[key].length : 0
      }
      return count > 0
    },
    // 返回没有主键id的数据（新增数据）
    filterAddData(filteredData) {
      this.addRowList = []
      return filteredData.filter((subArray) => subArray.some((obj) => obj.idKey == null))
    },
    /**
     * 不过滤只读控件的列 适用于计算表达式
     */
    faceSubmit() {
      let res = true
      const checkCol = (col) => col.required && !this.checkData(col) && (res = col.valid = false)
      this.tableFormData.forEach((row) => row.forEach(checkCol))
      // 将新增数据过滤出来返回给主表
      let filterData = this.filterAddData(this.tableFormData)
      return res ? filterData.map((row) => row.reduce((p, c) => ((p[c.__vModel__] = c.value), p), {})) : false
    },
    /**
     * 校验表格数据必填项
     */
    submit() {
      let res = true
      // 过滤只读控件的列
      const filteredData = this.tableFormData.map((row) =>{ return row.filter((col) => col.isText !== true)})
      const checkCol = (col) => col.required && !this.checkData(col) && (res = col.valid = false)
      filteredData.forEach((row) => row.forEach(checkCol))
      // 将新增数据过滤出来返回给主表
      let filterData = this.filterAddData(filteredData)
      return res ? filterData.map((row) => row.reduce((p, c) => ((p[c.__vModel__] = c.value), p), {})) : false
    },
    /**
     * 根据formid获取完整组件配置
     */
    getConfById(formId) {
      let item = this.tableData.find((t) => t.__config__.formId === formId)
      let newObj = {}
      for (const key in item) {
        if (key != '__config__' && key != '__slot__' && key != '__vModel__') {
          newObj[key] = item[key]
        }
        if (key === 'props') {
          newObj[key] = item[key][key]
        }
        if (key === 'disabled') {
          newObj[key] = item[key]
        }
      }
      return newObj
    },
    /**
     * 获取默认行数据
     */
    getEmptyRow(val, flag) {
      return this.tableData.map((t) => {
        let additionalType = {}
        if (t.allVar) {
          additionalType.allVar = t.allVar
        }
        if (t.defaultVarType && t.defaultVarType.length) {
          additionalType.defaultVarType = t.defaultVarType
        }
        if (t.defaultValueExp){
          additionalType.defaultValueExp = t.defaultValueExp
        }
        if (t.__config__.dataType === 'dynamic' && t.__config__.propsUrl) {
          additionalType.ApiParams = t.__config__.ApiParams
          additionalType.ApiReturn = t.__config__.ApiReturn
          additionalType.propsUrl = t.__config__.propsUrl
          additionalType.apiProps = t.__config__.apiProps
        }
        let res = {
          tag: t.__config__.tag,
          formId: t.__config__.formId,
          value: flag ? '' : this.fillFormData(val, t),
          options: (t.__slot__ && t.__slot__.options && t.__slot__.options) || [], // 下拉 单选 多选
          valid: true,
          __vModel__: t.__vModel__,
          required: t.__config__.required,
          relationSelectId: t.__config__.relationSelectId || '',
          idKey: this.idKey && val ? val[this.idKey] : null,
          isText: t.isText || false,
          ...additionalType
        }
        // if (t.tag === 'el-upload') this.$set(res, 'value', t.defaultValue)
        return res
      })
    },
    // 数据过滤
    fillFormData(data, item) {
      let val = data && data[item.__vModel__]
      if (val) {
        if (item.config && item.__config__.viewDataType === 'DATETIME') {
          val = val ? moment(val).valueOf() : null
        }
        if (item.__config__ && item.__config__.jnpfKey === 'select') {
          try {
            val = val.toString()
          } catch {}
        }
        if (item.__config__ && item.__config__.jnpfKey === 'uploadImg') {
          try {
            let defaultValue = JSON.parse(item.__config__.defaultValue)
            val = defaultValue.length ? defaultValue : []
          } catch {}
        }
      }
      return val
    },
    removeRow(index, row) {
      if (this.config && this.config.dbLinkId && this.primaryRow && this.config.relationConf.primaryModel && this.primaryRow[this.config.relationConf.primaryModel]) {
        let Jsondata = row
        let integrated = {}
        Jsondata.forEach((item) => {
          integrated[item.__vModel__] = item.value
        })
        let primaryId = Jsondata[0].idKey ? Jsondata[0].idKey : ''
        if (!primaryId) {
          this.tableFormData.splice(index, 1)
          this.addRowList = this.filterAddData(this.tableFormData)
        } else {
          let dataJson = JSON.stringify(integrated)
          const param = new URLSearchParams()
          param.append('dataJson', dataJson)
          param.append('flowDataJson', dataJson)
          deteleChildrenModel(this.modeId, primaryId, param, this.config.dbLinkId).then((res) => {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getInData()
              }
            })
          })
        }
      } else {
        this.tableFormData.splice(index, 1)
        this.addRowList = this.filterAddData(this.tableFormData)
      }
      this.$emit('change')
    },
    addRow(val, flag) {
      this.isAddRow = true
      if (!Array.isArray(this.tableFormData)) {
        this.tableFormData = []
      }
      this.tableFormData.unshift(this.getEmptyRow(val, flag))
      this.clearAddRowFlag()
    },
    getCmpValOfRow(row, key) {
      // 获取数字相关组件的输入值
      const isNumCmp = (tag) => ['fc-amount', 'el-input-number', 'el-slider'].includes(tag)
      const target = row.find((t) => t.vModel === key)
      if (!target) return NaN
      if (isNumCmp(target.tag)) return target.value || 0
      return NaN
    },
    /**
     * 对表格进行合计 目前只支持数字，金额，滑块
     */
    getTableSummaries(param) {
      const { columns, data } = param
      const sums = []
      if (this.tableData.length + 1 !== columns.length) return [] // 防止多次加载
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const sumVal = data.reduce((sum, d) => sum + this.getCmpValOfRow(d, column.property), 0)
        sums[index] = Number.isNaN(sumVal) ? '' : sumVal
      })
      return sums
    },
    resetTable() {
      this.tableData = this.config.__config__.children
      this.tableFormData = []
      this.addRow()
    },
    reset() {
      this.tableData.map((t) => {
        let index = this.tableFormData[0].findIndex((c) => c.vModel === t.vModel)
        if (index === -1) return
        for (let i = 0; i < this.tableFormData.length; i++) {
          this.tableFormData[i][index].value = t.defaultValue
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.jnpf-table-box {
  margin-bottom: 0px;
  .row-action {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 23px;
    &:hover .delete-btn {
      z-index: revert;
      opacity: 1;
      color: #0d84ff;
    }
    &:hover .index {
      opacity: 0;
    }
    .el-icon-delete {
      position: absolute;
      opacity: 0;
      z-index: -1;
      transform: translate(-50%, -50%);
      cursor: pointer;
      line-height: 3px;
      margin-left: 10px;
    }
  }

  .actions {
    text-align: center;
    border: 1px solid #ebeef5;
    border-top: none;
    .list-summary {
      line-height: 24px;
      overflow: hidden;
      border: 1px solid #e5e5e5;
      border-top: none;
    }
  }

  &.list {
    .list-row {
      padding: 18px 0 10px;
      text-align: left;
      border-bottom: 1px solid #e5e5e5;
      position: relative;
      &:hover .delete-btn {
        display: block;
      }
      .delete-btn {
        position: absolute;
        right: 10px;
        top: 20px;
        z-index: 999;
        cursor: pointer;
        display: none;
        &:hover {
          color: #000;
        }
      }
      .row-item {
        margin-bottom: 18px;
        position: relative;
        &.error {
          .error-tip {
            top: 74%;
            z-index: 1;
          }
          >>> .el-input__inner {
            border-color: #f56c6c;
          }
        }
        > div {
          &:first-child {
            text-align: right;
            vertical-align: middle;
            float: left;
            font-size: 14px;
            color: #606266;
            line-height: 32px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
          }
        }
      }
    }
    .error-tip {
      font-size: 12px;
      padding-left: 6px;
      color: #f56c6c;
      position: absolute;
      left: 100px;
      top: 0;
      z-index: -1;
      transition: bottom 0.3s;
      min-height: auto;
    }
  }
}

.jnpf-table-box.table {
  // 索引和删除按钮切换
  >>> .el-table__row:hover {
    .index {
      display: none;
      &.btn-disabled {
        display: block;
        & + .el-icon-delete {
          opacity: 0;
          z-index: -1;
        }
      }
    }
    .el-icon-delete {
      z-index: 9;
      opacity: 1;
    }
  }
  >>> .el-input-number {
    width: 100%;
    min-width: 120px;
  }
  >>> .el-table__header th {
    line-height: 1;
  }

  >>> .el-table .el-table__body {
    td {
      padding: 2px 0;
      background: #fff !important;
      .error-tip {
        font-size: 12px;
        padding-left: 6px;
        color: #f56c6c;
      }
      .cell {
        position: relative;
      }
    }

    td:not(:first-child) {
      // vertical-align: top;
      &::after,
      &::before {
        content: '';
        width: 10px;
        height: 10px;
        background: white;
        position: absolute;
        border: 2px solid transparent;
        transition: border-color 0.3s;
      }

      &::after {
        border-top: none;
        border-right: none;
        left: 0;
        bottom: 0;
      }

      &::before {
        border-bottom: none;
        border-left: none;
        right: 0;
        top: 0;
      }

      &:hover {
        &::after,
        &::before {
          border-color: red;
        }
      }
    }
  }
}
</style>
