<template>
  <el-dialog
    title="选择分类"
    :visible.sync="categoryVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
  >
    <div>
      <el-row>
		<el-col :span="24" class="topsearch">
			<el-form label-width="100px">
			  <el-row>
          <el-col :span="8">
             <el-form-item label="类型编码：">
               <el-input
                 clearable
                 placeholder="请输入"
                 v-model.trim="search.code"
               ></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="8">
             <el-form-item label="类型名称：">
               <el-input
                 clearable
                 v-model="search.name"
                 placeholder="请输入"
               ></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item  label-width="20px">
                <el-button type="primary" @click="getList">搜索</el-button>
                <el-button @click="reset">重置</el-button>
             </el-form-item>
          </el-col>
			  </el-row>
			</el-form>
		</el-col>
        <el-col :span="24" class="table_col">
          <el-table
            :data="tableData"
            height="450"
            highlight-current-row
            @row-click="single"
          >
            <el-table-column label="类型编码" prop="code" width="200"></el-table-column>
            <el-table-column label="类型名称" prop="name"></el-table-column>
            <el-table-column label="描述" prop="remark"></el-table-column>
            <el-table-column label="选择" align="center">
               <template slot-scope="scope">
            	 <el-radio class="radio" v-model="radio" :label="scope.row.id"><i></i></el-radio>
               </template>
            </el-table-column>
          </el-table>
         <div class="pagination">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pagination.size"
              :current-page.sync="pagination.pageNum"
              @current-change="handleCurrent"
              @size-change="handleSize"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getSubPage } from '@/api/classifyManage';
export default {
  data () {
    return {
      categoryVisible: false,
      tableData: [],
      search:{},
      pagination: {
        pageNum: 1,
        size: 10,
      },
      total: 0,
      radio: '',
      current:null
    }
  },

  watch: {


  },
  methods: {
    open(item){
      if(item){
        this.current = item
        this.radio = item.id
      }
      this.categoryVisible = true
      this.getList()
    },

    // 单击获取id
    single (row) {
        this.current = row
        this.radio = row.id
    },

    handleClose () {
      this.categoryVisible = false
      this.current = null
      this.radio = ''
      this.search = {}
    },
    reset(){
      this.search={}
      this.getList()
    },
    handleCurrent (page) {
      this.pagination.pageNum = page
      this.getList()
    },
    handleSize (size) {
      this.pagination.pageNum = 1
      this.pagination.size = size
      this.getList()
    },
    getList(){
      let params = {
        ...this.search,
        ...this.pagination,
        parentId: 0
      }
      getSubPage(params).then(res=>{
         this.tableData = res.list
         this.total = res.count
      })
    },
      selected(){
         if(!this.current){
           return this.$message.warning('请选择分类')
         }
         this.$emit('changeCategory',this.current)
         this.handleClose()
      },

  }
}
</script>

<style lang="scss" scoped>
.tree_col {
  border: 1px solid #eee;
  padding: 10px 0;
  box-sizing: border-box;
  height: 500px;
  overflow: auto;
}
.table_col {
  padding-left: 10px;
  ::v-deep .el-table th.el-table__cell {
    background: #f2f2f2;
  }
}
.pagination {
  text-align: right;
  padding: 10px 0;
}
.btns {
  text-align: center;
  padding: 10px 0;
}
.topsearch{
	margin-bottom:15px;
}
</style>
