<style lang="less" scoped>
</style>
<template>
  <div class="page-main">
    <Card class="page-header table-tool" :bordered="false" dis-hover>
      <div class="left"></div>
      <Form inline @submit.native.prevent="search">
        <FormItem v-is-select-shop>
          <selectShop v-model="searchConf.shop_ids" multiple></selectShop>
        </FormItem>
        <FormItem>
          <Input v-model="searchConf.member_title" clearable placeholder="请输入用户姓名"></Input>
        </FormItem>
        <FormItem>
          <Input v-model="searchConf.member_tel" clearable placeholder="请输入用户手机号"></Input>
        </FormItem>
        <FormItem>
          <Select v-model="searchConf.source_type" clearable placeholder='来源种类' style="width:120px">
            <Option v-for="(v) in sourceType" :value="v.value" :key="v.value">{{v.name}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" html-type="submit" icon="md-search">查询/刷新</Button>
        </FormItem>
      </Form>
    </Card>
    <Card class="page-center" :bordered="false" dis-hover>
      <div>
        <Table :loading="tableLoading" :columns="columnsList" :data="tableData" border
               disabled-hover></Table>
      </div>
      <div class="margin-top-15" style="text-align: center">
        <Page :total="tableShow.listCount" :current="tableShow.currentPage"
              :page-size="tableShow.pageSize" @on-change="changePage"
              @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
      </div>
    </Card>
    <detail-card v-model="detailShow" :formItem="formItem"></detail-card>
  </div>
</template>
<script>
import axios from '@/api/request'
import detailCard from './components/detailCard'
import {
  columnDictionary,
  columnFormatDate,
  columnFormatMoment,
  columnImg,
  dictionary,
  formatDate
} from '@/libs/table'

const editButton = (vm, h, currentRow, index) => {
  return h('Button', {
    props: {
      type: 'primary',
      size: 'small'
    },
    style: {
      margin: '5px'
    },
    attrs: {
      disabled: true
    },
    on: {
      'click': () => {
        vm.formItem = Object.assign({}, currentRow)
        vm.modalSetting.show = true
        vm.modalSetting.index = index
      }
    }
  }, '修改')
}
const detailButton = (vm, h, currentRow, index) => {
  return h('Button', {
    props: {
      type: 'success',
      size: 'small'
    },
    style: {
      margin: '3px'
    },
    on: {
      'click': () => {
        vm.formItem = Object.assign({}, currentRow)
        vm.detailShow = true
      }
    }
  }, '详情')
}
export default {
  name: 'member_cards',
  components: {
    detailCard
  },
  data () {
    return {
      columnsList: [
        {
          title: '用户名称',
          key: 'member_title',
          minWidth: 120,
          fixed: 'left'
        },
        {
          title: '用户手机号',
          key: 'member_tel',
          width: 120
        },
        {
          title: '卡片名称',
          key: 'card_title',
          width: 200
        },
        {
          title: '来源',
          key: 'source_type',
          dictionary: 'source_type',
          render: columnDictionary,
          width: 120
        },
        {
          title: '类型',
          key: 'gift_type',
          dictionary: 'project_card_gift_type',
          render: columnDictionary,
          width: 120
        },
        {
          title: '订单来源',
          key: 'type',
          dictionary: 'origin_type',
          render: columnDictionary,
          width: 120
        },
        {
          title: '参训次数 ',
          key: 'use_total',
          width: 100
        },
        {
          title: '卡状态',
          key: 'status',
          dictionary: 'card_status',
          render: columnDictionary,
          width: 120
        },
        {
          title: '开始时间',
          key: 'start_time',
          render: columnFormatDate,
          width: 150
        },
        {
          title: '失效时间',
          key: 'expire_time',
          render: columnFormatDate,
          width: 150
        },
        {
          title: '创建时间',
          key: 'create_time',
          render: columnFormatDate,
          width: 150
        },
        {
          title: '更新时间',
          key: 'update_time',
          render: columnFormatDate,
          width: 150
        },
        {
          title: '操作',
          key: 'handle',
          fixed: 'right',
          width: 120,
          handle: ['edit']
        }
      ],
      tableData: [],
      tableLoading: false,
      apiGroup: [],
      tableShow: {
        currentPage: 1,
        pageSize: 20,
        listCount: 0
      },
      searchConf: {
        member_title: '',
        member_tel: '',
        source_type: ''
      },
      formItem: {},
      isShow: false,
      detailShow: false,
      title: ''
    }
  },
  created () {
    this.init()
    this.getList()
  },
  computed: {
    sourceType () {
      return this.$store.state.dictionary.list['source_type']
    }
  },
  methods: {
    init () {
      let vm = this
      this.columnsList.forEach(item => {
        if (item.handle) {
          item.render = (h, param) => {
            let currentRowData = vm.tableData[param.index]
            return h('div', [
              detailButton(vm, h, currentRowData, param.index)
            ])
          }
        }
      })
    },
    alertAdd () {
      this.formItem = {}
      this.modalSetting.show = true
    },
    cancel () {
      this.modalSetting.show = false
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getList()
    },
    changeSize (size) {
      this.tableShow.currentPage = 1
      this.tableShow.pageSize = size
      this.getList()
    },
    search () {
      this.tableShow.currentPage = 1
      this.getList()
    },
    getList () {
      let vm = this
      this.tableLoading = true
      axios.get('MemberCard', {
        params: {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          ...vm.searchConf
        }
      }).then((response) => {
        this.tableLoading = false
        let res = response.data
        if (res.code === 200) {
          vm.tableData = res.data.data
          vm.tableShow.listCount = res.data.total
        }
      })
    }
  }
}
</script>
