<template>
  <div class="">
    <TopNav navTitle="预警轨迹详情" :showRight="false" :showLeft="true" />
    <div v-if="!!Object.keys(yjRyDetail).length">
      <van-sticky>
        <div class="sticky_box">
          <Tabs :list="tabs" @onYjjb="onSelect" :type="'car'"></Tabs>
          <div class="ry_info">
            <List
              :item="yjRyDetail"
              style="border: none"
              :dict="{ D_BZ_YJLX, D_BZ_TYJB }"
            />
            <div class="but_box">
              <van-button
                round
                type="primary"
                style="margin: 0 2vw; padding: 0 5vw"
                @click="onClickPr"
                size="mini"
              >
                人员档案
              </van-button>
              <van-button
                round
                type="warning"
                style="margin: 0 2vw; padding: 0 5vw"
                @click="onClickPc"
                size="mini"
              >
                {{ zlCount > 0 ? "指令详情" : "转为指令" }}
              </van-button>
              <van-button
                round
                style="margin: 0 2vw; padding: 0 5vw"
                type="success"
                size="mini"
                :to="`/yyzx/yjxx/yjMapPoint?id=${yjRyDetail.id}`"
                @click="onClickZf"
              >
                地图模式
              </van-button>
            </div>
          </div>
        </div>
      </van-sticky>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有轨迹数据了"
        @load="onLoad"
        offset="1"
        :immediate-check="false"
      >
        <Steps :data="stepsData" time="yjFssj">
          <template v-slot:default="{ scope }">
            <div class="content">
              <div class="cont_l">
                <div v-if="scope.yjjb === '10'" class="red bg_red">红色</div>
                <div v-else-if="scope.yjjb === '40'" class="blue bg_bule">
                  蓝色
                </div>
                <div v-else-if="scope.yjjb === '20'" class="orange bg_orange">
                  橙色
                </div>
                <div v-else class="yellow bg_yellow">黄色</div>
                <div class="text">
                  来源:{{ setDict(scope.yjSjly, D_BZ_SJLYUAN) }}
                </div>
                <div class="text">
                  相似度:{{ scope.xsd ? scope.xsd * 100 + "%" : "" }}
                </div>
                <div class="text">管辖派出所：{{ scope.ssbm }}</div>
                <div class="text">地址：{{ scope.yjDz }}</div>
              </div>
            </div>
          </template>
        </Steps>
      </van-list>
    </div>
    <!-- <van-loading style="marginTop: 10vh;textAlign:center;" v-else-if="!Object.keys(yjRyDetail).length" vertial type="spinner" size="24px">加载中</van-loading> -->

    <van-popup
      v-model:show="turnZl"
      :style="{ height: '75%', width: '90%' }"
      round
      placement="top"
    >
      <van-field name="radio" label="类型">
        <template #input>
          <van-radio-group
            v-model="checked"
            direction="horizontal"
            @change="checkedChange"
          >
            <van-radio name="01">人员</van-radio>
            <van-radio name="02">部门</van-radio>
            <van-radio name="03">巡组</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div class="nr_box">
        <template v-if="switchFlag == '01'">
          <van-cell class="ry_cell" title="人员">
            <template #value>
              <span v-if="array.length == 0">请选择人员</span>
              <span v-else v-for="(item, index) in array" :key="index">
                <van-tag plain type="primary">{{ item.xm }}</van-tag
                >&nbsp;
              </span>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <van-radio-group
                v-model="checkedry"
                direction="horizontal"
                @change="checkedChangery"
              >
                <van-radio name="1">本部门</van-radio>
                <van-radio name="2">全部</van-radio>
              </van-radio-group>
            </template>
          </van-cell>

          <van-search
            v-model="form.pname"
            placeholder="请输入人员姓名"
            @update:model-value="getUserOrDeptList"
            @search="getUserOrDeptList"
            @cancel="getUserOrDeptList"
          ></van-search>
          <div style="height: 36vh; overflow: auto">
            <SelectCell
              v-my-load="onPload"
              :list="pList"
              title="xm"
              showSfzh="sfzh"
              @update:choose="onSelectList"
            />
          </div>
        </template>
        <template v-if="switchFlag == '02'">
          <van-field
            v-model="form.fielddept"
            readonly
            is-link
            label="部门"
            placeholder="请选择部门"
          >
          </van-field>
          <div class="deptBox">
            <van-cascader
              v-model="form.deptName"
              :closeable="false"
              @change="onChange"
              :show-header="false"
              title="请选择部门"
              :options="options"
              :field-names="customFieldName"
            >
            </van-cascader>
          </div>
        </template>
        <template v-if="switchFlag == '03'">
          <van-cell title="巡组">
            <template #value>
              <span v-if="xzArray.length == 0">请选择巡组</span>
              <span v-else v-for="(item, index) in xzArray" :key="index">
                <van-tag plain type="primary">{{
                  item.jzMc ? item.jzMc : item.fzrXm + "巡组"
                }}</van-tag
                >&nbsp;
              </span>
            </template>
          </van-cell>
          <div style="textalign: center" v-if="xzList.length <= 0">无巡组</div>
          <SelectCell
            :list="xzList"
            title="jzMc"
            showSfzh=""
            @update:choose="onSelectXzList"
          />
        </template>
      </div>

      <div class="yp_btn">
        <van-button
          size="small"
          icon="edit"
          type="warning"
          block
          @click="onSubmit"
        >
          转为指令
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
//局部懒加载指令
const vMyLoad = {
  mounted: (el, binding) => {
    el.addEventListener("scroll", function () {
      const condition =
        this.scrollHeight - this.scrollTop === this.clientHeight;
      if (condition) {
        binding.value();
      }
    });
  },
};
import {
  getSyrkYjxx,
  getInfo,
  getStatistics,
  selectPage,
  selectNextPage,
  yjConvertZl,
} from "../../../api/yjxx.js";
import { getJmxz } from "../../../api/qwzx";
import { getXfllList } from "../../../api/common.js";
import SelectCell from "../../../components/SelectCell.vue";
import { getRecentDay, timeValidate } from "../../../utils/tools";
import TopNav from "../../../components/topNav.vue";
import Steps from "../../../components/Steps.vue";
import Tabs from "../../../components/tabs.vue";
import List from "../../../components/YjList.vue";
import { getBase64 } from "../../../utils/tools.js";
import { Toast } from "vant";
import router from "../../../router";
import {
  ref,
  onMounted,
  reactive,
  watch,
  defineComponent,
  onActivated,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { getDictList, setDict } from "../../../utils/dict";
const route = useRoute();
var queryId = route.query.id;
onActivated(() => {
  if (queryId !== route.query.id) {
    getYjDetail();
    getUserOrDeptList();
    queryId = route.query.id;
  }
});
const { D_BZ_SJLYUAN, D_BZ_YJLX, D_BZ_TYJB } = getDictList(
  "D_BZ_SJLYUAN",
  "D_BZ_YJLX",
  "D_BZ_TYJB"
); //字典信息
//预警人员详情
const yjRyDetail = ref({});
const stepsData = ref([]);
const tabs = ref([
  {
    name: "今日预警",
    count: 0,
  },
  {
    name: "近7天",
    count: 0,
  },
  {
    name: "近30天",
    count: 0,
  },
  {
    name: "累计预警",
    count: 0,
  },
]);
const zlCount = ref();
const turnZl = ref(false); // 转为指令
const checked = ref("01");
const options = ref([]);
const pList = ref([]);
const loading = ref(false);
const form = reactive({
  fielddept: "",
  fieldname: "",
  pname: "",
  casValue: "",
  deptName: "",
});
const kssj = ref(getRecentDay(0, "ymd"));
const jssj = ref(getRecentDay(0, "ymd"));
onMounted(() => {
  getYjDetail();
});
const customFieldName = {
  text: "orgName",
  value: "orgName",
  children: "childDeptList",
};
const customFieldFzrName = {
  text: "userName",
};
//人员懒加载
const pLoading = ref(false);
const pFinished = ref(false);
const queryPlist = reactive({
  page: 1,
  size: 10,
  total: 0,
});
function onPload() {
  if (pList.value.length >= queryPlist.total) {
    return;
  }
  queryPlist.page++;
  getPlist();
}
const { id } = useRoute().query;
// 获取预警信息详情
function getYjDetail() {
  getInfo(route.query.id).then((res) => {
    yjRyDetail.value = res;
    zlCount.value = yjRyDetail.value.sfFszl;
    getListBySfz();
    getTjList();
  });
}
// 通过身份证或车牌号查询
const size = ref(10);
const current = ref(1);
const total = ref(0);
const finished = ref(false);
function getListBySfz() {
  Toast.loading({
    message: "加载...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  loading.value = true;
  getSyrkYjxx({
    zjhm: yjRyDetail.value.yjRysfzh,
    cph: yjRyDetail.value.yjClcph,
    pageCurrent: current.value,
    pageSize: size.value,
    kssj: kssj.value,
    jssj: jssj.value,
  })
    .then((res) => {
      loading.value = false;
      Toast.clear();
      res.records.forEach((item) => {
        stepsData.value.push(item);
      });
      total.value = res.pages;
    })
    .catch((err) => {
      loading.value = false;
      Toast.clear();
    });
}
// 统计查询
function getTjList() {
  getStatistics({
    yjRysfzh: yjRyDetail.value.yjRysfzh,
    yjClcph: yjRyDetail.value.yjClcph,
  }).then((res) => {
    tabs.value[3].count = res.all;
    tabs.value[2].count = res.data30;
    tabs.value[1].count = res.data7;
    tabs.value[0].count = res.today;
  });
}
function onSelect(val) {
  stepsData.value = [];
  finished.value = false;
  current.value = 1;
  switch (val) {
    case 0:
      kssj.value = getRecentDay(0, "ymd");
      jssj.value = getRecentDay(0, "ymd");
      break;
    case 1:
      kssj.value = getRecentDay(-7, "ymd");
      jssj.value = getRecentDay(0, "ymd");
      break;
    case 2:
      kssj.value = getRecentDay(-30, "ymd");
      jssj.value = getRecentDay(0, "ymd");
      break;
    default:
      kssj.value = "";
      jssj.value = "";
      break;
  }
  getListBySfz();
}
// 指令详情或者转为指令
function onClickPc() {
  if (zlCount.value > 0) {
  }
  if (zlCount.value == 0) {
    turnZl.value = true;
    form.pname = "";
    form.fieldname = "";
    form.fielddept = "";
    array.value = [];
    xzArray.value = [];
    checkedry.value = "1";
    getUserOrDeptList();
  }
}
//获取base64地址
function _getBase64(item) {
  getBase64((res) => {
    item.baseUrl = res;
  }, item.yjTp);
}
// 切换
const switchFlag = ref("01");
function checkedChange(val) {
  switchFlag.value = val;
}
// 人员本部门和全部切换
const checkedry = ref("1");
function checkedChangery(val) {
  xzArray.value = [];
  checkedry.value = val;
  getUserOrDeptList();
}
function getPlist() {
  pLoading.value = true;
  getXfllList({
    jllx: "01",
    type: checkedry.value,
    keyword: form.pname,
    pageCurrent: queryPlist.page,
    pageSize: queryPlist.size,
  }).then((res) => {
    pLoading.value = false;
    queryPlist.total = res.total;
    if (queryPlist.page === 1) {
      pList.value = res.records;
    } else {
      pList.value.push(...res.records);
    }
  });
}
// 查询用户和部门信息和巡组
const xzList = ref([]);
function getUserOrDeptList() {
  getPlist();
  selectNextPage({
    size: 100,
    current: 1,
  }).then((res) => {
    options.value = [res.records[0]];
  });
  // 巡组
  getJmxz({
    bbrq: timeValidate(new Date(), "ymd"),
    xfzt: "0,1,2",
    bblx: "02",
    pageSize: 100,
    pageCurrent: 1,
  }).then((res) => {
    xzList.value = res.records;
  });
}
const bmArray = ref([]);
function onChange(value, selectedOptions) {
  bmArray.value = [];
  form.fielddept = value.value;
  bmArray.value.push(value.selectedOptions[value.selectedOptions.length - 1]);
}
// 人员选择
function onChangeName(val) {
  form.fieldname = val.userName;
}
// 转指令确认按钮
function onSubmit() {
  turnZl.value = false;
  let temp = [];
  switch (switchFlag.value) {
    case "01": // 人员
      if (array.value.length > 0) {
        array.value.forEach((item) => {
          temp.push({
            zxrLx: "01",
            zxrId: item.id,
            zxrJllx: item.fl,
            zxrXm: item.xm,
            zxrSfz: item.sfzh,
            zxrDh: item.lxdh,
            bz: "",
          });
        });
      }
      break;
    case "02": // 部门
      if (bmArray.value.length > 0) {
        bmArray.value.forEach((item) => {
          temp.push({
            zxrLx: "02",
            ssbmid: item.id,
            ssbmmc: item.orgName,
            bz: "",
          });
        });
      }
      break;
    case "03": // 巡组
      if (xzArray.value.length > 0) {
        xzArray.value.forEach((item) => {
          temp.push({
            zxrLx: "03",
            zxrXzid: item.id,
            zxrXzmc: item.jzMc,
          });
        });
      }
      break;
  }
  yjConvertZl({
    yjid: route.query.id,
    zxrList: temp,
  }).then((res) => {
  });
}

function onLoad() {
  if (current.value >= total.value) {
    finished.value = true;
    return;
  }
  current.value += 1;
  getListBySfz();
}
// 选中的文件
const array = ref([]);
function onSelectList(val) {
  array.value = val.list;
}

// 选中的巡组
const xzArray = ref([]);
function onSelectXzList(val) {
  xzArray.value = val.list;
}
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.ry_info {
  margin: 2vw 3vw;
  border-radius: 2vw;
  @include jrtz_fill_color($jrtz-fill-color-theme);
  padding-bottom: 2vw;
}

.but_box {
  display: flex;
  margin-top: 1vw;
}
.text {
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
  line-height: 3.5vw;
  margin-top: 2vw;
}
.content {
  display: flex;
  padding-bottom: 20px;
  .cont_l {
    margin-right: 16px;
    .red,
    .yellow,
    .blue,
    .orange {
      display: inline-block;
      padding: 2px 16px;
      border-radius: 10px;
      @include font_size($font_medium_s);
      color: #fff;
    }
  }
}
.yp_btn {
  margin: 10px 10vw;
  display: flex;
  justify-content: center;
}
.nr_box {
  height: 57vh;
}
.deptBox {
  height: 57vh;
  // overflow-y: auto;
}
::v-deep .van-tabs__track {
  height: 44vh;
  overflow-y: auto;
}
::v-deep .ry_cell .van-cell__value {
  flex: 3;
  max-height: 8vh;
  overflow: hidden;
  overflow-y: auto;
}
::v-deep .ry_cell .van-cell__title {
  flex: 1;
}
::v-deep .ry .van-cell__value {
  flex: 8;
}
::v-deep .ry .van-cell__title {
  flex: 1;
}
</style>
