<template>
  <div class="page-container row-container">
    <!-- 左侧区域 -->
    <section class="list-part-container" style="flex: 1">
      <!-- 搜索区域 -->
      <el-form class="list-search-container" ref="queryRef" :inline="true" style="display: flex">
        <el-form-item class="section-title" label="载具类别" />
        <el-form-item label="类别名称：">
          <el-input placeholder="请输入类别名称" clearable style="width: 150px" v-model="name" @keydown.enter.prevent
            @blur="trimBlur('name')" />
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-tree ref="categoryTable" v-loading="categoryLoading" :data="carrierCategoryList"
            :props="{ label: 'name', children: 'children' }" :expand-on-click-node="false"
            :filter-node-method="filterNode" default-expand-all node-key="id" highlight-current
            @node-click="handleCurrentCategoryChange">
            <template #default="{ node, data }">
              <span>
                <span v-if="data.parentId == 0" style="display: inline-block; width: 20px">{{ getNodeIndex(data) }}.
                </span>
                <span>{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
    </section>

    <!-- 右侧区域 -->
    <section class="list-part-container" style="flex: 3">
      <el-form class="list-search-container" :model="queryCarrierRejectParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="载具操作明细" />
        <el-form-item label="载具编号：">
          <el-input placeholder="请输入载具编号" :disabled="carrierCategoryList.length == 0" clearable style="width: 180px"
            v-model="queryCarrierRejectParams.code" @blur="trimBlur('code')" @keydown.enter.prevent
            @keyup.enter="handleQueryCarrier" />
        </el-form-item>
        <el-form-item label="载具状态：">
          <el-select v-model="queryCarrierRejectParams.isAbandoned" clearable placeholder="请选择载具状态"
            style="width: 150px">
            <el-option v-for="dict in carrier_status" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" :disabled="carrierCategoryList.length == 0"
            @click="handleQueryCarrier">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="carrierRejectLoading" :data="carrierRejectList" height="100%">
            <el-table-column type="index" label="行号" width="50" align="center" />
            <el-table-column prop="code" label="载具编号" width="120" align="center" />
            <el-table-column label="状态" width="80" prop="isAbandoned" align="center">
              <template #default="scope">
                {{ scope.row.status }}
                <dict-tag :options="carrier_status" :value="scope.row.isAbandoned" />
              </template>
            </el-table-column>
            <el-table-column prop="operationDate" label="操作日期" width="130" align="center">
              <template #default="scope">
                {{ proxy.moment(scope.row.operationDate).format("YYYY-MM-DD") }}
              </template>
            </el-table-column>
            <el-table-column prop="abandonmentReason" label="废弃原因" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <pagination v-show="carrierRejectTotal > 0" :total="carrierRejectTotal"
        v-model:page="queryCarrierRejectParams.pageNum" v-model:limit="queryCarrierRejectParams.pageSize"
        @pagination="getCarriersReject" />
    </section>
  </div>
</template>

<script setup name="Process">
import { listCategory } from "@/api/business/carrier";
import { listReject } from "@/api/business/reject";
const { proxy } = getCurrentInstance();
import carrierStore from "@/store/modules/carrier";
import queryStore from "@/store/modules/query";
/** 字典数组区 */
const { carrier_status } = proxy.useDict("carrier_status");
/** 载具类别变量 */
const currentCategory = ref({});
const carrierCategoryList = ref([]);
const categoryLoading = ref(false);
const name = ref("");
/** 载具操作明细变量 */
const carrierRejectList = ref([]);
const carrierRejectLoading = ref(false);
const carrierRejectTotal = ref(0);
/** 查询对象 */
const data = reactive({
  form: {},
  queryCarrierRejectParams: {
    code: "",
    pageNum: 1,
    pageSize: 10,
    isAbandoned: "",
    categoryId: "",
  },
});

const { queryCarrierRejectParams } = toRefs(data);

/****************************  载具类别相关事件  ****************************/
/** 载具分类列表 */
const getCategories = () => {
  categoryLoading.value = true;
  listCategory().then((res) => {
    categoryLoading.value = false;
    carrierCategoryList.value = res.rows;
    if (carrierCategoryList.value.length > 0) {
      currentCategory.value = carrierCategoryList.value[0];
      nextTick(() => {
        // if (carrierStore().categoryId != null && carrierStore().carrierCode != null) {
        //   console.log(carrierStore().categoryId)
        //   let a = 0;
        //   let b = 0;
        //   console.log(carrierCategoryList.value)
        //   for (let i = 0; i < carrierCategoryList.value.length; i++) {
        //     if (carrierCategoryList.value[i].children) {
        //       for (let j = 0; j < carrierCategoryList.value[i].children.length; j++) {
        //         let currentCategory = carrierCategoryList.value[i].children[j]
        //         if (currentCategory.id.trim() == carrierStore().categoryId) {
        //           console.log(i)
        //           console.log(j)
        //           a = i;
        //           b = j
        //         }
        //       }
        //     }
        //   }
        //   currentCategory.value = carrierCategoryList.value[a].children[b];
        //   console.log(currentCategory.value)
        //   queryCarrierRejectParams.value.code = carrierStore().carrierCode
        //   console.log(currentCategory.value)
        //   proxy.$refs.categoryTable.setCurrentKey(carrierStore().categoryId)
        //   carrierStore().setCategoryIdQueryParams(null)
        //   carrierStore().setCarrierCodeQueryParams(null)
        // } else {

        proxy.$refs.categoryTable.setCurrentKey(currentCategory.value.id);
        // console.log(queryStore().rejectDetailParams)
        name.value = queryStore().rejectCategoryParams != null ? queryStore().rejectCategoryParams.name : ''
        queryStore().cleanRejectDetailParams()
        if (queryStore().rejectDetailParams != null && queryStore().rejectDetailParams.categoryId != null) {
          let a = 0;
          let b = 0;
          // console.log(carrierCategoryList.value)
          for (let i = 0; i < carrierCategoryList.value.length; i++) {
            if (carrierCategoryList.value[i].children) {
              for (let j = 0; j < carrierCategoryList.value[i].children.length; j++) {
                let currentCategory = carrierCategoryList.value[i].children[j]
                if (currentCategory.id.trim() == queryStore().rejectDetailParams.categoryId) {
                  console.log(i)
                  console.log(j)
                  a = i;
                  b = j
                }
              }
            }
          }
          currentCategory.value = carrierCategoryList.value[a].children[b];
          proxy.$refs.categoryTable.setCurrentKey(queryStore().rejectDetailParams.categoryId)
        }
        // }

        handleCurrentCategoryChange(currentCategory.value);
      });
    } else {
      carrierRejectList.value = [];
    }
  });
};
//载具类别点击事件
const handleCurrentCategoryChange = (row) => {
  if (row) {
    currentCategory.value = row;
  } else {
    currentCategory.value = {};
    if (carrierCategoryList.value.length > 0) {
      currentCategory.value = carrierCategoryList.value[0];
    }
  }
  if (currentCategory.value.id) {
    getCarriersReject()
  } else {
    carrierRejectList.value = [];
    carrierRejectTotal.value = 0;
  }
};
//载具类别搜索事件
watch(name, (val) => {
  console.log('watch name change')
  setQueryName()
  proxy.$refs["categoryTable"].filter(val);
});
const filterNode = (value, data) => {
  if (!value) {
    return true;
  }
  queryCarrierRejectParams.value.code = "";
  queryCarrierRejectParams.value.isAbandoned = null;
  handleCurrentCategoryChange(carrierCategoryList.value[0]);
  return data.name.indexOf(value) !== -1;
};
//载具类别编号
function getNodeIndex(data) {
  const index = carrierCategoryList.value.findIndex(
    (item) => item.id === data.id
  );
  return index + 1;
}
/****************************  载具操作明细相关事件  ****************************/
//获取载具废弃明细
const getCarriersReject = () => {
  carrierRejectLoading.value = true;
  const listQueryParams = queryStore().rejectDetailParams;
  // console.log('get params', listQueryParams)
  if (listQueryParams != null) {
    listQueryParams.name = name.value
    queryCarrierRejectParams.value = listQueryParams;
  } else {
    const listQueryParams = JSON.parse(JSON.stringify(queryCarrierRejectParams.value));
    queryStore().setRejectDetailParams(listQueryParams);
    // console.log('set store params', listQueryParams)
  }
  queryCarrierRejectParams.value.categoryId = currentCategory.value.id;
  queryCarrierRejectParams.value.name = null
  listReject(queryCarrierRejectParams.value).then((res) => {
    carrierRejectLoading.value = false;
    carrierRejectList.value = res.rows;
    carrierRejectTotal.value = res.total;
  });
};
// 载具操作明细搜索
const handleQueryCarrier = () => {
  queryCarrierRejectParams.value.pageNum = 1;
  queryCarrierRejectParams.value.code = queryCarrierRejectParams.value.code.trim()
  const listQueryParams = JSON.parse(JSON.stringify(queryCarrierRejectParams.value));
  listQueryParams.name = name.value
  queryStore().setRejectDetailParams(listQueryParams);
  // console.log('set store params', listQueryParams)
  getCarriersReject();
};
const setQueryName = () => {
  queryStore().setRejectDetailParamsName(name.value);
  // console.log(queryStore().rejectDetailParams)
}
const trimBlur = (param) => {
  if (param == 'name') {
    name.value = name.value.trim()
  } else {
    queryCarrierRejectParams.value[param] = queryCarrierRejectParams.value[param].trim()
  }
}
onMounted(() => {
  // console.log(queryStore().rejectDetailParams)
  getCategories()
});
</script>
<style scoped>
:deep(.el-tree-node__label) {
  font-size: 14px !important;
}

:deep(.el-tree-node__content) {
  height: 40px;
  border-bottom: 1px solid #ebeef5;
  padding: 8px 0;
  line-height: 23px;
}
</style>