<script setup>
import { reactive, ref, toRefs } from "vue";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
import { technologyDemandList } from "@/api/admin/agent/service/technology-demand";

const router = useRouter();
const route = useRoute();
const dataList = ref([]);
const loading = ref(true);
const total = ref(0);
const showSearch = ref(true);
const queryRef = ref();
const formRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    enterpriseId: null,
  },
});
const { queryParams } = toRefs(data);

const getList = async () => {
  loading.value = true;
  const resp = await technologyDemandList(queryParams.value);
  dataList.value = resp.rows;
  total.value = resp.total;
  loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

function handleResults(row) {
  router.push({
    path: "./results",
    query: {
      keyword: row.title,
    },
  });
}

const handleRelease = () => {
  router.push({
    path: "/admin/service/technology-demand-release",
  });
};

/**
 * 前往更新状态页面
 * @param row
 */
const handleUpdateStatus = (row) => {
  router.push({
    path: "/admin/service/update-status",
    query: {
      id: row.id,
    },
  });
};

if (route.query.id) {
  queryParams.value.enterpriseId = route.query.id;
  getList();
}
</script>

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8" style="margin-top: 12px">
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table size="large" :data="dataList">
      <!--      编号 列-->
      <el-table-column align="center" label="编号" prop="id" />
      <el-table-column align="center" label="需求名称" prop="title" />
      <el-table-column align="center" label="所属领域" prop="industryStr" />
      <el-table-column align="center" label="联系人" prop="name" />
      <el-table-column align="center" label="手机" prop="mobile" />
      <el-table-column align="center" label="发布时间" prop="name">
        <template #default="{ row }">
          {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="截止时间" prop="name">
        <template #default="{ row }">
          {{ dayjs(row.deadline).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="">
        <template #default="{ row }">
          <el-button type="text">删除</el-button>
          <el-button type="text" @click="handleResults(row)"
            >查看匹配结果</el-button
          >
          <el-button type="text" @click="handleUpdateStatus(row)"
            >更新状态
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<style lang="scss" scoped>
//:deep(.el-table--large) {
//font-size: 18px;
//th {
//font-size: 18px;
//}
//}
</style>
