<template>
  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
    <div class="yo-form-group">
      <a-form-model-item label="应用名称" prop="name">
        <a-input placeholder="请输入应用名称" v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="唯一编码" prop="code">
        <a-input placeholder="请输入唯一编码" v-model="form.code" />
      </a-form-model-item>
      <a-form-model-item label="图标" prop="icon">
        <a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
          <a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
          <a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop="color">
        <chrome-picker v-model="form.color" />
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sort">
        <a-input-number
          :max="1000"
          :min="0"
          class="w-100-p"
          placeholder="请输入排序"
          v-model="form.sort"
        />
      </a-form-model-item>
    </div>

    <yo-icon-selector ref="icon-selector" v-model="form.icon" />
  </a-form-model>
</template>
<script>
import YoIconSelector from '@/components/yoIconSelector';
import { Chrome } from 'vue-color';

export default {
  components: {
    YoIconSelector,
    ChromePicker: Chrome,
  },
  data() {
    return {
      form: {
        color: '#fff',
        active: false,
      },
      rules: {
        name: [{ required: true, message: '请输入应用名称' }],
        code: [{ required: true, message: '请输入唯一编码' }],
      },
    };
  },
  methods: {
    /**
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
    onFillData(record) {
      this.form = this.$_.cloneDeep(record);
    },

    /**
     * 必要的方法
     * 在外部窗口进行保存时调用表单验证
     */
    onValidate(callback) {
      this.$refs.form.validate(callback);
    },

    /**
     * 必要的方法
     * 在外部窗口关闭或重置时对表单验证进行初始化
     */
    onResetFields() {
      setTimeout(() => {
        this.$refs.form.resetFields();
      }, 300);
    },

    onOpenSelectIcon() {
      this.$refs['icon-selector'].onOpen(this.form.icon);
    },
  },
};
</script>