<template>
  <ele-modal title="选择工序" :visible.sync="visible" width="580px" :maxable="true">
    <ul class="picking">
      <li
        v-for="item in list"
        class="ele-border-info"
        @click="handleClick(item)"
        >{{ item.label }}</li
      >
    </ul>
    <div slot="footer">
      <el-button @click="visible = false">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        list: [
          { label: '挤压生产', type: '1' },
          { label: '自然干燥', type: '2' },
          { label: '升温干燥', type: '3' },
          { label: '半加定长', type: '4' },
          { label: '备炉', type: '5' },
          { label: '烧结', type: '6' },
          { label: '深加工', type: '7' },
          { label: '包装', type: '8' },
          { label: '预缴库', type: '9' }
        ]
      };
    },
    methods: {
      handleClick ({ type, label }) {
        this.$router.push({
          path: '/produceOrder/picking',
          query: {
            type,
            name: label
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .picking {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    li {
      border: 1px solid;
      height: 90px;
      width: 150px;
      margin-bottom: 16px;
      text-align: center;
      line-height: 90px;
      font-size: 20px;

      &:hover {
        background-color: var(--color-primary);
        color: #fff;
        cursor: pointer;
      }
    }
  }
</style>
