<template>
  <div class="editItem">
    <div class="editItem-body">
      <div class="editItem-body-content">
        <el-tag
          v-for="(item, idx) in list"
          :key="idx"
          v-if="item.isDel == 0"
          type="info"
          effect="plain"
          size="small"
          disable-transitions
          :closable="!closable"
          @close="tagClose(item)"
        >
          {{ item.account }}
        </el-tag>
      </div>
      <el-button
        type="text"
        size="small"
        icon="el-icon-circle-plus-outline"
        :disabled="closable"
        @click="add()"
        >{{ $t("system.add") }}</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    status: {
      type: String,
      default: "",
    },
    closable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    tagClose(data) {
      this.$emit("tagClose", {
        data: data,
        type: this.status,
        list: this.list,
      });
    },
    add() {
      this.$emit("add", this.status);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.el-tag {
  color: #333;
}

.editItem {
  // margin-bottom: 10px;
  .editItem-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .content:after {
    content: "*";
    color: $fedexError;
  }
  .editItem-body {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .editItem-body-content {
      width: 100%;
      min-height: 32px;
      max-height: 64px;
      overflow-y: auto;
      line-height: 32px;
      padding: 0 5px;
      background-color: rgba(242, 242, 242, 1);
      margin-bottom: 2px;
      .el-tag {
        margin-right: 3px;
      }
    }
  }
  .editItem-body-file {
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: space-between;
    line-height: 32px;
    font-size: 12px;
    padding: 0 10px;
    background-color: rgba(242, 242, 242, 1);
  }
}
</style>