<template>
  <div class="app-container">
    <search-filter :search-datas.sync="searchDatas" :selectedId="selectedId" showadd @search="btn_search" @delorders="btn_search" @export="btn_search"></search-filter>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :name="item.key">
        <span slot="label">{{ item.label }}</span>
        <el-table v-loading="loading" :data="dataLists" border stripe @selection-change="changeSelects">
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column prop="F_Name" label="政策名称" align="center"  width=""></el-table-column>
          <el-table-column prop="F_PromotionRules" label="促销规则" align="center"  width=""></el-table-column>
          <el-table-column prop="F_GiftName" label="绑定赠品" align="center"  width=""></el-table-column>
          <el-table-column prop="F_Describe" label="政策描述" align="center"  width=""></el-table-column>
          <el-table-column prop="F_StartTime" label="开始时间" align="center"  width=""></el-table-column>
          <el-table-column prop="F_EndTime" label="结束时间" align="center"  width=""></el-table-column>
          <el-table-column prop="F_MemberName" label="适用会员" align="center"  width=""></el-table-column>
          <el-table-column prop="F_Commodity" label="绑定商品" align="center"  width=""></el-table-column>
          <el-table-column prop="F_Money" label="活动金额" align="center"  width=""></el-table-column>
          <el-table-column label="操作" width="" align="center" class-name="oparate_btn" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="btn_detail(scope.row.F_ID.toString())">详情</el-button>
              <el-button type="text" @click="btn_edit(scope.row.F_ID.toString())">编辑</el-button>
              <el-button type="text" @click="btn_delete(scope.row.F_ID)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="pageParams.total > 0"
          :total="pageParams.total"
          :pageindex.sync="pageParams.pageindex"
          :pagesize.sync="pageParams.pagesize"
          class="pagination"
          @pagination="getList">
        </pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import { getOrderLists, deleteFullMarketing } from '@/api/marketingManagement/fullGiveMarketing'
import searchFilter from './components/searchFilter'
import addOrEdit from './components/addOrEdit'
import detail from './components/detail'
import { formatterContent } from '@/utils'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装

export default {
  name: 'fullGiveMarketing',
  components: {
    Pagination,
    searchFilter,
  },
  data() {
    return {
      searchDatas: {
        date: '', //日期
      },
      loading: false,
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      },
      dataLists: [],// 列表数据
      multipleSelection: [], // 选中的数据
      selectedId: [], //选中的id
      activeName: "3",
      tabMapOptions: [{
          label: '全部',
          key: '3',
          num: 0,
        },
        {
          label: '预告中',
          key: '0',
          num: 0,
        },
        {
          label: '进行中',
          key: '1',
          num: 0,
        },
        {
          label: '已结束',
          key: '2',
          num: 0,
        }
      ],
    }
  },
  created() {
    this.getList()
    document.onkeyup = (e) => {
      if (e.keyCode === 13) {
        this.getList()
      }
    }
  },
  methods: {
    getList() {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParams.pageindex, // int 第几页
          pagesize: this.pageParams.pagesize, // int 每页几条信息
          type: 1, //满赠营销政策
          starttime:this.searchDatas.date && this.searchDatas.date[0],//开始时间
          endtime:this.searchDatas.date && this.searchDatas.date[1],//结束时间
          process: this.activeName==3?'':this.activeName
        }
        getOrderLists(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParams.total = response.total
            this.dataLists = response.rows
          }
        })
        resolve()
      })
    },
    btn_search() {
      this.pageParams.pageindex = 1
      this.getList()
    },
    btn_detail(editId) {
      this.$layer.iframe({
        content: {
          content: detail, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId }// props
        },
        area: ['80%', '90%'],
        title: '详情'
      })
    },
    btn_edit(editId) {
      this.$layer.iframe({
        content: {
          content: addOrEdit, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId }// props
        },
        area: ['80%', '90%'],
        title: '编辑满赠营销'
      })
    },
    btn_delete(editId) {
      this.$confirm('您确定要将此活动删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFullMarketing(editId).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.getList()
            this.$message.success('删除成功!')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
      console.log("key", tab.name)
      this.activeName=tab.name;
      this.getList();
    },
    changeSelects(selection) {
      const ids = []
      this.multipleSelection = selection
      for (let i=0; i<this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      this.selectedId = ids;
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
