<template>
  <!-- 站点状态- 运维派单 -->
  <div class="ZhanDianYunWeiPaiDan">
    <el-form size="small" label-width="90px">
      <el-form-item label="站点名称" prop="station">
        <el-input v-model="queryParams.station" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="站点编号" prop="code">
        <el-input v-model="queryParams.code" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="运维公司" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="运维责任人" prop="user">
        <el-select v-model="queryParams.user" filterable placeholder="选择运维责任人">
          <el-option
            v-for="item in userList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="期望完成时间" prop="date">
        <el-date-picker
          clearable
          v-model="queryParams.date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择期望完成时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="运维要求" prop="remark">
        <el-input type="textarea" v-model="queryParams.remark" placeholder="请输入" />
      </el-form-item>
      <el-form-item
        label="上传现场照片"
        prop="fileList"
        style="width: 100%; max-height: 130px"
      >
        <el-upload
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :on-remove="handleRemove"
          list-type="picture"
        >
          <el-button type="warning">上传图片</el-button>
        </el-upload>
        <!-- <ImageUpload v-model="queryParams.fileList" :fileSize="3" :fileType="fileTypes"></ImageUpload> -->
      </el-form-item>
    </el-form>
    <div class="flex flex-justcontent-center">
      <el-button type="primary" @click="submitData">提交</el-button>
    </div>
  </div>
</template>
<script setup name="ZhanDianYunWeiPaiDan">
import {} from "@/api/dataAnalysis/syntherticData";

const { proxy } = getCurrentInstance();
const queryParams = ref({
  station: "汤逊湖监测点",
  code: "XF000323",
  name: "武汉新烽光电",
  user: "1",
  fileList: [],
  remark: "",
  date: proxy.moment().format("YYYY-MM-DD"),
});
const userList = ref([
  { value: "1", label: "朱方仁" },
  { value: "2", label: "彭玉涛" },
]);

function handleRemove(uploadFile, uploadFiles) {
  console.log(uploadFile, uploadFiles);
}
// 提交数据
function submitData() {
  proxy.$modal.msgSuccess("提交成功");
}
</script>
<style lang="scss" scoped>
.ZhanDianYunWeiPaiDan {
  width: 100%;

  .el-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .el-form-item {
      width: 31%;
      margin-right: 2%;
      margin-bottom: 5px;
      .el-select,
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>