<template>
<div>
    <div>
        <div style="margin-left: 48px">
            <Button type="success" class="findButton" @click="find">搜索</Button>
        </div>
        <div style="margin-top: 20px">
            <template>
            <Form :model="tittleformItem" :label-width="120">
                <Row>
                    <Col span="12">
                        <FormItem label="模块编码:">
                            <Select v-model="tittleformItem.center_code">
                                <Option value="">全部</Option>
                                <Option v-for="(item,index) in dictList" :key="index" :value="item.center_code">{{item.label}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="权限类型:">
                            <Select v-model="tittleformItem.auth_type">
                                <Option value="">全部</Option>
                                <Option value="a">管理侧</Option>
                                <Option value="u">用户侧</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="接口类型:">
                            <Select v-model="tittleformItem.type">
                                <Option value="">全部</Option>
                                <Option value="c">方法类接口</Option>
                                <Option value="s">XML类接口</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="URL：">
                            <Input v-model="tittleformItem.url"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            </template>
        </div>
        <div>
            <table-list ref="tabList" :tittleformItem="tittleformItem"></table-list>
        </div>
    </div>
</div>
</template>
<script>
import TableList from './components/table-list'
import { getDictInfoList } from '../../../api/system/sys-port-list'
export default {
  name: 'WlPortList',
  components: {
    TableList
  },
  data () {
    return {
      tittleformItem: {
        center_code: '',
        auth_type: '',
        type: '',
        url: ''
      },
      dictList: {}
    }
  },
  methods: {
    init () {
      this.getDictInfoList()
      this.$refs.tabList.init()
    },
    find () {
      this.$refs.tabList.init()
    },
    getDictInfoList () {
      getDictInfoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dictList = ret.data.data
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

    .ivu-modal-body .ivu-table-wrapper{
        padding-bottom: 5%;
    }
    .cards{
        width: 350px;
    }

</style>
