<template>
    <van-sticky>
      <van-nav-bar title="即查即改" />
  </van-sticky>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="code"
        rows="1"
        autosize
        label="设备编号"
        type="textarea"
        placeholder="请输入设备编号"
        required
      />
      <van-field
        v-model="troublecontrolLevel"
        name="troublecontrolLevel"
        label="隐患管控等级"
        placeholder="选择隐患管控等级"
        readonly
        @click="openPicker('troublecontrolLevel')"
      />
	  <van-field
	    v-model="troubleDesc"
	    rows="1"
	    autosize
	    label="隐患说明"
	    type="textarea"
	    placeholder="请输入隐患说明"
	    
	  />
      <van-field
        v-model="findDate"
        name="findDate"
        label="发现时间"
        placeholder="选择发现时间"
        readonly
        @click="openPicker('findDate')"
        
      />
      <van-field
        v-model="findNameCode.name"
        name="findNameCode"
        label="发现人"
        placeholder="选择发现人"
        readonly
        @click="openFullPicker('findNameCode')"
        
      />
      <van-field
        v-model="treatingProcesses"
        rows="1"
        autosize
        label="处理过程"
        type="textarea"
        placeholder="请输入处理过程"
      />
	  <van-field
	    v-model="handleNameCode.name"
	    name="handleNameCode"
	    label="处理人员"
	    placeholder="选择处理人员"
	    readonly
	    @click="openFullPicker('handleNameCode')"
	    required
	  />
	  <van-field
	    v-model="handleDate"
	    name="handleDate"
	    label="处理时间"
	    placeholder="选择处理时间"
	    readonly
	    @click="openPicker('handleDate')"
	    
	  />
      <van-field
        v-model="status"
        name="status"
        label="当前状态"
        placeholder="选择当前状态"
        readonly
        @click="openPicker('status')"
        required
      />
      <van-field
        v-model="troubleLevel"
        name="troubleLevel"
        label="隐患等级"
        placeholder="选择隐患等级"
        readonly
        @click="openPicker('troubleLevel')"
        
      />
	  <van-field
	    v-model="FactoryNumber"
	    name="FactoryNumber"
	    label="工厂编号"
	    placeholder="选择工厂编号"
	    readonly
	    @click="openPicker('FactoryNumber')"
	    
	  />
	  <van-field
	    v-model="createDate"
	    name="createDate"
	    label="创建时间"
	    placeholder="选择创建时间"
	    readonly
	    @click="openPicker('createDate')"
	    
	  />
      <van-field
        v-model="troubleAddr.name"
        name="troubleAddr"
        label="部门编号"
        placeholder="选择部门编号"
        readonly
        @click="openFullPicker('troubleAddr')"
		required
      />
      <van-field name="uploader" label="隐患图片">
        <template #input>
          <van-uploader v-model="fileList" multiple />
          <!--  <uploaderImage></uploaderImage> -->
        </template>
      </van-field>
    </van-cell-group>

    <van-popup v-model:show="showPicker" round position="bottom">
      <!-- 弹出隐患管控等级 -->
      <van-picker
        v-if="popupType == 'troublecontrolLevel'"
        :columns="troublecontrolLevelColumns"
        @cancel="showPicker = false"
        @confirm="troublecontrolLevelConfirm"
      />
      <!-- 弹出发现时间 -->
      <van-picker-group
        v-if="popupType == 'findDate'  "
        title="时间"
        :tabs="['选择日期', '选择时间']"
        next-step-text="下一步"
        @confirm="findDateConfirm"
        @cancel="showPicker = false"
      >
        <van-date-picker
          v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-time-picker v-model="currentTime" />
      </van-picker-group>
	  <!-- 弹出处理时间 -->
	  <van-picker-group
	    v-if="popupType == 'handleDate'  "
	    title="处理时间"
	    :tabs="['选择日期', '选择时间']"
	    next-step-text="下一步"
	    @confirm="handleDateConfirm"
	    @cancel="showPicker = false"
	  >
	    <van-date-picker
	      v-model="currentDate"
	      :min-date="minDate"
	      :max-date="maxDate"
	    />
	    <van-time-picker v-model="currentTime" />
	  </van-picker-group>
	  <!-- 弹出创建时间 -->
	  <van-picker-group
	    v-if="popupType == 'createDate' "
	    title="创建时间"
	    :tabs="['选择日期', '选择时间']"
	    next-step-text="下一步"
	    @confirm="createDateConfirm"
	    @cancel="showPicker = false"
	  >
	    <van-date-picker
	      v-model="currentDate"
	      :min-date="minDate"
	      :max-date="maxDate"
	    />
	    <van-time-picker v-model="currentTime" />
	  </van-picker-group>
	  <!-- 弹出当前状态 -->
	  <van-picker
	    v-if="popupType == 'status'"
	    :columns="statusColumns"
	    @cancel="showPicker = false"
	    @confirm="statusConfirm"
	  />
      <!-- 弹出隐患等级 -->
      <van-picker
        v-if="popupType == 'troubleLevel'"
        :columns="troubleLevelColumns"
        @cancel="showPicker = false"
        @confirm="troubleLevelConfirm"
      />
	  <!-- 弹出工厂编号 -->
	  <van-picker
	    v-if="popupType == 'FactoryNumber'"
	    :columns="FactoryNumberColumns"
	    @cancel="showPicker = false"
	    @confirm="FactoryNumberConfirm"
	  />
    </van-popup>
    <!-- 弹出人员选择 -->
    <van-popup v-model:show="showFullPicker" style="height: 100%; width: 100%">
      <personList
        v-if="
          fullPickerType == 'findNameCode' ||
          fullPickerType == 'handleNameCode'
        "
        :key="fullPickerKey"
        @closeFullPicker="closeFullPicker"
        :selPer="selPer"
      ></personList>
      <addressList
        v-if="fullPickerType == 'troubleAddr'"
        :key="fullPickerKey"
        @closeFullPicker="closeFullPicker"
        :selAddr="selAddr"
      ></addressList>
    </van-popup>

    <div style="margin: 16px">
      <van-button  round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref, onMounted, reactive, watch, toRaw } from "vue";
// import DataTime from "@/components/datatime/index.vue";   日期时间在一起的
import yhtopbar from "./top";
import personList from "@/components/personList.vue";
import addressList from "@/components/addressList.vue";
import deptList from "@/components/deptList.vue";
import { useRouter, useRoute } from "vue-router";


const router = useRouter();
const route = useRoute();

const code = ref("");
const troublecontrolLevel = ref("");
const FactoryNumber = ref("");
const status = ref("");
// 发现时间
const findDate = ref("");
const handleDate = ref("");
const createDate = ref("");
const currentDate = ref([]);
const currentTime = ref([]);
const minDate = ref("");
const maxDate = ref("");

const setCurrenDateTime = () => {
  //设置当前日期和时间
  let curDateTime = new Date();
  let Y = curDateTime.getFullYear();
  let M = curDateTime.getMonth() + 1;
  let D = curDateTime.getDate();
  currentDate.value = [Y, M, D];
  let h = curDateTime.getHours();
  let m = curDateTime.getMinutes();
  currentTime.value = [h, m];
  // 设置最小日期和最大日期
  let curYear = new Date().getFullYear();
  minDate.value = new Date(curYear - 2, 0, 1);
  maxDate.value = new Date(curYear + 2, 11, 31);
};

//popup弹出类型 隐患类型、发现时间
const popupType = ref("");
const showPicker = ref(false);

const troublecontrolLevelColumns = [
  { text: "班组管控", value: "1" },
  { text: "车间管控", value: "2" },
  
];
const statusColumns = [
  { text: "已完成", value: "1" },
  { text: "未完成", value: "2" },
  
];
const FactoryNumberColumns = [
  { text: "莱芜自动化分公司", value: "1" },
  { text: "济南自动化分公司", value: "2" },
  
];




const openPicker = (val) => {
  popupType.value = val;
  showPicker.value = true;
};
//选中隐患类型
const troublecontrolLevelConfirm = ({ selectedOptions }) => {
  troublecontrolLevel.value = selectedOptions[0].text;
  showPicker.value = false;
};
const statusConfirm = ({ selectedOptions }) => {
  status.value = selectedOptions[0].text;
  showPicker.value = false;
};
const FactoryNumberConfirm = ({ selectedOptions }) => {
  FactoryNumber.value = selectedOptions[0].text;
  showPicker.value = false;
};

//选中发现时间
const findDateConfirm = () => {
  findDate.value = `${currentDate.value.join("/")} ${currentTime.value.join(
    ":"
  )}`;
  showPicker.value = false;
};
const handleDateConfirm = () => {
  handleDate.value = `${currentDate.value.join("/")} ${currentTime.value.join(
    ":"
  )}`;
  showPicker.value = false;
};
const createDateConfirm = () => {
  createDate.value = `${currentDate.value.join("/")} ${currentTime.value.join(
    ":"
  )}`;
  showPicker.value = false;
};

//popup人员/地点弹出
const findNameCode = reactive({});
const handleNameCode = reactive({});
const selPer = reactive([]);
const fullPickerKey = ref(0);

const troubleAddr = reactive({});
const selAddr = reactive([]);
const addressListKey = ref(0);

const fullPickerType = ref("");
const showFullPicker = ref(false);
const openFullPicker = (val) => {
  fullPickerKey.value++;
  if (val == "findNameCode" && JSON.stringify(findNameCode) != "{}") {
    selPer.push(findNameCode);
  } else if (
    val == "handleNameCode" &&
    JSON.stringify(handleNameCode) != "{}"
  ) {
    selPer.push(handleNameCode);
  } else if (val == "troubleAddr" && JSON.stringify(troubleAddr) != "{}") {
    selAddr.push(troubleAddr);
  }
  fullPickerType.value = val;
  showFullPicker.value = true;
};
// 关闭选择人员并赋值
const closeFullPicker = (type) => {
  console.log("closeFullPicker", type, fullPickerType.value, troubleAddr);
  if (type == "ok") {
    if (fullPickerType.value == "findNameCode") {
      findNameCode.id = selPer[0].id;
      findNameCode.name = selPer[0].name;
      selPer.length = 0;
    } else if (fullPickerType.value == "handleNameCode") {
      handleNameCode.id = selPer[0].id;
      handleNameCode.name = selPer[0].name;
      selPer.length = 0;
    } else if (fullPickerType.value == "troubleAddr") {
      troubleAddr.id = selAddr[0].id;
      troubleAddr.name = selAddr[0].text;
      selAddr.length = 0;
    }
  }
  showFullPicker.value = false;
};

//隐患描述
const troubleDesc = ref("");
//处理过程
const treatingProcesses = ref("");

//隐患等级
const troubleLevel = ref("");
const troubleLevelColumns = [
  { text: "重大隐患", value: "1" },
  { text: "一般隐患", value: "2" },
];
//选中隐患等级
const troubleLevelConfirm = ({ selectedOptions }) => {
  troubleLevel.value = selectedOptions[0].text;
  showPicker.value = false;
};



// 整改前图片上传
const fileList = ref([
  // { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
  // // Uploader 根据文件后缀来判断是否为图片文件
  // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
  // { url: "https://cloud-image", isImage: true },
]);

const onSubmit = (values) => {
  const data = {
    code: code.value,
    troublecontrolLevel: troublecontrolLevel.value,
    troubleDesc: troubleDesc.value,
    findCode: findNameCode.id,
    findDate: findDate.value,
    findName: findNameCode.name,
    treatingProcesses: treatingProcesses.value,
    handleName: handleNameCode.name,
    handleNameCode: handleNameCode.id,
    handleDate: handleDate.value,
    systemId: 0,
    statue: status.value,
    troubleLevel: troubleLevel.value,
    FactoryNumber: FactoryNumber.value,
    createDate: createDate.value,
    troubleAddr: troubleAddr.name,
  };

  console.log("提交的数据:", data);
  // 假设有这么个接口
  // saveJicha(data).then((res) => {
  //   if (res.code == "200") {
  //     showSuccessToast(res.msg);
  //     router.back();
  //   } else {
  //     showFailToast(res.msg);
  //   }
  // });
};

</script>

<style>

</style>
