<template>
  <div class="detail-container">
    <el-form ref="formRef" :model="form" label-position="right" label-width="auto"
      style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
      <el-row style="margin: 20px 0px;">
        <h4>项目信息</h4>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="工程状态" prop="工程状态">
            <el-radio-group v-model="form.zt">
              <el-radio value="1">在建</el-radio>
              <el-radio value="2">停工</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="所属区县" prop="所属区县">
            <el-select v-model="qx" filterable remote reserve-keyword clearable placeholder="输入区县名称查询"
              :remote-method="remoteMethod_qx" :loading="loading" @change="handleSelect_qx" value-key="index">
              <el-option v-for="(item, index) in qxList" :key="index" :label="item.qxmc" :value="item.qxmc" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="项目名称">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驻地名称" prop="驻地名称">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="驻地类型" prop="驻地类型">
            <el-select>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="坐标点位" prop="坐标点位">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-input aria-label="经度" placeholder="经度" />
              </el-col>
              <el-col :span="12">
                <el-input aria-label="纬度" placeholder="纬度" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="所属项目名称:">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类型:">
            <el-select>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="建设单位:">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="施工单位:">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行政区域:">
            <el-select ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驻地人数:">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="驻地风险等级:">
            <el-select ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房建类型:">
            <el-select ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="搬迁状态:">
            <el-select ></el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin: 20px 0px;">
        <h4>项目联系人信息</h4>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="吹哨人姓名:">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="吹哨人电话:">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="建设单位包保责任人姓名:">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="建设单位包保责任人电话:">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="施工单位包保责任人姓名:">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="施工单位包保责任人电话:">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="驻地包保责任人姓名:">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驻地包保责任人电话:">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="区县级包保责任人姓名:">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="区县级包保责任人电话:">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="市级包保责任人姓名:">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="市级包保责任人电话:">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin: 20px 0px;">
        <h4>其他信息</h4>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注:">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { request } from "@/utils/request";
const formRef = ref(null);
defineExpose({ formRef });

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
});
const sfjwd = ref("是");
const qx = ref("");
const loading = ref(false);
const selectOptions = ref([]);
const qxList = ref([]);

// 根据用户信息 查询角色列表
const getUserList = async (key) => {
  try {
    const keyword = key;
    let url = "";
    if (keyword) {
      url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
    } else {
      url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
    }
    const res = await request({
      url: url,
      method: "GET",
    });
    if (res.code === "00000") {
      return res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    ElMessage.error(error.message);
    console.log(error);
  }
};

// 选择人员筛选
const remoteMethod = async (query) => {
  if (query === "") {
    selectOptions.value = [];
    return [];
  }
  loading.value = true;
  const res = await getUserList(query);
  if (res) {
    selectOptions.value = res;
  }
  loading.value = false;
};

// 根据区县名称 查询区县列表
const getQxList = async (key) => {
  try {
    const keyword = key;
    let url = "";
    if (keyword) {
      url = `/snow-ops-platform/district/listDistricts?qxmc=${keyword}`;
    } else {
      url = `/snow-ops-platform/district/listDistricts?qxmc=`;
    }
    const res = await request({
      url: url,
      method: "GET",
    });
    if (res.code === "00000") {
      return res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) { }
};

// 选择区县筛选
const remoteMethod_qx = async (query) => {
  loading.value = true;
  const res = await getQxList(query);
  if (res) {
    qxList.value = res;
  }
  loading.value = false;
};

// 选择区县
const handleSelect_qx = (value) => {
  props.form.qxmc = value;
};

// 选择人员
const handleSelect = (value) => {
  console.log("value", value);
  props.form.fzrXm = value.realName;
  props.form.fzrSjhm = value.phone;
  props.form.fzrUserId = value.userId;
};

const rules = computed(() => {
  return {
    mc: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.mc) {
            callback();
          } else {
            callback(new Error("请输入服务站名称"));
          }
        },
        trigger: "blur",
      },
    ],
    qxmc: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.qxmc) {
            callback();
          } else {
            callback(new Error("请选择所属区县"));
          }
        },
        trigger: "blur",
      },
    ],
    fzr: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.fzrUserId && props.form.fzrXm && props.form.fzrSjhm) {
            callback();
          } else {
            callback(new Error("请选择负责人"));
          }
        },
        trigger: "blur",
      },
    ],
    jd: [
      {
        required: sfjwd.value === "否",
        validator: (rule, value, callback) => {
          if (props.form.jd) {
            callback();
          } else {
            callback(new Error("请输入站点经度"));
          }
        },
        trigger: "blur",
      },
    ],
    wd: [
      {
        required: sfjwd.value === "否",
        validator: (rule, value, callback) => {
          if (props.form.wd) {
            callback();
          } else {
            callback(new Error("请输入站点纬度"));
          }
        },
        trigger: "blur",
      },
    ],
  };
});
</script>

<style></style>