<template>
  <div>
    <a-drawer title="新增預製卡" :destroyOnClose="true" :visible="visible" :body-style="{ paddingBottom: '80px' }"
      @close="onClose">
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="名稱" prop="name" :rules="{
          required: true,
          message: '必填',
          trigger: 'blur',
        }">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="數量" prop="number" :rules="{
          required: true,
          message: '必填',
          trigger: 'blur',
        }">
          <a-input v-model="form.number" />
        </a-form-model-item>
        <a-form-model-item label="使用天數" prop="days" :rules="{
          required: true,
          message: '必填',
          trigger: 'blur',
        }">
          <a-input v-model="form.days" />
        </a-form-model-item>
        <!-- <a-form-model-item label="代理" ref="agent" prop="agent">
      <a-select v-model="form.agent_id" placeholder="請選擇">
        <a-select-option :value="v.id" v-for="v of agentList" :key="v.id">
          {{v.name}}
        </a-select-option>
      </a-select>
    </a-form-model-item> -->
        <a-form-model-item label="開卡到期日" prop="expire">
          <a-date-picker @change="onChange" :value="expire" />
        </a-form-model-item>

        <!-- <a-form-model-item label="是否有效">
      <a-switch default-checked v-model="form.status" />
    </a-form-model-item> -->

      </a-form-model>
      <div :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }">
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          關閉
        </a-button>
        <a-button type="primary" @click="onSubmit">
          送出
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import moment from 'moment'

import { addPrecard } from '@/services/card'

import { getAgents } from '@/services/site'

export default {
  name: 'AddForm',
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      roleList: [],
      form: {
        name: '',
        number: null,
        days: null,
        expire_time: null
      },
      rules: {
      },
      agentList: []
    }
  },
  props: {
    visible: Boolean
  },
  async mounted() {
    //取得代理
    let res = await getAgents()
    this.agentList = res.data
  },
  computed: {
    expire() {
      if (this.form.expire_time) {
        return moment.unix(this.form.expire_time)
      } else {
        return null
      }
    }
  },
  methods: {
    onChange(date, dateString) {
      if (date) {
        this.form.expire_time = date.format('X')
      } else {
        this.form.expire_time = 0
      }
    },
    onClose() {
      this.$refs.ruleForm.resetFields();
      this.$emit('close', true)
    },
    onSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let res = await addPrecard(this.form)
          if (res.code === 200) {
            this.$refs.ruleForm.resetFields();
            this.$emit('add', true)
          } else {
            this.$message.error('新增失敗')
          }
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.ant-drawer-header {
  background-color: #87e8de !important;

  .ant-drawer-title {
    color: #FFF !important;
  }
}

.ant-drawer-content-wrapper {
  width: 50% !important;
}
</style>