<template>
  <div>
    <van-nav-bar
      title="工单新增"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="listcontent" :style="`height:${bodyheight}px`">
      <van-form @submit="onSubmit">
        <van-cell-group>

          <van-field
            v-model="czobj.qsdes"
            name="权属确认"
            label="权属确认"
            placeholder="请输入权属确认(现场勘查)"
          />
          <van-field
            v-model="taskinfo.taskAddr"
            name="详细地址"
            label="详细地址"
            placeholder="详细地址"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                icon="search"
                @click="searchaddr"
              ></van-button>
            </template>
          </van-field>
          <div style="padding-top: 10px">
            <MapSelect ref="mapSelect" v-model:formv="formlocation"></MapSelect>
          </div>
        </van-cell-group>

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

<script setup>
import { defineComponent, ref, onMounted, watch } from "vue";
import { cloneDeep } from "lodash";
import { listDept, getDept } from "@/api/system/dept";
import ImagePreview from "@/components/ImagePreview";
import { useDict } from "@/utils/dict";
import { useRoute } from "vue-router";
import MapSelect from "@/components/MapSelect";
import moment from "moment";
import {
  listTask,
  getTask,
  delTask,
  addTask,
  updateTask,
  distributedTask,
  closeTask,
  czTask,
  gzTask,
  hcTask,
  ddTask
} from "@/api/system/task";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";

import { Toast } from "vant";
import router from "../../../../router";

const route = useRoute();


const czobj = ref({
  qsdes: "",
  images: [],
  gzldata: [],
  clsbdata: [],
  hcdata: [],
});

var task = localStorage.getItem("currenttask");
try {
  if (task) {
    task = JSON.parse(task);
    if (task.taskId != Number(route.query.id)) {
      Toast.fail("未查到任务");
      router.back();
    }
    var logs = (task.tblTaskLogList ?? []).filter(i => i.taskStatus == 2);
    if (Array.isArray(logs) && logs.length > 0) {
      var log = JSON.parse(logs[0].logDes);
      czobj.value = log;
    }
  } else {
    Toast.fail("未查到任务");
    router.back();
  }

} catch (E) {

}





const bodyheight = ref(0);

bodyheight.value = document.body.clientHeight - 48;


const searchaddr = () => {
  if (taskinfo.value.taskAddr) {
    mapSelect.value.searchaddr(taskinfo.value.taskAddr);
  } else {
    Toast("请输入地址");
  }
};

const taskinfo = ref({
  taskId:Number(route.query.id),
  taskAddr: task.taskAddr,
  taskLocation: task.taskLocation,
  taskArea:task.taskArea,
});

const mapSelect = ref(null);
const formlocation = ref({ addr: "", locations: "" });
watch(
  () => formlocation.value.addr,
  () => {
    taskinfo.value.taskAddr = formlocation.value.addr;

  }
);
watch(
  () => formlocation.value.locations,
  () => {
    taskinfo.value.taskLocation = formlocation.value.locations;
    if (formlocation.value.locations != "") {
      mapSelect.value.getlocationaddr(formlocation.value.locations, (data) => {
         var qu = data.regeocode.addressComponent.district;
            if (qu) {
              for (var i in sys_area.value) {
                if (sys_area.value[i].label == qu) {
                  taskinfo.value.taskArea = sys_area.value[i].value
                }
              }
            }
      })
    }

  }
);


const onSubmit = async () => {
  ddTask({
    taskId: Number(route.query.id),
    taskStatus: 2,
    logDes: JSON.stringify(czobj.value)
  }).then( async res =>  {
    await updateTask(taskinfo.value);
    Toast.success("成功");
    router.back();
  })
};

const onClickLeft = () => {
  router.back();
};
onMounted(() => {
   formlocation.value.addr = taskinfo.value.taskAddr;
  formlocation.value.locations = taskinfo.value.taskLocation;

})
</script>

<style lang="scss">
body {
  position: fixed;
  width: 100%;
  top: -1px;
}
.listcontent {
  overflow-y: auto;
  padding: 10px;
}
</style>
