<template lang="pug">
  .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
    :style="{ width : width + 'px'}",
  )
    base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
    base-avatar(:size="36", v-else)
      img.h-full.object-cover(:src="url + photo")
    span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
    .name(v-if="isOpenChange")
      base-input(
        @click.stop,
        v-model="value.fullName",
        placeholder="Фамилия Имя Отчество"
      )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import BaseAvatar from "@/components/base/BaseAvatar";
export default {
  name: "TableCellBodyName",
  components: { BaseAvatar, BaseInput },
  props: {
    value: Object,
    avatar: String,
    photo: String,
    width: Number,
    isOpenChange: Boolean,
    avatarColor: String,
    url: String,
  },
};
</script>

<style lang="sass" scoped>
.avatar
  width: 36px
  height: 36px
  border-radius: 50%
  background-color: var(--font-grey-color)
  color: var(--font-dark-blue-color)
.name
  width: 300px
</style>
