<template>
  <div>
    <a-card title="查询条件">
      <a-form-model
        class="search-box"
        :model="form"
        layout="inline"
        @submit.native.prevent="getExchangeCardList"
      >
        <a-form-model-item
          label="销售人员"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-select
            allowClear
            style="width: 195px"
            v-model="form.sales_user_id"
          >
            <a-select-option
              key=""
            >
              全部
            </a-select-option>
            <a-select-option
              v-for="ticket in salesUserList"
              :key="ticket.id"
            >
              {{ ticket.nick_name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="备注"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.remark"></a-input>
        </a-form-model-item>

        <div class="btn-wrap">
          <a-button
            type="primary"
            html-type="submit"
          >
            搜索
          </a-button>
        </div>
      </a-form-model>
    </a-card>
    <a-card title="兑换卡列表">
      <a-button
        slot="extra"
        type="primary"
        size="small"
        @click="handleAdd(false)"
      >
        新增
      </a-button>
      <a-button
        slot="extra"
        type="primary"
        size="small"
        @click="handleAdd(true)"
      >
        批量更新过期时间
      </a-button>
      <a-button
        slot="extra"
        type="primary"
        size="small"
        @click="getExchangeCardList"
      >
        刷新
      </a-button>

      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="data"
          :row-key="record => record.id"
          :pagination="pagination"
          @change="handlePageChange"
        >
          <template
            slot="salesUser"
            slot-scope="text, record"
          >
            {{ record.salesUser.nick_name || record.salesUser.name }}
          </template>
          <template
            slot="status"
            slot-scope="text, record"
          >
            <a-tag :color="record.status==='WAIT_SALE'?'blue':'green'">
              {{ record.status==='WAIT_SALE'?'待售':'已售' }}
            </a-tag>
          </template>
          <template
            slot="create_time"
            slot-scope="text, record"
          >
            {{ moment(record.create_time).format('YYYY-MM-DD HH:mm:ss') }}
          </template>

          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              type="primary"
              v-if="record.status==='WAIT_SALE'"
              @click="handleEdit(record,false)"
            >
              编辑
            </a-button>
            <a-button
              size="small"
              type="primary"
              @click="handleEdit(record,true)"
            >
              更新过期时间
            </a-button>
            <a-popconfirm
              title="确定要删除这个兑换卡？"
              @confirm="handleDelete(record.id)"
              v-if="record.status==='WAIT_SALE'"

            >
              <a-icon
                slot="icon"
                type="question-circle-o"
                style="color: red"
              />
              <a-button
                size="small"
                type="danger"
              >
                删除
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-spin>

      <!-- 新增兑换卡 -->
      <AddCard
        v-model="addVisible"
        :isUpdateTime="isUpdateTime"
        :salesUserList="salesUserList"
        @update="getExchangeCardList"
      >
      </AddCard>

      <!-- 编辑兑换卡 -->
      <EditCard
        v-model="editVisible"
        :salesUserList="salesUserList"
        :isUpdateTime="isUpdateTime"
        :form-data="curentItem"
        @update="getExchangeCardList"
      ></EditCard>
    </a-card>
  </div>
</template>

<script>
import { getSalesUserList, getExchangeCardList, delExchangeCard } from '@/api/marketingSetting/salesUser'

import EditCard from './exchangeCard/EditCard'
import AddCard from './exchangeCard/AddCard'
import moment from 'moment'

const columns = [
  {
    title: '卡号',
    dataIndex: 'exchange_card_no',
    key: 'exchange_card_no'
  },

  {
    title: '销售',
    dataIndex: 'salesUser',
    key: 'salesUser',
    scopedSlots: { customRender: 'salesUser' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '过期时间',
    dataIndex: 'expire_time',
    key: 'expire_time',
    scopedSlots: { customRender: 'expire_time' }
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time',
    scopedSlots: { customRender: 'create_time' }
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    scopedSlots: { customRender: 'remark' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    AddCard,
    EditCard
  },
  created () {
    this.getExchangeCardList()
    this.getSalesUserList()
  },
  data () {
    return {
      columns,
      data: [],
      isUpdateTime: false,
      salesUserList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      form: {
        status: '',
        sales_user_id: '',
        remark: ''
      },
      loading: false,
      addVisible: false,
      editVisible: false,
      updateVisible: false,

      // 当前账号对象
      curentItem: null
    }
  },
  methods: {
    moment,
    // 获取销售人员
    getSalesUserList () {
      const params = {
        pageNum: 0,
        pageSize: 0
      }
      getSalesUserList(params).then(res => {
        this.salesUserList = res.extraInfo.list
      })
    },
    handlePageChange (page) {
      this.pagination.pageNum = page.current
      this.getExchangeCardList()
    },
    handleDelete (id) {
      delExchangeCard(id).then(res => {
        this.$message.success('删除成功')
        this.getExchangeCardList()
      })
    },
    handleAdd (val) {
      this.addVisible = true
      this.isUpdateTime = val
    },
    handleEdit (data, val) {
      console.log(data)
      this.isUpdateTime = val
      this.editVisible = true
      this.curentItem = data
    },
    getExchangeCardList () {
      this.loading = true
      const params = {
        status: ['WAIT_SALE', 'SOLD'],
        pageNum: this.pagination.pageNum,
        sales_user_id: this.form.sales_user_id || '',
        remark: this.form.remark || ''
      }
      getExchangeCardList(params).then(res => {
        this.loading = false
        this.pagination.total = res.extraInfo.total
        this.data = res.extraInfo.list
      })
    }
  }
}
</script>

<style scoped>
.offSale-btn{
  color: #F56C6C
}
.onSale-btn{
  color: #67C23A
}

</style>
