<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.version }}</span>
      </template>
      <template slot-scope="{ row }" slot="summary">
        <span>{{ row.is_force===1?'是':'否' }}</span>
      </template>
      <template slot-scope="{ row }" slot="created_at">
        <span>{{ row.created_at | format}}</span>
      </template>
       <template slot-scope="{ row }" slot="updated_at">
        <span>{{ row.updated_at | format}}</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 {
  editVersion
} from '@/api/version'
export default {
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      selectList: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '版本号',
          slot: 'name'
        },
        {
          title: '版本编号',
          key: 'id'
        },
        {
          title: '更新说明',
          key: 'summary',
          width: 300
        },
        {
          title: '强制更新',
          slot: 'summary'
        },
        {
          title: '发布设备',
          key: 'platform'
        },
        {
          title: '创建日期',
          slot: 'created_at',
          width: 200
        },
        {
          title: '生效日期',
          slot: 'updated_at',
          width: 200
        },
        {
          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
      editVersion([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>
