<template>
  <el-dialog
    title="新增订单"
    :visible.sync="memberDialogVisible"
    @close="closePop"
    :modal="false"
    class="flex-aic vehicle-dialog"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="140px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="输入用户手机号" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会员等级" prop="memberIndex">
            <el-select class="filter-item" v-model="form.memberIndex" placeholder="请选择会员类型" @change="changeLevel">
              <el-option v-for="(item, index) in memeberList" :key="item.level" :label="item.name" :value="index"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="免费天数">
            <el-input v-model="form.freeDay" placeholder="输入免费天数" type="number" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实付金额" prop="orderAmount">
            <el-input v-model="form.orderAmount" placeholder="输入实付金额" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="下单时间" prop="payTime">
            <el-date-picker
              v-model="form.payTime"
              :picker-options="pickerOptions"
              type="datetime"
              value-format="timestamp"
              placeholder="选择下单时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit" v-if="!isClick">确 定</el-button>
      <el-button type="primary" style="opacity: 0.6;" v-if="isClick">确 定</el-button>
      <el-button @click="closePop">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script type="javascript">
  import { memberLevels, createMemberOrder } from 'api/order/memeber'

  export default {
    name: 'addMemberModal',
    data() {
      return {
        memberDialogVisible:false,
        form: {
          memberIndex: undefined, // 会员等级index
          memberLevel: undefined, // 会员等级
          freeDay: undefined, // 当前会员等级免费天数
          phone: undefined, // 用户手机号
          orderAmount: undefined, // 实付金额
          payTime: undefined // 下单时间
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        isClick: false, // 是否已点击，防二次触发
        selectedMember:{}, // 当前已选会员等级
        rules: {
          phone: {
            required: true, message:'请输入用户手机号',trigger: 'blur'
          },
          memberIndex: {
            required: true, message:'请选择会员等级',trigger: 'change'
          },
          payTime: {
            required: true, message:'请选择下单时间',trigger: 'change'
          },
          orderAmount: { required: true, message: '请填写正确的实付金额,最多保留2位小数', trigger: 'blur',
            transform(value) {
              if(value !== null && value !== '' && value !== undefined) {
                if (String(value).trim() === '' || Number(value) <= 0) {
                  return false
                } else if (!/^\d+(\.\d{0,2})?$/.test(value)) {
                  return false
                } else{
                  return parseFloat(value).toFixed(2)
                }
              } else {
                return null
              }
            }
          }
        },
        memeberList: [], // 会员类型列表
      }
    },
    created() {
      this.getAllMemeberList() // 获取全部会员等级
    },
    mounted() {
      this.memberDialogVisible = true
    },
    methods: {
      /**
       * 获取全部会员列表
       */
      getAllMemeberList(){
        memberLevels().then(res => {
          this.memeberList = res
        })
      },
      closePop(){
        this.$emit('memberEvent', false)
      },
      /**
       * 会员等级变化
       */
      changeLevel(index){
        this.selectedMember = this.memeberList[index]
        this.form.memberLevel = this.selectedMember.level
        this.form.freeDay = this.selectedMember.number
      },
      /**
       * 确定
       */
      handleSubmit() {
        let _this = this
        const set = this.$refs;
        if (this.isClick) {
          return;
        }
        this.isClick = true;
        setTimeout(function(){
          _this.isClick = false
        }, 2000)
        set["form"].validate((valid) => {
          let params = {
            phone: _this.form.phone,
            payTime: _this.form.payTime,
            orderAmount: _this.form.orderAmount,
            memberLevel: _this.selectedMember.level,
            memberLevelId: _this.selectedMember.id
          }
          if (valid) {
            createMemberOrder(params).then((response) => {
              if (response.status == 200) {
                this.$notify({
                  title: "操作成功",
                  message: "添加成功",
                  type: "success",
                  duration: 2000,
                });
                setTimeout(function(){
                  _this.$emit("memberEvent", true);
                }, 1000)
              } else {
                this.isClick = false;
                this.$notify({
                  title: "失败",
                  message: response.message,
                  type: "error",
                  duration: 2000,
                });
              }
            });
          }
        })
      }
    }
  }
</script>
