<template>
  <div class="priceCollectAdd">
    <h2>粮食价格采集</h2>
    <a-space class="inputBox">
      <!-- <a-input addonBefore="监测点名称" class="inputBoxContent"></a-input> -->
      <a-dropdown>
        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item v-for="(item, i) in siteNames" :key="item.id">
              {{ item.name }}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>
          {{ localSiteName ? localSiteName : "请选择监测点" }}
          <DownOutlined />
        </a-button>
      </a-dropdown>
      <a-input addonBefore="所属州市" class="inputBoxContent" disabled></a-input>
      <a-input addonBefore="详细地址" class="inputBoxContent" disabled></a-input>
      <a-input addonBefore="价格采集人" class="inputBoxContent"></a-input>
      <a-input addonBefore="联系方式" class="inputBoxContent"></a-input>
    </a-space>
    <Draft/>

    
  </div>
</template>
<script setup>
import Draft from "./draft.vue";
const localSiteName = ref("");
const siteNames = ref([
  {
    sysOrgId: "1774730004302443458",
    name: "测试监测点2",
    id: "1776819323551088641",
  },
  {
    sysOrgId: "1774730004302443458",
    name: "测试监测点3",
    id: "1776820385175568385",
  },
  {
    sysOrgId: "1774730004302443999",
    name: "测试监测点1",
    id: "1776862839727722498",
  },
]);
const handleMenuClick = (item) => {
  siteNames.value.forEach((val,i)=>{
    if(val.id == item.key){
      localSiteName.value = val.name
    }
  })
};
</script>
<style>
.priceCollectAdd{
  overflow: auto;
  margin: auto;
}
.inputBox {
  /* width: 100%; */
  /* display: flex; */
  /* justify-content: space-around; */
  /* flex-wrap: wrap; */
}
.ant-space-item {
  margin-top: 30px;
  padding-right: 50px;
}
.inputBoxContent {
  width: 100%;
}
.ant-input-group-addon {
  border: 0;
}
.ant-list {
  margin-top: 30px;
}
</style>
