<template>
  <div class="foot_box">
    <div
      v-for="(item, index) in btnList"
      :key="index"
      class="btn"
      :style="{ background: item.bjColor }"
      @click="footClick(item.type)"
    >
      <img src="../../../assets/Frame.png" class="Frame" />
      {{ item.name }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        btnList: [
          {
            name: '领料',
            type: 'pick',
            bjColor: '#FC1B75'
          },
          {
            name: '投料',
            type: 'feed',
            bjColor: '#FBD114'
          },

          {
            name: '报工',
            type: 'job',
            bjColor: '#157A2C'
          },

          {
            name: '请托',
            type: '',
            bjColor: '#3490DE'
          },

          {
            name: '委外',
            type: '',
            bjColor: '#39D9AC'
          },

          {
            name: '副产品回收',
            type: '',
            bjColor: '#6639A6'
          },

          {
            name: '暂停',
            type: '',
            bjColor: '#858585'
          },

          {
            name: '异常',
            type: '',
            bjColor: '#FF4D4F'
          },

          {
            name: '交接',
            type: '',
            bjColor: '#2B56C2'
          }
        ]
      };
    },

    computed: {
      taskObj() {
        return this.$store.state.user.taskObj;
      },

      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },
    watch: {
      taskObj(val) {
        if (this.clientEnvironmentId == 2 && val.type == 3) {
          this.btnList[1].name = '质检';
          this.btnList[1].type = 'inspection';
        } else {
          this.btnList[1].name = '投料';
          this.btnList[1].type = 'feed';
        }
      }
    },

    created() {},
    methods: {
      footClick(type) {
        this.$emit('footBtn', type);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .foot_box {
    min-width: 1280px;
    width: 100%;
    height: 80px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
  }

  .btn {
    height: 80px;
    width: calc(100% / 9);
    margin: 0 3px;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .Frame {
      width: 26px;
      height: 26px;
    }
  }
</style>
