<template>
  <div class="coupon-page">
    <Card>
      <div class="search-con">
        <Input placeholder="请输入优惠券编号" class="search-input" v-model="searchContent.couponId" style="width:200px;"/>
        <Input placeholder="请输入优惠券名称" class="search-input" v-model="searchContent.name" style="width:200px;"/>
        <Select class="search-input"  v-model="searchContent.status"
          @on-change="handleChange" style="width:200px;">
          <Option value>全部</Option>
          <Option v-for="(item, index) in couponStatusData"
            :value="item.index"
            :key="'series-option-' + index"
          >
            {{item.name}}
          </Option>
        </Select>
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">查找</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
        <Button type="info" style="margin-left: 20px" @click="handleAdd">+ 新增优惠券</Button>
        <Button type="error" style="margin-left: 20px" @click="handleBatch">批量删除</Button>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
        @on-selection-change="changeSelect"
      />
    </Card>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import { CouponTypeObj, CouponStatusObj, CouponStatus } from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      searchContent: {
        couponId: '',
        name: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      totalSize: 0,
      tableData: [],
      couponStatusData: [
        {
          name: '可用',
          index: 1
        },
        {
          name: '未开始',
          index: 2
        },
        {
          name: '已过期',
          index: 3
        }
      ],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '编号', key: 'couponId', align: 'left', minWidth: 180 },
        { title: '名称', key: 'name', align: 'center', minWidth: 120 },
        { title: '类型',
          key: 'type',
          align: 'center',
          width: 80,
          render: (h, params) => {
            let obj = CouponTypeObj[params.row.type]
            return h('span', obj)
          } },
        { title: '面值', key: 'couponVal', align: 'center', width: 80 },
        { title: '使用条件',
          key: 'conditionVal',
          align: 'center',
          width: 110,
          render: (h, params) => {
            let x
            switch (params.row.type) {
              case 2:
                x = h('span', `无限制`)
                break
              case 1:
                x = h('span', `满 ${params.row.conditionVal} 可用`)
                break
            }
            return x
          } },
        { title: '发行量', key: 'circulation', align: 'center', width: 90 },
        { title: '开始领取时间',
          // key: 'endTime',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('span', formatTime(params.row.receiveStartTime, 'yyyy-MM-dd'))
          },
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    marginLeft: '8px'

                  }
                }, '开始领取时间'),
                [
                  h('Tooltip', {
                    props: {
                      trigger: 'hover',
                      content: `活动从当天的00:00:00开始`,
                      wordWrap: true,
                      width: 200,
                      transfer: true
                    }
                  }, [ h('Icon', {
                    props: {
                      type: 'ios-help-circle-outline',
                      size: 14
                    },
                    style: {
                      marginLeft: '2px',
                      transform: 'translateY(-1px)'
                    }
                  })])
                ]
              ]
            )
          }
        },
        { title: '开始使用时间',
          // key: 'createTime',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('span', formatTime(params.row.startTime, 'yyyy-MM-dd'))
          },
          renderHeader: (h, params) => {
            return h('div',
              [
                h('span', {
                  style: {
                    marginLeft: '8px'
                  }
                }, '开始使用时间'),
                [
                  h('Tooltip', {
                    props: {
                      trigger: 'hover',
                      content: `活动从当天的00:00:00开始`,
                      wordWrap: true,
                      width: 200,
                      transfer: true
                    }
                  }, [ h('Icon', {
                    props: {
                      type: 'ios-help-circle-outline',
                      size: 14
                    },
                    style: {
                      marginRight: '2px',
                      transform: 'translateY(-1px)'
                    }
                  })])
                ]
              ]
            )
          }
        },
        { title: '状态',
          key: 'status',
          align: 'center',
          width: 100,
          render: (h, params) => {
            let obj = CouponStatusObj[params.row.status]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          } },
        { title: '操作',
          key: 'index',
          align: 'left',
          fixed: 'right',
          minWidth: 200,
          render: (h, params) => {
            let detailBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: this.handleDetail(params.row)
                }
              },
              '详 情'
            )
            let editBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleUpdate(params.row)
                },
                style: {
                  marginRight: '5px',
                  display: params.row.status == CouponStatus.NOT_START ? 'inline-block' : 'none'
                }
              },
              '编 辑'
            )
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDel(params.row)
                },
                style: {
                  marginRight: '5px',
                  display: params.row.status == CouponStatus.NOT_START || params.row.status == CouponStatus.EXPIRED ? 'inline-block' : 'none'
                }
              },
              '删 除'
            )
            return h('div', [detailBtn, !this.platform && editBtn, !this.platform && delBtn])
          } }
      ],
      loading: false,
      selectList: [],
      selectCount: 0
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.searchContent.couponId = this.searchContent.couponId.replace(/\s+/g, '')
      this.searchContent.name = this.searchContent.name.replace(/\s+/g, '')
      this.api({
        apiName: 'couponList',
        postdata: this.searchContent,
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    // 选中优惠券
    changeSelect (e) {
      let obj = {}
      this.selectList = e.map(item => {
        obj = {
          couponId: item.couponId,
          status: item.status
        }
        return obj
      })
      this.selectCount = e.length
    },
    handleRefresh () {
      this.reload()
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    // 添加
    handleAdd () {
      this.$router.push({ name: 'add_coupon' })
    },
    // 详情
    handleDetail (row) {
      return () => {
        let query = { couponId: row.couponId }
        this.$router.push({ name: 'coupon_detail', query })
      }
    },
    // 编辑
    handleUpdate (row) {
      return () => {
        let query = { couponId: row.couponId }
        this.$router.push({ name: 'update_coupon', query })
      }
    },
    // 删除优惠券
    handleDel (row) {
      let { couponId } = row
      // let couponId = `${}`
      return () => {
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除名称为${row.name} 的商品？`,
          onOk: () => {
            this.api({
              apiName: 'deleteCoupon',
              postdata: couponId,
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `操作成功！` })
              }
            })
          }
        })
      }
    },
    // 批量删除优惠券
    handleBatch () {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return false
      }
      let couponIdList = []
      let status = this.selectList.some(item => {
        return item.status == 1
      })
      if (status == true) {
        this.$Message.warning('您选中的优惠券中有进行中的优惠券')
        return false
      } else {
        this.selectList.forEach(item => {
          couponIdList.push(item.couponId)
        })
      }
      this.$Modal.confirm({
        title: '删除',
        content: `您确认要删除所选的 ${this.selectCount}条数据？`,
        onOk: () => {
          this.api({
            apiName: 'batchDelete',
            postdata: couponIdList,
            success: () => {
              this.requestData()
              this.$Notice.success({ title: `操作成功！` })
            }
          })
        }
      })
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleChange () {

    }
  },
  created () {
    this.requestData()
  }
}
</script>
  <style scoped lang="less">
    .coupon-page .search-con {
      display: flex;
      padding: 10px 0;
      .search-input {
        width: 300px;
        margin-right: 10px;
      }
    }
  </style>
