<template>
<div>
  <el-card>
    <!-- <el-button @click="init()">测试</el-button> -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(data,index) in list" :key="index" :label="getState(index)" :name="index">
        <el-alert
        style="margin: 10px;height:50px;"
        v-for="(item,itemi) in data" :key="itemi"
        :title="item.content"
        type="info"
        close-text="知道了"
        @close="close(item)">
      </el-alert>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</div>
</template>
<script>
  export default {
    data() {
      return {
        list:[],
        activeName: '1'
      };
    },
    mounted(){
      this.init()
    },
    computed:{
      getState(){
        return function(state){
          var str=''
          console.log(state);
          switch (parseInt(state)) {
            case 1:
              str='补货预警'
              break;
            case 2:
              str='价格预警'
              break;
            default:
              str='保质期预警'
              break;
          }
          return str
        }
    }
  },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      init(){
        this.$http.post('/getNoticeList').then(res=>{
            if (res.code == 200) {
              console.log(res.data);
              this.list=res.data
            }else{
              this.$msg.error('失败！')
            }
        })
      },
      close(e) {
        this.$http.post('/getSaveRead',e).then(res=>{
            if (res.code == 200) {
              this.$msg.success('变更成功！')
            }else{
              this.$msg.error('变更失败！')
            }
        })
      }
    }
  };
</script>