<template>
  <div>
      <el-dialog
        v-dialogDrag
        :visible.sync="showEditModal"
        :close-on-click-modal="false"
        :title="modalTitle"
        width="800px"
      >
      <div>
        <div style="margin: 0 20px;height: 500px;overflow-y: auto" v-loading="isloading">
          <!--加载中-->
          <el-radio-group v-show="!isloading" v-model="currentHome" @change="_radioChange">
            <el-radio v-for="(item,index) in radioList" :key="index" :label="item" class="radio-class">
&nbsp;&nbsp;
              <i class="iconfont" :class="item" size="20" ></i>
              <span class="radio-span">
                {{ item }}
              </span>
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div slot="footer" class="btn-width">
        <el-button type="default" style="margin-left: 8px" @click="_cancel">
          取消
        </el-button>
        <el-button type="primary" @click="_ok">
          确定
        </el-button>
      </div>
      </el-dialog>
  </div>
</template>
<style>
.radio-class {
  width: 25%;
  display: inline-block;
  padding: 5px 0;
}
.radio-class:hover .ivu-icon {
}
.radio-span {
  font-weight: normal;
  padding-left: 10px;
  font-size: 14px;
}
.radio-span:hover {
  color: #2d8cf0;
}
</style>
<script>
/**
 * 选择图标
 */
export default {
  data() {
    return {
      modalTitle: '选择图标',
      showEditModal: false,
      currentHome: '-1',
      selIcon: '',
      radioList: [],
      isloading: true
    }
  },
  methods: {
    _cancel() {
      this.showEditModal = false
    },
    _open() {
      this.showEditModal = true
      this.selIcon = ''
      this.currentHome = '-1'
      this._showBtnList()
    },
    _showBtnList() {
      this.isloading = true
      setTimeout(() => {
        this.radioList = [
          'pt-config',
          'pt-edit',
          'pt-trash',
          'pt-word',
          'pt-search',
          'pt-locked',
          'pt-unlocked',
          'pt-admin',
          'pt-back',
          'pt-table',
          'pt-resource',
          'pt-man',
          'pt-sign',
          'pt-ok',
          'pt-xml',
          'pt-pulse',
          'pt-active',
          'pt-send',
          'pt-cloud',
          'pt-certification',
          'pt-synergy',
          'pt-shake-hands',
          'pt-shield',
          'pt-share',
          'pt-refresh',
          'pt-notice',
          'pt-dispose',
          'pt-discovery',
          'pt-cloud-history',
          'pt-address-book',
          'pt-add-message',
          'pt-add',
          'pt-upload',
          'pt-bar',
          'pt-upload-cloud',
          'pt-tube',
          'pt-email',
          'pt-hot',
          'pt-map',
          'pt-check',
          'pt-tag',
          'pt-mans',
          'pt-money',
          'pt-refund',
          'pt-html5',
          'pt-share',
          'pt-deliver',
          'pt-phone',
          'pt-image',
          'pt-video',
          'pt-log-out',
          'pt-home-outline',
          'pt-man-add',
          'pt-menu',
          'pt-refresh',
          'pt-eye',
          'pt-service-fill',
          'pt-link',
          'pt-profile',
          'pt-cascades',
          'pt-question',
          'pt-back',
          'pt-download',
          'pt-enlarge',
          'pt-trophy',
          'pt-discuss',
          'pt-task',
          'pt-statistic',
          'pt-settings',
          'pt-finance',
          'pt-system',
          'pt-posting',
          'pt-company',
          'pt-repair',
          'pt-pie',
          'pt-warning',
          'pt-power',
          'pt-analysis',
          'pt-code',
          'pt-comment',
          'pt-team',
          'pt-mechanism',
          'pt-release',
          'pt-sign-in',
          'pt-pen',
          'pt-data',
          'pt-star',
          'pt-menu-fold',
          'pt-mall',
          'pt-earth',
          'pt-copy',
          'pt-phone-call',
          'pt-truck',
          'pt-customer',
          'pt-import',
          'pt-export',
          'pt-computer',
          'pt-debug',
          'pt-trouble-shooting',
          'pt-eys-outline',
          'pt-transaction',
          'pt-car',
          'pt-category',
          'pt-review',
          'pt-package',
          'pt-test',
          'pt-consult',
          'pt-experiment',
          'pt-item',
          'pt-register',
          'pt-archives',
          'pt-template',
          'pt-btn',
          'pt-setting-num',
          'pt-black-list',
          'pt-info',
          'pt-receive',
          'pt-printer',
          'pt-meter',
          'pt-design',
          'pt-distribution',
          'pt-close',
          'pt-a-check',
          'pt-a-upload',
          'pt-a-deviate',
          'pt-a-trash',
          'pt-a-chemistry',
          'pt-a-unqualified',
          'pt-a-back',
          'pt-a-cloud',
          'pt-a-view',
          'pt-a-edit',
          'pt-a-download',
          'pt-a-reg',
          'pt-a-end',
          'pt-a-data',
          'pt-a-submit',
          'pt-a-man',
          'pt-a-download-outline',
          'pt-a-clock',
          'pt-wechat'
        ]
        this.modalTitle = '选择图标' + ' ( ' + this.radioList.length + ' 个 ) '
        this.isloading = false
      }, 200)
    },
    _radioChange(data) {
      this.selIcon = data
    },
    _ok() {
      if (this.selIcon === '') {
        this.$message.warning('请选择一个图标！')
      } else {
        this.$emit('on-result-change', this.selIcon)
        this.showEditModal = false
      }
    }
  }
}
</script>
