<template>
  <div>
    <van-nav-bar
      title="计划反馈"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="listcontent">
      <van-tabs v-model:active="active">
        <van-tab title="作业组">
          <div :style="`background:#fff;padding-top: 10px;max-height:${bodyheight-160}px;overflow-y: auto;`">
            <van-form>
              <van-cell-group inset>
                <van-field
                  v-model="zxfkobj.gzz.fzr"
                  name="负责人"
                  label="负责人"
                  placeholder="请输入负责人"
                />
                <van-field name="组员" label="组员">
                  <template #input>
                    <el-select
                      v-model="zxfkobj.gzz.zy"
                      multiple
                      filterable
                      allow-create
                      default-first-option
                      :reserve-keyword="false"
                      placeholder="请输入组员"
                    >
                      <el-option
                        v-for="item in allusers"
                        :key="item.nickName"
                        :label="item.nickName"
                        :value="item.userId"
                      />
                    </el-select>
                  </template>
                </van-field>

                <van-field
                  v-model="zxfkobj.gzz.rs"
                  name="人数"
                  label="人数"
                  type="number"
                  placeholder="请输入人数"
                />
                <van-field
                  v-model="zxfkobj.gzz.cq"
                  name="城区"
                  label="城区"
                  is-link
                  readonly
                  placeholder="请选择城区"
                  @click="showPicker = true"
                />
                <van-popup v-model:show="showPicker" position="bottom">
                  <van-picker
                    v-model="zxfkobj.gzz.cq"
                    title="请选择城区"
                    :columns="sys_area.map((i) => i.label)"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                  />
                </van-popup>
                <van-field
                  v-model="zxfkobj.gzz.addrstart"
                  name="管线起点"
                  label="管线起点"
                  placeholder="请输入地址"
                />
                <van-field
                  v-model="zxfkobj.gzz.addrend"
                  name="管线终点"
                  label="管线终点"
                  placeholder="请输入地址"
                />
                <van-field
                  v-model="zxfkobj.gzz.starttime"
                  name="开始时间"
                  label="开始时间"
                  is-link
                  readonly
                  placeholder="请选择日期"
                  @click="showPicker1 = true"
                />
                <van-popup v-model:show="showPicker1" position="bottom">
                  <van-datetime-picker
                    v-model="taskdate"
                    type="date"
                    title="选择日期"
                    @confirm="onConfirm1"
                    @cancel="showPicker1 = false"
                  />
                </van-popup>
                <van-field
                  v-model="zxfkobj.gzz.endtime"
                  name="结束时间"
                  label="结束时间"
                  is-link
                  readonly
                  placeholder="请选择日期"
                  @click="showPicker2 = true"
                />
                <van-popup v-model:show="showPicker2" position="bottom">
                  <van-datetime-picker
                    v-model="taskdate1"
                    type="date"
                    title="选择日期"
                    @confirm="onConfirm2"
                    @cancel="showPicker2 = false"
                  />
                </van-popup>
                <van-field
                  v-model="zxfkobj.gzz.addr"
                  name="作业地址"
                  rows="2"
                  autosize
                  type="textarea"
                  label="作业地址"
                  placeholder="请输入地址"
                />
                <van-field
                  v-model="zxfkobj.gzz.jcsb"
                  name="作业方式"
                  label="作业方式"
                  placeholder="请输入"
                />
                <van-field
                  v-model="zxfkobj.gzz.cars"
                  name="车辆"
                  label="车辆"
                  placeholder="请输入车辆数"
                />
                <van-field
                  v-model="zxfkobj.gzz.carnumber"
                  name="车牌号"
                  label="车牌号"
                  placeholder="请输入车牌号"
                />

                <van-field name="作业图片" label="作业图片">
                    <template #input>
                  <ImageUpload v-model="zxfkobj.gzz.zyimages"></ImageUpload>
                  </template>
                </van-field>
                <van-field name="工作图片" label="工作图片">
                   <template #input>
                  <ImageUpload v-model="zxfkobj.gzz.gzimages"></ImageUpload>
                  </template>
                </van-field>
              </van-cell-group>
            </van-form>
          </div>
        </van-tab>
        <van-tab title="工作量">
          <div :style="`background:#fff;padding-top: 10px;max-height:${bodyheight-160}px;overflow-y: auto;`">
            <van-form>
              <van-cell-group inset>
                <van-field
                  v-model="zxfkobj.gzl.gj"
                  name="管径(mm)"
                  label="管径(mm)"
                  type="number"
                  placeholder="请输入数量"
                />
                <van-field
                  v-model="zxfkobj.gzl.dycd"
                  name="对应长度(m)"
                  label="对应长度(m)"
                  type="number"
                  placeholder="请输入数量"
                />
                <van-field
                  v-model="zxfkobj.gzl.nl"
                  name="泥量(方)"
                  label="泥量(方)"
                  type="number"
                  placeholder="请输入数量"
                />
                <van-field
                  v-model="zxfkobj.gzl.jcj"
                  name="检查井(座)"
                  label="检查井(座)"
                  type="number"
                  placeholder="请输入数量"
                />
                <van-field
                  v-model="zxfkobj.gzl.ysk"
                  name="雨水口(座)"
                  label="雨水口(座)"
                  type="number"
                  placeholder="请输入数量"
                />
                <van-field
                  v-model="zxfkobj.gzl.bz"
                  name="箅子(个)"
                  label="箅子(个)"
                  type="number"
                  placeholder="请输入数量"
                />
                <van-field
                  v-model="zxfkobj.gzl.yskzg"
                  name="雨水口支管(m)"
                  label="雨水口支管(m)"
                  type="number"
                  placeholder="请输入数量"
                />
                <van-field
                  v-model="zxfkobj.gzl.remark"
                  name="备注"
                  label="备注"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入"
                />
                <van-field
                  v-model="zxfkobj.gzl.wnzyyy"
                  name="未能作业原因"
                  label="未能作业原因"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入"
                />
                <van-field
                  v-model="zxfkobj.gzl.remark1"
                  name="备注"
                  label="备注"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入"
                />
                <van-field name="现场图片" label="现场图片">
                   <template #input>
                  <ImageUpload v-model="zxfkobj.gzl.images"></ImageUpload>
                  </template>
                </van-field>
              </van-cell-group>
            </van-form>
          </div>
        </van-tab>
      </van-tabs>

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

<script setup>
import { defineComponent, ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import ImageUpload from "@/components/ImageUpload";
import FileUpload from "@/components/FileUpload";
import VideoUpload from "@/components/VideoUpload";
import { useDict } from "@/utils/dict";
import moment from "moment";
import {
  listMaintain,
  addMaintain,
  getMaintain,
  distributedMaintain,
  feedbackMaintain,
  completeMaintain,
} from "@/api/system/maintain";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
const { maintain_status, maintain_type, sys_area } = useDict(
  "maintain_status",
  "maintain_type",
  "sys_area"
);
import router from "../../../../router";
const STATICURL = import.meta.env.VITE_APP_BASE_API;
const route = useRoute();
const taskdate = ref(new Date());
const taskdate1 = ref(new Date());
const showPicker = ref(false);
const showPicker1 = ref(false);
const showPicker2 = ref(false);
const bodyheight = ref(0);
bodyheight.value = document.body.clientHeight - 48;
if (!route.params.id || route.params.id == "undefined") {
  router.back();
}

const onConfirm = (value) => {
  zxfkobj.value.gzz.cq = value;
  showPicker.value = false;
};
const onConfirm1 = () => {
  showPicker1.value = false;
  zxfkobj.value.gzz.starttime = moment(taskdate.value).format("YYYY-MM-DD");
};
const onConfirm2 = () => {
  showPicker2.value = false;
  zxfkobj.value.gzz.endtime = moment(taskdate1.value).format("YYYY-MM-DD");
};

const active = ref(0);
const zxfkobj = ref({
  gzz: {
    fzr: "",
    zy: "",
    rs: 1,
    starttime: "",
    endtime: "",
    addrstart: "",
    addrend: "",
    cq: "",
    addr: "",
    jcsb: "",
    cars: "",
    carnumber: "",
    zyimages: [],
    gzimages: [],
  },
  gzl: {
    gj: "",
    dycd: "",
    nl: "",
    jcj: "",
    ysk: "",
    bz: "",
    yskzg: "",
    remark: "",
    wnzyyy: "",
    remark1: "",
    images: [],
  },
});
const allusers = ref([]);

onMounted(async () => {
  await listUser({ pageSize: 1000 }).then((res) => {
    allusers.value = res.rows;
  });

  getMaintain(Number(route.params.id))
    .then((res) => {
      var maintaininfo = res.data;

      if (Number(maintaininfo.status) > 1) {
        try {
          zxfkobj.value.gzz.fzr =
            allusers.value.filter(
              (i) =>
                i.userId.toString() ===
                JSON.parse(
                  maintaininfo.maintainLogs.filter(
                    (ii) => ii.maintainStatus === 2
                  )[0].logDes
                ).fzr.toString()
            )[0]?.nickName ?? "-";
        } catch (e) {}
      }
    })
    .catch(function (error) {
      router.back();
    });
});
</script>

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