<template>
  <el-dialog
    title="选择工作中心"
    :visible.sync="centerVisible"
    :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="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="categoryType">
               <template slot-scope="scope">
                 {{ checkcategoryType(scope.row.categoryType) }}
               </template>
            </el-table-column>
            <el-table-column label="负责人" prop="leaderUserName">
            </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 work from '@/api/technology/work';
export default {
  data () {
    return {
      centerVisible: false,
      tableData: [],
      search:{},
      pagination: {
        pageNum: 1,
        size: 10,
      },
      total: 0,
      radio: '',
      current:null,
      categoryTypes: [
        { label: '设备', value: 0 },
        { label: '设备组', value: 1 },
        { label: '人工', value: 2 },
        { label: '人工组', value: 3 },
        { label: '生产线', value: 4 },
        { label: '委外生产', value: 5 }
      ],
    }
  },

  watch: {

  },
  methods: {
    open(item){
      if(item){
        this.current = {
          id:item.workCenterId,
          name: item.workCenterName
        }
        this.radio = item.workCenterId
      }
      this.centerVisible = true
      this.getList()
    },

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

    handleClose () {
      this.centerVisible = false
      this.current = null
      this.radio = ''
    },
    handleCurrent (page) {
      this.pagination.pageNum = page
      this.getList()
    },
    handleSize (size) {
      this.pagination.pageNum = 1
      this.pagination.size = size
      this.getList()
    },
    getList(){
      let params = {...this.pagination}
      work.list(params).then(res=>{
         this.tableData = res.list
         this.total = res.count
      })
    },
    selected(){
       if(!this.current){
         return this.$message.warning('请选择工作中心')
       }
       this.$emit('changeCenter',this.current)
       this.handleClose()
    },

    /*回显类别 */
    checkcategoryType (value) {
      return this.categoryTypes.find((f) => f.value == value).label;
    },

  }
}
</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>
