<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="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_right">
          <el-table
            ref="multipleTable"
            :data="tableData"
            border
            tooltip-effect="dark"
            height="455px"
            row-key="id"
            style="width: 100%"
            @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="code"
              label="盘点单号"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="planName"
              label="计划名称"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="产品分类" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="right">
                  <el-table
                    :data="scope.row.planDetailVOList"
                    :max-height="500"
                    border
                  >
                    <el-table-column label="序号" type="index" width="50">
                    </el-table-column>
                    <el-table-column
                      label="状态"
                      prop="status"
                      :show-overflow-tooltip="true"
                    >
                      <template slot-scope="{ row }">
                        {{
                          row.status > 0
                            ? statusOption.filter(
                                (item) => item.value == row.status
                              )[0].label
                            : ''
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column label="数量" :show-overflow-tooltip="true">
                      <template slot-scope="{ row }">
                        {{
                          row.status > 0
                            ? row[
                                statusOption.filter(
                                  (item) => item.value == row.status
                                )[0].numKey
                              ]
                            : 0
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="150"
                      label="物品名称"
                      prop="categoryName"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      label="批次号"
                      prop="batchNo"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      width="150"
                      label="包装编码"
                      prop="packageNo"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      label="包装数量"
                      prop="info.packingCountBase"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      label="包装单位"
                      prop="info.packingUnit"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                      label="重量"
                      prop="info.weight"
                      :show-overflow-tooltip="true"
                    >
                    </el-table-column>
                    <el-table-column
                      label="重量单位"
                      prop="info.weightUnit"
                      :show-overflow-tooltip="true"
                    >
                    </el-table-column>
                    <el-table-column
                      width="200"
                      label="仓库"
                      prop="info.warehouseName"
                      :show-overflow-tooltip="true"
                    ></el-table-column>
                  </el-table>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{
                      scope.row.categoryLevelId
                    }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="warehouseName"
              label="盘点仓库"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="executeGroupName"
              label="盘点部门"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="executorName"
              label="盘点人员"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="surplusQuantity"
              label="盘盈数量"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="wornQuantity"
              label="盘亏数量"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="loseQuantity"
              label="破损数量"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              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 { getPlanOrderList } from '@/api/inventory';
  export default {
    props: {
      visibleDialog: {
        type: Boolean,
        default: false
      },
      treeIds: {
        type: Array,
        default: () => []
      },
      warehouseId: {
        type: String,
        default: ''
      },
      statusOption: {
        type: Array,
        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.initData();
          }
        },
        deep: true
      }
    },
    data() {
      return {
        factoryList: [],
        factoryId: '',
        value: '',
        treeType: '',
        treeList: [],
        tableData: [],
        multipleSelection: [],
        pages1: { classificationIdList: [] },
        pages: {
          pageNum: 1,
          size: 15
        },
        total: 0,
        curType: '',
        classificationId: '',
        memoSelection: [],
        newColumns: [] // 动态表头
      };
    },
    methods: {
      selectable(row) {
        return !this.selectionIds.includes(row.categoryId);
      },
      doLayout() {
        let that = this;
        this.$nextTick(() => {
          that.$refs.multipleTable.doLayout();
        });
      },
      handleSearch() {
        this.pages.pageNum = 1;
        this.initData();
      },
      onConfirm() {
        this.$emit('selectTableData', [...this.multipleSelection]);
        this.closeWindows();
      },
      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,
          type: 1
        };
        let res = null;
        res = await getPlanOrderList(params);
        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>
