<template>
  <div class="form_wrap">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col :span="8">
          <a-form-item label="计划状态">
            <a-select
              v-model:value="formState.state"
              placeholder="请选择状态"
            >
              <a-select-option value="1">已发布</a-select-option>
              <a-select-option value="2">已结束</a-select-option>
              <!-- 待审批，待询价，询价中，已结束 -->
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="项目名称">
            <a-input v-model:value="formState.name" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="关键字搜索">
            <a-input v-model:value="formState.keywords" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="需用单位">
            <a-input v-model:value="formState.name" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
  <a-divider />
  <a-table
    class="ant-table-striped"
    size="middle"
    :columns="columns"
    :data-source="data"
    :row-class-name="
      (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
    "
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'state'">
        <a-tag v-if="record.state == 0" color="green">已发布</a-tag>
        <a-tag v-if="record.state == 1" color="blue">已结束</a-tag>
      </template>
      <template v-if="column.dataIndex === 'operation'">
        <a-button @click="routeToPlanning" type="link">查看明细</a-button>
        <a-divider type="vertical" />
        <a-button type="link" danger>删除</a-button>
      </template>
    </template>
  </a-table>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

const labelCol = {
  style: {
    width: "120px",
  },
};
const wrapperCol = {
  span: 14,
};
const router = useRouter();
const type = ref(0);
const formState = reactive({});
const columns = [
  {
    title: "序号",
    align: "center",
    width: 80,
    customRender: (data) => {
      return data.index + 1;
    },
  },
  {
    title: "项目名称",
    dataIndex: "objectName",
  },
  {
    title: "计划名称",
    dataIndex: "name",
  },
  {
    title: "需求单位",
    dataIndex: "userName",
  },
  {
    title: "计划进场时间",
    dataIndex: "time",
  },
  {
    title: "报价日期",
    dataIndex: "range",
  },
  {
    title: "状态",
    dataIndex: "state",
  },
  {
    title: "寻源进展",
    dataIndex: "line",
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
  },
];
const data = [
  {
    key: "1668678091631",
    name: "中粗砂第一批次询价",
    objectName: "水泥路雨水泵站及配套管线工程",
    userName: "一分公司",
    editor: "xAdmin",
    state: 0,
    line: "已报价：3家",
    time: "2022-11-17",
    range: "2022/11/17-2022/11/24",
  },
  {
    key: "1668678091631",
    name: "商品混凝土第一批次询价",
    objectName: "黑龙江省哈尔滨市宾县宾西经济技术开发区风电叶片厂房建设项目施工",
    userName: "二分公司",
    editor: "xAdmin",
    state: 1,
    line: "已报价：3家",
    time: "2022-11-17",
    range: "2022/11/17-2022/11/24",
  }
];

function routeToPlanning() {
  router.push("/procurementPlanningDetailedList");
}
</script>
<style lang="scss" scoped></style>
