<template>
   <Modal class="icon-modal-wraper" v-model="my_show" :closable="false" :mask-closable="false" :width="530" @on-visible-change="visibleChange">
      <p slot="header" class="title">选择图标</p>

      <div class="icon-list-wraper">
         <ul>
            <li class="ds-ib" v-for="(item,index) in icons" :key="index" :class="{'active':item==select_icon}" :type="item">
               <Icon :type="item" size="26" class="icon-item"></Icon>
            </li>
         </ul>
      </div>

      <div slot="footer" class="footer-wraper ta-c">
         <Button type="primary" ghost class="btn w-80" @click="my_show=false">取消</Button>
         <Button type="primary" class="btn w-80" @click="ok">确定</Button>
      </div>
   </Modal>
</template>

<script>
   import icons from 'service/icon';

   export default {
      props: {
         show: { //开关状态
            type: Boolean,
            default: false
         },
         type: { //icon值
            type: String,
            default: ''
         }
      },
      data() {
         return {
            icons, //图标列表
            my_show: false, // 开/关
            select_icon: '' //选中图标值
         }
      },
      watch: {
         show(bool) {
            this.my_show = bool;
            this.select_icon = this.type;
         }
      },
      mounted() {
         this.select();
      },
      methods: {
         select() { //icon选择
            let _this = this;
            $('.icon-list-wraper ul li').click(function() {
               if (!$(this).hasClass('active')) {
                  $(this).addClass('active').siblings('li').removeClass('active');
                  _this.select_icon = $(this).attr('type');
               }else{
                  $(this).removeClass('active');
                  _this.select_icon = '';
               }
            });
         },

         ok() {
            this.$emit('on-success', this.select_icon);
            this.my_show = false;
         },

         visibleChange(bool){
            if(!bool){
               this.$emit('update:show', false);
            }
         }
      }
   }
</script>

<style scoped lang="less">
   @import '~css/icon.less';
</style>
