<template>
  <div class="app-container">
    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button size="small" icon="el-icon-refresh" @click="getListByScreen">刷新</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增</el-button>
        </div>
        <div class="fr">
        </div>
      </div>

      <div class="table">
        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column align="center" label="参与团购活动名称" prop="promotionGroupName" min-width="200">
            <template slot-scope="scope">
              {{scope.row.promotionGroupName || '不限'}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="订单总金额下限" prop="limitLowerAmount" min-width="120"></el-table-column>
          <el-table-column align="center" label="订单总金额上限" prop="limitUpperAmount" min-width="120"></el-table-column>
          <el-table-column align="center" label="折扣优惠" prop="discountRate" min-width="100">
            <template slot-scope="scope">
              {{scope.row.discountRate * 10}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="status" min-width="100">
            <template slot-scope="scope">
              {{scope.row.status ? '启用':'禁用'}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
          <el-table-column align="center" label="商户" prop="companyName" min-width="160"></el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="addOrEdit('edit', scope.row)">编辑</el-button>
              <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 新增编辑 -->
    <el-dialog :title="addFormType == 'add' ? '新增折扣优惠':'编辑折扣优惠'" :visible.sync="addFormVisible" :show-close="false" width="500px" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="120px">
        <el-form-item label="团购活动" prop="activity">
          <el-select v-model="addForm.activity" placeholder="请选择团购活动" style="width: 100%">
            <el-option label="不限" value="/"></el-option>
            <el-option
              v-for="item in activityList"
              :key="item.promotionGroupId"
              :label="item.name"
              :value="item.promotionGroupId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单总金额下限" prop="amount1">
          <el-input v-model="addForm.amount1" autocomplete="off" placeholder="请输入订单总金额下限"></el-input>
        </el-form-item>
        <el-form-item label="订单总金额上限" prop="amount2">
          <el-input v-model="addForm.amount2" autocomplete="off" placeholder="请输入订单总金额上限"></el-input>
        </el-form-item>
        <el-form-item label="折扣优惠" prop="discount">
          <el-input v-model="addForm.discount" autocomplete="off" placeholder="请输入折扣优惠"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="addForm.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddForm">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getList, getDetail, addData, editData, deleteData, getActivityList } from '@/api/discount'

export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数

      editItem:  null,
      addFormType: 'add',
      addFormVisible: false,
      addForm: {
        activity: '',
        amount1: '',
        amount2: '',
        discount: '',
        status: true,
      },
      addFormRules: {
        activity: [{ required: true, message: '请选择团购活动', trigger: 'change' }],
        amount1: [{ required: true, message: '请输入订单总金额下限', trigger: 'blur' }],
        amount2: [{ required: true, message: '请输入订单总金额上限', trigger: 'blur' }],
        discount: [{ required: true, message: '请输入折扣优惠', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
      activityList: [],
    }
  },
  computed: {
    ...mapGetters([
      'userid', 
      'name'
    ])
  },
  created() {
    this.getList();
  },
  methods: {
    getActivityList() {
      getActivityList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.activityList = res.data.records;
      })
    },

    getList() {
      this.listLoading = true;

      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };

      getList(params).then(res => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      })
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1;
      this.getList();
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    // 操作 - 删除
    handleDelete(id) {
      deleteData({id: id}).then(res => {
        this.getList();
        this.$successMsg();
      })
    },

    // 新增编辑
    addOrEdit(type, item) {
      this.addFormType = type;
      this.addFormVisible = true;
      this.getActivityList();
      if(type == 'edit') {
        this.editItem = item;
        getDetail({id: item.id}).then(res => {
          this.addForm.activity = res.data.promotionGroupId || '/';
          this.addForm.amount1 = res.data.limitLowerAmount;
          this.addForm.amount2 = res.data.limitUpperAmount;
          this.addForm.discount = res.data.discountRate * 10;
          this.addForm.status = res.data.status;
        })
      }
    },

    // 取消 新增编辑
    cancelAddForm(){
      this.addFormVisible = false;
      this.$refs.addForm.resetFields();
    },

    // 提交 新增编辑
    submitAddForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let promotionGroupId = '';
          let promotionGroupName = '';
          let type = 1;
          if(this.addForm.activity !== '/') {
            let activityItem = this.activityList.find(o => o.promotionGroupId === this.addForm.activity);
            promotionGroupId = this.addForm.activity;
            promotionGroupName = activityItem.name;
            type = 2;
          }
          let params = {
            type,
            promotionGroupId,
            promotionGroupName,
            limitLowerAmount: this.addForm.amount1,
            limitUpperAmount: this.addForm.amount2,
            discountRate: this.addForm.discount / 10,
            status: this.addForm.status,
          }
          if(this.addFormType == 'edit') {
            params.id = this.editItem.id;
            editData(params).then(res => {
              this.cancelAddForm();
              this.getList();
              this.$successMsg('编辑成功');
            })
          } else {
            addData(params).then(res => {
              this.cancelAddForm();
              this.getList();
              this.$successMsg('新增成功');
            })
          }
        }
      })
    },

    
  }
}
</script>

<style lang="scss">
  .tree-dialog {
    .el-dialog__body {
      padding: 20px;
      .el-tree {
        max-height: calc(100vh - 140px - 54px - 70px);
        overflow-y: scroll;
        padding: 0 30px;
        >.el-tree-node {
          padding: 15px 0;
          border: 1px dashed #ddd;
          margin-bottom: 15px;
          border-radius: 10px;
        }
      }
    }
  }
</style>