<template>
  <div class="marketing_page">
    <div class="content">
      <div class="toolbar">
        <el-form
          :inline="true"
          :model="formParams"
        >
          <el-form-item label="活动名称">
            <el-input v-model="formParams.name" size="mini" />
          </el-form-item>

          <el-form-item label="活动状态">
            <el-select
              v-model="formParams.promotionStatus"
              size="mini"
            >
              <el-option
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="营销方式">
            <el-select
              v-model="formParams.promotionType"
              size="mini"
            >
              <el-option
                v-for="(item, index) in promotionTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                @click="query"
              >
                查询
              </el-button>
              <el-button
                plain
                size="mini"
                @click="reset"
              >
                重置
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="add"
              >
                新建活动
              </el-button>
            </el-form-item>
          </el-form-item>
        </el-form>
      </div>

      <div class="content_table">
        <div class="table">
          <el-table
            :data="tableData.records"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="活动名称"
            />
            <el-table-column
              prop="status"
              :formatter="getStatus"
              label="活动状态"
            />
            <el-table-column
              prop="promotionType"
              label="营销方式"
              :formatter="getType"
            />
            <el-table-column
              prop="tenantCount"
              label="商家数"
            />
            <el-table-column
              prop="productCount"
              label="商品数量"
            />
            <el-table-column label="操作">
              <template
                slot-scope="scope"
              >
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="details(scope.row.id)"
                >
                  详情
                </el-button>
                <el-button
                  v-if="scope.row.status!==5"
                  type="text"
                  size="small"
                  @click.native.prevent="edit(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  v-if="scope.row.status===4"
                  type="text"
                  size="small"
                  @click.native.prevent="stop(scope.row.id)"
                >
                  结束
                </el-button>
                <el-button
                  v-if="scope.row.status===5"
                  type="text"
                  size="small"
                  @click.native.prevent="deletes(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="tableData.total > 0"
          :limit.sync="formParams.pageSize"
          :page.sync="formParams.pageIndex"
          :total="Number(tableData.total)"
          @pagination="fetch"
        />
      </div>
    </div>
    <delete :dialog-visible="dialogVisible" @confirm="confirm" @closed="closed" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Marketing from '@/api/Marketing'
import Delete from './delete/index'
export default {
  components: {
    Pagination,
    Delete
  },
  data() {
    return {
      formParams: {
        name: '',
        promotionStatus: '',
        promotionType: '',
        type: 1,
        pageSize: 10,
        pageIndex: 1
      },
      statusList: [
        { label: '全部', value: '' },
        { label: '报名未开始', value: 1 },
        { label: '报名进行中', value: 2 },
        { label: '活动未开始', value: 3 },
        { label: '活动进行中', value: 4 },
        { label: '活动已结束', value: 5 }
      ],
      promotionTypeList: [
        { label: '全部', value: '' },
        { label: '满减', value: 1 },
        { label: '优惠券', value: 2 }
      ],
      tableData: {},
      dialogVisible: {
        title: '',
        visible: false,
        text: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await Marketing.getList(this.formParams)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    query() {
      this.getList()
    },
    add() {
      this.$router.push({ path: '/marketing/add' })
    },
    details(id) {
      this.$router.push({ path: `/marketing/details/${id}` })
    },
    edit(item) {
      this.$router.push({ path: '/marketing/add', query: { info: item }})
    },
    reset() {
      this.formParams = {
        name: '',
        promotionStatus: '',
        promotionType: '',
        type: 1,
        pageSize: 10,
        pageIndex: 1
      }
    },
    deletes(id) {
      const vm = this
      vm.dialogVisible = {
        visible: true,
        title: '删除活动',
        text: '确认删除此活动吗?',
        type: 1,
        id: id
      }
    },
    stop(id) {
      const vm = this
      vm.dialogVisible = {
        visible: true,
        title: '结束活动',
        text: '未到活动结束时间，确定要提前结束吗?',
        type: 2,
        id: id
      }
    },
    confirm(v) {
      const vm = this
      const fn = vm.dialogVisible.type === 1 ? 'delPromotion' : 'finishPromotion'
      Marketing[fn]({ id: vm.dialogVisible.id }).then(res => {
        vm.getList()
      })
      vm.dialogVisible.visible = v
    },
    closed(v) {
      this.dialogVisible.visible = v
    },
    fetch() {
      this.getList()
    },
    getDict(arr, id) {
      let t = id
      arr.forEach(item => {
        if (item.value === id) {
          t = item.label
        }
      })
      return t
    },
    getStatus(item, cell, cellValue) {
      return this.getDict(this.statusList, cellValue)
    },
    getType(item, cell, cellValue) {
      return this.getDict(this.promotionTypeList, cellValue)
    }
  }
}
</script>

<style lang='less' scoped>

.marketing_page {
    padding: 10px 20px;
    box-sizing: border-box;
    .content {
        background-color: #fff;
        .toolbar {
            padding: 10px;
        }
    }
}

/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }
}
</style>

