<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"
        width="400"
      >
        <template
          slot-scope="{ row }"
        >
          {{ `${row.start_time} - ${row.end_time}` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="big_gift"
        label="大礼包门槛"
        align="center"
      />
      <el-table-column
        prop="honor_wall"
        label="荣誉墙门槛"
        align="center"
      />
      <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="big_gift"
        >
          <el-input
            v-model="level.big_gift"
            type="number"
            min="0"
            placeholder="订货金额满获得大礼包"
          />
        </el-form-item>
        <el-form-item
          label="荣誉墙门槛"
          prop="honor_wall"
        >
          <el-input
            v-model="level.honor_wall"
            type="number"
            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 {
      loadingFull: false,
      searchParams: {
        page_size: 20,
        page_index: 1,
        search_name: ''
      },
      table: [],
      tableTotal: 0,
      visible: {
        activity: false,
        type: 'add'
      },
      level: {
        time: '',
        honor_wall: '',
        big_gift: '',
        title: '',
        id: ''
      },
      levelRules: {
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择活动持续时间', trigger: 'blur' }
        ],
        honor_wall: [
          { required: true, message: '请设置荣誉墙门槛', trigger: 'blur' }
        ],
        big_gift: [
          { required: true, message: '请设置大礼包门槛', trigger: 'blur' }
        ]
      },
      setPickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  created() {
    this.getActivityList()
  },
  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, honor_wall, big_gift, title } = this.level
          if (this.visible.type === 'add') {
            this.addActivity({
              title,
              start_time: time && time.length > 0 ? time[0] : '',
              end_time: time && time.length > 0 ? time[1] : '',
              honor_wall,
              big_gift
            })
          } else {
            this.editActivity({
              title,
              start_time: time && time.length > 0 ? time[0] : '',
              end_time: time && time.length > 0 ? time[1] : '',
              honor_wall,
              big_gift,
              id
            })
          }
        } else {
          return false
        }
      })
    },
    // 添加
    async addActivity(data) {
      this.loadingFull = true
      await addActivity(data).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.$message.success(res.message)
          this.handleCancel()
          this.getActivityList()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 修改
    async editActivity(data) {
      this.loadingFull = true
      await editActivity(data).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.$message.success(res.message)
          this.handleCancel()
          this.getActivityList()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 点击删除
    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, start_time, end_time, honor_wall, big_gift } = row
      this.level.id = id
      this.level.title = title
      this.level.time = [start_time, end_time]
      this.level.honor_wall = honor_wall
      this.level.big_gift = big_gift
      this.visible.type = 'edit'
      this.visible.activity = true
    }
  }
}
</script>
