<template>
  <div>
    <div ref="wordsBox" :class="$style['words-box']">
      <a-textarea
        ref="opinionTextarea"
        :value="value"
        class="ant-dropdown-link"
        placeholder="请填写意见"
        :rows="6"
        @change="
          (e) => {
            this.$emit('input', e.currentTarget.value)
            opinionValidate()
          }
        "
      />
      <div :class="$style.inputButton">
        <div v-if="value && value.length > 0" :class="$style.addOpinion">
          <a-button
            size="small"
            shape="circle"
            title="添加常用语"
            icon="plus"
            @click="createCommonswords"
          />
        </div>
        <!-- 手写批示 -->
        <div v-if="handWrite" :class="$style['add-words']">
          <a-button
            size="small"
            shape="circle"
            title="手写批示"
            icon="sd-edit"
            @click="writeModal"
          />
        </div>
      </div>
    </div>
    <!-- 操作栏 -->
    <div :class="$style.operaterow">
      <div :class="$style['opinion-attachment']">
        <sd-attachment
          v-if="groupId"
          ref="attachment"
          v-model="atts"
          list-type="text"
          :group-id="groupId"
          :cat-num="-5"
          :cat-num-to-hide="['-2']"
          @change="
            () => {
              opinionValidate()
              $emit('attachmentChange')
            }
          "
        >
          <div :class="$style['upload-btn']">
            <a-icon type="paper-clip" :class="$style['icon']" />
            <span>添加意见附件</span>
          </div>
        </sd-attachment>
      </div>
      <!-- 常用语选择 -->
      <a-dropdown
        v-model="visiable"
        placement="bottomRight"
        :trigger="['click']"
        :overlay-class-name="$style.dropdown"
        :get-popup-container="() => cyyPopupContainer() || $refs.wordsBox"
        :disabled="cyyloading"
        @visibleChange="cyyMenuVisiableChange"
      >
        <div :class="$style.cyytriggerbtn">
          <a-icon type="sd-message" :class="$style['icon']" />
          <span>常用语</span>
        </div>
        <a-menu
          v-if="commonwordsList.length > 0"
          slot="overlay"
          :class="[
            $style['commonwords-list'],
            personalCyy.length > 1 ? $style.sort : personalCyy.length > 0 ? $style.personal : '',
          ]"
          :style="menuStyle"
        >
          <!-- 先显示个人的，个人常用语可编辑、删除、排序 -->
          <sd-draggable
            v-if="personalCyy.length > 0"
            v-model="personalCyy"
            handle=".handle"
            :disabled="personalCyy.length === 1"
            @update="sortCommonswords"
          >
            <a-menu-item
              v-for="(item, index) in personalCyy"
              :key="item.id"
              class="ant-dropdown-menu-item"
              @click="handleMenuItem(item)"
            >
              <template v-if="editCyy.id === item.id">
                <div @click.stop>
                  <span :class="[$style['commonwords-item'], $style.commonwordsItemEdit]">
                    <a-input v-model="editCyy.content" />
                  </span>
                  <div :class="[$style.cyybtn, $style.cyybtnedit]">
                    <a-button type="primary" size="small" @click="saveCommonswords">确定</a-button>
                    <a-button size="small" @click="cancelEditCommonswords">取消</a-button>
                  </div>
                </div>
              </template>
              <template v-else>
                <span :class="$style['commonwords-item']">{{ item.opinionContent }}</span>
                <div v-if="editCyy.id === ''" :class="$style.cyybtn" @click.stop>
                  <!-- 编辑 -->
                  <a-button
                    icon="sd-edit"
                    title="编辑"
                    type="link"
                    @click="editCommonswords(item)"
                  />
                  <!-- 删除 -->
                  <a-popconfirm
                    title="确定删除？"
                    placement="topLeft"
                    @confirm="deleteCommonswords(item.id, index)"
                  >
                    <a-button icon="sd-trash2" title="删除" type="link" />
                  </a-popconfirm>
                  <!-- 排序 -->
                  <a
                    v-if="personalCyy.length > 1"
                    class="handle ant-btn ant-btn-link ant-btn-icon-only"
                  >
                    <a-icon type="sd-swap" />
                  </a>
                </div>
              </template>
            </a-menu-item>
          </sd-draggable>
          <!-- 再显示非个人的，非个人常用语不可修改 -->
          <template v-if="otherCyy.length > 0">
            <a-menu-item v-for="item in otherCyy" :key="item.id" @click="handleMenuItem(item)">
              <span :class="$style['commonwords-item']">{{ item.opinionContent }}</span>
            </a-menu-item>
          </template>
        </a-menu>
      </a-dropdown>
    </div>
    <a-modal
      ref="writeModel"
      v-model="signaturePadvisible"
      title="手写批示"
      :width="900"
      destroy-on-close
      :confirm-loading="writeConfirmLoading"
      :mask-closable="false"
      @ok="saveWrite"
    >
      <div :class="$style.writeRegion">
        <a-space>
          <a-radio-group v-model="colorVal" @change="handleChangeColor">
            <a-radio-button value="#000">
              <a-icon type="highlight" :class="$style.blackPen" />
            </a-radio-button>
            <a-radio-button value="red"
              ><a-icon type="highlight" :class="$style.redPen"
            /></a-radio-button>
            <a-radio-button value="blue"
              ><a-icon type="highlight" :class="$style.bluePen"
            /></a-radio-button>
          </a-radio-group>
          <a-popover placement="bottom">
            <template slot="content">
              <a-slider
                :tip-formatter="formatter"
                :dots="true"
                :default-value="3"
                :marks="marks"
                :min="1"
                :max="6"
                @change="penslider"
              />
            </template>
            <template slot="title">
              <span>选择笔画粗细</span>
            </template>
            <a-button icon="unordered-list">笔粗</a-button>
          </a-popover>
          <a-button @click="erase"><sd-icon type="sd-eraser" />橡皮</a-button>
          <a-button icon="undo" @click="undo">撤销</a-button>
          <a-button @click="clearSignature"><sd-icon type="sd-brush" theme="fill" />清空</a-button>
          <!-- <a-button @click="addcanvas">增高区域</a-button> -->
        </a-space>
      </div>
      <VueSignaturePad
        ref="signaturePad"
        :class="$style.canvasWrap"
        :options="options"
        width="100%"
        :height="canvasHeight + 'px'"
      />
    </a-modal>
  </div>
</template>

<script>
import debounce from 'lodash.debounce'
import { Message, Modal } from 'ant-design-vue'
import Vue from 'vue'
import moment from 'moment'
import VueSignaturePad from 'vue-signature-pad'
import components from './_import-components/sd-opinion-model-import'
import PageService from '@/common/services/page-service'
import FrequentlyService from '@/frequently/frequently-service'
import storeMixin from '@/common/store-mixin'
import attachmentIdToBase64 from '@/common/services/attachment-id-to-base-64'
import axios from '@/common/services/axios-instance'
// 手写签批组件

Vue.use(VueSignaturePad)
export default {
  name: 'SdOpinionModel',
  components,
  inject: {
    webflow: { default: () => ({}) },
  },
  mixins: [storeMixin],
  props: {
    groupId: {
      type: String,
      default: undefined,
    },
    value: {
      type: String,
      default: undefined,
    },
    cyyPopupContainer: {
      type: Function,
      default: () => {},
    },
    // 显示手写批示
    handWrite: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      colorVal: '#000',
      signaturePadvisible: false,
      canvasHeight: 400,
      options: {
        penColor: '#000',
        maxWidth: 2.5,
      },
      marks: {
        1: '1',
        2: '2',
        3: '3',
        4: '4',
        5: '5',
        6: '6',
      },
      commonwordsList: [],
      personalCyy: [],
      otherCyy: [],
      editCyy: {
        id: '',
        content: '',
      },
      pageParamInfo: {}, // 用于添加常用语接口参数
      menuStyle: {
        width: '', // 相对于body定位，设置宽度:解决内容溢出宽度问题
      },
      isFirstFlag: true,
      atts: [],
      visiable: false,
      cyyloading: false,
      writeConfirmLoading: false,
    }
  },
  computed: {
    writeCode() {
      return this.atts.find((item) => item.CatNum === '-2')?.code
    },
  },
  watch: {
    writeCode() {
      this.opinionValidate()
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.opinionTextarea) {
        this.menuStyle.width = `${this.$refs.opinionTextarea.$el.clientWidth}px`
      }
      this.opinionValidate(false)
    })
    this.getPageParamInfo()
  },
  methods: {
    opinionValidate(validate) {
      // eslint-disable-next-line babel/no-unused-expressions
      this.webflow?.opinionValidate?.({
        // todo触发webflow的意见字段校验，现在校验和预览用一个函数，考虑分开，并emit事件在调用出触发
        atts: JSON.parse(JSON.stringify(this.atts)),
        attskey: this.atts.map((item) => item.code).join(''),
        preview: true,
        validate,
      })
    },
    penslider(val) {
      this.getPen()
      if (!this.colorVal) this.colorVal = this.options.penColor
      this.options = {
        maxWidth: val,
      }
    },
    // 比粗滑块
    formatter(value) {
      return value
    },
    base64toBlob(base64) {
      var arr = base64.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },

    // 打开手写批示
    writeModal() {
      this.signaturePadvisible = true
      if (this.writeCode) {
        attachmentIdToBase64(this.writeCode).then((res) => {
          this.$refs.signaturePad.fromDataURL(res)
        })
      }
    },
    // 保存手写签批
    saveWrite() {
      this.writeConfirmLoading = true
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
      // 等于true代表没有进行编辑
      if (this.writeCode) {
        axios
          .delete(
            `api/framework/v1/attachment-extend/attachments-delete/${this.groupId}?attachmentId=${this.writeCode}&formId=-1&beanId=-1`
          )
          .then(() => {
            this.$refs.attachment.updateFileList()
          })
      }
      if (isEmpty) {
        this.signaturePadvisible = false
        this.writeConfirmLoading = false
      } else {
        // 先删除上一次
        // 修改过，进行保存
        // todo 应该调用替换的接口，这次先做组件拆分
        const blob = this.base64toBlob(data)
        const filename = new Date().getTime() + '.png'
        const catnum = -2
        const strTime = moment().format('YYYY-MM-DD HH:mm:ss')
        const formData = new FormData()
        formData.append('groupId', this.groupId)
        formData.append('file', blob, filename)
        formData.append('FileName', filename)
        formData.append('formId', -1)
        formData.append('beanId', -1)
        formData.append('instId', -1)
        formData.append(
          'querystring',
          `<file_unid></file_unid><file_name>${filename}</file_name><file_size>${blob.size}</file_size><completed>1</completed><file_create>${strTime}</file_create><file_update>${strTime}</file_update><file_editmodel>0</file_editmodel><file_lockuser>0</file_lockuser><CreateInfo>${this.userInfo.account} ${strTime}</CreateInfo><filetype></filetype><user_name>${this.userInfo.account}</user_name><UpdateInfo>${this.userInfo.account}于${strTime}创建.</UpdateInfo><TaodaInfo></TaodaInfo><CatNum>${catnum}</CatNum><Ext></Ext>`
        )

        debounce(() => {
          axios
            .post('api/xcoa-mobile/v1/iam-attachment-extend/attachments-upload/indi', formData, {
              headers: {
                'Content-Type': 'multipart/form-data',
              },
            })
            .then((res) => {
              if (res.data) {
                this.signaturePadvisible = false
                this.writeConfirmLoading = false
              }
              this.$refs.attachment.updateFileList()
            })
        }, 500)()
      }
    },
    getPen() {
      const ctx = this.$refs.signaturePad.$refs.signaturePadCanvas.getContext('2d')
      ctx.globalCompositeOperation = 'source-over'
    },
    // 字体大小
    handleChangeSize(val) {
      this.options = {
        maxWidth: val.key,
      }
    },
    // 选择颜色
    handleChangeColor(val) {
      this.getPen()
      this.$refs.signaturePad.openSignaturePad()
      this.options = {
        penColor: val.target.value,
      }
    },
    // 撤销
    undo() {
      this.getPen()
      this.$refs.signaturePad.undoSignature()
      this.colorVal = ''
      this.$refs.signaturePad.lockSignaturePad()
    },
    // 清空
    clearSignature() {
      this.getPen()
      this.$refs.signaturePad.clearSignature()
    },
    // 橡皮擦
    erase() {
      this.colorVal = ''
      this.options = { penColor: 'white' }
      const ctx = this.$refs.signaturePad.$refs.signaturePadCanvas.getContext('2d')
      ctx.globalCompositeOperation = 'destination-out'
    },
    getCommonwordsList() {
      const params = {
        columns: 'opinionContent,opinionType,sortNum',
        formId: 'oaPersonalOpinion',
        maxResults: -1,
        orderBy: 'sortNum asc,lastModifiedTime descend',
        startPosition: 0,
        expressions: [],
        extParam: {
          businessTypeId:
            this.webflow?.FlowData?.processFormData.processFormPropertyValues?.find(
              (item) => item.name === 'businessTypeId'
            )?.value || '',
          instId: this.webflow?.FlowData?.instId || '',
          todoId: this.$route.params.type === 'todo-pages' ? this.$route.params.id : '',
        },
      }
      return FrequentlyService.getCommonwordsList(params).then((res) => {
        if (res.status === 200) {
          // 区分个人和非个人的常用语
          this.commonwordsList = [...res.data.data]
          const personalCyy = []
          const otherCyy = []
          this.commonwordsList.forEach((item) => {
            if (item.opinionType === 0) {
              personalCyy.push({ ...item })
            } else {
              otherCyy.push({ ...item })
            }
          })
          this.personalCyy = [...personalCyy]
          this.otherCyy = [...otherCyy]
        }
      })
    },
    cyyMenuVisiableChange(visiable) {
      // 要显示下拉菜单且当前是第一次，则初始化常用语则初始化
      if (visiable && this.isFirstFlag) {
        this.cyyloading = true
        this.getCommonwordsList().finally(() => {
          this.cyyloading = false
        })
        this.getPageParamInfo()
        this.isFirstFlag = false
      }
    },
    handleMenuItem(item) {
      this.visiable = false
      this.$emit('input', `${this.value}${item.opinionContent}`)
      this.opinionValidate()
    },
    // 获取参数信息，用于新建常用语接口所传的参数
    getPageParamInfo() {
      PageService.get({}, 'personal/opinion/oaPersonalOpinion').then((res) => {
        if (res.status === 200) {
          this.pageParamInfo.pageflowId = res.data.attrs.pageflowId
          this.pageParamInfo.pagePath = res.data.attrs.pagePath
        }
      })
    },
    // 新建常用语
    createCommonswords() {
      const opinionContentVal = this.value.trim()
      const isExistOpinionContentIndex = this.commonwordsList.findIndex(
        (item) => item.opinionContent === opinionContentVal
      )
      const _this = this
      let content = '是否将填写意见添加到常用语中'
      if (isExistOpinionContentIndex !== -1) {
        content = '常用语已存在，是否重复添加'
      }
      Modal.confirm({
        title: '提示',
        content: content,
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk() {
          const inputs = [
            { name: 'opinionContent', value: opinionContentVal },
            { name: 'sortNum', value: 1 },
          ]
          const params = {
            eventId: 'save',
            inputs,
            pageFlowId: _this.pageParamInfo.pageflowId,
            pagePath: _this.pageParamInfo.pagePath,
          }
          PageService.save(params)
            .then((res) => {
              if (res.status === 200) {
                Message.success('添加常用语成功')
                _this.getCommonwordsList()
              }
            })
            .catch((err) => {
              Modal.error({
                title: '添加失败',
                content: err.response?.data?.message?.split(':')[1] || '添加失败',
              })
            })
        },
      })
    },
    getFileList() {
      return this.atts
    },
    // 常用语编辑
    editCommonswords(record) {
      this.editCyy.id = record.id
      this.editCyy.content = record.opinionContent
    },
    // 取消编辑常用语
    cancelEditCommonswords() {
      this.editCyy.id = ''
      this.editCyy.content = ''
    },
    // 常用语保存
    saveCommonswords() {
      const cyy = this.personalCyy.find((item) => item.id === this.editCyy.id)
      // 找到对应修改的常用语且内容有更新
      if (cyy && cyy.opinionContent !== this.editCyy.content) {
        const isExistOpinionContentIndex = this.commonwordsList.findIndex(
          (item) => item.opinionContent === this.editCyy.content
        )
        const _that = this
        let p = Promise.resolve(true)
        if (isExistOpinionContentIndex !== -1) {
          p = new Promise((resolve) => {
            Modal.confirm({
              title: '提示',
              content: '常用语已存在，是否重复添加',
              okText: '是',
              okType: 'danger',
              cancelText: '否',
              onOk() {
                resolve(true)
              },
              onCancel() {
                resolve(false)
              },
            })
          })
        }
        p.then((flag) => {
          if (flag) {
            const inputs = [
              { name: 'opinionContent', value: _that.editCyy.content },
              { name: 'sortNum', value: cyy.sortNum },
              { name: 'id', value: cyy.id },
            ]
            const params = {
              eventId: 'save',
              inputs,
              pageFlowId: _that.pageParamInfo.pageflowId,
              pagePath: _that.pageParamInfo.pagePath,
            }
            PageService.save(params)
              .then((res) => {
                if (res.status === 200) {
                  Message.success('修改常用语成功')
                  cyy.opinionContent = _that.editCyy.content
                  _that.commonwordsList.find((item) => item.id === cyy.id).opinionContent =
                    cyy.opinionContent
                  _that.editCyy.id = ''
                  _that.editCyy.content = ''
                }
              })
              .catch((err) => {
                Message.error(err.response?.data?.message?.split(':')[1] || '修改失败')
              })
          }
        })
      } else {
        this.editCyy.id = ''
        this.editCyy.content = ''
      }
    },
    // 常用语排序
    sortCommonswords() {
      // 给个人常用语重新排序
      this.personalCyy = this.personalCyy.map((item, index) => {
        item.sortNum = index + 1
        return item
      })
      // 对排序有变化的常用语进行更新
      this.personalCyy
        .filter((item) => {
          return this.commonwordsList.find((word) => word.id === item.id)?.sortNum !== item.sortNum
        })
        .forEach((item) => {
          const inputs = [
            { name: 'opinionContent', value: item.opinionContent },
            { name: 'sortNum', value: item.sortNum },
            { name: 'id', value: item.id },
          ]
          const params = {
            eventId: 'save',
            inputs,
            pageFlowId: this.pageParamInfo.pageflowId,
            pagePath: this.pageParamInfo.pagePath,
          }
          PageService.save(params)
            .then((res) => {
              if (res.status === 200) {
                // 更新commonwordsList
                this.commonwordsList.find((word) => word.id === item.id).sortNum = item.sortNum
              } else {
                Message.error('常用语排序失败')
              }
            })
            .catch((err) => {
              Message.error(err.response?.data?.message?.split(':')[1] || '常用语排序失败')
            })
        })
    },
    // 常用语删除
    deleteCommonswords(id, index) {
      FrequentlyService.deletePersonalOpinion(id).then(() => {
        Message.success('删除成功')
        this.personalCyy.splice(index, 1)
        this.commonwordsList = this.commonwordsList.filter((item) => item.id !== id)
      })
    },
    validator(rule, value, callback) {
      return (required) => {
        const atts = this.getFileList() || []
        if (atts.length && atts.some((item) => item.Completed === 0)) {
          callback(new Error('正在上传意见附件,请稍后再试'))
          return
        }
        if (atts.length === 0 && !value?.trim() && required) {
          callback(new Error('意见 不能为空'))
        } else {
          callback()
        }
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$black-pen: #000;
$red-pen: red;
$blue-pen: blue;
$add-opinion-color: rgba(0, 0, 0, 0.3);

.opinion-attachment {
  position: relative;
  padding-top: 34px;
  > div > div:first-child {
    float: left;
    height: 0;
  }
  .upload-btn {
    position: absolute;
    min-width: 120px;
    margin-top: -48px;
    font-size: $avatar-font-size-sm;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-color: $primary-color;
    border-radius: 5px;
    .icon {
      padding: 5px;
    }
  }
  .upload-btn:hover,
  .upload-btn:focus,
  .upload-btn:active {
    color: $primary-color;
    .icon {
      border-color: $primary-color;
    }
  }
}
.cyytriggerbtn {
  position: absolute;
  top: 4px;
  right: 0;
  padding-right: 5px;
  font-size: $avatar-font-size-sm;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  border-color: $primary-color;
  border-radius: 5px;
  .icon {
    padding: 5px;
  }
  &:hover,
  &:focus,
  &:active {
    color: $primary-color;
    .icon {
      border-color: $primary-color;
    }
  }
}
.dropdown {
  &:global(.ant-dropdown) {
    z-index: 1000;
  }
}
.words-box {
  position: relative;
  line-height: 1.5;
  .input-button {
    position: absolute;
    right: 15px;
    bottom: 14px;
    display: flex;
    > div {
      margin-left: 5px;
      &:first-child {
        margin-left: 0;
      }
    }
    :global(.ant-btn-icon-only) {
      vertical-align: middle;
    }
  }
  .add-words {
    :global(.ant-btn) {
      border: 0;
    }
  }
  .add-opinion {
    :global(.ant-btn-icon-only) {
      color: $add-opinion-color;
      border: 1px solid $add-opinion-color;
      &:hover {
        color: $primary-color;
        border: 1px solid $primary-color;
      }
      i {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.operaterow {
  position: relative;
  line-height: 1.5;
  :global(.ant-btn) {
    border: 0;
  }
  &::before {
    position: absolute;
    top: 2px;
    right: 0;
    left: 0;
    height: 32px;
    content: '';
    background: #fafafa;
  }
}

.commonwords-list {
  max-width: 100%;
  max-height: 260px;
  overflow: auto;
  .commonwords-item {
    display: inline-block;
    width: 100%;
    color: $menu-highlight-color;
    word-break: break-all;
    white-space: pre-wrap;
  }
  &.personal {
    .commonwords-item {
      // 有个人常用语，需预留右侧操作按钮的显示
      width: calc(100% - 65px);
    }
    // 编辑时，文本框宽度要去掉右侧按钮区域
    .commonwords-item-edit {
      width: calc(100% - 120px);
    }
  }
  &.sort {
    .commonwords-item {
      // 可排序（只有个人常用语可排序），预留操作按钮位置
      width: calc(100% - 90px);
    }
    // 编辑时，文本框宽度要去掉右侧按钮区域
    .commonwords-item-edit {
      width: calc(100% - 120px);
    }
  }
  :global(.ant-dropdown-menu-item) {
    position: relative;
  }
  .cyybtn {
    position: absolute;
    top: 0;
    right: 0;
  }
  .cyybtnedit {
    width: 120px;
    line-height: 2.5;
    :global(.ant-btn) {
      margin-left: 5px;
      &:first-child {
        margin-left: 0;
      }
    }
  }
  :global(.handle) {
    cursor: move;
  }
  :global(.handle .anticon-sd-swap) {
    transform: rotate(90deg);
  }
  :global(.ant-btn-icon-only) {
    font-size: 1em;
  }
}
.commonwords-list::-webkit-scrollbar {
  /* 滚动条样式 */
  width: 4px;
  height: 4px;
}
.commonwords-list::-webkit-scrollbar-thumb {
  /* 滚动条里面小方块 */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.commonwords-list::-webkit-scrollbar-track {
  /* 滚动条里面轨道 */
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 手写板 */
.write-region {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-top: -$padding-lg;
  .black-pen {
    color: $black-pen;
  }
  .red-pen {
    color: $red-pen;
  }
  .blue-pen {
    color: $blue-pen;
  }
}
.canvas-wrap {
  border: 1px solid $border-color-base;
  border-radius: $border-radius-base;
}
</style>
