<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav :navTitle="'人口核实详情'" />
    <van-form @submit="onSubmit">
      <div class="title_tab">基本信息</div>
      <van-field
        v-model="normalForm.gmsfhm"
        label="身份证号"
        placeholder="请输入身份证号"
        input-align="right"
      />
      <van-field
        v-model="normalForm.xm"
        label="姓名"
        placeholder="请输入姓名"
        input-align="right"
      />

      <div class="title_tab">核实信息</div>
      <van-field
        v-model="normalForm.reason"
        label="任务类型"
        placeholder="请输入任务类型"
        input-align="right"
      />
      <van-field
        v-model="normalForm.createdAt"
        label="生成时间"
        placeholder="请输入生成时间"
        input-align="right"
      />
      <van-cell-group>
        <van-cell clickable title="处理结果" :border="false">
          <template #right-icon>
            <van-radio-group v-model="cljgRadio" direction="horizontal">
              <van-radio name="1">属实</van-radio>
              <van-radio name="9">不属实</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
      </van-cell-group>
      <van-field
        v-model="normalForm.jzxqmc"
        label="所属小区"
        placeholder="请输入所属小区"
        input-align="right"
        v-if="cljgRadio == 1"
      />
      <van-field
        v-model="normalForm.dzmc"
        @click="popupShow = true"
        label="小区地址"
        type="textarea"
        placeholder="请输入小区地址"
        input-align="right"
        v-if="cljgRadio == 1"
      />
      <van-cell-group v-if="cljgRadio == 9">
        <van-cell clickable title="识别情况" :border="false">
          <template #right-icon>
            <van-radio-group v-model="rysfsbqkRadio" direction="horizontal">
              <van-radio name="1">准确</van-radio>
              <van-radio name="5">错误</van-radio>
              <van-radio name="9">不确定</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
      </van-cell-group>
      <van-field
        rows="3"
        type="textarea"
        v-model="normalForm.clbz"
        placeholder="处理说明"
      />

      <div class="title_tab">
        <s></s>
        <span>通行轨迹({{ txTotal }})</span>
        <span class="all" @click="routerPush(normalForm.gmsfhm)"
          >更多
          <van-icon name="arrow"></van-icon>
        </span>
      </div>

      <div class="txgj_box">
        <div
          class="item_img_box"
          v-for="(item, index) in txgjList"
          :key="item.id"
        >
          <van-image
            width="100%"
            height="30vw"
            :src="item.baseUrl"
            style="flex: 1"
            @click.stop="onClickImg(item.ryPhoto, index)"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div class="time">{{ item.djsj }}</div>
          <div
            class="jcFlag"
            :class="{
              bg_green: item.inOut === 'in',
              bg_orange: item === 'out',
            }"
          >
            {{ item.inOut === "out" ? "出" : "进" }}
          </div>
        </div>
      </div>
      <div style="margin: 16px 0; padding: 0 5vw">
        <van-button
          :loading="loading"
          round
          native-type="submit"
          block
          type="primary"
        >
          提交
        </van-button>
      </div>
    </van-form>
    <van-popup
      v-model:show="popupShow"
      round
      position="center"
      style="width: 90%"
    >
      <van-cascader
        active-color="#1989fa"
        v-model="list.check"
        title="选择具体地址"
        :options="list.ldList"
        @close="popupShow = false"
        @change="onCascaderChange"
        @finish="onFinish"
      ></van-cascader>
    </van-popup>
  </div>
</template>

<script setup>
import { getBase64 } from "../../../utils/tools.js";
import TopNav from "../../../components/topNav.vue";
import { Dialog, Toast } from "vant";
import {
  dateFormat,
  ymGetRequest,
  ymPostRequest,
  getYmToken,
  hintToast,
} from "../../../utils/tools.js";
import { computed, ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ImagePreview } from "vant";
import router from "../../../router";
function _getBase64(item) {
  getBase64((res) => {
    item.baseUrl = res;
  }, item.ryPhoto);
}
const cljgRadio = ref("1");
const rysfsbqkRadio = ref("5"); // 人员身份识别情况
const popupShow = ref(false);
const cascaderValue = ref(""); //级联默认值
const copyToken = ref("");
const list = reactive({
  ldList: [], //楼栋数据
  check: "",
});
//通行轨迹数据
const txgjList = ref([]);
//表单数据
const normalForm = ref({
  gmsfhm: "",
  xm: "",
  jzxqmc: "",
  dzmc: "",
  zzzhz: "",
  createdAt: "",
  clbz: "",
  reason: "",
  cljg: "",
});
//不属实 置空
watch(
  () => cljgRadio.value,
  (newValue) => {
    if (newValue == 9) normalForm.value.clbz = "";
  }
);
//选择数据
onMounted(() => {
  let userCrd = JSON.parse(window.localStorage.getItem("userInfo"))
    .idEntityCard;
  let rwid = useRoute().query.id;
  getYmToken(
    {
      userid: userCrd,
      code: "GxGA510109",
    },
    (res) => {
      copyToken.value = res.data.token;
      _getData(res.data.token, "001d902c4aee42cd89f0dc3fa470abb7");
    }
  );
});
//获取任务数据数据
function _getData(token, id) {
  ymGetRequest(`/person/taskDetail`, { id }, token, (res) => {
    normalForm.value = res.data;
    normalForm.value.clbz = "核实为实有人口";
    _getLdData(res.data.jzxqid, token);
    getRytxList(res.data.gmsfhm);
  });
}
//获取楼栋数据
function _getLdData(placeId, token) {
  ymGetRequest(`/place/placeBuild`, { placeId }, token, (res) => {
    if (res.data.length > 0) {
      for (let i = 0; i < res.data.lengt; i++) {
        res.data[i].text = res.data[i].dzmc;
        res.data[i].value = res.data[i].parentid;
        res.data[i].children = [];
      }
      list.ldList = res.data.map((item) => {
        return {
          text: item.dzmc,
          value: item.id,
          children: [],
        };
      });
    }
  });
}
//单元 楼栋 房号数据
function onCascaderChange(value) {
  if (value.tabIndex === 0) {
    const index = list.ldList.map((item) => item.value).indexOf(value.value);
    ymGetRequest(
      `/place/placeBzdz`,
      { parentId: value.value },
      copyToken.value,
      (res) => {
        list.ldList[index].children = res.data.map((item) => {
          return {
            text: item.dzjc,
            value: item.id,
          };
        });
      }
    );
  }
}
//人员通行列表
const txTotal = ref(0);
function getRytxList(gmsfhm) {
  ymPostRequest(
    "/person/record_list",
    { gmsfhm, page: 1, psize: 3 },
    copyToken.value,
    (res) => {
      txgjList.value = res.data.content;
      txgjList.value.map((item) => {
        _getBase64(item);
      });
      txTotal.value = res.data.totalElements;
    }
  );
}
function onFinish({ selectedOptions }) {
  popupShow.value = false;
  normalForm.value.dzmc = selectedOptions.map((option) => option.text).join("");
  normalForm.value.dzid = selectedOptions[selectedOptions.length - 1].value;
}
function onClickImg(url, index) {
  ImagePreview({
    images: txgjList.value.map((item) => item.baseUrl),
    startPosition: index,
  });
}
function routerPush(sfzh) {
  router.push({
    path: "/rw/views/txgj",
    query: {
      sfzh: sfzh,
      token: copyToken.value,
    },
  });
}
function onSubmit() {
  const data = {
    addWhiteList: 0,
    clbz: normalForm.value.clbz,
    cljg: normalForm.value.cljg,
    cljgfk: 0,
    dzid: normalForm.value.dzid,
    id: normalForm.value.id,
    whiteRemark: "",
    whiteTime: "",
  };
  ymPostRequest("/person/taskHandle", { ...data }, copyToken.value, (res) => {
    if (res.status === 200) {
      hintToast("处理成功");
      router.go(-1);
    } else {
      hintToast(res.message);
    }
  });
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.container {
  margin-top: 2vw;
}
.nav_tab {
  padding: 2vw;
  display: flex;
  justify-content: space-around;
  .tab {
    background: #a4aec8;
    color: #fff;
    height: 32px;
    line-height: 32px;
    width: 40vw;
    text-align: center;
    border-radius: 16px 16px 16px 0;
  }
  .tab.active {
    background: #517cea;
  }
}

.popupTitle {
  text-align: center;
  background-color: rgb(11, 137, 247);
  height: 6vh;
  line-height: 6vh;
}

.popbtn-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.check-item-tag {
  display: inline-block;
  margin: 0 6px;
}

.check-data-box {
  height: 25vh;
  overflow: auto;
}

.time-box {
  display: flex;
}

::v-deep .mulSelect .van-cell__title,
.van-cell__value {
  flex: unset;
}

::v-deep .mulSelect .van-cell__value {
  flex: 1;
}
.title_tab {
  @include font_color($font-color-theme);
  padding: 0 3vw 0 7vw;
  position: relative;
  margin: 2vw 0;
  letter-spacing: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .all {
    @include font_size($font_medium_s);
  }
}
.title_tab::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5vw;
  bottom: 0;
  width: 4px;
  background: #3b6be7;
  border-radius: 2px;
}
.van-cell:after {
  display: none;
}
.van-cell {
  @include table_item_color($table-item-theme);
  box-sizing: border-box;
  border-radius: 4px;
  padding: 6px;
  margin: 8px 4%;
  width: 92%;
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
  line-height: var(--van-cell-line-height);
}
.popupTitle {
  color: #fff;
}
.txgj_box {
  display: flex;
  padding: 0 4.5%;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item_img_box {
  //   border: 1px solid red;
  position: relative;
  width: 31%;
  .time {
    font-size: 11px;
    // @include font_size($font_medium_s);
  }
  .jcFlag {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    @include font_size($font_medium_s);
    padding: 1vw;
  }
}
</style>
