<template>
  <a-card :bordered="false" class="gift-card-wrap">
    <!-- 搜索框 -->
    <div class="gift-card-search">
      <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
        <a-row :gutter="20">
          <a-col :md="6" :sm="24">
            <a-form-item label="创建时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-range-picker
                id="gift-card-time"
                v-model="time"
                :format="dateFormat"
                :placeholder="['开始时间','结束时间']"
                :disabledDate="disabledDate"
                @change="onChange" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="礼品卡内容" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-input-number
                id="gift-card-goldNum"
                v-model="searchData.goldNum"
                :min="1"
                :max="999999"
                :precision="0"
                style="width: 70%;margin-right: 5px;"
                placeholder="请输入礼品卡内容(1~999999)"
                allowClear /><span>乐豆</span>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="实体卡编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-input allowClear v-model="searchData.optionalSequence" :maxLength="30" placeholder="请输入实体卡编号" id="gift-card-optionalSequence" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="是否已充值" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <v-select
                ref="booleanState"
                code="BOOLEAN_STATE"
                v-model="searchData.state"
                allowClear
                placeholder="请选择"
                id="gift-card-enable-state"></v-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="充值时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-range-picker
                id="gift-card-rechargeTime"
                v-model="rechargeTime"
                :format="dateFormat"
                :placeholder="['开始时间','结束时间']"
                :disabledDate="disabledDate"
                @change="onRechargeChange" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="充值用户" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-input allowClear v-model="searchData.customPhone" :maxLength="30" placeholder="请输入充值用户" id="gift-card-customPhone" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="充值码" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-input allowClear v-model="searchData.sequence" :maxLength="30" placeholder="请输入充值码" id="gift-card-sequence" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button class="handle-btn serach-btn" type="primary" @click="$refs.table.refresh(true)" id="gift-card-refresh" :disabled="disabled">查询</a-button>
            <a-button class="handle-btn" @click="resetForm" id="gift-card-resetForm" :disabled="disabled">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="add">
      <a-button
        type="primary"
        icon="plus"
        class="addBtn"
        @click="handleAdd"
        id="gift-card-add"
        :disabled="disabled"
        v-if="$hasPermissions('B_giftCard_add')">新增礼品卡</a-button>
    </div>
    <!-- table列表 -->
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 创建人 -->
      <span slot="creater" slot-scope="text, record">{{ record.name + record.phone }}</span>
      <!-- 操作按钮 -->
      <span slot="action" slot-scope="text, record">
        <a-button id="gift-card-getCode" class="blue" type="link" v-if="$hasPermissions('B_giftCard_getCode')" @click="getCode(record)">获取充值码</a-button>
        <a-button id="gift-card-handleEdit" class="green" type="link" v-if="$hasPermissions('B_giftCard_edit')" @click="handleEdit(record)">编辑</a-button>
        <a-button
          v-if="record.state==0&&$hasPermissions('B_giftCard_del')"
          id="gift-card-handleDel"
          class="red"
          type="link"
          @click="handleDel(record)">删除</a-button>
      </span>
    </s-table>
    <!-- 新增礼品卡 -->
    <add-card-modal :openModal="openAddCardModal" @close="closeModal" @refresh="refreshFun" />
    <!-- 编辑礼品卡 -->
    <edit-card-modal :openModal="openEditCardModal" :cardId="cardId" @refresh="refreshFun" @close="closeModal" />
    <!-- 获取充值码 -->
    <get-code-modal :openModal="openGetCodeModal" :cardId="cardId" @close="closeModal" />
  </a-card>
</template>

<script>
import { STable, VSelect } from '@/components'
import AddCardModal from './addCardModal.vue'
import EditCardModal from './editCardModal.vue'
import GetCodeModal from './getCodeModal.vue'
import { giftCardQuery, giftCardDel } from '@/api/giftCard.js'

export default {
  components: { STable, VSelect, GetCodeModal, AddCardModal, EditCardModal },
  data () {
    return {
      disabled: true, //  页面初始化之前是否可操作
      formItemLayout: {
        labelCol: { span: 9 },
        wrapperCol: { span: 15 }
      },
      searchData: {
        startTime: null, //  创建时间  开始
        endTime: null, //  创建时间  结束
        goldNum: null, //  礼品卡内容
        optionalSequence: null, //  实体卡编号
        state: undefined, //  是否已充值
        useTimeStart: null, //  充值时间  开始
        useTimeEnd: null, //  充值时间  结束
        customPhone: null, //  充值用户
        sequence: null //  充值码
      },
      showEditModal: false, // 默认关闭弹窗
      itemId: null, // 编辑行id
      time: [], //  创建时间
      rechargeTime: [], //  充值时间
      dateFormat: 'YYYY-MM-DD',
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
        { title: '创建时间', dataIndex: 'createDate', width: 100, align: 'center' },
        { title: '创建人', scopedSlots: { customRender: 'creater' }, width: 100, align: 'center' },
        { title: '礼品卡内容', dataIndex: 'content', width: 100, align: 'center' },
        { title: '实体卡编号', dataIndex: 'optionalSequence', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
        { title: '是否已充值', dataIndex: 'stateDictValue', width: 100, align: 'center' },
        { title: '充值时间', dataIndex: 'useTime', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
        { title: '充值用户', dataIndex: 'customPhone', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
        { title: '备注', dataIndex: 'remarks', width: 100, align: 'center', ellipsis: true, customRender: (text) => { return text || '--' } },
        { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center', width: 100 }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return giftCardQuery(Object.assign(parameter, this.searchData)).then(res => {
          const no = (res.data.pageNo - 1) * res.data.pageSize
          if (res.status == 200) {
            for (let i = 0; i < res.data.list.length; i++) {
              const _item = res.data.list[i]
              _item.no = no + i + 1
            }
            this.disabled = false
            return res.data
          }
        })
      },
      cardId: null, //  卡id
      openGetCodeModal: false, //  获取充值码  弹框状态
      openAddCardModal: false, //  新增礼品卡  弹框状态
      openEditCardModal: false //  编辑礼品卡  弹框状态
    }
  },
  methods: {
    // 不可选日期
    disabledDate (date, dateStrings) {
      return date && date.valueOf() > Date.now()
    },
    // 创建时间change
    onChange (dates, dateStrings) {
      if ((dates, dateStrings)) {
        this.searchData.startTime = dateStrings[0] || null
        this.searchData.endTime = dateStrings[1] || null
      }
    },
    // 充值时间change
    onRechargeChange (dates, dateStrings) {
      if (dates, dateStrings) {
        this.searchData.useTimeStart = dateStrings[0] || null
        this.searchData.useTimeEnd = dateStrings[1] || null
      }
    },
    //  获取充值码
    getCode (record) {
      this.cardId = record.id
      this.openGetCodeModal = true
    },
    // 新增
    handleAdd () {
      this.cardId = null
      this.openAddCardModal = true
    },
    // 编辑
    handleEdit (record) {
      this.cardId = record.id
      this.openEditCardModal = true
    },
    //  关闭弹框
    closeModal () {
      this.cardId = null
      this.openAddCardModal = false
      this.openEditCardModal = false
      this.openGetCodeModal = false
    },
    //  刷新数据
    refreshFun (state) {
      //  新增需刷新第一页数据。编辑为当前页数据
      this.$refs.table.refresh(state)
    },
    // 删除
    handleDel (record) {
      this.$confirm({
        title: '警告',
        centered: true,
        content: '删除后无法恢复，确认删除?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          giftCardDel({ id: record.id }).then(res => {
            if (res.status == 200) {
              this.$message.success(res.message)
              this.$refs.table.refresh()
            }
          })
        }
      })
    },
    // 重置
    resetForm () {
      this.time = []
      this.rechargeTime = []
      this.searchData.startTime = null
      this.searchData.endTime = null
      this.searchData.goldNum = null
      this.searchData.optionalSequence = null
      this.searchData.state = null
      this.searchData.useTimeStart = null
      this.searchData.useTimeEnd = null
      this.searchData.customPhone = null
      this.searchData.sequence = null
      this.$refs.table.refresh(true)
    }
  }
}
</script>

<style lang="less" scoped>
	.gift-card-wrap{
		.gift-card-search{
      .ant-form-inline .ant-form-item{
        width: 100%;
      }
      // 搜索框的下间距
      .ant-form-item {
        margin-bottom: 10px;
      }
      .handle-btn{
        margin-top: 4px;
      }
      .serach-btn{
        margin-right: 10px;
      }
		}
		.addBtn {
			margin-bottom: 20px;
		}
    .blue {
    	color: #1890fe;
    }
    .green {
    	color: #16b50e;
    }
    .red {
    	color: red;
    }
	}

</style>
