<template>
    <div class="app-container">
      <el-form :model="pageReq" ref="queryForm" size="small" inline v-show="showSearch">
        <el-form-item label="客户名称" prop="clientName">
          <el-input v-model="pageReq.clientName" placeholder="请输入客户名称" clearable @keyup.enter.native="getList(1)"/>
        </el-form-item>
        <el-form-item label="客户产品编码" prop="clientItemCode">
          <el-input v-model="pageReq.clientItemCode" placeholder="请输入客户产品编码" clearable @keyup.enter.native="getList(1)"/>
        </el-form-item>
        <el-form-item label="客户产品名称" prop="clientItemName">
          <el-input v-model="pageReq.clientItemName" placeholder="请输入客户产品名称" clearable @keyup.enter.native="getList(1)"/>
        </el-form-item>
        <el-form-item label="产品名称" prop="itemName">
          <el-input v-model="pageReq.itemName" placeholder="请输入产品名称" clearable @keyup.enter.native="getList(1)"/>
        </el-form-item>
        <el-form-item label="产品类型编码" prop="itemTypeCode">
            <el-input v-model="pageReq.itemTypeCode" placeholder="请输入产品类型编码" clearable @keyup.enter.native="getList(1)"/>
        </el-form-item>
        <el-form-item label="产品类型名称" prop="itemTypeName">
            <el-input v-model="pageReq.itemTypeName" placeholder="请输入产品类型名称" clearable @keyup.enter.native="getList(1)"/>
        </el-form-item>
        <el-form-item label="品牌名称" prop="brandName">
            <el-input v-model="pageReq.brandName" placeholder="请输入品牌名称" clearable @keyup.enter.native="getList(1)"/>
        </el-form-item>
        <el-form-item label="品牌编号" prop="brandCode">
            <el-input v-model="pageReq.brandCode" placeholder="请输入品牌编号" clearable @keyup.enter.native="getList(1)"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList(1)">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="getList(0)">重置</el-button>
        </el-form-item>
      </el-form>


      <el-table v-loading="tableLoading" :data="page.rows" >
        <el-table-column label="客户编码" prop="clientCode" show-overflow-tooltip/>
        <el-table-column label="客户名称" prop="clientName" show-overflow-tooltip/>
        <el-table-column label="产品编码" prop="sapItemCode" show-overflow-tooltip/>
        <el-table-column label="产品名称" prop="itemName" show-overflow-tooltip/>
        <el-table-column label="产品类型编码" prop="itemTypeCode" show-overflow-tooltip/>
        <el-table-column label="产品类型名称" prop="itemTypeName" show-overflow-tooltip/>
        <el-table-column label="品牌名称" prop="brandName" show-overflow-tooltip/>
        <el-table-column label="品牌编号" prop="brandCode" show-overflow-tooltip/>
        <el-table-column label="基本单位" prop="itemUnitOfMeasure" width="100"/>
        <el-table-column label="客户单位" prop="clientUnitOfMeasure" width="100"/>
        <el-table-column label="换算关系" prop="exchange" width="100"/>
        <el-table-column label="客户产品编码" prop="clientItemCode" show-overflow-tooltip/>
        <el-table-column label="客户产品名称" prop="clientItemName" show-overflow-tooltip/>
        <el-table-column label="备注" prop="remark" max-width="150" show-overflow-tooltip/>
        <el-table-column label="创建人" prop="createBy" width="80"/>
        <el-table-column label="创建时间" prop="createTime" width="100"/>
        <el-table-column label="更新人" prop="updateBy" width="80"/>
        <el-table-column label="更新时间" prop="updateTime" width="100"/>
      </el-table>

      <pagination v-show="page.total>0" :total="+page.total" :page.sync="pageReq.pageNum" :limit.sync="pageReq.pageSize" @pagination="getList"/>


    </div>
  </template>

  <script>
  import {
    listClientItem
  } from '@/api/mes/pro/ClientItemRelation.js'
  export default {
    components: {

    },
    data() {
      return {
        ids: [],
        showSearch: true,
        tableLoading: false,
        pageReq: {
          pageNum: 1,
          pageSize: 10,
          clientName: null,
          clientItemCode: null,
          clientItemName: null,
          itemName: null,
          itemTypeCode: null,
          itemTypeName: null,
          brandName: null,
          brandCode: null
        },
        page: {total: 0, rows: []},
        showEdit: false,
        loading: false,
        form: {
          clientId: null,
          itemId: null,
          itemType: null,
          brandId: null,
          unit: null,
          clientItemCode: null,
          clientItemName: null,
          clientUnit: null,
          exchange: null,
        }
      }
    },
    methods: {
      getList(num) {
        if (num === 1 || num === 0) this.pageReq.pageNum = 1
        if (num === 0) this.$refs.queryForm.resetFields()
        this.tableLoading = true
        listClientItem(this.pageReq).then(res => this.page = res).finally(() => this.tableLoading = false)
      },
    },
    created() {
      this.getList()
    },
  }
  </script>
