<template>
  <div class="button">
    <van-button type="default" icon="chat-o" @click="showOften = true">
      常用语
    </van-button>
    <van-button type="default" @click="htFileClick()" v-if="isShowAttachment">
      <i class="el-icon-paperclip" style=""></i>
      添加附件
    </van-button>

    <ht-file
      ref="htFile"
      v-if="isShowAttachment"
      v-model="fileList"
      type="list"
      :limit="5"
      display-style="block"
      @onSuccess="onSuccess"
    />

    <!-- 常用语 -->
    <van-action-sheet
      v-model="showOften"
      :actions="oftenActions"
      duration="0"
      :overlay="overlay"
      cancel-text="取消"
      style="min-height: 50%; max-height: 80%"
      close-on-click-action
      @cancel="showOften = false"
      @select="selectOften"
      get-container="body"
    />
  </div>
</template>

<script>
  import { getCommonWordsByDefKeyAndTypeId } from '@/api/flow.js'
  export default {
    name: 'bottOrder',
    props: {
      isShowAttachment: {
        type: Boolean,
        default: true,
      },
      defKey: {
        type: String,
        default: '',
      },
      overlay: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        showOften: false,
        fileList: '',
        oftenActions: [],
      }
    },
    mounted() {
      this.oftenActions = []
      getCommonWordsByDefKeyAndTypeId(this.defKey, (res) => {
        if (res) {
          res.forEach((item) => {
            this.oftenActions.push({
              name: item,
            })
          })
        }
      })
    },
    methods: {
      htFileClick() {
        this.$refs.htFile.$refs.fileUpload.$refs.mobileFile.click()
      },
      selectOften(val) {
        this.$emit('selectOften', val)
      },
      onSuccess(response, file, fileList) {
        this.$emit('fileList', fileList)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .button {
    display: block;
    position: relative;
    width: 100%;
    align-items: center;
    min-height: 48px;
    ::v-deep {
      .van-button--default {
        border: 0;
        color: $base-text-color;
      }
      // .inputs.ht-form-inputs__block {
      //   margin-top: 44px;
      // }
    }
  }
  .mobile-upload {
    margin-bottom: 9px;
  }

  .inputs {
    width: auto !important;
  }
  ::v-deep .mobile-upload {
    display: none;
    .mobile-file-btn {
      color: #262626 !important;
      font-size: 14px;
      position: absolute;
      top: 5px;
      left: 100px;
      // right: auto;
    }
  }
  ::v-deep .el-icon-paperclip,
  .van-icon {
    font-size: 17px !important;
    font-weight: bold;
  }
  ::v-deep .file-list__wrap {
    width: calc(100vw - 32px);
    // padding-top: 30px;
    margin: 0 16px;
    border: none;
  }
  ::v-deep {
    .el-icon-paperclip {
      font-size: 16px;
    }
    .ht-form-inputs__block,
    .mobile-file-btn {
      display: flex !important;
      align-items: center;
    }
    .el-upload {
      display: block;
    }
    .file-item {
      border-radius: 8px 8px 8px 8px !important;
      background: #f9f9f9 !important;
      padding: 8px !important;
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0.26667rem;
      }
    }

    .van-action-sheet__item {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }
    .van-action-sheet__cancel {
      font-size: 14px;
    }
  }
  ::v-deep .file-upload-container {
    margin-bottom: 0;
    & > div {
      height: 1.17333rem;
    }
  }
</style>
