<template>
  <div>
    <ul class="top_ul">
      <li v-for="it in pageData.countlist" @click='changeli(it)' :key="it">
        <MOSTY.Account :item="it" />
      </li>
    </ul>
    <!-- 风险清单查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <el-input placeholder="请输入编号进行查询" v-model="pageData.listQuery.keywords" clearable
          style='width:400px'></el-input>
        <el-button type="primary" @click="gettablist">
          <el-icon>
            <Search />
          </el-icon>
          <span>查询</span>
        </el-button>
      </div>
      <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
        :tableHeight="'40vh'">
        <template #risklevel="{ row }">
          <span v-if="row.risklevel == '4'" class="fxdjspan reds">重大风险</span>
          <span v-else-if="row.risklevel == '3'" class="fxdjspan orgs">较大风险</span>
          <span v-else-if="row.risklevel == '2'" class="fxdjspan blus">一般风险</span>
          <span v-else-if="row.risklevel == '1'" class="fxdjspan gres">低风险</span>
          <span v-else>待定</span>
        </template>
        <template #actions="{ row }">
          <span class="operesee" @click="setFn(row)">
            <el-icon>
              <Compass />
            </el-icon>
            查看
          </span>

        </template>
      </MOSTY.Table>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
          @changeSize="handleSizeChange" />
      </div>
    </div>
  </div>
  <!-- 详情 -->
  <div v-if="addbpdShow" class="dialog-box">
    <xfqdxq :fromData="fromData" @changePage="changePage" :type="type" />
  </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
import * as MOSTY from "@/components/MyComponents/index";
import xfqdxq from "@/components/dialog/xfqdxq.vue";
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
const emits = defineEmits(["handleChange", 'searchChange']);
const tableloading = ref(false);
const addbpdShow = ref(false)
const title = ref("");
const fromData = ref({})
const total = ref(0)
const props = defineProps({
  obj: {
    default: null,
    type: Object
  },
  type: {
    default: '',
    type: String
  },
  tableHeight: {
    default: '40vh',
    type: String
  }

});
const pageData = reactive({
  countlist: [
    { title: '风险总数', num: 0, risklevel: '', icon: getImgUrl('img/icon_lszyh.png') },
    { title: '重大风险数', num: 0, risklevel: '4', icon: getImgUrl('img/icon_yzyhs.png'), background: '#FADEE0' },
    { title: '较大风险数', num: 0, risklevel: '3', icon: getImgUrl('img/icon-sycssl.png'), background: '#FFEFE2' },
    { title: '一般风险数', num: 0, risklevel: '2', icon: getImgUrl('img/icon_xyyhs.png'), background: '#FFF7E0' },
    { title: '低风险数', num: 0, risklevel: '1', icon: getImgUrl('img/icon_cszs.png'), background: '#F1F7FF' },
  ],
  pageConfiger: {
    pageCurrent: 1,
    pageSize: 10,
    total: 0
  },
  listQuery: {
    pageCurrent: 1,
    pageSize: 10
  },
  tableColumns: [
    {
      title: "编号",
      prop: "shortid"
    },
    {
      title: "风险单元",
      prop: "depname"
    },
    {
      title: "辨识区域",
      prop: "objname"
    },
    {
      title: "风险描述",
      prop: "dangerDescription"
    },
    {
      title: "风险等级",
      prop: "risklevel",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
const fromObj = ref({

})
onMounted(() => {
  if (props.type == 'cs') {
    pageData.listQuery.siteid = props.obj.id
    fromObj.value.siteid = props.obj.id
  } else if (props.type == 'jzw') {
    pageData.listQuery.buildingid = props.obj.id
    fromObj.value.buildingid = props.obj.id
  } else if (props.type == 'sb') {
    pageData.listQuery.objid = props.obj.zbid ? props.obj.zbid : props.obj.id
    fromObj.value.objid = props.obj.zbid ? props.obj.zbid : props.obj.id
  } else if (props.type == 'bw') {
    pageData.listQuery.partid = props.obj.id
    fromObj.value.partid = props.obj.id
  }
  gettablist()
  getCount()

})
//获取列表
function gettablist() {
  tableloading.value = true
  getApi(pageData.listQuery, "/mosty-jcgl/dynamic/riskList").then((res) => {
    if (res) {
      tableloading.value = false
      pageData.tableData = res.records
      pageData.pageConfiger.total = res.total
    } else {
      tableloading.value = false
      pageData.tableData = []
    }
  })
}
//获取统计
function getCount() {
  getApi({ objid: props.obj.id }, '/mosty-jcgl/dynamic/riskStatistics').then(res => {
    pageData.countlist[1].num = res.R
    pageData.countlist[2].num = res.O
    pageData.countlist[3].num = res.Y
    pageData.countlist[4].num = res.B
    pageData.countlist[0].num = res.R + res.O + res.Y + res.B
  })
}
//详情
function setFn(row) {
  fromData.value.id = row.dangerid
  fromData.value.title = "风险清单详情";
  addbpdShow.value = true;

}
function changePage() {
  fromData.value.id = null
  fromData.value.title = "";
  addbpdShow.value = false;
}
//查询
function changeli(val) {
  pageData.listQuery.risklevel = val.risklevel;
  pageData.listQuery.pageCurrent = 1;
  gettablist()
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  pageData.pageConfiger.pageCurrent = val;
  gettablist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val;
  pageData.pageConfiger.pageSize = val;
  gettablist()
};
</script>

<style lang="scss" scoped>
.headBox3 {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
}

.top_ul {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;

  >li {
    width: 15%;
    height: 83px;
    margin: 6px 32px;
  }
}

.fxdjspan {
  display: inline-block !important;
  width: 100px;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  color: #fff !important;
}

.reds {
  background-color: #e80000;
}

.orgs {
  background-color: #ff8040;
}

.blus {
  background-color: #e2d101;
}

.gres {
  background-color: #0080ff;
}
</style>
