<template>
  <div>
    <MOSTY.PageTree :pageTitle="'风险辨识清单'" :searchType="'01'" @getDeptId="getdeptId">
      <template #titleright>
        <div class="toggle" :class="{ active: isOpen }" @click="isOpen = !isOpen">
          <span>统计</span>
          <el-icon>
            <DArrowLeft />
          </el-icon>
        </div>
      </template>
      <template #serach>
        <section v-show='isOpen' ref="getHeight">
          <section class="flex">
            <section style="display: flex; justify-content: start;">
              <Sjtj :info="countlist" :isShowTip="false" :isShowBottom="false" :width="300" mb="6px" />
            </section>
          </section>
        </section>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="onloadExcel" v-loading="loadingShow">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出</span>
          </el-button>
        </div>

      </template>
      <template #table>
        <section :style="{ 'height': totalHeight }">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="false" :tableHeight="'100%'" @SortChange="SortChange">
            <template #type="{ row }">
              <dict-tag :options="D_BZ_FXLX" :value="row.type" :tag="false" />
            </template>
            <template #jcpl="{ row }">
              <dict-tag v-if='row.jcpl' :options="D_BZ_JCBZPL" :value="row.jcpl" :tag="false" />
              <span v-else>--</span>
            </template>
            <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="See(row)"> <el-icon>
                  <View />
                </el-icon>查看</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 详情 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <Fxbsqdxq @close="comprehensiveShow = false" :id="id" />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, watch, nextTick, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import { filterYear } from "@/utils/auth.js";
import Fxbsqdxq from "./component/fxbsqdxq.vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { ElMessage } from "element-plus";
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
const { proxy } = getCurrentInstance();
const { D_BZ_JCBZPL, D_BZ_FXLX } = proxy.$dict("D_BZ_JCBZPL", "D_BZ_FXLX");
// 数据
const comprehensiveShow = ref(false);
const totalHeight = ref(null)
const getHeight = ref(null)
const isOpen = ref(false);
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear(),
    options: filterYear(7),
  },
  {
    showType: "input",
    prop: "objname",
    width: '250px',
    placeholder: '请输入辨识区域进行查询'
  },

]);
const tableColumns = reactive([
  {
    title: "编号",
    prop: "shortid"
  },
  {
    title: "风险单元",
    prop: "riskcell"
  },
  {
    title: "风险类型",
    prop: "type",
    slot: true
  },
  {
    title: "辨识区域",
    prop: "objname",
  },
  {
    title: "检查频率",
    prop: "jcpl",
    slot: true
  },
  {
    title: "风险描述",
    prop: "dangerDescription",
  },
  {
    title: "风险等级",
    prop: "risklevel",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])

const id = ref(null)
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  year: new Date().getFullYear()
});
const countlist = reactive([
  { title: '重大风险', num: 0, dm: 'R', icon: 'ccss/icon_01.png' },
  { title: '较大风险', num: 0, dm: 'O', icon: 'ccss/icon_02.png' },
  { title: '一般风险', num: 0, dm: 'Y', icon: 'ccss/icon_03.png' },
  { title: '低风险', num: 0, dm: 'B', icon: 'ccss/icon_04.png' }
])

// 方法
const tableloading = ref(false);
onMounted(() => {
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${380 + getHeight.value.offsetHeight}px)`
  })
});
watch(() => isOpen.value, (val) => {
  nextTick(() => {
    if (val) {
      totalHeight.value = `calc(100vh - ${380 + getHeight.value.offsetHeight}px)`
      return
    }
    totalHeight.value = `calc(100vh - 380px)`
  })
}, {
  deep: true,
  immediate: true
})
//选择右侧部门
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  getTableData();
  getbstatl()
};
watch(() => listQuery.year,
  () => {
    listQuery.pageCurrent = 1;
    getbstatl()
  }
)
//查询
function onSearch(obj) {
  listQuery.year = obj.year;
  listQuery.objname = obj.objname;
  listQuery.pageCurrent = 1;
  getTableData();
  getbstatl()
}

//	辨识清单-统计
function getbstatl() {
  getApi({ orgcode: listQuery.orgid, year: listQuery.year }, '/mosty-jcgl/identify/getBsStatistics').then(res => {
    countlist[0].num = res.R
    countlist[1].num = res.O
    countlist[2].num = res.Y
    countlist[3].num = res.B
  })
}
function getTableData() {
  tableloading.value = true;
  getApi(listQuery, '/mosty-jcgl/identify/getBsPageList').then(res => {
    tableData.value = res.records;
    tableData.value.forEach(item => {
      item.jcpl = item.checkrate && item.checkrate != 'none' ? item.checkrate + '_' + item.checkratecount : null
    })
    listQuery.total = res.total;
    listQuery.pageSize = res.size;

  }).finally(() => {
    tableloading.value = false;
  })
}
//查看
const See = (row) => {
  id.value = row.id;
  comprehensiveShow.value = true
}
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
const loadingShow = ref(false)
//导出Excel
function onloadExcel() {
  let title = {
    shortid: '编号',
    riskcell: '风险单位',
    type: '风险类型',
    objname: '辨识区域',
     jcpls: '检查频率',
    dangerDescription: '风险描述',
    // controlname: '管控措施',
    risklevels: '风险等级',
  }
  let obj = { ...listQuery }
  obj.pageSize = 100000
  loadingShow.value = true
  getApi(obj, '/mosty-jcgl/identify/getBsPageList').then((res) => {
    if (res) {
      let data = res.records
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
        data[i].jcpl =  data[i].checkrate &&  data[i].checkrate != 'none' ?  data[i].checkrate + '_' +  data[i].checkratecount : null
          data[i].type =data[i].type? proxy.$getDictVal(data[i].type, D_BZ_FXLX):'--';
             data[i].jcpls =data[i].jcpl? proxy.$getDictVal(data[i].jcpl, D_BZ_JCBZPL):'--';
          if (data[i].risklevel == '4') {
            data[i].risklevels = '重大风险'
          }
          if (data[i].risklevel == '3') {
            data[i].risklevels = '较大风险'
          }
          if (data[i].risklevel == '2') {
            data[i].risklevels = '一般风险'
          }
          if (data[i].risklevel == '1') {
            data[i].risklevels = '低风险'
          }
        }
        let tablename = '风险识别、评价和控制一览表.xlsx'
        exportXlsx(title, data, '风险识别、评价和控制一览表', tablename);
        loadingShow.value = false
      } else {
        ElMessage.warning('暂无数据');
        loadingShow.value = false
      }
    }
  }).catch(err => {
    loadingShow.value = false
  })
}

</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.toggle {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}


.right-box {
  display: flex;
}

.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>