<template>
  <div>
    <template v-if="list.length > 0">
      <el-table :data="list" border>
        <el-table-column type="expand" width="30">
          <template #default="scope">
            <div class="padding">
              <el-descriptions :column="1">
                <!--   <el-descriptions-item label="IMPA">
                                    {{ scope.row.impa }}
                                </el-descriptions-item>
                              <el-descriptions-item label="文件路径">
                                    <image-preview :src="scope.row.filePath" :width="50" :height="50" />
                                </el-descriptions-item>
                                <el-descriptions-item label="物料目录">
                                    <TextTag :options="impaList" column="impaCode" label="impaNotes"
                                        :value="scope.row.impaCode" style="display:inline-block" />
                                </el-descriptions-item> -->
                <el-descriptions-item label="描述">
                  {{ scope.row.warehouseName }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="单位">
                                    {{ scope.row.unit }}
                                </el-descriptions-item> -->
                <el-descriptions-item label="规格" :span="3">
                  {{ scope.row.warehouseSpecifications }}
                </el-descriptions-item>
                <el-descriptions-item label="备注" :span="3">
                  {{ scope.row.remark }}
                </el-descriptions-item>
                <el-descriptions-item label="数量" :span="3">
                  {{ scope.row.warehouseRetrievalQuantity }} {{ scope.row.unit }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" type="index" width="50" />
        <!--  <el-table-column label="IMPA" align="center" prop="impa" />
                <el-table-column label="文件路径" align="center" prop="filePath" width="100">
                    <template #default="scope">
                        <image-preview :src="scope.row.filePath" :width="50" :height="50" />
                    </template>
                </el-table-column>
                <el-table-column label="物料目录" align="center" prop="impaCode" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <TextTag :options="impaList" column="impaCode" label="impaNotes" :value="scope.row.impaCode" />
                    </template>
                </el-table-column> -->
        <el-table-column label="描述" align="center" prop="warehouseName" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="单位" align="center" prop="unit" /> -->
        <el-table-column label="规格" align="center" prop="warehouseSpecifications" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="库存" align="center" prop="warehouseQuantity" /> -->
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
        <el-table-column label="数量" align="center" prop="warehouseRetrievalQuantity">
          <template #default="scope">
            {{ scope.row.warehouseRetrievalQuantity }} {{ scope.row.unit }}
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-else-if="warehouseAccessType == 10 && Object.values($store.state.data.warehouseAccessDetailsIn).length > 0">
      <el-table :data="Object.values($store.state.data.warehouseAccessDetailsIn)" border>
        <el-table-column type="expand" width="30">
          <template #default="scope">
            <div class="padding">
              <el-descriptions :column="1">
                <!--   <el-descriptions-item label="IMPA">
                                    {{ scope.row.impa }}
                                </el-descriptions-item>
                              <el-descriptions-item label="文件路径">
                                    <image-preview :src="scope.row.filePath" :width="50" :height="50" />
                                </el-descriptions-item>
                                <el-descriptions-item label="物料目录">
                                    <TextTag :options="impaList" column="impaCode" label="impaNotes"
                                        :value="scope.row.impaCode" style="display:inline-block" />
                                </el-descriptions-item> -->
                <el-descriptions-item label="描述">
                  {{ scope.row.warehouseName }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="单位">
                                    {{ scope.row.unit }}
                                </el-descriptions-item> -->
                <el-descriptions-item label="规格" :span="3">
                  {{ scope.row.warehouseSpecifications }}
                </el-descriptions-item>
                <el-descriptions-item label="备注" :span="3">
                  {{ scope.row.remark }}
                </el-descriptions-item>
                <el-descriptions-item label="数量" :span="3">
                  {{ scope.row.warehouseRetrievalQuantity }} {{ scope.row.unit }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" type="index" width="50" />
        <!--  <el-table-column label="IMPA" align="center" prop="impa" />
                <el-table-column label="文件路径" align="center" prop="filePath" width="100">
                    <template #default="scope">
                        <image-preview :src="scope.row.filePath" :width="50" :height="50" />
                    </template>
                </el-table-column>
                <el-table-column label="物料目录" align="center" prop="impaCode" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <TextTag :options="impaList" column="impaCode" label="impaNotes" :value="scope.row.impaCode" />
                    </template>
                </el-table-column> -->
        <el-table-column label="描述" align="center" prop="warehouseName" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="单位" align="center" prop="unit" /> -->
        <el-table-column label="规格" align="center" prop="warehouseSpecifications" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="库存" align="center" prop="warehouseQuantity" /> -->
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />

        <el-table-column label="数量" align="center" prop="warehouseRetrievalQuantity" width="180px" v-if="editable">
          <template #default="scope">
            <el-input-number v-model="scope.row.warehouseRetrievalQuantity" :min="1" :step="1" @change="updateWarehouseAccessDetailsIn(scope.row)" />
          </template>
        </el-table-column>

        <el-table-column label="数量" align="center" prop="warehouseRetrievalQuantity" v-else>
          <template #default="scope">
            {{ scope.row.warehouseRetrievalQuantity }} {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="unit" v-if="editable"/>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100" fixed="right" v-if="editable">
          <template #default="scope">
            <el-button link type="danger" icon="Delete" @click="removeWarehouseAccessDetailsIn(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-else-if="warehouseAccessType == 20 && Object.values($store.state.data.warehouseAccessDetailsOut).length > 0">
      <el-table :data="Object.values($store.state.data.warehouseAccessDetailsOut)" border>
        <el-table-column type="expand" width="30">
          <template #default="scope">
            <div class="padding">
              <el-descriptions :column="1">
                <!--   <el-descriptions-item label="IMPA">
                                    {{ scope.row.impa }}
                                </el-descriptions-item>
                              <el-descriptions-item label="文件路径">
                                    <image-preview :src="scope.row.filePath" :width="50" :height="50" />
                                </el-descriptions-item>
                                <el-descriptions-item label="物料目录">
                                    <TextTag :options="impaList" column="impaCode" label="impaNotes"
                                        :value="scope.row.impaCode" style="display:inline-block" />
                                </el-descriptions-item> -->
                <el-descriptions-item label="描述">
                  {{ scope.row.warehouseName }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="单位">
                                    {{ scope.row.unit }}
                                </el-descriptions-item> -->
                <el-descriptions-item label="规格" :span="3">
                  {{ scope.row.warehouseSpecifications }}
                </el-descriptions-item>
                <el-descriptions-item label="备注" :span="3">
                  {{ scope.row.remark }}
                </el-descriptions-item>
                <el-descriptions-item label="数量" :span="3">
                  {{ scope.row.warehouseRetrievalQuantity }} {{ scope.row.unit }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="IMPA" align="center" prop="impa" />
        <!--  <el-table-column label="文件路径" align="center" prop="filePath" width="100">
                    <template #default="scope">
                        <image-preview :src="scope.row.filePath" :width="50" :height="50" />
                    </template>
                </el-table-column>
                <el-table-column label="物料目录" align="center" prop="impaCode" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <TextTag :options="impaList" column="impaCode" label="impaNotes" :value="scope.row.impaCode" />
                    </template>
                </el-table-column> -->
        <el-table-column label="描述" align="center" prop="warehouseName" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="单位" align="center" prop="unit" /> -->
        <el-table-column label="规格" align="center" prop="warehouseSpecifications" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="库存" align="center" prop="warehouseQuantity" /> -->
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />

        <el-table-column label="数量" align="center" prop="warehouseRetrievalQuantity" width="180px" v-if="editable">
          <template #default="scope">
            <el-input-number v-model="scope.row.warehouseRetrievalQuantity" :min="1" :step="1" @change="updateWarehouseAccessDetailsOut(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="warehouseRetrievalQuantity" v-else>
          <template #default="scope">
            {{ scope.row.warehouseRetrievalQuantity }} {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="unit" v-if="editable"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100" fixed="right" v-if="editable">
          <template #default="scope">
            <el-button link type="danger" icon="Delete" @click="removeWarehouseAccessDetailsOut(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Empty v-else />
  </div>
</template>


<script setup>
import {
  removeWarehouseAccessDetailsOut,
  updateWarehouseAccessDetailsOut,
} from "@/utils/WarehouseAccessDetailsOut";
import {
  removeWarehouseAccessDetailsIn,
  updateWarehouseAccessDetailsIn,
} from "@/utils/WarehouseAccessDetailsIn";
import {
  listImpa,
  getImpa,
  delImpa,
  addImpa,
  updateImpa,
} from "@/api/impa/impa";

const props = defineProps({
  editable: {
    type: Boolean,
    default: true,
  },
  list: {
    type: Array,
    default: [],
  },
  warehouseAccessType: {
    type: [Number, String],
    default: null,
  },
});
const { editable, list, warehouseAccessType } = toRefs(props);

const impaList = ref(undefined);

/** 查询部门下拉树结构 */
function getTreeselect() {
  listImpa({ pageNum: 1, pageSize: 9999 }).then((response) => {
    response.rows.map((item) => {
      item.label = `${item.impaNotes}`;
    });
    // impaList.value = response.rows.filter((item) => item.status === "0");
    impaList.value = response.rows.sort(
      (a, b) => Number(a.impaCode) - Number(b.impaCode)
    );
  });
}
getTreeselect();
</script>
