<template>
    <div class="integral-page">
      <Card>
        <div class="search-con">
          <Input
            placeholder="请输入商品编号"
            class="search-input"
            v-model="searchContent.goodsId"
            style="width: 200px"
            clearable
          />
          <Input
            placeholder="请输入商品名称"
            class="search-input"
            v-model="searchContent.goodsName"
            style="width: 200px"
            clearable
          />
          <DatePicker
            placeholder="开始时间至结束时间"
            v-model="createTime"
            type="daterange"
            placement="bottom-start"
            class="search-date"
            style="width: 200px"
            @on-change="handleDateChange(createTime)"
            :editable="false"
            separator=" ~ "
          ></DatePicker>
          <ButtonGroup class="search-btngroup">
            <Button @click="handleSearch" type="primary">搜索</Button>
            <Button type="primary" @click="handleRefresh">
              <Icon type="md-refresh" />
            </Button>
          </ButtonGroup>
          <Button
            type="info"
            @click="handleAdd"
            v-if="isBrand"
          >+ 添加商品</Button
          >
          <Button type="error" @click="batchDel" style="margin-left: 10px">
            批量删除
          </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>
      <Modal
      title="商户审核"
      v-model="integralStatus"
    >
      <div class="model-item">
        <Input v-model="integral" type="number" placeholder="请输入新积分值"/>
      </div>
      <div slot="footer">
        <Button
          type="primary"
          @click="handleEditIntegral"
        >
          确定
        </Button>
      </div>
    </Modal>
      <Modal
        title="商户审核"
        v-model="stockStatus"
      >
        <div class="model-item">
          <Input v-model="stock" type="number" placeholder="请输入新库存量"/>
        </div>
        <div slot="footer">
          <Button
            type="primary"
            @click="handleEditStock"
          >
            确定
          </Button>
        </div>
      </Modal>
    </div>
</template>

<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import { OffShelfType, OffShelfTypeObj } from '@/enums'
export default {
  name: 'integral-list',
  inject: ['reload'],
  components: {
    Tables
  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    }
  },
  data () {
    return {
      integral: '',
      integralStatus: false,
      goodsId: '',
      stockStatus: false,
      stock: '',
      searchContent: {
        goodsId: '',
        goodsName: '',
        addTimeHead: '',
        addTimeTail: '',
        pageNum: 1,
        pageSize: 10
      },
      createTime: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '编号', key: 'goodsId', minWidth: 200, align: 'center' },
        { title: '名称',
          key: 'name',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Poptip', {
                props: {
                  trigger: 'hover',
                  title: params.row.description,
                  size: 'small'
                }
              }, params.row.name)
            ])
          }
        },
        {
          title: '展示图',
          key: 'thumb',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '70px'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: params.row.thumb
                  },
                  style: {
                    width: '70px',
                    height: '50px'
                  }
                })
              ])
          }
        },
        { title: '积分值',
          key: 'pnum',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            let pnum = params.row.pnum
            let labelSpan = h('span', pnum)
            let editNum = h('Icon', {
              props: {
                size: 20,
                type: 'md-create'
              },
              style: {
                marginLeft: '5px',
                cursor: 'pointer'
              },
              on: {
                click: this.handleShowIntegral(params.row)
              }
            })
            let contentDiv = h(
              'div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '30px'
                }
              },
              [labelSpan, editNum]
            )
            return [contentDiv]
          }

        },
        { title: '库存量',
          key: 'stock',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            let stock = params.row.stock
            let labelSpan = h('span', stock)
            let editStock = h('Icon', {
              props: {
                size: 20,
                type: 'md-create'
              },
              style: {
                marginLeft: '5px',
                cursor: 'pointer'
              },
              on: {
                click: this.handleShowStock(params.row)
              }
            })
            let contentDiv = h(
              'div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '30px'
                }
              },
              [labelSpan, editStock]
            )
            return [contentDiv]
          }
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 100,
          render: (h, params) => {
            let obj = OffShelfTypeObj[params.row.status]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          }
        },
        { title: '已兑量', key: 'exchange', width: 100, align: 'center' },
        { title: '入库时间',
          key: 'createTime',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        {
          title: '操作',
          key: 'operate',
          align: 'center',
          fixed: 'right',
          width: 200,
          render: (h, params) => {
            let status = params.row.status
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDel(params.row)
                },
                style: {
                  marginRight: '5px',
                  display: status == OffShelfType.SHELVES ? 'inline-block' : 'none'
                }
              },
              '删 除'
            )
            let offShelfBtn = h(
              'Button',
              {
                props: {
                  type: status == OffShelfType.SHELVES ? 'primary' : 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleOffShelf(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              status == OffShelfType.SHELVES ? '上 架' : '下 架'
            )
            return h('div', [delBtn, offShelfBtn])
          }
        }
      ],
      tableData: [],
      totalSize: 0,
      loading: false,
      selectList: [],
      selectCount: 0
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getIntegralList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleShowIntegral (row) {
      return () => {
        this.goodsId = row.goodsId
        this.integralStatus = true
      }
    },
    handleShowStock (row) {
      return () => {
        this.goodsId = row.goodsId
        this.stockStatus = true
      }
    },
    handleEditIntegral () {
      let { integral, goodsId } = this
      if (!integral || integral <= 0 || !/^\d+$/.test(integral)) {
        this.$Notice.warning({ title: '请输入整数值的积分值！' })
        return
      }
      this.api({
        apiName: 'updateIntegralValue',
        postdata: { integral, goodsId },
        complete: () => {
          this.integralStatus = false
        },
        success: (res) => {
          this.requestData()
          this.$Notice.success({ title: `修改成功！` })
        }
      })
    },
    handleEditStock () {
      let { stock, goodsId } = this
      if (!stock || stock <= 0 || !/^\d+$/.test(stock)) {
        this.$Notice.warning({ title: '请输入整数值库存！' })
        return
      }
      this.api({
        apiName: 'undateIntegralStock',
        postdata: { stock, goodsId },
        complete: () => {
          this.stockStatus = false
        },
        success: (res) => {
          this.requestData()
          this.$Notice.success({ title: `修改成功！` })
        }
      })
    },
    handleDel (row) {
      return () => {
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除名称为${row.name} 的商品？`,
          onOk: () => {
            this.api({
              apiName: 'delIntegralGood',
              postdata: [row.goodsId],
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    },
    batchDel () {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return false
      }
      let goodsIds = this.selectList
      this.$Modal.confirm({
        title: '删除',
        content: `您确认要删除所选的 ${this.selectCount}条数据？`,
        onOk: () => {
          this.api({
            apiName: 'delIntegralGood',
            postdata: goodsIds,
            success: () => {
              this.requestData()
              this.$Notice.success({ title: `操作成功！` })
            }
          })
        }
      })
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    changeSelect (e) {
      this.selectList = e.map(item => {
        return item.goodsId
      })
      this.selectCount = e.length
    },
    handleDateChange (createTime) {
      if (createTime && createTime.length == 2 && createTime[0] && createTime[1]) {
        this.searchContent.addTimeHead = new Date(createTime[0]).getTime()
        this.searchContent.addTimeTail =
          new Date(createTime[1]).getTime() + 24 * 60 * 60 * 1000 - 1
      } else {
        this.searchContent.addTimeHead = ''
        this.searchContent.addTimeTail = ''
      }
    },

    handleAdd () {
      this.$router.push({ name: 'add_integral_good' })
    },
    handleUpdate (row) {
      return () => {
        let query = { goodsId: row.goodsId }
        this.$router.push({ name: 'update_good', query })
      }
    },
    handleDetail (row) {
      return () => {
        let query = { goodsId: row.goodsId }
        this.$router.push({ name: 'good_detail', query })
      }
    },
    handleOffShelf (row) {
      return () => {
        let goodsId = row.goodsId
        let type = row.status == OffShelfType.SHELVES ? OffShelfType.GROUNDING : OffShelfType.SHELVES
        let title = row.status == OffShelfType.SHELVES ? '上架' : '下架'
        this.$Modal.confirm({
          title,
          content: `确认要${title}名称为 ${row.name} 的商品 ？`,
          onOk: () => {
            this.api({
              apiName: 'undateIntegralStatus',
              postdata: { goodsId, type },
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `操作成功！` })
              }
            })
          }
        })
      }
    }
  },
  created () {
    this.requestData()
  }
}
</script>

<style lang="less" scoped>
  .integral-page .search-con {
    padding: 10px 0;
    .search {
      &-col {
        display: inline-block;
        width: 150px;
        margin-right: 5px;
      }
      &-input {
        display: inline-block;
        width: 150px;
        margin-right: 5px;
      }
      &-date {
        margin-right: 5px;
      }
      &-btngroup {
        margin-right: 5px;
      }
    }
  }
</style>
