<template>
  <div>
    <div
      v-for="item in list"
      :key="item.vsiValue"
      class="icon-container"
      @click="handleClick(item)"
    >
      <Icon
        :type="item.vsiValue"
        class="icon-size"
      ></Icon>
      <P>{{ item.vsiValue }}</P>
    </div>
  </div>
</template>
<script>
import { GetValueSetByCode } from '../server.js';
export default {
  data() {
    return {
      list: []
    };
  },
  computed: {},
  watch: {},
  created: function() {
    this.$emit('SetPageSize', 800);
    this.$emit('SetTitle', '选择图标');
    this.$emit('SetPageActions', [
      {
        text: '关闭',
        theme: 'primary',
        handle: () => {
          this.$emit('Close');
        }
      }
    ]);
    this.getData();
  },
  methods: {
    handleClick(item) {
      this.$emit('Close', item);
    },
    getData() {
      GetValueSetByCode({ code: 'MENU_ICON' }).then(response => {
        this.list = response.dataResult;
      }).catch(error => {
        this.$Message.warning({
          content: error.message,
          duration: 3
        });
      });
    }
  }
};
</script>

<style scoped>
  .icon-container {
      float: left;
      padding-top: 10px;
      width: 100px;
      text-align: center;
      cursor: pointer;
      height: 50px;
      color: #5c6b77;
      position: relative;
  }
  .icon-size {
      font-size: 20px;
  }
</style>
