<template>
  <div>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      :need-page="true"
      :selection.sync="selection"
      height="calc(100vh - 350px)"
      full-height="calc(100vh - 116px)"
      tool-class="ele-toolbar-form"
      cache-key="systemDictDataTable"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="openEdit({}, 2)"
        >
          新建物料
        </el-button>
      </template>
      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-copy-document"
          @click="openEdit(row, 1)"
        >
          复制
        </el-link>
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="openEdit(row, 0)"
        >
          修改
        </el-link>
        <el-popconfirm
          class="ele-action"
          title="确定要删除此物料吗？"
          @confirm="remove(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <!-- 编辑弹窗 -->
    <!--    <dict-edit :visible.sync="showEdit" :id="id" @done="reload" /> -->
  </div>
</template>

<script>
  import { getMaterialList, removeMaterial } from '@/api/material/manage.js';
  export default {
    components: {},
    props: {
      // 物料组id
      currentId: [Number, String],
      data: Object
    },
    data () {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            showOverflowTooltip: true,
            label: '序号'
          },
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
      
          {
            prop: 'brandNum',
            align: 'center',
            label: '牌号',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true,
            minWidth: 90
          },

          {
            prop: 'weightUnit',
            label: '重量单位',
            showOverflowTooltip: true,
            minWidth: 90
          },

          {
            prop: 'roughWeight',
            label: '毛重',
            showOverflowTooltip: true,
            minWidth: 90
          },

          {
            prop: 'netWeight',
            label: '净重',
            showOverflowTooltip: true,
            minWidth: 90
          },


          {
            prop: 'packingUnit',
            align: 'center',
            label: '包装单位',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryLevelPath',
            label: '分类',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        types: {
          1: '业务字典',
          2: '数据字典'
        },
        // 表格选中数据
        selection: [],
        // 是否显示编辑弹窗
        showEdit: false,
        id: null
      };
    },

    methods: {
      /* 表格数据源 */
      datasource ({ page, limit, where, order }) {
        return getMaterialList({
          pageNum: page,
          size: limit,
          ...where,
          categoryLevelGroupId: this.currentId
        });
      },
      /* 刷新表格 */
      reload (where) {
        this.$refs.table.reload({
          page: 1,
          where: where,
          categoryLevelGroupId: this.currentId
        });
      },
      /* 显示编辑 */
      openEdit (row, status) {
        this.$router.push({
          path: '/material/manage/manageMaterial',
          query: {
            chooseTab: JSON.stringify(this.data),
            id: row.id ? row.id : null,
            status: status
          }
        });
      },
      /* 删除 */
      remove (row) {
        const loading = this.$loading({ lock: true });
        removeMaterial(row.id)
          .then((msg) => {
            loading.close();
            this.$message.success('删除' + msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            // this.$message.error(e.message);
          });
      }
    },
    watch: {
      // 监听物料组id变化
      currentId () {
        this.reload();
      }
    }
  };
</script>
