smsb-web-develop/src/views/bigscreen/Program.vue

<template>
  <div class="l-flex--col c-program">
    <div
      class="c-program__body u-pointer"
      :style="style"
      @click="onClick"
    >
      <el-tooltip
        v-if="isRejected"
        :content="program.remark"
        placement="top-start"
      >
        <i
          class="c-program__warning el-icon-warning-outline"
          @click.stop
        />
      </el-tooltip>
      <span class="c-program__ratio">{{ program.resolutionRatio }}</span>
      <div class="c-program__time u-ellipsis">{{ time }}</div>
    </div>
    <div class="l-flex--col c-program__footer">
      <edit-input
        v-model.trim="name"
        class="c-program__name"
        :disabled="disabled"
        @edit="onEdit"
      />
      <div class="c-program__buttons l-flex--row">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
import { getAssetUrl } from '@/api/asset'
import { updateProgramName } from '@/api/program'
import { State } from '@/constant'

export default {
  name: 'Program',
  props: {
    program: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      name: this.program.name
    }
  },
  computed: {
    disabled () {
      return this.program.status !== State.READY
    },
    style () {
      const img = this.program.img
      return img
        ? {
          backgroundSize: 'contain',
          backgroundImage: `url("${/^data/.test(img) ? img : getAssetUrl(img)}")`
        }
        : {}
    },
    time () {
      return this.program.updateTime?.split(' ')[0]
    },
    isRejected () {
      return this.program.status > State.RESOLVED
    }
  },
  methods: {
    onClick () {
      const { id, status } = this.program
      this.$viewProgram(id, status !== State.SUBMITTED && status !== State.RESOLVED ? 'design' : 'view')
    },
    onEdit () {
      const name = this.name
      if (!name) {
        this.name = this.program.name
        return
      }

      if (name === this.program.name) {
        return
      }

      updateProgramName({
        id: this.program.id,
        name
      }).catch(
        () => {
          this.name = this.program.name
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.c-program {
  align-self: flex-start;
  margin: 0 2px 8px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);

  &__body {
    position: relative;
    padding-top: 56.25%;
    color: #fff;
    font-size: 16px;
    border-radius: $radius $radius 0 0;
    background: rgba(0, 0, 0, 0.8) url("~@/assets/program_bg.png") center center /
      100% 100% no-repeat;
  }

  &__warning {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 6px;
    color: $warning;
    font-size: 24px;
  }

  &__ratio {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 6px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0 $radius 0 $radius;
  }

  &__time {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 14px;
    padding: 10px 6px 4px;
    background-image: linear-gradient(
      to bottom,
      rgba(#000, 0) 0%,
      rgba(#000, 0.6) 100%
    );
  }

  &__footer {
    border-radius: 0 0 $radius $radius;
  }

  &__name {
    color: $black;
    font-weight: bold;
  }

  &__buttons {
    border-top: 1px solid $border;

    &:empty {
      display: none;
    }

    & > div {
      flex: 1 0 0;
      padding: 12px 10px;
      color: $blue;
      font-size: 14px;
      font-weight: bold;
      line-height: 1;
      text-align: center;
      cursor: pointer;

      &:hover {
        background-color: $blue--light;
      }
    }
  }
}
</style>