<template>
  <el-dialog
    title="选择产品"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <el-card shadow="never">
      <ProductSearch @search="reload" />
      <ele-split-layout
        width="244px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="ele-border-lighter split-layout-right-content">
          <AssetTree
            ref="assetTreeRef"
            id="9"
            @handleNodeClick="handleNodeClick"
          />
        </div>
        <!-- 表格 -->
        <template v-slot:content>
          <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="datasource"
            height="calc(100vh - 350px)"
            :need-page="false"
            class="dict-table"
            @cell-click="cellClick"
          >
            <!-- 表头工具栏 -->
            <template v-slot:action="{ row }">
              <el-radio class="radio" v-model="radio" :label="row.id"><i></i></el-radio>
            </template>
          </ele-pro-table>
        </template>
      </ele-split-layout>
    </el-card>
    <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 AssetTree from '@/components/AssetTree';
 import ProductSearch from './product-search.vue'
 import { getList } from '@/api/classifyManage/itemInformation';
export default {
   components: { AssetTree, ProductSearch },
  data () {
    return {
      visible: false,
      // 表格列配置
      columns: [
        {
          columnKey: 'index',
          type: 'index',
          width: 45,
          align: 'center',
          reserveSelection: true
        },
        {
          prop: 'code',
          label: '产品编码'
        },
        {
          prop: 'name',
          label: '产品名称',
          showOverflowTooltip: true
        },
        {
          prop: 'brandNum',
          label: '牌号'
        },
        {
          prop: 'modelType',
          label: '型号'
        },
        {
          prop: 'measuringUnit',
          label: '计量单位'
        },
        {
          prop: 'packingUnit',
          label: '包装单位'
        },
        {
          action: 'action',
          slot: 'action',
          align: 'center',
          label: '选择'
        }
      ],
      categoryLevelId: '9',
      radio:null
    }
  },

  watch: {

  },
  methods: {
    /* 表格数据源 */
    datasource ({ page, where, limit }) {
      return getList({
        ...where,
        pageNum: page,
        size: limit,
        categoryLevelId: this.categoryLevelId,
        isProduct:true
      });
    },
    handleNodeClick (data) {
      this.categoryLevelId = data.id;
      this.reload();
    },
    /* 刷新表格 */
    reload () {
      this.$refs.table.reload();
    },
    open(item){
      if(item){
        this.current = {
          id:item.categoryId,
          name: item.categoryName,
          code:item.categoryCode
        }
        this.radio = item.categoryId
      }
      this.visible = true
    },

    // 单击获取id
    cellClick (row) {
        this.current = row
        this.radio = row.id
    },
    handleClose () {
      this.visible = false
      this.current = null
      this.radio = ''
    },
    selected(){
       if(!this.current){
         return this.$message.warning('请选择工作中心')
       }
       this.$emit('changeProduct',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>
