<template>
  <div class="clerk-info-box">
    <div class="clerk-info">
      {{ clerkData.clerkName }}
      <div class="clerk-code">{{ clerkData.clerkCode }}</div>
    </div>
    <i v-if="showDel" @click="$emit('del', clerkData.clerkId)" class="iconfont-hb3 iconclose1 del-clerk"></i>
  </div>
</template>

<script>
export default {
  name: 'SelectedClerkItem',
  props: {
    clerkData: {
      type: Object,
      default: () => ({})
    },
    showDel: {
      type: Boolean,
      default: true
    }
  }
};
</script>

<style lang="scss" scoped>
.clerk-info-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  height: 51px;
  background: #ebeffe;
  border-radius: 4px;
  box-sizing: border-box;
  .clerk-info {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    line-height: 20px;
    .clerk-code {
      margin-top: 2px;
      font-weight: 400;
    }
  }
  .del-clerk {
    margin-left: 10px;
    flex-shrink: 0;
    font-size: 12px;
    color: #909399;
    cursor: pointer;
    &:hover {
      color: #2f54eb;
    }
  }
}
</style>
