<template>
  <el-dialog :visible.sync="dialogFormVisible" :fullscreen="false" title="积分登记" width="60%" append-to-body>
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="120px">
      <div class="form-div">
        <div class="form-left">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model.trim="dataForm.memberName" :disabled="true" type="text" placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="tel">
                <el-input v-model.trim="dataForm.memberTel" :disabled="true" type="text" placeholder=""/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="积分登记类型" prop="type">
                <el-select v-model="dataForm.type" placeholder="请选择">
                  <el-option
                    v-for="item in typeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="积分数" prop="score">
                <el-input v-model.trim="dataForm.score" type="text" placeholder="必填"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="积分内容" prop="content">
                <el-input v-model.trim="dataForm.tel" type="text" placeholder="必填"/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :disabled="!canEdit" type="primary" @click="saveData">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addMember } from '@/api/biz/member'

export default {
  name: 'AddScore',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      typeList: [
        { name: '新增积分', value: '1' },
        { name: '使用积分', value: '2' }
      ],
      dataForm: {
        memberId: '', // 会员id
        memberName: '', // 会员姓名
        memberTel: '', // 会员手机号
        type: '', // 积分类型
        score: '', // 积分数
        remain: '', // 当前积分数
        content: '' // 内容
      }, // 表单
      rules: {
        type: [{ required: true, message: '积分类型不能为空', trigger: ['blur', 'change'] }],
        score: [{ required: true, message: '积分数不能为空', trigger: ['blur', 'change'] }, { type: 'number', message: '必须为数字值' }],
        content: [{ required: true, message: '积分内容不能为空', trigger: ['blur', 'change'] }]
      }, // 前端校验规则
      canEdit: true
    }
  },
  methods: {
    /**
     * 初始化对话框
     * @param row 内容参数（编辑和详情需要）
     */
    initDialog: function(row = null) {
      this.dialogFormVisible = true
      this.dataForm = {
        memberId: row.id, // id
        memberTel: row.tel, // id
        memberName: row.name, // id
        remain: row.score, // 姓名
        type: '', // 积分类型
        score: '', // 积分数
        content: '' // 内容
      }
    },
    // 重置表单
    resetForm() {
      this.dataForm = {
        memberId: '', // 会员id
        memberName: '', // 会员姓名
        memberTel: '', // 会员手机号
        type: '', // 积分类型
        score: '', // 积分数
        remain: '', // 当前积分数
        content: '' // 内容
      }
    },
    // 保存数据
    saveData: function() {
      this.canEdit = false
      this.$refs['dataForm'].validate((valid) => {
        console.log(this.dataForm)
        if (valid) {
          addMember(this.dataForm).then(response => {
            if (response.code === 200) {
              this.$confirm('新增成功，是否继续新增?', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'info'
              }).then(() => {
                this.resetForm()
                this.$nextTick(() => {
                  this.$refs['dataForm'].clearValidate()
                  this.canEdit = true
                })
              }).catch(() => {
                this.$emit('watchChild')
                this.dialogFormVisible = false
                this.canEdit = true
              })
            }
          }).catch((e) => {
            this.canEdit = true
          })
        } else {
          this.canEdit = true
        }
      })
    },
    // 取消
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .form-div{
    width:100%;
    height:100%;
    display:flex;
    justify-content: space-between;
  }
  .form-left{
    flex:1;
    height:100%;
  }
  .score-div{
    .table-container{
      border-top:1px solid #ebebeb !important;
      .pagination-container{
        padding-bottom: 10px !important;
      }
    }
  }
</style>