<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 inset>
          <van-field
            v-model="taskinfo.taskCode"
            name="工单编号"
            label="工单编号"
            placeholder="工单编号"
          />
          <van-field
            v-model="taskinfo.taskName"
            name="工单名称"
            label="工单名称"
            placeholder="工单名称"
          />
          <van-field
            v-model="taskinfo.taskcode"
            name="工单名称"
            label="工单名称"
            placeholder="工单名称"
          />
          <van-field
            v-model="taskinfo.taskTime"
            is-link
            readonly
            name="picker"
            label="工单时间"
            placeholder="点击选择时间"
            @click="showPicker = true"
          />

          <van-popup v-model:show="showPicker" position="bottom">
            <van-datetime-picker
              v-model="taskdate"
              type="datetime"
              title="选择完整时间"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>

          <van-field
            name="工单内容"
            label="工单内容"
            v-model="taskinfo.taskContent"
            rows="2"
            autosize
            type="textarea"
            placeholder="请输入工单内容"
          />

          <van-field
            v-model="taskdtype"
            name="事件类型"
            label="事件类型"
            is-link
            readonly
            placeholder="点击选择事件类型"
            @click="showPicker1 = true"
          />

          <van-popup v-model:show="showPicker1" position="bottom">
            <van-picker
              v-model="taskdtype"
              title="选择事件类型"
              :columns="alltype"
              @confirm="onConfirm1"
              @cancel="showPicker1 = false"
            />
          </van-popup>

          <van-field
            v-model="taskinfo.taskFacilitieCode"
            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,
} from "@/api/system/task";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
import { Toast } from "vant";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import router from "../../../../router";

const { task_status, task_event_category, task_event_type } = useDict(
  "task_status",
  "task_event_category",
  "task_event_type"
);
const bodyheight = ref(0);
const showPicker = ref(false);
const showPicker1 = ref(false);
const taskdate = ref(new Date());

const taskdtype = ref("");
const alltype = ref([]);
bodyheight.value = document.body.clientHeight - 48;

const onConfirm = () => {
  showPicker.value = false;
  taskinfo.value.taskTime = moment(taskdate.value).format(
    "YYYY-MM-DD HH:mm:ss"
  );
};
const onConfirm1 = (value) => {
  showPicker1.value = false;
  taskdtype.value = value;

  taskinfo.value.taskEventType =
    task_event_type.value.filter(
      (i) => i.label.toString() === (taskdtype.value ?? "").toString()
    )[0]?.value ?? null;
};

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

const alldept = ref([]);
listDept().then((response) => {
  alldept.value = cloneDeep(response.data);
});
const allusers = ref([]);
listUser({ pageSize: 1000 }).then((res) => {
  allusers.value = res.rows;
});

const taskinfo = ref({
  taskName: null,
  taskCode: null,
  taskContent: null,
  taskTime: null,
  taskEventType: null,
  taskFacilitieCode: "",
  taskAddr: null,
  taskLocation: null,
  status:1
});

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
                }
              }
            }
      })
    }

  }
);

watch(() => task_event_type.value, () => {
  alltype.value = task_event_type.value.map(i => i.label);
})

const onSubmit = async () => {
  if (taskinfo.taskName === null || taskinfo.taskName === '' || taskinfo.taskCode === null || taskinfo.taskCode === '') {
    Toast.fail("请填写完整");
    return;
  }

  await addTask(taskinfo.value);
  Toast.success("添加成功");
  router.back();

};

const onClickLeft = () => {
  router.back();
};
</script>

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