<template>
  <a-modal
   :title=title 
   :width="640" 
   :visible="visible" 
   :confirmLoading="loading" 
   @ok="onChangeOk" 
   okText="保存并标记用户"
   cancelText="取消"
   @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="标签名称">
          <a-input v-decorator="['PublicName', {rules: [{required: true, message: '必填项不能为空！'}]}]" />
        </a-form-item>
        <a-form-item label="筛选设置">
          <a-checkbox-group :options="options"  @change="onChange" v-decorator="['Type', {initialValue:checkedList, rules: [{required: true, message: '必填项不能为空！'}]}]"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  // 表单字段
  const fields = ['PublicName', 'id', 'ecode', 'FacEcode', 'Type']
  const options = [
    { label: 'BMI', value: '0' },
    { label: '年龄', value: '1' },
    { label: '身高', value: '2' },
    { label: '身高', value: '3' },
    { label: '肌肉率', value: '4'},
    { label: '内脂', value: '5' },
    { label: '体重', value: '6'},
    { label: '脂肪率', value: '7'},
    { label: '使用频次', value: '8'},
  ]
  const tagKeys = [{
      index: '0',
      label: 'BMI',
    },
    {
      index: '1',
      label: '年龄',
    },
    {
      index: '2',
      label: '身高',
    },
    {
      index: '3',
      label: '性别',
    },
    {
      index: '4',
      label: '肌肉率',
    },
    {
    	index: 5,
    	label: '内脂',
    },
    {
    	index: 6,
    	label: '体重',
    },
    {
    	index: 7,
    	label: '脂肪率',
    },
    {
    	index: 8,
    	label: '使用频次',
    },
  ]
  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      model: {
        type: Object,
        default: () => null
      }
    },
    data() {
      this.formLayout = {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 7
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 13
          }
        }
      }
      return {
        tagKeys,
        options,
        checkedList: [],
        checkedItem:[],
        title: '添加标签',
        form: this.$form.createForm(this)
      }
    },
    created() {
      fields.forEach(item => this.form.getFieldDecorator(item))
      this.$watch('model', () => {
        if (this.model) {
          this.title = '编辑标签'
          this.model && this.form.setFieldsValue(pick(this.model, fields))
          const attr = this.model.type.split(',')
          this.checkedList = attr
          console.log(this.checkedList)
        } else {
          this.title = '添加标签'
          this.checkedList=[]
        }
      })
    },
    methods: {
      //选择
      onChange(e) {
        console.log(e)
        this.checkedItem = e
      },
      onChangeOk(e){
        // console.log(this.checkedItem)
        // if(!this.checkedItem.length){
        //   this.$message.info('请选择标签')
        //   return
        // }
        // this.$emit('ok')
      }
    }
  }
</script>
<style scoped="scoped">
  /deep/.ant-checkbox-group-item{
    width: 30%;
    margin-bottom: 15px;
  }
</style>
