<template>
  <div class="container">
    <header>
      <el-form :label-width="114">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input
                  placeholder="请输入"
                  v-model="query.name"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号">
              <el-input
                  placeholder="请输入"
                  v-model="query.idCode"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input
                  placeholder="请输入"
                  v-model="query.mobileNumber"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄">
              <el-input
                  placeholder="请输入"
                  v-model="query.age"
                  type="number"
                  clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="mb-25 flex end">
        <div>
          <el-button type="primary" @click="getList">
            <template #icon>
              <icon name="el-icon-Search"/>
            </template>
            查询
          </el-button
          >
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
    </header>
    <div class="table-container">
      <el-table :data="list">
        <el-table-column label="姓名" prop="name" width="100"/>
        <el-table-column
            label="性别"
            prop="gender"
            width="60"
            align="center"
        >
          <template #default="{ row }">
            <span>{{ getGender(row.gender) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" prop="age" width="60"/>
        <el-table-column label="身份证号" prop="idCode" width="180"/>
        <el-table-column
            label="手机号"
            prop="mobileNumber"
            width="120"
        />
        <el-table-column label="人员标签" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="flex gap" v-if="row.tags">
              <el-tag
                  v-for="item in row.tags.split(',')"
                  :key="item"
              >{{ item }}
              </el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="高风险因素" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="flex gap" v-if="row.smallTags">
              <el-tag
                  type="danger"
                  v-for="item in row.smallTags"
                  :key="item"
              >{{ item }}
              </el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="高风险指数"
            prop="riskScore"
            width="120"
            align="center"
        />
        <el-table-column label="操作" width="160">
          <template #default="{ row }">
            <el-button
                type="primary"
                link
                @click="handleShowDesc(row)"
            >查看详情
            </el-button
            >
            <el-button
                type="primary"
                link
                @click="handleShowNotification"
            >预警提醒
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex end mt-8">
      <el-pagination
          @size-change="getList"
          @current-change="getList"
          :current-page="query.current"
          :page-sizes="[10, 20, 50]"
          :page-size="query.size"
          v-model:current-page="query.current"
          layout="total, sizes, prev, pager, next"
          :total="total"
      >
      </el-pagination>
    </div>
  </div>

  <el-dialog title="风险人员详情" v-model="show" width="80vw" top="2vh">
    <el-row>
      <el-col :span="5"></el-col>
      <el-col :span="12">
        <div class="row" style="--label-width: 60px">
          <div class="col col-8">
            <label>姓名</label>
            <span>{{ activeRow.name }}</span>
          </div>
          <div class="col col-8">
            <label>性别</label>
            <span>{{ getGender(activeRow.gender) }}</span>
          </div>
          <div class="col col-8">
            <label>身份证号</label>
            <span>{{ activeRow.idCode }}</span>
          </div>
          <div class="col col-8">
            <label>年龄</label>
            <span>{{ activeRow.age }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="flex center column text-center">
          <div class="socre-box">
            {{ personal.riskPersonal.riskScore.toFixed(1) }}
          </div>
          <span style="font-size: 24px" class="mt-10">风险指数</span>
        </div>
      </el-col>
    </el-row>
    <div style="min-height: 50vh">
      <div v-for="(item, index) in personal.riskClueList" :key="index">
        <div>
          <span class="text-primary">{{ item.riskName }}</span>
        </div>
        <el-table :data="item.clues" max-height="300">
          <el-table-column
              label="发生时间"
              prop="eventTime"
              width="160"
          />
          <el-table-column
              label="风险因素"
              prop="riskReason"
              width="160"
              show-overflow-tooltip
          />
          <el-table-column
              label="风险内容"
              show-overflow-tooltip
          >
            <template #default="{ row }">
              <span style="white-space: pre-wrap;">{{ row.data }}</span>
            </template>
          </el-table-column>
          <el-table-column width="80" label="分值" prop="score"/>
        </el-table>
      </div>
    </div>
  </el-dialog>
  <el-dialog v-model="showNotification" title="创建提醒" width="600px">
    <el-form label-width="148" :model="formData2" ref="formRef">
      <el-form-item label="提醒类型">
        <div class="flex gap">
          <el-select
              v-model="formData2.alarmTypeId"
              style="min-width: 185px"
          >
            <el-option :value="1" label="预警问题"/>
            <el-option :value="2" label="风险问题"/>
            <el-option :value="3" label="提醒通知"/>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item
          style="width: 333px"
          label="被通知单位"
          prop="involveDepartId"
          :rules="{
                                message: '请选择问题涉及单位',
                                trigger: ['blur'],
                            }"
      >
        <depart-tree-select
            v-model="formData2.involveDepartId"
            :check-strictly="true"
            @node-click=" (row) => changeDepart(row)"
        />
      </el-form-item>
      <el-form-item
          label="被提醒民警"
          prop="blameEmpNo"
          :rules="{
                                    required: true,
                                    message: '请选择提醒民警',
                                    trigger: ['blur'],
                                }"
      >
        <el-select
            v-model="police"
            value-key="idCode"
            placeholder="请选择提醒民警"
            @change="changePolice"
            style="width: 240px"
        >
          <el-option
              v-for="item in polices"
              :key="item.idCode"
              :label="item.name"
              :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item
          label="提醒内容"
      >
        <el-input
            type="textarea"
            v-model="formData2.alarmContent"
            :autosize="{ minRows: 12 }"
            :rules="{
                                message: '请填写提醒内容',
                                trigger: ['blur'],
                            }"
            style="width: 280px"
        />
      </el-form-item>
    </el-form>
    <footer class="flex end">
      <el-button @click="showNotification = false" size="large">取消</el-button>
      <el-button type="primary" @click="handleNotification" size="large"
      >提交
      </el-button
      >
    </footer>
  </el-dialog>
</template>
<script lang="ts" setup>
import {
  listRiskPersonnel,
  getRiskPersonnel,
} from "@/api/sensitivePerception/riskPersonnel";
import {ref} from "vue";
import {alarmNotificationCommit} from "~/api/work/alarm";
import feedback from "~/utils/feedback";
import {listPoliceAll} from "~/api/system/police";


const query = ref({});
const list = ref<any[]>([]);
const total = ref(0);
const show = ref(false);

let showNotification = ref(false)
let formData2 = ref({
  alarmTypeId: 1,
  involveDepartId: '',
  involveDepartName: '',
  alarmContent: '',
  blameName: '',
  blameIdCode: '',
  blameEmpNo: '',
  blames: {},
  level: -1
})
let police = ref({})
let polices = ref([])

const handleShowNotification = () => {
  showNotification.value = true
}

const handleNotification = async () => {
  if(formData2.value.involveDepartId == '') {
    feedback.msgWarning("请选择被提醒单位");
    return;
  }
  if(formData2.value.alarmContent == '') {
    feedback.msgWarning("请填写提醒内容");
    return;
  }
  if(formData2.value.policeIdCode == '') {
    feedback.msgWarning("请选择被提醒民警");
    return;
  }
  let data = {
    alarmTypeId: formData2.value.alarmTypeId,
    notificationDepartCode: formData2.value.involveDepartId,
    notificationDepartName: formData2.value.involveDepartName,
    alarmContent: formData2.value.alarmContent,
    policeName: police.value.name,
    policeIdCode: police.value.idCode,
    policeNo: police.value.empNo
  }
  await alarmNotificationCommit(data);
  showNotification.value = false;
  feedback.msgSuccess("操作成功");
}

const changeDepart = (row) => {
  formData2.value.involveDepartName = row.shortName;
  formData2.value.level = row.level
  police.value = {}
  getPolices(row.id);
}

const changePolice  = (data) => {
  police.value = {
    idCode: data.idCode,
    empNo: data.empNo,
    name: data.name
  }
}

function getPolices(departId) {
  if(departId=='') {
    return;
  }
  listPoliceAll(departId).then(res => {
    polices.value = res
  })
}

function getList() {
  listRiskPersonnel(query.value).then((data) => {
    list.value = data.records;
    total.value = data.total;
  });
}

function reset() {
  query.value = {};
  getList();
}

onMounted(() => {
  getList();
});

const activeRow = ref({});
const personal = ref({
  riskClueList: [],
});

async function handleShowDesc(row) {
  activeRow.value = row;
  const data = await getRiskPersonnel(row.id);
  show.value = true;
  personal.value = data;
}

const filterJsonData = (row) => {
  if (row.data == undefined) {
    return ''
  }
  try {
    let j = JSON.parse(row.data)
    if (j.sourceData != undefined) {
      j = JSON.parse(row.sourceData)
    }
    let str = ''
    for (let key in j) {
      if (key == 'eventTime') {
        continue
      }
      if (key == 'idCode') {
        continue
      }
      if (key == 'departId') {
        continue
      }
      if (key == 'personId') {
        continue
      }
      if (key == 'name') {
        continue
      }
      str += j[key] + '\n'
    }
    return str
  } catch (e) {
    return row.data
  }
}

function getGender(val) {
  if (val == 1) {
    return "男";
  }
  if (val == 2) {
    return "女";
  }
  return "";
}
</script>
<style lang="scss" scoped>
.socre-box {
  background: linear-gradient(180deg, #ffa36a 0%, #ff0000 100%);
  border-radius: 9px;
  border: 2px solid #f11d16;
  height: 153px;
  line-height: 153px;
  text-align: center;
  font-size: 124px;
  color: #fff;
}
</style>
