<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="handleClose"
    title="批量充值"
    width="80%">
    <div style="padding:10px 20px">
      <div class="table-box">
        <el-form
          :model="form"
          ref="form"
          :inline="true"
          label-width="120"
          label-position="right"
          class="buyer-info">
          <el-form-item
            label="单个会员充值天数"
            prop="recharge_day_time"
            verify
          >
            <el-input-number
              :step="1"
              :precision="0"
              controls-position="right"
              v-model="form.recharge_day_time">
            </el-input-number>
            <br><span style="color:red">（负数为减少天数）</span>
          </el-form-item>
          <el-form-item
            label="单个会员充值金额"
            prop="recharge_money"
            verify
          >
            <el-input-number
              :min="0"
              :precision="0"
              controls-position="right"
              v-model="form.recharge_money">
            </el-input-number>
            <br><span style="color:red">总金额：{{ batchRechargeList.length * form.recharge_money }}</span>
          </el-form-item>
          <el-form-item
            prop="recharge_start_time"
            label="充值开始生效时间">
            <el-date-picker
              default-time="00:00:00"
              v-model="form.recharge_start_time"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="支付方式"
            prop="payChannel"
            verify
          >
            <el-select
              v-model="form.payChannel"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in payChannelOptions"
                :key="item"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="title">
          已选择<span> {{ batchRechargeList.length }} </span>项
        </div>
        <el-table
          height="500"
          border
          :data="batchRechargeList"
          v-loading="loading"
        >
          <el-table-column
            prop="id"
            width="100"
            label="编号">
          </el-table-column>
          <el-table-column
            width="100"
            prop="memberType.name"
            label="会员类型">
          </el-table-column>
          <el-table-column
            width="100"
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            width="100"
            prop="phone"
            label="手机号">
          </el-table-column>
          <el-table-column
            width="100"
            prop="is_valid"
            label="可用状态">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_valid?'success':'danger'">
                {{ scope.row.is_valid?'可用':'不可用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            prop="isActive"
            label="出库状态">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_out_storage?'success':'info'">
                {{ scope.row.is_out_storage?'已出库':'未出库' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            prop="isActive"
            label="激活状态">
            <template slot-scope="scope">
              <el-tag :type="scope.row.isActive?'success':'info'">
                {{ scope.row.isActive?'已激活':'未激活' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            prop="activate_end_time"
            label="激活截止时间">
            <template slot-scope="scope">
              {{ scope.row.activate_end_time | formatDate }}
            </template>
          </el-table-column>

          <el-table-column
            width="140"
            label="创建时间">
            <template slot-scope="props">
              {{ props.row.createTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="生效时间">
            <template slot-scope="props">
              {{ props.row.starttime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="截止时间">
            <template slot-scope="props">
              {{ props.row.endtime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="removeRecharge(scope.row.id)">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="dialog-btn-wrap">
          <el-button
            :disabled="!batchRechargeList.length"
            @click="submit"
            type="primary">
            确定
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { apiMember } from '@/api/member'
import moment from 'moment'

const defaultForm = {
  recharge_day_time: 365,
  recharge_money: 0,
  total_money: 0,
  payChannel: '现金',
  recharge_start_time: '',
  member_ids: []
}
export default {
  computed: {
    userId () {
      return this.$store.state.user.id
    },
    payChannelOptions () {
      return this.$store.state.app.payChannelList.filter(i => i.name.indexOf('旅行社') < 0 && i.type === 'NOPAY').map(i => i.name)
    }
  },
  components: {
  },
  props: {
    multipleSelection: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      form: {
        ...defaultForm
      },
      batchRechargeList: [],
      dateOption: {
        disabledDate () {
          return false
        }
      }
    }
  },
  methods: {
    removeRecharge (id) {
      this.batchRechargeList = this.batchRechargeList.filter((item) => item.id !== id)
    },
    submit () {
      this.form.member_ids = this.batchRechargeList.map(item => item.id)
      this.form.total_money = this.form.recharge_money
      this.$refs.form.validate(valid => {
        if (valid) {
          apiMember('rechargeMemberMoneyInBatch', this.form).then(res => {
            this.$message.success('充值成功')
            this.$emit('updateList')
            this.handleClose()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    show () {
      this.visible = true
      this.batchRechargeList = JSON.parse(JSON.stringify(this.multipleSelection))
      let endtime = this.batchRechargeList.map((i) => { return i.endtime })
      let lastEndtime = endtime.sort((a, b) => {
        return new Date(b) - new Date(a)
      })[0]
      // 设置不可选日期
      this.dateOption.disabledDate = (theTime) => {
        let startTime = moment(lastEndtime).format('YYYY-MM-DD hh:mm:ss')
        return moment(theTime).isBefore(startTime)
      }
      this.$nextTick(() => {
        this.form = JSON.parse(JSON.stringify(defaultForm))
        // let formattime = moment(lastEndtime).format('YYYY-MM-DD') + ' 00:00:00'
        // this.form.recharge_start_time = moment(formattime).add(1, 'd')
        // this.getListTransfer()
      })
    },
    handleClose () {
      this.visible = false
      this.status = 'INOUT'
    }
  },
  watch: {
    status (val) {
      this.getListTransfer()
    },
    status_invalid (val) {
      this.getListConsumeLog()
    }
    // invalidList (val) {
    //   this.recordList = this.transferList.concat(val)
    // }
  }
}
</script>

<style lang="scss" scoped>
.title{
  height: 35px;
  padding-left: 12px;
  padding-top: 12px;
  background: #e6f7ff;
  span{
    color: #199ed8;
  }
}

</style>
