
<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="管理人手机号或昵称">
                <a-input v-model="queryParam.manage_username" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="优惠券名称" has-feedback>
                <a-select v-model="queryParam.goods_id" placeholder="请选择">
                  <a-select-option v-for="item in goods" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="优惠券状态" has-feedback>
                <a-select v-model="queryParam.status" placeholder="请选择">
                  <a-select-option v-for="item in status" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="使用人手机号或昵称">
                <a-input v-model="queryParam.username" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-button type="primary" @click="search"><a-icon type="search" />搜索</a-button>
              <a-button class="ml8" @click="resetSearch"><a-icon type="undo" />重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>

    <!-- 列表 -->
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.stock_card_id"
        showPagination="auto"
        bordered
        size="default"
        :scroll="{ x: 1200, y: 1000 }">
        <div slot="manage-name" slot-scope="text,record">
          <div>{{ record.manage.nickname || '--' }}{{ record.manage.name?'('+record.manage.name+')':'' }}</div>
        </div>
        <div slot="manage-username" slot-scope="text,record">
          <div>{{ record.manage.username || '--' }}</div>
        </div>
        <div slot="user-name" slot-scope="text,record">
          <div>{{ record.user.nickname || '--' }}{{ record.user.name?'('+record.user.name+')':'' }}</div>
        </div>
        <div slot="user-username" slot-scope="text,record">
          <div>{{ record.user.username || '--' }}</div>
        </div>
        <div slot="time" slot-scope="text, record">
          <div>{{ record.created_at }}~{{ record.actived_at }}</div>
        </div>

        <div slot="status" slot-scope="text, record">
          <a-tag :color="record.status.value === 0?'blue':record.status.value === 1?'pink':record.status.value === 2?'orange':record.status.value === 3?'green':record.status.value === 9?'purple':''">{{ record.status.text }}</a-tag>
        </div>
        <span slot="created_at" slot-scope="text, record">{{ record.created_at }}</span>
        <!-- 操作 -->
        <div slot="actions" slot-scope="text, record">
          <a class="ant-dropdown-link" @click="onEdit(record)">查看明细</a>
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, UserInfo } from '@/components'
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
import moment from 'moment'
import Info from '@/views/home/components/Info'
import {
  getMiddlesCoupons
} from '@/api/coupon'
import StockInfo from './widgets/StockInfo.vue'
import AddRole from './widgets/AddRole.vue'

// 列表规格
const columns = [
{
    title: '优惠券名称',
    dataIndex: 'name',
    width: 120,
    align: 'center'
  },
  {
    title: '优惠券状态',
    scopedSlots: { customRender: 'status' },
    width: 140,
    align: 'center'
  },
  {
    title: '优惠券生成人',
    children: [
      {
        title: '姓名',
        scopedSlots: { customRender: 'manage-name' },
        align: 'center'
      },
      {
        title: '手机号',
        scopedSlots: { customRender: 'manage-username' },
        align: 'center'
      }
    ],
    align: 'center'
  },
  {
    title: '使用人',
    children: [
      {
        title: '姓名',
        scopedSlots: { customRender: 'user-name' },
        align: 'center'
      },
      {
        title: '手机号',
        scopedSlots: { customRender: 'user-username' },
        align: 'center'
      }
    ],
    align: 'center'
  },
  {
    title: '优惠券有效期',
    scopedSlots: { customRender: 'time' },
    width: 240,
    align: 'center'
  }
  // {
  //   title: '操作',
  //   scopedSlots: { customRender: 'actions' },
  //   align: 'center',
  //   width: 160,
  //   fixed: 'right'
  // }
]

export default {
  name: 'CouponIndex',
  components: {
    STable,
    UserInfo,
    Info,
    DeriveButton
  },
  data () {
    return {
      columns,
      goods: [], // 优惠券类型
      status: [], // 优惠券使用状态
      queryParam: {
        goods_id: undefined, // 商品id
        manage_username: undefined, // 管理人手机号或昵称
        username: undefined, // 使用人手机号或昵称
        status: undefined // 优惠券状态
      },
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getMiddlesCoupons(requestParameters).then(res => {
          if (this.goods.length === 0) {
            this.goods = res.search.goods
            this.status = res.search.status
          }
          return res.cards
        })
      }
    }
  },
  watch: {
    $route (to, from) {
    }
  },
  methods: {
    moment,

    // 业务类型
    onBusinessChange (e) {
      this.queryParam.business_type_id = e
    },
    // 机构状态
    onOrganizationChange (e) {
      this.queryParam.status = e
    },
    // 搜索列表
    search () {
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 重置搜索列表
    resetSearch () {
      this.queryParam = {
        goods_id: undefined, // 商品id
        manage_username: undefined, // 管理人手机号或昵称
        username: undefined, // 使用人手机号或昵称
        status: undefined // 优惠券状态
      }
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 新增用户
    onAddRole () {
      const success = {
        title: '新增用户',
        width: 600,
        maskClosable: true,
        closable: true,
        okText: '确认新增',
        cancelText: '取消'
      }
      this.$dialog(
        AddRole,
        {
          on: {
            ok: () => {
              this.$refs.table.loadData()
            }
          }
        },
        success
      )
    },
    // 修改用户
    onEdit (item) {
      const success = {
        title: '库变详情',
        width: 1000,
        maskClosable: true,
        closable: true,
        footer: '',
        okText: '知道了'
      }
      this.$dialog(
        StockInfo,
        {
          item,
          on: {
            ok: () => {
              this.$refs.table.loadData()
            }
          }
        },
        success
      )
    }
  }
}
</script>

<style lang="less" scoped>
.ml8 {
  margin-left: 8px;
}
</style>
