<template>
  <div class="icon-List">
    <el-dialog
      :visible.sync="visible"
      :append-to-body="true"
      :show-close="isClose"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="内置图标" name="first">
          <ul v-if="iconList" class="clearfix">
            <li
              v-for="(item, index) in iconList"
              :key="index"
              @click="changeData(item)"
            >
              <i :class="item" />
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="自定义图标" name="second">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon">
              <p>点击上传</p>
            </i>
          </el-upload>
          <div>
            <el-input v-model="iconName" class="icon-name" placeholder="图标代码"></el-input>
          </div>
          <el-button class="confirm" type="primary" @click="changeIconName">确定</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import icoNameList from '@/utils/elementUI'
export default {
  name: 'IconList',
  components: {},
  props: {},
  data() {
    return {
      visible: false,
      isClose: false,
      iconList: [],
      activeName: 'first',
      iconName: '',
      imageUrl: ''
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.iconList = icoNameList
  },
  methods: {
    show(show) {
      this.visible = show
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    changeData(iconName) {
      this.visible = false
      // 传递图标名称给父级
      this.$emit('iconName', iconName)
    },
    changeIconName() {
      this.visible = false
      // 传递图标名称给父级
      this.$emit('iconName', this.iconName)
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
  box-shadow: 0px 4px 10px 0px #666666;
  border-radius: 4px;
  width: 573px;
  height: 300px;
  position: relative;
  top: 4vh;
  left: 0vw;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 10px;
  }
  .el-tabs {
    .el-tabs__content {
      height: 200px;
      overflow-y: scroll;
      ul {
        li {
          float: left;
          padding: 1%;
          margin: 2px;
          border: 1px solid #e8eaec;
          cursor: pointer;
          width: 30px;
          height: 30px;
        }
      }
      .avatar-uploader-icon {
        font-size: 12px;
        color: #8c939d;
        text-align: center;
        width: 62px;
        height: 62px;
        background: #f6f7f9;
        border-radius: 4px;
        border: 1px solid #e5e5e5;
        padding-top: 32%;
      }
    }
  }
  .confirm {
    float: right;
    margin-top: 30px;
  }

  .icon-name {
    width: 70%;
    margin-top: 10px;
  }
}
</style>