<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-button type="primary" @click="rewardType=true;rewardVis = true;">添加</el-button>
    <el-table
      :data="list"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
      style="margin:10px 0 0 0;"
    >
      <el-table-column
        prop="month"
        align="center"
        label="月份"
      />
      <el-table-column
        prop="account_rate"
        align="center"
        label="兑换率"
      />
      <el-table-column
        prop="enjoy_hard"
        align="center"
        label="优享店精装提成单价"
      />
      <el-table-column
        prop="enjoy_other"
        align="center"
        label="优享店其他提成单价"
      />
      <el-table-column
        prop="over_enjoy_hard"
        align="center"
        label="优享店精装(超出装修后)提成单价"
      />
      <el-table-column
        prop="over_enjoy_hard"
        align="center"
        label="优享店其他(超出装修后)提成单价"
      />
      <el-table-column
        prop="experience_hard"
        align="center"
        label="体验店精装提成单价"
      />
      <el-table-column
        prop="experience_other"
        align="center"
        label="体验店其他提成单价"
      />
      <el-table-column
        align="center"
        label="可兑换商品"
      >
        <template slot-scope="{ row }">
          <ul class="goods_list">
            <li
              v-for="item in row.rewards"
              :key="item.id"
            >
              <span>{{ `${item.name}-${item.price}` }}</span>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="150"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="small" @click="editReward(row)">修改</el-button>
          <el-button type="danger" size="small" @click="deleteReward(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="total"
      :limit="listQuery.page_size"
      :page="listQuery.page_index"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
    <el-dialog
      :title="rewardType ? '添加奖励设置' : '修改奖励设置'"
      :visible.sync="rewardVis"
      :bofore-close="resetReward"
    >
      <el-form ref="reward_form" label-width="230px" :model="params" :rules="rewardRules">
        <el-form-item label="月份:" prop="month">
          <el-date-picker
            v-model="params.month"
            type="month"
            placeholder="选择月份"
            value-format="yyyy-MM"
          />
        </el-form-item>
        <el-form-item label="兑换率:" prop="account_rate">
          <el-input v-model="params.account_rate" type="text" placeholder="范围0-1" />
        </el-form-item>
        <el-form-item label="优享店精装提成单价:" prop="enjoy_hard">
          <el-input v-model="params.enjoy_hard" type="text" placeholder="优享店精装提成单价" />
        </el-form-item>
        <el-form-item label="优享店其他提成单价:" prop="enjoy_other">
          <el-input v-model="params.enjoy_other" type="text" placeholder="优享店其他提成单价" />
        </el-form-item>
        <el-form-item label="优享店精装(超出装修后)提成单价:" prop="over_enjoy_hard">
          <el-input v-model="params.over_enjoy_hard" type="text" placeholder="优享店精装(超出装修后)提成单价" />
        </el-form-item>
        <el-form-item label="优享店其他(超出装修后)提成单价:" prop="over_enjoy_other">
          <el-input v-model="params.over_enjoy_other" type="text" placeholder="优享店其他(超出装修后)提成单价" />
        </el-form-item>
        <el-form-item label="体验店精装提成单价:" prop="experience_hard">
          <el-input v-model="params.experience_hard" type="text" placeholder="体验店精装提成单价" />
        </el-form-item>
        <el-form-item label="体验店其他提成单价:" prop="experience_other">
          <el-input v-model="params.experience_other" type="text" placeholder="体验店其他提成单价" />
        </el-form-item>
        <el-form-item label="兑换商品">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="addGoodVis = true">添加</el-button>
          <ul class="goods_list">
            <li
              v-for="(item, i) in params.goods"
              :key="i"
            >
              <span>{{ `${item.name} - ${item.price}` }}</span>
              <i class="el-icon-remove delete" @click="deleteGood(item.id)" />
            </li>
          </ul>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetReward">取消</el-button>
          <el-button type="primary" @click="addOrEditReward">{{ rewardType ? '添加' : '修改' }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="兑换商品"
      :visible.sync="addGoodVis"
      width="520px"
      :before-close="resetGoods"
    >
      <el-form ref="goods_form" label-width="120px" :model="goods" :rules="goodsRule">
        <el-form-item label="商品名称:" prop="name">
          <el-input v-model="goods.name" type="text" placeholder="商品名称" />
        </el-form-item>
        <el-form-item label="商品价格:" prop="price">
          <el-input v-model="goods.price" type="text" placeholder="商品价格" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="resetGoods">取消</el-button>
          <el-button type="primary" size="small" @click="addGoods">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getRewardList, AddRewardList, deleteRewardList, editRewardList } from '@/api/shop/reward'
export default {
  name: 'ShopReward',
  data() {
    return {
      listQuery: {
        page_index: 1,
        page_size: 10
      },
      loadingFull: false,
      list: [],
      total: 0,
      rewardVis: false,
      rewardType: true,
      params: {
        month: '',
        account_rate: '',
        enjoy_hard: '',
        enjoy_other: '',
        over_enjoy_hard: '',
        over_enjoy_other: '',
        experience_hard: '',
        experience_other: '',
        goods: []
      },
      rewardRules: {
        month: [
          { required: true, message: '请选择月份', trigger: 'change' }
        ],
        account_rate: [
          { required: true, message: '请填写兑换率', trigger: 'blur' }
        ],
        enjoy_hard: [
          { required: true, message: '请填写优享店精装提成单价', trigger: 'blur' }
        ],
        enjoy_other: [
          { required: true, message: '请填写优享店其他提成单价', trigger: 'blur' }
        ],
        over_enjoy_hard: [
          { required: true, message: '请填写优享店精装(超出装修后)提成单价', trigger: 'blur' }
        ],
        over_enjoy_other: [
          { required: true, message: '请填写优享店其他(超出装修后)提成单价', trigger: 'blur' }
        ],
        experience_hard: [
          { required: true, message: '请填写体验店精装提成单价', trigger: 'blur' }
        ],
        experience_other: [
          { required: true, message: '请填写体验店其他提成单价', trigger: 'blur' }
        ]
      },
      addGoodVis: false,
      goods: {
        name: '',
        price: ''
      },
      goodsRule: {
        name: [
          { required: true, message: '请填写商品名称', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请填写商品价格', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getRewardList()
  },
  methods: {
    getRewardList() {
      this.loadingFull = true
      getRewardList(this.listQuery).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.list = res.data.list
          this.total = res.data.total
        }
      }).catch(e => {
        this.loadingFull = false
        this.$message.error('获取奖励列表失败')
      })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getRewardList()
    },
    addGoods() {
      this.$refs.goods_form.validate((valid) => {
        if (valid) {
          let id
          if (this.params.goods.length > 0) {
            this.params.goods.sort((a, b) => a.id - b.id)
            id = this.params.goods[this.params.goods.length - 1].id + 1
          } else {
            id = 1
          }
          this.params.goods.push({
            name: this.goods.name,
            price: this.goods.price,
            id: id,
            isAdd: true
          })
          this.resetGoods()
        } else {
          return false
        }
      })
    },
    resetGoods() {
      this.goods.name = ''
      this.goods.price = ''
      this.addGoodVis = false
    },
    deleteGood(id) {
      const i = this.params.goods.findIndex(item => item.id === id)
      this.params.goods.splice(i, 1)
    },
    addOrEditReward() {
      if (this.params.goods.length === 0) {
        this.$message.error('请添加兑换商品')
        return false
      }
      this.$refs.reward_form.validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.params)
          if (this.rewardType) {
            this.loadingFull = true
            AddRewardList(params).then(res => {
              this.loadingFull = false
              if (res.code === 200) {
                this.$message.success(res.message)
                this.resetReward()
                this.getRewardList()
              } else {
                this.$message.error(res.message)
              }
            }).catch((e) => {
              this.loadingFull = false
              this.$message.error('添加失败')
            })
          } else {
            editRewardList(params).then(res => {
              this.loadingFull = false
              if (res.code === 200) {
                this.$message.success(res.message)
                this.resetReward()
                this.getRewardList()
              } else {
                this.$message.error(res.message)
              }
            }).catch((e) => {
              this.loadingFull = false
              this.$message.error('修改失败')
            })
          }
        } else {
          return false
        }
      })
    },
    deleteReward(id) {
      this.$confirm('是否删除该奖励', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingFull = true
        deleteRewardList({ id }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.$message.success(res.message)
            this.getRewardList()
          } else {
            this.$message.error(res.message)
          }
        }).catch(() => {
          this.loadingFull = false
          this.$message.error('删除失败')
        })
      }).catch(() => {})
    },
    editReward(item) {
      const params = Object.assign({}, item)
      params.goods = item.rewards
      this.params = Object.assign({}, params)
      this.rewardType = false
      this.rewardVis = true
    },
    resetReward() {
      this.params = {
        month: '',
        account_rate: '',
        enjoy_hard: '',
        enjoy_other: '',
        over_enjoy_hard: '',
        over_enjoy_other: '',
        experience_hard: '',
        experience_other: '',
        goods: []
      }
      this.rewardVis = false
      this.rewardType = true
    }
  }
}
</script>
<style lang="scss" scoped>
  .goods_list {
    list-style: none;
    padding: 0;
    li {
      list-style: none;
      .delete {
        cursor: pointer;
        font-size: 16px;
        margin-left: 5px;
      }
    }
  }
</style>
