<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-button
      type="primary"
      size="small"
      style="margin-bottom: 20px"
      @click="visible.type = 'add'; visible.activity = true"
    >
      添加活动
    </el-button>
    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="id"
        label="#"
        width="70"
        align="center"
      />
      <el-table-column
        prop="title"
        label="活动名称"
        align="center"
      />
      <el-table-column
        label="持续时间"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          {{ `${row.startime}-${row.endtime}` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="disabled"
        label="状态"
        width="150"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag :type="row.disabled !==0 ? 'danger' : 'success'">{{ row.disabled === 0 ? '正常' : '已禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="230"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-button
            type="primary"
            size="mini"
            @click="handleEdit(row)"
          >
            修改
          </el-button>
          <el-button
            size="mini"
            @click="handleDisable(row)"
          >
            {{ row.disabled === 0 ? '禁用' : '启用' }}
          </el-button>
          <el-button
            size="mini"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="tableTotal"
      :limit="searchParams.page_size"
      :page="searchParams.page_index"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
    <!-- 添加 -->
    <el-dialog
      :title="visible.type === 'add' ? '添加活动' : '修改活动'"
      :visible.sync="visible.activity"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="level"
        :model="level"
        :rules="levelRules"
        label-width="100px"
      >
        <el-form-item label="活动标题:" prop="title">
          <el-input
            v-model="level.title"
          />
        </el-form-item>
        <el-form-item
          label="活动持续时间:"
          prop="time"
        >
          <el-date-picker
            v-model="level.time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="setPickerOptions"
          />
        </el-form-item>
        <el-form-item
          label="特级-升级门槛"
          prop="tjUp"
        >
          <el-input
            v-model="level.tjUp"
            type="number"
            min="0"
            placeholder="满多少钱可升级"
          />
        </el-form-item>
        <el-form-item
          label="顶级-升级门槛"
          prop="djUp"
        >
          <el-input
            v-model="level.djUp"
            type="number"
            min="0"
            placeholder="满多少钱可升级"
          />
        </el-form-item>
        <el-form-item
          label="顶级-降级门槛"
          prop="tjDown"
        >
          <el-input
            v-model="level.tjDown"
            type="number"
            min="0"
            placeholder="业绩最少不被降级"
          />
        </el-form-item>
        <el-form-item
          label="皇冠-降级门槛"
          prop="hgDown"
        >
          <el-input
            v-model="level.hgDown"
            type="number"
            size="small"
            min="0"
            placeholder="业绩最少不被降级"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            @click="handleCancel"
          >
            取消
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleSubmit"
          >
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
// api
import {
  getActivityList,
  addActivity,
  disableActivity,
  deleteActivity,
  editActivity
} from '@/api/system/activity'

export default {
  data() {
    return {
      searchParams: {
        page_size: 20,
        page_index: 1,
        search_name: ''
      },
      table: [],
      tableTotal: 0,
      visible: {
        activity: false,
        type: 'add'
      },
      level: {
        time: '',
        djUp: '',
        tjUp: '',
        tjDown: '',
        hgDown: '',
        title: '',
        id: ''
      },
      levelRules: {
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择活动持续时间', trigger: 'blur' }
        ],
        djUp: [
          { required: true, message: '请设置特级代理升级金额门槛', trigger: 'blur' }
        ],
        tjUp: [
          { required: true, message: '请设置顶级代理升级金额门槛', trigger: 'blur' }
        ],
        djDown: [
          { required: true, message: '请设置顶级代理不被降级门槛', trigger: 'blur' }
        ],
        hgDown: [
          { required: true, message: '请设置皇冠代理不被降级门槛', trigger: 'blur' }
        ]
      },
      setPickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      loadingFull: false
    }
  },
  methods: {
    // 获取活动列表
    async getActivityList() {
      this.loadingFull = true
      try {
        const res = await getActivityList(this.searchParams)
        const { message, code } = res
        if (code === 200) {
          const { list, total } = res.data
          this.table = list
          this.tableTotal = total
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取系统设置活动失败:${e}`)
      }
      this.loadingFull = false
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getActivityList()
    },
    // 取消添加
    handleCancel() {
      this.$refs.level.resetFields()
      this.visible.activity = false
    },
    // 添加
    handleSubmit() {
      this.$refs.level.validate((valid) => {
        if (valid) {
          const { id, time, djUp, tjUp, tjDown, hgDown, title } = this.level
          if (this.visible.type === 'add') {
            this.addActivity({
              title,
              startime: time[0],
              endtime: time[1],
              super_up: djUp,
              top_down: tjDown,
              top_up: tjUp,
              crown_down: hgDown
            })
          } else {
            this.editActivity({
              title,
              startime: time[0],
              endtime: time[1],
              super_up: djUp,
              top_down: tjDown,
              top_up: tjUp,
              crown_down: hgDown,
              id
            })
          }
        } else {
          return false
        }
      })
    },
    // 添加
    async addActivity(data) {
      const res = await addActivity(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.handleCancel()
          this.getActivityList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`系统设置添加活动失败:${e}`)
      }
    },
    // 添加
    async editActivity(data) {
      const res = await editActivity(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.handleCancel()
          this.getActivityList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`系统设置修改活动失败:${e}`)
      }
    },
    // 点击删除
    handleDelete(row) {
      const { id, title } = row
      this.$confirm(`确认删除${title}?`, '删除活动', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteActivity(id)
      })
    },
    // 删除
    async deleteActivity(id) {
      const res = await deleteActivity({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getActivityList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        let message = res.message ? res.message : e.message
        message = e.message ? e.message : '请求失败'
        this.$message.error(message)
      }
    },
    // 禁用启用
    handleDisable(row) {
      const { id, status } = row
      if (status === 0) {
        this.$confirm('确认禁用该活动吗?', '禁用活动', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.disableActivity(id)
        })
      } else {
        this.disableActivity(id)
      }
    },
    // 禁用启用
    async disableActivity(id) {
      const res = await disableActivity({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getActivityList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        let message = res.message ? res.message : e.message
        message = e.message ? e.message : '请求失败'
        this.$message.error(message)
      }
    },
    // 修改
    handleEdit(row) {
      const { id, title, startime, endtime, super_up, top_down, top_up, crown_down } = row
      this.level.id = id
      this.level.title = title
      this.level.time = [startime, endtime]
      this.level.tjUp = super_up
      this.level.djUp = top_up
      this.level.djDown = top_down
      this.level.hgDown = crown_down
      this.visible.type = 'edit'
      this.visible.activity = true
    }
  }
}
</script>
