<template>
  <div>
    <!-- {{ impaList }} -->
    <template v-if="Object.keys($store.state.data.applyPurchaseDetails).length > 0 || list != null">
      <el-table :data="list || Object.values($store.state.data.applyPurchaseDetails)" border
        :height="editable?'calc((100vh - 290px)/2)':null">
        <!-- <el-table-column label="申购id" align="center" prop="applyPurchaseId" />  -->
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column type="expand" width="30">
          <template #default="scope">
            <div class="padding">
              <el-descriptions :column="1">
                <!-- 1 -->
                <el-descriptions-item label="IMPA">
                  {{ scope.row.impa || scope.row.materialWarehouseImpa }}
                </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 || scope.row.materialWarehouseImpaCode" style="display:inline-block" />
                </el-descriptions-item>
                <el-descriptions-item label="描述">
                  {{ scope.row.description || scope.row.materialWarehouseImpaDescription }}
                </el-descriptions-item>
                <el-descriptions-item label="规格" :span="3">
                  {{ scope.row.specifications || scope.row.materialWarehouseImpaSpecifications }}
                </el-descriptions-item>
                <el-descriptions-item label="备注" :span="3">
                  {{ scope.row.remark }}
                </el-descriptions-item>
                <el-descriptions-item label="申购数量">
                  {{ scope.row.applyPurchaseNum }} {{ scope.row.unit || scope.row.materialWarehouseImpaUnit }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="单位">
                  {{ scope.row.unit }}
                </el-descriptions-item> -->
              </el-descriptions>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="IMPA" align="center" prop="materialWarehouseImpa" />
        <el-table-column label="物料目录" align="center" prop="materialWarehouseImpaCode">
          <template #default="scope">
            <TextTag :options="impaList" column="impaCode" label="impaNotes"
              :value="scope.row.materialWarehouseImpaCode" />
          </template>
        </el-table-column>
        <!-- <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="materialWarehouseImpaDescription"
          :show-overflow-tooltip="true" />
        <el-table-column label="规格" align="center" prop="materialWarehouseImpaSpecifications"
          :show-overflow-tooltip="true" />
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
        <el-table-column label="申购数量" align="center" prop="applyPurchaseNum" width="180px" v-if="editable">
          <template #default="scope">
            <el-input-number v-model="scope.row.applyPurchaseNum" :min="1" :step="1"
              @change="updateApplyPurchaseDetails(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="申购数量" align="center" prop="applyPurchaseNum" v-else />
        <el-table-column label="单位" align="center" prop="materialWarehouseImpaUnit" />
        <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="removeApplyPurchaseDetails(scope.row)">删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Empty v-else />


    <div v-if="editable">
      <el-divider content-position="center">自定义申购列表</el-divider>

      <el-row :gutter="10" class="mb8" style="min-height:32px">
        <el-col :span="1.5">
          <el-button type="primary" icon="Plus" @click="handleAddApplyPurchaseCustomList">添加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" icon="Delete" @click="handleDeleteApplyPurchaseCustomList">删除
          </el-button>
        </el-col>
      </el-row>
      <el-table :data="$store.state.data.applyPurchaseDetailsCustomList"
        :row-class-name="rowApplyPurchaseCustomListIndex"
        @selection-change="handleApplyPurchaseCustomListSelectionChange" ref="sparePartAccessDetails" border
        height="calc((100vh - 290px)/2)">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="序号" align="center" prop="index" width="50" />
        <el-table-column label="物料类型编号" align="center" prop="materialWarehouseImpaCode">
          <template #default="scope">
            <el-select v-model="scope.row.materialWarehouseImpaCode" filterable placeholder="请选择物料类型编号">
              <el-option v-for="item in impaList" :key="item.id" :label="item.impaNotes" :value="item.impaCode" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="IMPA" align="center" prop="materialWarehouseImpa">
          <template #default="scope">
            <el-input maxlength="100" v-model="scope.row.materialWarehouseImpa" placeholder="请输入IMPA" />
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" prop="materialWarehouseImpaDescription">
          <template #default="scope">
            <el-input maxlength="100" v-model="scope.row.materialWarehouseImpaDescription" placeholder="请输入描述" />
          </template>
        </el-table-column>
        <el-table-column label="规格" align="center" prop="materialWarehouseImpaSpecifications">
          <template #default="scope">
            <el-input maxlength="100" v-model="scope.row.materialWarehouseImpaSpecifications" placeholder="请输入规格" />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark">
          <template #default="scope">
            <el-input maxlength="100" v-model="scope.row.remark" placeholder="请输入备注" />
          </template>
        </el-table-column>
        <el-table-column label="申购数量" align="center" prop="applyPurchaseNum" width="180px">
          <template #default="scope">
            <el-input-number v-model="scope.row.applyPurchaseNum" :min="1" :step="1" />
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="materialWarehouseImpaUnit">
          <template #default="scope">
            <el-input maxlength="100" v-model="scope.row.materialWarehouseImpaUnit" placeholder="请输入单位" />
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>


<script setup>
import {
  listImpa,
  getImpa,
  delImpa,
  addImpa,
  updateImpa,
} from "@/api/impa/impa";
import { removeApplyPurchaseDetails, updateApplyPurchaseDetails } from "@/utils/applyPurchaseDetails";

const { proxy } = getCurrentInstance();

const props = defineProps({
  editable: {
    type: Boolean,
    default: true,
  },
  list: {
    type: Array,
    default: null,
  },
});

const { editable, list } = toRefs(props)

const impaList = ref(undefined);
const checkedApplyPurchaseDetailsCustomLists = ref([])
const store = useStore();





/** 自定义申购列表添加按钮操作 */
function handleAddApplyPurchaseCustomList() {
  let obj = {
    applyPurchaseNum: 1,
  };
  store.state.data.applyPurchaseDetailsCustomList.push(obj);
  //// console.log(store.state.data.applyPurchaseDetailsCustomList)
}

/** 自定义申购列表删除按钮操作 */
function handleDeleteApplyPurchaseCustomList() {
  if (checkedApplyPurchaseDetailsCustomLists.value.length == 0) {
    proxy.$modal.msgError("请先选择要删除的自定义申购数据");
  } else {
    store.state.data.applyPurchaseDetailsCustomList = store.state.data.applyPurchaseDetailsCustomList.filter(function (item) {
      return checkedApplyPurchaseDetailsCustomLists.value.indexOf(item.index) == -1
    });
  }
}

/** 复选框选中数据 */
function handleApplyPurchaseCustomListSelectionChange(selection) {
  //// console.log(selection)
  checkedApplyPurchaseDetailsCustomLists.value = selection.map(item => item.index)
}

/** 自定义申购列表序号 */
function rowApplyPurchaseCustomListIndex({ row, rowIndex }) {
  row.index = rowIndex + 1;
}

listImpa({ pageNum: 1, pageSize: 9999 }).then((response) => {
  impaList.value = response.rows
});

//// console.log('-------------------------------------------------')
// onBeforeMount(() => {
//  // console.log('实例创建完成，即将挂载')
// })
// onMounted(() => {
//  // console.log('实例挂载完成')
// })
// onBeforeUpdate(() => {
//  // console.log('组件dom即将更新')
//  // console.log(impaList.value)
//   if (impaList.value == undefined) {
//   }
// })
// onUpdated(() => {
//  // console.log('组件dom已经更新完毕')
//   if (impaList.value == null) {
//     getTreeselect()
//   }
// })
// // 对应vue2 beforeDestroy
// onBeforeUnmount(() => {
//  // console.log('实例即将解除挂载')
// })
// // 对应vue2 destroyed
// onUnmounted(() => {
//  // console.log('实例已经解除挂载')
// })
// onErrorCaptured(() => {
//  // console.log('捕获到一个子孙组件的错误')
// })
// onActivated(() => {
//  // console.log('被keep-alive缓存的组件激活')
// })
// onDeactivated(() => {
//  // console.log('被keep-alive缓存的组件停用')
// })
// // 两个新钩子，可以精确地追踪到一个组件发生重渲染的触发时机和完成时机及其原因
// onRenderTracked(() => {
//  // console.log('跟踪虚拟dom重新渲染时')
// })
// onRenderTriggered(() => {
//  // console.log('当虚拟dom被触发重新渲染时')
// })

</script>
