<template>
  <div>
    <el-dialog
      :title="`产品信息`"
      append-to-body
      :visible="visibleDialog"
      :before-close="closeWindows"
      width="80vw"
    >
      <div class="search_box">
        <el-row :gutter="15">
          <!-- <el-col :span="6">
            <el-form label-width="80px" class="ele-form-search">
              <el-form-item label="所属工厂" prop="factoryId">
                <el-select
                  filterable
                  placeholder="请选择"
                  v-model="factoryId"
                  clearable
                  class="w100"
                >
                  <el-option
                    v-for="item in factoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col> -->
          <el-col :span="8">
            <el-input v-model="value" placeholder="搜索物品编码、名称、规格等">
              <el-button
                slot="append"
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="handleSearch"
                >搜索</el-button
              >
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div class="flex_info">
        <div class="flex_left">
          <AssetTree
            ref="treeList"
            :treeIds="treeIds"
            @handleNodeClick="handleNodeClick"
          />
        </div>
        <div class="flex_right">
          <el-table
            ref="multipleTable"
            :data="tableData"
            border
            tooltip-effect="dark"
            height="455px"
            style="width: 100%"
            :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              :selectable="selectable"
              type="selection"
              width="55"
              align="center"
            >
            </el-table-column>
            <el-table-column width="55px" label="序号" type="index">
            </el-table-column>
            <el-table-column
              prop="categoryCode"
              label="物品编码"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="categoryName"
              label="物品名称"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              width="150"
              prop="categoryLevelPath"
              label="产品分类"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              v-if="dimension == 2"
              prop="batchNo"
              label="批次号"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="brandNum"
              label="牌号"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="categoryModel"
              label="型号"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="specification"
              label="规格"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              v-for="(item, index) in newColumns"
              :label="item.label"
              :align="item.align"
              :prop="item.prop"
              :show-overflow-tooltip="item.showOverflowTooltip"
            ></el-table-column>
            <el-table-column
              prop="measureQuantity"
              label="计量数量"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="measureUnit"
              label="计量单位"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="weightUnit"
              label="重量单位"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="weight"
              label="重量"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="weightUnit"
              label="重量单位"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table>
          <div class="right mt10">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :page-sizes="[15, 30, 50, 100, 500]"
              :page-size.sync="pages.size"
              :current-page.sync="pages.pageNum"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="select-btn">
        <el-button type="primary" @click="onConfirm">确定</el-button>
        <el-button @click="closeWindows">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import AssetTree from './assetTree.vue';
  import { getProductList, getBatchList } from '@/api/ruleManagement/plan';
  import { fieldModel } from '@/api/codeManagement';
  export default {
    props: {
      visibleDialog: {
        type: Boolean,
        default: false
      },
      treeIds: {
        type: Array,
        default: () => []
      },
      warehouseId: {
        type: String,
        default: ''
      },
      selectionIds: {
        type: Array,
        default: () => []
      },
      dimension: {
        type: Number,
        default: 1
      },
      loadTree: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      tableData(val) {
        this.doLayout();
      },
      visibleDialog: {
        handler(v) {
          if (v) {
            this.getTreeList();
          }
        },
        deep: true
      }
    },
    components: { AssetTree },
    data() {
      return {
        factoryList: [],
        factoryId: '',
        value: '',
        treeType: '',
        treeList: [],
        tableData: [],
        multipleSelection: [],
        pages1: { classificationIdList: [] },
        pages: {
          pageNum: 1,
          size: 15
        },
        total: 0,
        curType: '',
        classificationId: '',
        memoSelection: [],
        newColumns: [] // 动态表头
      };
    },
    created() {
      this.getFieldModel();
    },
    methods: {
      selectable(row) {
        return !this.selectionIds.includes(row.categoryId);
      },
      doLayout() {
        let that = this;
        this.$nextTick(() => {
          that.$refs.multipleTable.doLayout();
        });
      },
      // 获取动态表头
      getFieldModel() {
        fieldModel({ fieldModel: 't_main_category' }).then((res) => {
          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });
          this.newColumns = [...newRes];
        });
      },
      handleSearch() {
        this.pages.pageNum = 1;
        this.initData();
      },
      onConfirm() {
        this.$emit('selectTableData', [...this.multipleSelection]);
        this.closeWindows();
      },
      getTreeList() {
        this.$nextTick(() => {
          this.$refs.treeList.getTreeData().then((data) => {
            this.handleNodeClick(data);
          });
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleNodeClick(data) {
        if (data) {
          this.classificationId = data.id;
          this.curType = data.type;
        } else {
          this.classificationId = '';
          this.curType = '';
        }
        this.initData();
      },
      closeWindows() {
        this.multipleSelection = [];
        this.$emit('update:loadTree', false);
        this.$emit('update:visibleDialog', false);
        this.pages.pageNum = 1;
      },
      handleCurrentChange(e) {
        this.initData();
      },
      handleSizeChange(e) {
        this.pages.pageNum = 1;
        this.initData();
      },
      initData() {
        this._getInformation();
      },
      async _getInformation() {
        console.log(this.warehouseId);
        const params = {
          ...this.pages,
          keyWord: this.value,
          warehouseId: this.warehouseId,
          categoryLevelIds: this.classificationId
        };
        let res = null;
        if (this.dimension == 1) {
          res = await getProductList(params);
        } else {
          res = await getBatchList(params);
        }
        if (res && this.classificationId == params.categoryLevelIds) {
          this.tableData = res.list;
          this.total = res.count;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
    background-color: #eee !important;
  }
  .flex_info {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    .flex_left {
      width: 202px;
      height: 434px;
      padding: 10px;
      border: 1px solid #d7d7d7;
      overflow-y: auto;
    }
    .flex_right {
      flex: 1;
      margin-left: 10px;
      overflow: hidden;
    }
  }
  .search_box {
    overflow: hidden;
  }
  .select-btn {
    text-align: right;
  }
  .right {
    text-align: right;
  }
  .mt10 {
    margin-top: 10px;
  }
</style>
