<template>
  <div class="table">
    <Table :loading="$store.state.app.isLoading" border ref="selection" :columns="columns" :data="data" @on-select='onSelect' @on-select-all='onSelectAll'>
      <template slot-scope="{ row }" slot="name">
        <span>{{ row.title }}</span>
      </template>
      <template slot-scope="{ row }" slot="summary">
        <span>{{ row.details.summary }}</span>
      </template>
      <template slot-scope="{ row }" slot="created_at">
        <span>{{ row.created_at | format}}</span>
      </template>
        <template slot-scope="{ row }" slot="is_vip_free">
        <span>{{ row.is_vip_free===1?'是':'否'}}</span>
      </template>
         <template slot-scope="{ row }" slot="need_vip">
        <span>{{ row.need_vip===1?'是':'否'}}</span>
      </template>
      <template slot-scope="{ row }" slot="enable">
        <i-switch
          :value="row.is_enable === 1 ? true : false"
          @on-change="
            value => {
              change(value, row);
            }
          "
        />
      </template>
      <template slot-scope="{ row }" slot="action">
        <a @click="edit(row)">编辑</a>
      </template>
    </Table>
  </div>
</template>
<script>
import { formatDate } from '@/libs/util'
import {
  editShop
} from '@/api/shop'
export default {
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      selectList: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          slot: 'name'
        },
        {
          title: '实际价格',
          key: 'real_price'
        },
        {
          title: '划去价格',
          key: 'normal_price'
        },
        {
          title: '是否VIP免费',
          slot: 'is_vip_free'
        },
        {
          title: '是否要求VIP',
          slot: 'need_vip'
        },
        {
          title: 'VIP折扣',
          key: 'vip_off'
        },
        {
          title: '创建日期',
          slot: 'created_at',
          width: 200,
          key: 'created_at'
        },
        {
          title: '生效',
          slot: 'enable'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ]
    }
  },
  mounted () {
  },
  filters: {
    format (value) {
      return formatDate(value)
    }
  },
  methods: {
    edit (row) {
      this.$emit('edit', row)
    },
    onSelect (val) {
      this.selectList = val.map((p) => {
        return p.id
      })
      this.$emit('select', this.selectList)
    },
    onSelectAll (val) {
      this.selectList = val.map((p) => {
        return p.id
      })
      this.$emit('select', this.selectList)
    },
    change (status, row) {
      console.log('开关状态：' + status + row)
      row.is_enable = status ? 1 : 0
      delete row.created_at
      delete row.deleted_at
      delete row.updated_at
      editShop([row]).then((res) => {
        if (res.code === 200 && res.data.length > 0) {
          this.$Message.success('修改成功')
        }
      })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    }
  }
}
</script>

<style lang="less">
.table {
  margin-top: 20px;
}
</style>
