<template>
  <div class="content">
    <div class="topSearch">
      <div class="left">
        <Input style="width:280px" search enter-button placeholder="" @on-search='onSearch'/>
         <span class="lable">
              设备
            </span>
              <Select clearable  v-model="seleted" style="width:180px" @on-change='selectChange'>
              <Option
                v-for="item in platform"
                :value="item.name"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
      </div>
      <div class="right">
        <Button @click="add" type="primary">新增</Button>
      </div>
    </div>
     <Stable :data='data' @edit='edit' @select='select'/>
     <Forms :visible.sync="visible" :search='search' :row='row'/>
  </div>
</template>

<script>
import Stable from './table.vue'
import Forms from './form.vue'
import {
  getVersion
} from '@/api/version'
export default {
  name: 'categories',
  components: {
    Stable,
    Forms
  },
  data () {
    return {
      platform: [{ id: '1', name: '全部' }, { id: '2', name: 'ios' }, { id: '3', name: 'android' }],
      seleted: null,
      selectList: [],
      visible: false,
      draggableVisible: false,
      row: {},
      data: []
    }
  },
  methods: {
    selectChange (p) {
      this.seleted = p
      this.search({
        platform: p
      })
    },
    edit (row) {
      this.visible = true
      this.row = row
    },
    add () {
      this.visible = true
      this.row = {
        id: 'add'
      }
    },
    select (val) {
      this.selectList = val
    },
    seq () {
      this.draggableVisible = true
    },
    onSearch (p) {
      this.search({
        keyword: p
      })
    },
    search (p) {
      getVersion(p).then((res) => {
        this.data = res.data
      })
    }
  },
  activated: function () {

  },
  mounted () {
    this.search({})
  }
}
</script>

<style lang="less"></style>
