<template>
  <el-row class="el-table-self">
    <el-table
      ref="selftab"
      v-loading="listLoading"
      :row-key="rowKey"
      :size="tabSize"
      :summary-method="getSummaries"
      :show-summary="showSummary"
      :span-method="spanMethod"
      :data="tableData"
      :show-overflow-tooltip="true"
      :highlight-current-row="highLight"
      :max-height="maxHeight || maxTableHeight"
      :height="tableHeight"
      :header-row-class-name="headerClass"
      :row-style="rowStyle"
      :expand-row-keys="expands"
      :cell-style="cellStyle"
      style="width: 100%"
      :default-expand-all="defaultExpandAll"
      :style="{ fontSize: fontSize + 'px' }"
      :header-cell-style="{ fontSize: fontSize + 'px' }"
      @row-click="rowClick"
      @sort-change="sortChange"
      @select="selectChange"
      @selection-change="selectionChange"
      @select-all="selectAll"
      @cell-click="cellClick"
    >
      <el-table-column
        v-if="tabType"
        :type="tabType"
        width="55"
        align="center"
        :label="tabLabel"
        :selectable="selecTable"
        :index="tabIndex"
      ></el-table-column>

      <template v-for="(column, index) in columns">
        <template v-if="!column.hidden">
          <template v-if="!column.type && !column.operType">
            <el-table-column
              :key="index"
              :show-overflow-tooltip="true"
              :fixed="column.fixed"
              :prop="column.value"
              :label="column.label"
              :width="column.width"
              :min-width="column.minWidth"
              align="center"
              :sortable="column.sortable"
              :formatter="column.formatter"
              :class-name="column.className"
              :label-class-name="column.labelClassName"
            />
          </template>
          <template v-else>
            <!-- 复杂表头 -->
            <template v-if="column.type === 'complex'">
              <el-table-column
                :key="index"
                :fixed="column.fixed"
                :prop="column.value"
                :label="column.label"
                :width="column.width"
                align="center"
              >
                <template v-for="(col2, col2Index) in column.list">
                  <template v-if="!col2.hidden">
                    <!-- 文本 -->
                    <template v-if="!col2.type && !col2.operType">
                      <el-table-column
                        :key="col2Index"
                        :show-overflow-tooltip="true"
                        :prop="col2.value"
                        :label="col2.label"
                        :width="col2.width"
                        align="center"
                        :formatter="col2.formatter"
                        :class-name="col2.className"
                      />
                    </template>

                    <!-- 按钮 -->
                    <template v-else>
                      <el-table-column
                        :key="col2Index"
                        :label="col2.label"
                        :width="col2.width"
                        :prop="col2.value"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <template
                            v-if="
                              col2.type === 'button' ||
                              col2.operType === 'button'
                            "
                          >
                            <template v-for="(op, opIndex) in col2.operations">
                              <template v-if="!op.isHidden || !op.isHidden(scope.row)">
                                <el-button
                                  :key="opIndex"
                                  :disabled="
                                    op.formatter
                                      ? op.formatter(scope.row).disabled
                                      : false
                                  "
                                  :style="op.style"
                                  :type="
                                    op.formatter
                                      ? op.formatter(scope.row).type
                                      : op.type || ''
                                  "
                                  :icon="op.icon"
                                  @click="op.func(scope.row, scope.$index)"
                                >
                                  {{
                                  op.formatter
                                  ? op.formatter(scope.row).label
                                  : op.label
                                  ? op.label
                                  : scope.row[col2.value]
                                  }}
                                </el-button>
                              </template>
                            </template>
                          </template>

                          <template v-if="col2.operType === 'input'">
                            <template v-if="col2.type === 'number'">
                              <el-input-number
                                v-if="
                                  col2.showInput
                                    ? col2.showInput
                                    : scope.row.showInput
                                "
                                v-model="scope.row[col2.value]"
                                :controls="false"
                                :min="col2.min || scope.row['min'] || 0"
                                :precision="col2.precision"
                                :disabled="col2.disabled || disabled"
                                @change="
                                  col2.func
                                    ? col2.func(scope.row, scope.$index)
                                    : {}
                                "
                                @input="
                                  handleEdit(
                                    scope.$index,
                                    scope.row[col2.value],
                                    scope.row,
                                    col2.value
                                  )
                                "
                                @blur="
                                  col2.blurFunc
                                    ? col2.blurFunc(scope.row, scope.$index)
                                    : {}
                                "
                                @keydown.native.enter="
                                  col2.enterFunc
                                    ? col2.enterFunc(scope.row, scope.$index)
                                    : {}
                                "
                              />
                              <span v-else class="tableSpan">
                                {{
                                scope.row[col2.value]
                                }}
                              </span>
                            </template>
                            <template v-else>
                              <el-input
                                v-if="
                                  col2.showInput
                                    ? col2.showInput
                                    : scope.row.showInput
                                "
                                v-model="scope.row[col2.value]"
                                :autofocus="scope.row[col2.autofocus]"
                                :disabled="disabled"
                                :size="col2.size"
                                @input="
                                  handleEdit(
                                    scope.$index,
                                    scope.row[col2.value],
                                    scope.row,
                                    col2.value
                                  )
                                "
                                @blur="
                                  col2.blurFunc
                                    ? col2.blurFunc(scope.row, scope.$index)
                                    : {}
                                "
                                @keydown.native.enter="
                                  col2.enterFunc
                                    ? col2.enterFunc(scope.row, scope.$index)
                                    : {}
                                "
                              />
                              <span v-else class="tableSpan">
                                {{
                                scope.row[col2.value]
                                }}
                              </span>
                            </template>
                          </template>

                          <template v-else-if="col2.operType === 'select'">
                            <el-select
                              v-model="scope.row[col2.value]"
                              filterable
                              clearable
                              placeholder="请选择"
                              no-data-text=" "
                              no-match-text=" "
                              :disabled="disabled"
                              :remote="col2.remote"
                              :allow-create="col2.allowCreate"
                              :remote-method="col2.remoteMethod"
                              @change="
                                col2.enterFunc
                                  ? col2.enterFunc(scope.row, scope.$index)
                                  : changeProject(
                                      scope.row[col2.value],
                                      scope.$index
                                    )
                              "
                              @focus="changeSelect(scope.row)"
                            >
                              <el-option
                                v-for="item in col2.opts
                                  ? col2.opts
                                  : scope.row.opts"
                                :key="item.value"
                                :label="item.label"
                                :value="
                                  col2.isSelect ? item.selectValue : item.value
                                "
                              ></el-option>
                            </el-select>
                          </template>
                        </template>
                      </el-table-column>
                    </template>
                  </template>
                </template>
              </el-table-column>
            </template>

            <template v-else>
              <el-table-column
                :key="index"
                :fixed="column.fixed"
                :prop="column.value"
                :label="column.label"
                :sortable="column.sortable"
                :width="column.width"
                :min-width="column.minWidth"
                align="center"
              >
                <template slot="header" slot-scope="scope">
                  <span>{{ column.label }}</span>
                  <el-checkbox
                    v-if="
                      column.tabType === 'selection' &&
                      column.operType === 'checkbox'
                    "
                    v-model="column['checkAll']"
                    style="margin-left: 4px"
                    @change="handleCheckAllChange($event, column)"
                  ></el-checkbox>
                </template>
                <template slot-scope="scope">
                  <!-- 按钮 -->
                  <template
                    v-if="
                      column.type === 'button' || column.operType === 'button'
                    "
                  >
                    <template v-for="(op, opIndex) in column.operations">
                      <template v-if="!op.isHidden || !op.isHidden(scope.row)">
                        <el-dropdown
                          v-if="op.type === 'dropdown'"
                          :key="opIndex"
                          size="large"
                          style="margin: 0 10px"
                          trigger="click"
                        >
                          <el-button type="primary" :size="size">
                            {{ op.title || "更多操作"
                            }}
                            <i
                              class="el-icon-arrow-down el-icon--right"
                            ></i>
                          </el-button>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                              v-for="(child, childIndex) in op.children"
                              :key="childIndex"
                              :disabled="
                                child.formatter
                                  ? child.formatter(scope.row).disabled
                                  : false
                              "
                              :style="
                                child.formatter
                                  ? child.formatter(scope.row).style
                                  : child.style || ''
                              "
                              :type="
                                child.formatter
                                  ? child.formatter(scope.row).type
                                  : child.type || ''
                              "
                              :icon="child.icon"
                              @click.native="
                                child.func(scope.row, scope.$index)
                              "
                            >
                              {{
                              child.formatter
                              ? child.formatter(scope.row).label
                              : child.label
                              }}
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                        <div
                          v-else-if="op.type === 'switch'"
                          :key="opIndex"
                          class="switch-cell"
                          :disabled="
                            op.formatter
                              ? op.formatter(scope.row).disabled
                              : false
                          "
                          @click="handleSwitch(scope.row, scope.$index, op)"
                        >
                          <el-switch
                            v-model="scope.row[column.value]"
                            :active-value="op.activeValue"
                            :inactive-value="op.inactiveValue"
                          ></el-switch>
                        </div>
                        <el-button
                          v-else
                          :key="opIndex"
                          :size="size"
                          :disabled="
                            op.formatter
                              ? op.formatter(scope.row).disabled
                              : false
                          "
                          :style="op.style"
                          :type="
                            op.formatter
                              ? op.formatter(scope.row).type
                              : op.type || ''
                          "
                          :icon="op.icon"
                          @click="op.func(scope.row, scope.$index)"
                        >
                          {{
                          op.formatter
                          ? op.formatter(scope.row).label
                          : op.label
                          ? op.label
                          : scope.row[column.value]
                          }}
                        </el-button>
                      </template>
                    </template>
                  </template>
                  <template v-if="column.operType === 'svg'">
                    <template
                      v-for="(operate, operIndex) in column.operations.formatter
                        ? column.operations.formatter(scope.row)
                        : column.operations"
                    >
                      <template v-if="!operate.isHidden || !operate.isHidden(scope.row)">
                        <el-tooltip
                          v-if="operate.tips"
                          :key="operIndex + Date.parse(new Date())"
                          effect="dark"
                          :open-delay="200"
                          placement="top-start"
                        >
                          <span slot="content">{{ operate.tips }}</span>
                          <svg-icon
                            :style="operate.style"
                            :icon-class="operate.iconClass"
                            class="tab-svg"
                            @click.native="
                              operate.func
                                ? operate.func(scope.row, scope.$index)
                                : {}
                            "
                          ></svg-icon>
                        </el-tooltip>
                        <svg-icon
                          v-else
                          :key="operIndex + Date.parse(new Date())"
                          :style="operate.style"
                          :icon-class="operate.iconClass"
                          class="tab-svg"
                          @click.native="operate.func(scope.row, scope.$index)"
                        ></svg-icon>
                      </template>
                    </template>
                  </template>

                  <template v-if="column.operType === 'input'">
                    <template v-if="column.type === 'number'">
                      <el-input-number
                        v-if="
                          column.showInput
                            ? column.showInput
                            : scope.row.showInput
                        "
                        v-model="scope.row[column.value]"
                        :controls="false"
                        :min="column.min || scope.row['min'] || 0"
                        :precision="column.precision"
                        :disabled="column.disabled || disabled"
                        :style="{
                          width: column.inputWidth + 'px',
                        }"
                        @change="
                          column.func
                            ? column.func(scope.row, scope.$index)
                            : {}
                        "
                        @input="
                          handleEdit(
                            scope.$index,
                            scope.row[column.value],
                            scope.row,
                            column.value
                          )
                        "
                        @blur="
                          column.blurFunc
                            ? column.blurFunc(scope.row, scope.$index)
                            : {}
                        "
                        @keydown.native.enter="
                          column.enterFunc
                            ? column.enterFunc(scope.row, scope.$index)
                            : {}
                        "
                      />
                      <span v-else class="tableSpan">
                        {{
                        scope.row[column.value]
                        }}
                      </span>
                    </template>
                    <template v-else>
                      <el-input
                        v-if="
                          column.showInput
                            ? column.showInput
                            : scope.row.showInput
                        "
                        v-model="scope.row[column.value]"
                        :autofocus="scope.row[column.autofocus]"
                        :disabled="column.disabled || disabled"
                        :size="column.size"
                        @input="
                          handleEdit(
                            scope.$index,
                            scope.row[column.value],
                            scope.row,
                            column.value
                          )
                        "
                        @blur="
                          column.blurFunc
                            ? column.blurFunc(scope.row, scope.$index)
                            : {}
                        "
                        @keydown.native.enter="
                          column.enterFunc
                            ? column.enterFunc(scope.row, scope.$index)
                            : {}
                        "
                      />
                      <span v-else class="tableSpan">
                        {{
                        scope.row[column.value]
                        }}
                      </span>
                    </template>
                  </template>

                  <template v-if="column.operType === 'date'">
                    <el-date-picker
                      v-if="column.showDate"
                      v-model="scope.row[column.value]"
                      align="center"
                      :picker-options="column.options"
                      :type="column.dateType || 'date'"
                      :placeholder="scope.row[column.placeholder]"
                      :disabled="disabled"
                      :format="column.format"
                      :value-format="column.valueFormat"
                      :size="column.size"
                    ></el-date-picker>
                    <span v-else class="tableSpan">
                      {{
                      scope.row[column.value]
                      }}
                    </span>
                  </template>

                  <template v-if="column.operType === 'textarea'">
                    <el-input
                      v-model="scope.row[column.value]"
                      type="textarea"
                      :placeholder="column.placeholder"
                      :rows="column.rows"
                      :autosize="column.autosize"
                      :minlength="column.minlength"
                      :maxlength="column.maxlength"
                      :show-word-limit="column.showLimit"
                    ></el-input>
                  </template>

                  <template v-else-if="column.operType === 'select'">
                    <el-select
                      v-model="scope.row[column.value]"
                      filterable
                      placeholder="请选择"
                      no-data-text=" "
                      no-match-text=" "
                      :disabled="disabled"
                      :remote="column.remote"
                      :allow-create="column.allowCreate"
                      :remote-method="column.remoteMethod"
                      @change="
                        column.enterFunc
                          ? column.enterFunc(scope.row, scope.$index)
                          : changeProject(scope.row[column.value], scope.$index)
                      "
                      @focus="
                        column.focusFunc
                          ? column.focusFunc(scope.row, scope.$index)
                          : {}
                      "
                    >
                      <el-option
                        v-for="item in column.opts
                          ? column.opts
                          : scope.row.opts"
                        :key="item.value"
                        :label="item.label"
                        :value="column.isSelect ? item.selectValue : item.value"
                      ></el-option>
                    </el-select>
                  </template>

                  <template v-if="column.operType === 'checkbox'">
                    <el-checkbox v-model="scope.row[column.value]"></el-checkbox>
                  </template>

                  <!-- 模糊查询输入 -->
                  <el-autocomplete
                    v-else-if="column.operType === 'autocomplete'"
                    v-model="scope.row[column.value]"
                    :popper-class="
                      column.popperClass
                        ? column.popperClass
                        : 'my-autocomplete'
                    "
                    :fetch-suggestions="column.searchFunc"
                    :placeholder="column.placeholder ? column.placeholder : ''"
                    :trigger-on-focus="false"
                    clearable
                    @select="
                      column.selectFun
                        ? column.selectFun($event, scope.$index)
                        : {}
                    "
                    @input="
                      column.inputFunc
                        ? column.inputFunc(
                            scope.row,
                            scope.$index,
                            column.value
                          )
                        : {}
                    "
                    @blur="
                      column.changeFunc
                        ? column.changeFunc(
                            scope.row,
                            scope.$index,
                            column.value
                          )
                        : {}
                    "
                  >
                    <template slot-scope="{ item }">
                      <div class="name">{{ item.name }}</div>
                      <span class="desc">{{ item.desc }}</span>
                    </template>
                  </el-autocomplete>
                  <!-- <template v-else-if="column.operType === 'check-inputs'">
                                        <el-input v-model="scope.row[column.value]" style="width:33%" @blur="column.bigFunc(scope.row,scope.$index)" />
                                        {{column.formatter1(scope.row)}}
                                        <template v-if="scope.row['isTiny'] === 1">
                                            <el-input v-model="scope.row[column.value2]" style="width:33%" @blur="column.smallFunc(scope.row,scope.$index)" />
                                            {{column.formatter2(scope.row)}}
                                        </template>
                                    </template>

                                    <template v-else-if="column.operType === 'label'">
                                        <span>{{scope.row[column.value]}}</span>
                  </template>-->

                  <template v-else-if="column.operType === 'upload'">
                    <el-button
                      v-if="!scope.row.imgUrl"
                      style="float: left"
                      type="primary"
                      @click="column.func(scope.$index)"
                    >上传</el-button>
                    <span
                      v-if="scope.row.imgUrl"
                      style="
                        float: left;
                        line-height: 32px;
                        margin-left: 5px;
                        cursor: pointer;
                        color: #409eff;
                      "
                      @click="column.enlargeFunc(scope.row.imgUrl)"
                    >{{ scope.row.imgUrl }}</span>
                    <el-button
                      v-if="scope.row.imgUrl"
                      style="float: left; margin-left: 5px"
                      type="primary"
                      @click="column.delFunc(scope.row, scope.$index)"
                    >删除</el-button>
                  </template>
                  <!-- 图片 -->
                  <template v-if="column.operType === 'img'">
                    <img
                      class="imgs"
                      :src="scope.row[column.value]"
                      :style="column.style"
                      @click="
                        column.imgFun
                          ? column.imgFun(scope.row, scope.$index)
                          : ''
                      "
                    />
                  </template>

                  <!-- 消息 -->
                  <template v-if="column.operType === 'txt'">
                    <div :style="column.style1">{{ scope.row[column.value1] }}</div>
                    <div :style="column.style2">{{ scope.row[column.value2] }}</div>
                  </template>
                  <!-- html -->
                  <template v-if="column.type === 'html'">
                    <div class="highlight" v-html="scope.row[column.value]"></div>
                  </template>
                  <!-- 展开列表 -->
                  <template v-if="column.tabType === 'expand'">
                    <el-form label-position="right" class="demo-table-expand" label-width="130px">
                      <template v-for="(expand, index) in column.expandColumns">
                        <el-form-item
                          v-if="!expand.hidden"
                          :key="index"
                          :label="`【${expand.label}】`"
                        >
                          <!-- 字体高亮 -->
                          <div
                            v-if="scope.row[expand.value]"
                            class="el-alert el-alert--info is-light"
                          >
                            <div
                              class="el-alert__content highlight"
                              v-html="scope.row[expand.value]"
                            ></div>
                          </div>
                        </el-form-item>
                      </template>
                    </el-form>
                  </template>
                </template>
              </el-table-column>
            </template>
          </template>
        </template>
      </template>
    </el-table>
    <div v-if="pageSize && totalCounts > 0" class="pagination-footer">
      <span class="description">{{ description }}</span>
      <el-pagination
        background
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCounts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </el-row>
</template>

<script>
import resize from "./resize.js"
import { mapGetters } from "vuex"
export default {
  name: "ElTableSelf",
  // filters: {
  //     statusFilter(status) {
  //         const typeMap = ['warm', 'success', 'danger']
  //         return typeMap[status]
  //     },
  //     statusFilter2(status) {
  //         const typeMap = ['danger', 'success']
  //         return typeMap[status]
  //     }
  // },
  mixins: [resize],

  props: {
    listLoading: Boolean, // tab 加载层
    rowKey: Function | String,
    expands: Array,
    highLight: { type: Boolean, default: true },
    headerClass: { type: String, default: "default" }, // 头部背景色Class名称，默认default
    tabType: String, // 对应列的类型，selection/index/expand
    tabLabel: String,
    tableHeight: Number, // 表格的高度
    maxHeight: Number, // 表格的最大高度
    tabSize: { type: String },
    tableData: Array, // 表格数据
    columns: Array, // 表格列配置数据,{vlaue:对应数据对象中的属性，label：对应的是标题文字，fixed:列是否固定，width:列宽， sortable：是否可排序，formatter:列格式化， className：对应的是列的样式类名}
    sortChange: { type: Function, default: () => {} }, // 点击列表头进行排序 { column, prop, order }
    description: String, // 分页脚底左侧的数据说明
    totalCount: [Number, String], // 表格数据总数
    pageSizes: Array, // 决定每页显示的条数[10,15,20,25]
    pageSize: Number,
    spanMethod: Function,
    operType: { type: String, default: "button" },
    getSummaries: Function,
    showSummary: { type: Boolean, default: false },
    size: { type: String, default: "small" },
    type: { type: String, default: "text" },
    currentPage: { type: Number, default: 1 },
    selecTable: Function,
    disabled: { type: Boolean, default: false },
    tabIndex: Function,
    cellStyle: Function,
    rowStyle: Function,
    defaultExpandAll: Boolean,
  },
  computed: {
    totalCounts() {
      return this.totalCount - 0
    },
    ...mapGetters({
      fontSize: "table/fontSize",
    }),
  },
  methods: {
    // switch点击
    handleSwitch(row, index, op) {
      const disabled = op.formatter ? op.formatter(row).disabled : false
      if (disabled) return
      if (op.func) op.func(row, index)
    },

    // 自定义头部 全选
    handleCheckAllChange(val, column) {
      this.tableData.forEach((item) => {
        item[column.value] = val ? true : false
      })
    },

    // 切换页面显示条数
    handleSizeChange(val) {
      this.$emit("pageSizeChange", val)
    },

    // 跳转页码
    handleCurrentChange(val) {
      this.$emit("currentPageChange", val)
    },

    // 复选框事件
    selectionChange(selections) {
      this.$emit("selectionChange", selections)
    },

    // 复选框选中当前行事件
    selectChange(selections, row) {
      this.$emit("selectChange", selections, row)
    },

    // 行点击
    rowClick(row, event) {
      this.$emit("rowClick", row, event)
    },

    // 行点击
    cellClick(row, column, cell, event) {
      this.$emit("cellClick", row, column, cell, event)
    },

    // 收费的输入
    handleEdit(index, value, row, pro) {
      this.$emit("number", index, value, row, pro)
    },

    changeProject(row, index) {
      this.$emit("project", row, index)
    },

    changeSelect(row) {
      this.$emit("changeSelect", row)
    },

    // 全选事件
    selectAll(selections) {
      this.$emit("selectAll", selections)
    },

    // 远程搜索
    remoteMethod(val) {
      this.$emit("remoteMethod", val)
    },
  },
}
</script>

<style lang="scss" scoped>
.highlight {
  ::v-deep em {
    font-weight: bold;
    font-style: normal;
    color: #f56c6c;
  }
}
.el-table-self {
  border: 1px solid #f6f6f6;
  margin-top: 20px;
  .tab-svg {
    width: 24px;
    height: 24px;
    margin: 0 2px;
    cursor: pointer;
    vertical-align: middle;
  }
  .demo-table-expand {
    .el-form-item {
      margin-bottom: 10px;
      width: 70%;
      ::v-deep .el-form-item__label,
      ::v-deep.el-form-item__content {
        font-weight: bold;
        line-height: 25px;
      }
    }
  }
}
.pagination-footer {
  .description {
    float: left;
    margin-left: 20px;
    margin-top: 12px;
    font-size: 14px;
  }
  .el-pagination {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
.el-table__empty-block {
  position: relative;
  min-height: 60px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.el-table__empty-text {
  position: absolute;
  left: 50%;
  width: 110px;
  height: 110px;
  top: 50%;
  line-height: 220px;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #5e7382;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.tableSpan {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.isPlan {
  font-size: 12px;
  color: #fff;
  padding: 2px 5px;
  background: #c1242a;
  border-radius: 3px;
}
.imgs {
  vertical-align: top;
}

::v-deep .default {
  th {
    background-color: #f6f6f6 !important;
    color: #586276;
  }
}
::v-deep .el-table__footer-wrapper tbody td {
  background: oldlace !important;
}
.el-autocomplete-suggestion.my-autocomplete {
  .desc {
    font-size: 12px;
    color: #b4b4b4;
  }
}

.switch-cell {
  position: relative;
  &::after {
    position: absolute;
    content: ".";
    cursor: pointer;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }
  &[disabled]::after {
    cursor: not-allowed;
  }
}
</style>
