<template>
  <div style="padding:15px" class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-button type="primary" @click="visible.index = true, addRule.time = '', addRule.money_arr = []">添加规则</el-button>
    <el-table
      :data="list"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
      style="margin: 20px 0;"
    >
      <el-table-column
        label="序号"
        type="index"
        width="80"
        align="center"
      />
      <el-table-column
        prop="time_start"
        label="开始时间"
        align="center"
      />
      <el-table-column
        prop="time_end"
        label="结束时间"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.time_end === '2038-01-01 00:00:00' ? '长期' : row.time_end }}
        </template>
      </el-table-column>
      <el-table-column
        prop="money_start"
        label="最小金额"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ getThousands(row.money_start,1) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="money_end"
        label="最大金额"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.money_end === 2147483647 ? '不限' : getThousands(row.money_end,1) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="pct"
        label="奖励比例"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ toPercent(row.pct) }}
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加奖励规则"
      :visible.sync="visible.index"
      width="40%"
      :destroy-on-close="true"
    >
      <el-dialog
        width="30%"
        :title="edit ? '修改金额限制' : '添加金额限制'"
        :visible.sync="visible.money"
        append-to-body
      >
        <el-form label-width="100px">
          <el-form-item label="最小金额: " required>
            <el-input-number v-model="money_form.money_start" :precision="2" :step="5000" :min="0" :disabled="addRule.money_arr.length === 0 || edit && i === 0? false:true" />
          </el-form-item>
          <el-form-item label="最大金额: ">
            <el-input-number v-model="money_form.money_end" :precision="2" :step="5000" :min="0" />
          </el-form-item>
          <el-form-item label="金额比例: " required>
            <el-input-number v-model="money_form.money_pct" :precision="2" :step="0.01" :min="0" :max="1" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="addMoney">确定</el-button>
            <el-button size="small" @click="visible.money = false, clear()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-form label-width="100px">
        <el-form-item label="开始时间: " required>
          <el-date-picker
            v-model="addRule.time"
            type="date"
            align="left"
            value-format="yyyy-MM-dd"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item label="金额限制: " required>
          <el-button style="margin-bottom: 10px" type="primary" size="mini" @click="showAdd">添加金额限制</el-button>
          <el-card v-for="(item, ix) in addRule.money_arr" :key="ix" style="margin-bottom: 10px; width: 500px" class="box-card">
            <div class="flexh">
              <div class="flex">
                <span class="flex_index">{{ ix + 1 }}.</span>
                <div style="margin-right: 10px">最小金额：<span style="color: #F23434">{{ getThousands(item.money_start,1) }}</span></div>
                <div style="margin-right: 10px">最大金额：<span style="color: #F23434">{{ getThousands(item.money_end,1) }}</span></div>
                <div style="margin-right: 10px">金额比例：{{ toPercent(item.money_pct) }}</div>
              </div>
              <div class="ding">
                <i class="el-icon-edit" @click="editItem(item, ix)" />
                <!-- <i class="el-icon-delete" @click="delItem(ix)" /> -->
              </div>
            </div>
          </el-card>
        </el-form-item>
        <el-form-item style="margin-top: 50px">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="visible.index = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { GetMoneyList, AddTimeMoney } from '@/api/money'
// 公共方法
import {
  getThousands,
  toPercent
} from '@/filters/common'
export default {
  data() {
    return {
      list: [],
      visible: {
        index: false,
        money: false
      },
      edit: false,
      i: '',
      addRule: {
        time: '',
        money_arr: []
      },
      money_form: {
        money_start: '',
        money_end: '',
        money_pct: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    showAdd() {
      // 如果money_arr数组有内容，则取上一项的最大金额为此项的最小金额
      if (this.addRule.money_arr.length) {
        const i = this.addRule.money_arr.length - 1
        if (this.addRule.money_arr[i].money_end === 0) {
          this.$message.error('请设置上一项的最大金额')
          return false
        }
        this.money_form.money_start = this.addRule.money_arr[i].money_end
      }
      this.visible.money = true
      this.edit = false
    },
    // 添加规则提交
    submit() {
      this.loadingFull = true
      if (!this.addRule.time || this.addRule.money_arr.length === 0) {
        this.$message.error('请补全信息')
        this.loadingFull = false
        return
      }
      const i = this.addRule.money_arr.length - 1
      this.addRule.money_arr[i].money_end = ''
      AddTimeMoney(this.addRule).then(res => {
        if (res.code === 200) {
          this.$message.success('添加成功')
          this.visible.index = false
          this.addRule.time = ''
          this.addRule.money_arr = []
          this.loadingFull = false
          this.getList()
        } else {
          this.loadingFull = false
          this.$message.error(res.message || '操作失败')
        }
      })
    },
    clear() {
      this.money_form = {
        money_start: '',
        money_end: '',
        money_pct: ''
      }
      this.i = ''
    },
    editItem(item, i) {
      this.edit = true
      this.i = i
      this.money_form = JSON.parse(JSON.stringify(item))
      this.visible.money = true
    },
    delItem(i) {
      this.$confirm('确定要删除吗 ?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.addRule.money_arr.splice(i, 1)
        })
        .catch(() => {})
    },
    // 添加金额限制
    addMoney() {
      if (!this.money_form.money_start || !this.money_form.money_pct) {
        this.$message.error('请补全信息')
        return
      }
      if (this.money_form.money_end !== 0 && this.money_form.money_end <= this.money_form.money_start) {
        this.$message.error('最大金额不能小于等于最小金额')
        return
      }
      if (this.edit) {
        this.addRule.money_arr[this.i] = this.money_form
        const length = this.addRule.money_arr.length - 1
        if (this.i < length) {
          this.addRule.money_arr[this.i + 1].money_start = this.money_form.money_end
        }
      } else {
        this.addRule.money_arr.push(this.money_form)
      }
      this.visible.money = false
      this.clear()
    },
    // 千分位
    getThousands(data, isDecimals) {
      return getThousands(data, isDecimals)
    },
    toPercent(point) {
      return toPercent(point)
    },
    // 获取列表
    getList() {
      this.loadingFull = true
      GetMoneyList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.list = res.data
        } else {
          this.$message.error(res.message || '获取列表失败')
        }
      }).catch(() => {
        this.loadingFull = false
        this.$message.error('获取列表失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  &_index {
    font-size: 17px;
    font-weight: bold;
    margin-right: 10px;
    color: #1890FF;
  }
}
.flexh {
    display: flex;
    justify-content: space-between;
}
.ding {
    i {
        margin-left: 10px;
        font-size: 17px;
        font-weight: bold;
    }
    i:hover {
        color: #1890FF;
        cursor: pointer;
    }
}
.tag {
    padding: 2px;
    font-size: 12px;
    line-height: 1;
    border-radius: 2px;
    font-family: simsun;
    color: #fff;
    display: inline;
    cursor: pointer;
    margin: 0 2px 0 0;
  }
.return-tag {
    color: #8c7ee4;
    border: 1px solid rgba(140,123,231,.4);
    display: inline-block;
  }
.time {
  font-size: 10px;
  margin-top: 5px;
  display: inline-block;
  color: #9DA0A2;
}
.bold {
  font-size: 18px;
  // font-weight: bold;
}
.thumbUrld {
  display: block;
  width: 100px;
  height: 100px;
}
.thumbUrl{
    display: block;
    width: 145px;
    height: 145px;
    margin-bottom: 15px;
    margin-right: 15px;
  }
</style>
