import * as API from 'api/base/permissions';
import { isIntNum } from 'validate';

export default{
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    show(bool) {
      this.my_show = bool;
      if (bool) {
        this.tree = this.handleTreeData(this.data);
      }
    },
    'params.open'(value) {
      if (value == 2) {
        this.window.min = 100;
      } else {
        this.window.min = 0;
      }
    }
  },
  data() {
    return {
      loading: false,
      my_show: false,
      params: {
        type: 0,
        parent_id: '',
        name: '',
        title: '',
        description: '',
        path: '',
        icon: '',
        status: 1,
        displayorder: 0,
        open: 0, // 打开方式: 0:iframe方式 1打开新窗口 2:弹出窗口 3:vue组件
        height: 0,
        width: 0
      },
      tree: [],
      iconObj: {
        show: false,
        type: ''
      },
      window: {
        min: 0
      }
    };
  },
  methods: {
    handleTreeData(data) {
      let array = [];
      data.forEach((item, index) => {
        let obj = {
          id: item.id,
          label: item.title,
          isDefaultExpanded: true
        };

        if (item.children && item.children.length) {
          obj.children = this.handleTreeData(item.children);
        }
        array.push(obj);
      });
      return array;
    },

    /**
       * [openIcon 选择图标]
       * @return {[type]} [description]
       */
    openIcon() {
      this.iconObj = {
        show: true,
        type: this.params.icon
      };
    },

    /**
       * [selectIconSuccess 图标选择成功触发事件]
       * @param  {[type]} icon [description]
       * @return {[type]}      [description]
       */
    selectIconSuccess(icon) {
      this.params.icon = icon;
    },

    numberBlur() {
      this.$nextTick(() => {
        let val = this.params.displayorder;
        if (!isIntNum(val)) {
          if (val) {
            val = parseInt(val);
          } else {
            val = 0;
          }
        }
        this.params.displayorder = val;
      });
    },

    save() {
      if (!this.params.title) {
        this.$Message.info('请填写名称');
        return;
      }

      if (!this.params.name) {
        this.$Message.info('请填写标识');
        return;
      }

      if (!(/^[a-zA-Z][\s\S]{0,29}/.test(this.params.name))) {
        this.$Message.info('标识以英文字母开头,长度在1-30之间');
        return;
      }

      if (this.params.type) {
        // 操作按钮
        if (!this.params.description) {
          this.$Message.info('请选择按钮权限类型');
          return;
        }
      } else {
        // 页面菜单
        if (!this.params.description) {
          this.$Message.info('请填写描述');
          return;
        }

        if (!this.params.path) {
          this.$Message.info('请填写路径');
          return;
        }

        if (this.params.open == 2) {
          if (this.params.height < 100) {
            this.$Message.info('打开方式为弹出窗口，最小高度为100');
            return;
          }

          if (this.params.width < 100) {
            this.$Message.info('打开方式为弹出窗口，最小宽度为100');
            return;
          }
        }

        if (!this.params.icon) {
          this.$Message.info('请选择图标');
          return;
        }
      }

      if (this.params.displayorder === '') {
        this.$Message.info('请填写排序');
        return;
      }

      this.loading = true;
      API.create(this.params).then(res => {
        this.loading = false;
        if (res.code == 0) {
          this.$Message.success('添加成功');
          this.$emit('on-success');
          this.my_show = false;
        }
      }).catch(err => {
        this.loading = false;
      });
    },

    visibleChange(bool) {
      if (!bool) {
        this.$emit('update:show', false);
        this.clear();
      }
    },

    /**
       * [clear 清空]
       * @return {[type]} [description]
       */
    clear() {
      for (let k in this.params) {
        if (['type', 'displayorder', 'open', 'height', 'width'].includes(k)) {
          this.params[k] = 0;
        } else if (k == 'status') {
          this.params[k] = 1;
        } else {
          this.params[k] = '';
        }
      }
    }
  }
};
