<template>
  <div class="abstractContent">
    <div v-if="show" class="showAbstract">
      <div class="abstractTitle">案件信息</div>
      <div class="list">
        <el-row :gutter="64">
          <el-col :span="8">
            <div class="item textellipsis">
              <span>案件名称：</span>
              <span :title="bindExample.caseTitle">{{ caseInfoData.caseTitle || bindExample.caseTitle }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>勘验号：</span>
              <span>{{ caseInfoData.knumber }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>案件类别：</span>
              <span>{{ caseInfoData.caseCategory }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>案发时间：</span>
              <span>{{ caseInfoData.crimeTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>案发区域：</span>
              <span>{{ caseInfoData.caseRegion && caseInfoData.caseRegion.join('/') }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>案件地点：</span>
              <span :title="caseInfoData.caseAddress">{{ caseInfoData.caseAddress }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>负责人：</span>
              <span :title="bindExample.commander">{{ bindExample.commander }}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="item textellipsis">
              <span>是否命案：</span>
              <span>{{ caseInfoData.homicideCase?'是':'否' }}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="item textellipsis">
              <span>是否刑案：</span>
              <span>{{ caseInfoData.criminalCase?'是':'否' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>经纬度：</span>
              <span>{{ bindExample.latAndLongs }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="abstractTitle" style="margin-top: 48px">勘验信息</div>
      <div class="list">
        <el-row :gutter="64">
          <el-col :span="8">
            <div class="item textellipsis">
              <span>指挥中心电话时间：</span>
              <span>{{ ruleForm.commandTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>指派/报告单位：</span>
              <span :title="ruleForm.assignDept">{{ ruleForm.assignDept }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>指派方式：</span>
              <span>{{ ruleForm.assignType }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>接警时间：</span>
              <span>{{ ruleForm.alarmTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>报警人：</span>
              <span :title="ruleForm.alarmName">{{ ruleForm.alarmName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>报警信息：</span>
              <span :title="ruleForm.alarmMsg">{{ ruleForm.alarmMsg }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>现场勘验单位：</span>
              <span :title="ruleForm.inquestDept">{{ ruleForm.inquestDept }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>勘验时间：</span>
              <span>{{ ruleForm.times && ruleForm.times.join('~') }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item textellipsis">
              <span>勘验地点：</span>
              <span :title="ruleForm.inquestAddress">{{ ruleForm.inquestAddress }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else class="abstract">
      <el-form
        ref="exampleRef"
        :model="bindExample"
        label-position="top"
        :rules="rules"
        :disabled="show"
        label-width="auto"
        class="demo-ruleForm"
        size="default"
        status-icon
      >
        <div class="form-content">
          <div class="subtitle">案件信息</div>
          <el-row :gutter="64">
            <el-col :span="8">
              <el-form-item label="案件名称" required prop="caseTitle">
                <el-input
                  v-model="caseInfoData.caseTitle"
                  placeholder="请输入"
                  disabled
                  show-word-limit
                  @blur="submit"
                  maxlength="100"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="勘验号" prop="knumber">
                <el-input
                  v-model="bindExample.knumber"
                  placeholder="请输入"
                  show-word-limit
                  @blur="submit"
                  maxlength="100"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="案件类别" required>
                <el-select
                  v-model="bindExample.caseCategory"
                  placeholder="请选择案件类别"
                  @change="submit"
                >
                  <el-option
                    v-for="item in criminalType"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="案发时间" required prop="crimeTime">
                <el-date-picker
                  v-model="bindExample.crimeTime"
                  type="datetime"
                  :clearable="false"
                  @change="submit"
                  aria-label="请选择案发时间"
                  placeholder="请选择案发时间"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="案发区域" prop="name">
                <el-cascader
                  size="large"
                  @change="submit"
                  style="width: 100%"
                  :props="selectSetting"
                  :options="(geoData as any as CascaderOption[])"
                  v-model="bindExample.caseRegion"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="案件地点">
                <el-input
                  v-model="bindExample.caseAddress"
                  placeholder="输入名称搜索"
                  clearable
                  @blur="submit"
                  maxlength="100"
                  disabled
                >
                  <template #append>
                    <el-button :icon="Search" @click="searchAMapAddress" />
                  </template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="负责人">
                <el-input
                  v-model="bindExample.commander"
                  placeholder="请输入"
                  clearable
                  @blur="submit"
                  maxlength="100"
                  disabled
                >
                  <template #append>
                    <el-button :icon="Search" @click="searchAMapAddress" />
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="是否命案" prop="region">
                <el-select
                  v-model="bindExample.homicideCase"
                  @change="submit"
                  placeholder="请选择"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="是否刑案" prop="region">
                <el-select
                  v-model="bindExample.criminalCase"
                  placeholder="请选择"
                  @change="submit"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="经纬度" prop="name">
                <el-input
                  v-model="bindExample.latAndLongs"
                  @blur="submit"
                  placeholder="请输入"
                  show-word-limit
                  maxlength="100"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-position="top"
        :rules="rules"
        :disabled="show"
        label-width="auto"
        class="demo-ruleForm"
        size="default"
        status-icon
      >
        <div class="form-content">
          <div class="subtitle">勘验信息</div>
          <el-row :gutter="64">
            <el-col :span="8"
              ><el-form-item label="指挥中心电话时间">
                <el-date-picker
                  v-model="ruleForm.commandTime"
                  type="datetime"
                  placeholder="请选择"
                  @change="submit"
                  aria-label="请选择"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                /> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="指派/报告单位">
                <el-input
                  v-model="ruleForm.assignDept"
                  @blur="submit"
                  placeholder="请输入"
                  show-word-limit
                  maxlength="100"
                /> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="指派方式">
                <el-input
                  v-model="ruleForm.assignType"
                  @blur="submit"
                  placeholder="请输入"
                  show-word-limit
                  maxlength="100"
                /> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="接警时间">
                <el-date-picker
                  v-model="ruleForm.alarmTime"
                  type="datetime"
                  @change="submit"
                  placeholder="请选择"
                  aria-label="请选择"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
                /> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="报警人">
                <el-input
                  v-model="ruleForm.alarmName"
                  placeholder="请输入"
                  @blur="submit"
                  show-word-limit
                  maxlength="100"
                /> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="报警信息">
                <el-input
                  v-model="ruleForm.alarmMsg"
                  @blur="submit"
                  placeholder="请输入"
                  show-word-limit
                  maxlength="100"
                /> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="现场勘验单位">
                <el-input
                  v-model="ruleForm.inquestDept"
                  @blur="submit"
                  placeholder="请输入"
                  show-word-limit
                  maxlength="100"
                /> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="勘验时间">
                <el-date-picker
                  v-model="ruleForm.times"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  @change="submit"
                  type="datetimerange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  date-format="YYYY/MM/DD ddd"
                /> </el-form-item
            ></el-col>
            <el-col :span="8"
              ><el-form-item label="勘验地点">
                <el-input
                  v-model="ruleForm.inquestAddress"
                  @blur="submit"
                  placeholder="请输入"
                  show-word-limit
                  maxlength="100"
                /> </el-form-item
            ></el-col>
          </el-row>

          <!-- <el-form-item>
              <el-button
                class="w-full"
                type="primary"
                @click="submitForm(ruleFormRef)"
              >
                保存
              </el-button>
            </el-form-item> -->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, reactive, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, CascaderOption, CascaderProps } from "element-plus";
import {
  Example,
  setExample,
  getExamplePagging,
} from "@/app/criminal/store/example";
import { selectMapImage } from "@/view/case/quisk";
import { geoData } from "./getGeo";
import {
  getSceneListData,
  getCaseInquestInfo,
  casesaveOrUpDate,
  getcaseInDate,
  getCaseInfo,
  caseInfoData,
  show,
} from "@/store/case";
const selectSetting = ref<CascaderProps>({
  value: "name",
  label: "name",
});
import { router } from "@/router";
const active = ref(true);
const caseId = computed(() => {
  const caseId = router.currentRoute.value.params.caseId;
  if (caseId) {
    return Number(caseId);
  }
});
const ruleFormRef = ref(null);
const exampleRef = ref(null);
const activeName = ref("1");
const ruleForm = ref({
  commandTime: "",
  alarmTime: "",
  alarmName: "",
  inquestDept: "",
  assignDept: "",
  inquestAddress: "",
  location: "",
  times: [],
  resource: "",
  desc: "",
  alarmMsg: ''
});
const bindExample = ref({
  caseTitle: "",
  knumber: "",
  mapId: "",
  mapUrl: "",
  caseCategory: "",
  crimeTime: "",
  caseRegion: [],
  caseAddress: "",
  homicideCase: 0,
  criminalCase: 0,
  latAndLong: "",
  latAndLongs: "",
  criminalType: "",
  commander:'',
  alarmMsg:'',
});
const criminalType = [
  "杀人",
  "爆炸",
  "放火",
  "强奸",
  "绑架",
  "投毒",
  "破坏",
  "伤害致死",
  "入室抢劫",
  "入室盗窃",
  "抢劫",
  "抢夺",
  "盗窃类",
  "接触性诈骗",
];
onMounted(async () => {
  console.log("caseInfo", caseId.value);
  const caseInfo = await getCaseInfo(caseId.value);
  const caseData = await getCaseInquestInfo(caseId.value);
  console.log("caseInfo", caseInfo, caseData);
  if (caseInfo) {
    ruleForm.value = caseData || {};
    bindExample.value = JSON.parse(JSON.stringify(caseInfo));
    bindExample.value.latAndLongs =
      bindExample.value.latAndLong &&
      bindExample.value.latAndLong.split(",").reverse().join(",");
  }
});
const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
const rules = reactive({
  caseTitle: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  knumber: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  crimeTime: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
});
const showModal = ref(false);
function debounce (fn, delay = 300){
    let timer = null
    return function (...args) {
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn.call(this, ...args)
        }, delay);
    }
}
const submits = async () => {
  if (show.value) return;

  // if (activeName.value == "1") {
  if (!bindExample.value.caseTitle || !bindExample.value.caseTitle.trim()) {
    ElMessage.error("案件名称不能为空");
    throw "案件名称不能为空";
  }
  let latAndLong = bindExample.value.latAndLongs
    ?.split(",")
    .reverse()
    .join(",");
  await setExample({
    ...bindExample.value,
    caseTitle: caseInfoData.value.caseTitle,
    latAndLong,
    caseId: caseId.value,
  });
  ruleForm.value.times = ruleForm.value.times || [];
  ruleForm.value.commandTime = ruleForm.value.commandTime || '';
  ruleForm.value.alarmTime = ruleForm.value.alarmTime || '';
  await casesaveOrUpDate({ ...ruleForm.value, caseId: caseId.value });
  // } else {
  // }
  await getCaseInfo(caseId.value);
  ElMessage.success("保存成功");
};
const submit = debounce(submits, 300)

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      submit();
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
function handleActive(params) {
  console.log("handleActive", params);
}
async function handleAdd() {
  console.log("handleAdd");
}
const searchAMapAddress = async () => {
  const data = await selectMapImage({
    text: true,
    mapId: bindExample.value.mapId,
  });
  console.log("searchAMapAddress", data);
  if (!data?.search) return;
  bindExample.value.mapId = data.mapId;
  bindExample.value.mapUrl = data.mapUrl;
  bindExample.value.caseAddress = data.search.text || `${data.search.lng},${data.search.lat}`;
  bindExample.value.latAndLong = `${data.search.lat},${data.search.lng}`;
  bindExample.value.latAndLongs = `${data.search.lng},${data.search.lat}`;
  submit();
};
</script>
<style lang="scss" scoped>
.abstract {
  height: 100%;
  padding: 0 48px 0 48px;

  overflow-y: scroll;
  .el-form-item--label-top {
    margin-bottom: 24px;
  }
  .form-content {
    // height: calc(100vh - 175px);
    // overflow-y: scroll;
  }
  .demo-tabs {
    .el-tabs__item {
      height: 32px;
      line-height: 32px;
    }
  }
  .subtitle {
    font-weight: bold;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    margin: 36px 0 16px 0;
  }
}
.abstractContent {
  .showAbstract {
    padding: 48px;
    .abstractTitle {
      font-weight: 400;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 36px;
    }
    .list{
      .item{
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: rgba(0,0,0,0.85);
        margin-top: 24px;
      }
    }
  }
}
</style>
