<template>
  <div>
    <div class="titleBox">
      <div class="title">值班报备</div>
      <div class="btnBox">
        <el-button type="primary" @click="add">
          <el-icon style="vertical-align: middle">
            <CirclePlus />
          </el-icon>
          <span style="vertical-align: middle">手动报备</span>
        </el-button>
        <el-button
          :disabled="ids.length == 0"
          typeof="danger"
          @click="batchDelete"
        >
          <el-icon style="vertical-align: middle">
            <Delete />
          </el-icon>
          <span style="vertical-align: middle">批量删除</span>
        </el-button>
      </div>
    </div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="值班部门">
          <MOSTY.Department
            width="180px"
            clearable
            filterable
            v-model="listQuery.ssbmid"
          />
        </el-form-item>
        <el-form-item label="值班领导">
          <el-input
            v-model="listQuery.zbldXm"
            placeholder="请输入值班领导姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="起止日期">
          <el-date-picker
            v-model="Qzrq"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="upQzrq"
            format="YYYY-MM-DD"
            value-format="YYYY-M-D HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleFilter"> 查询 </el-button>
          <el-button @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabBox">
      <el-table
        :data="tableData"
        border
        ref="dataTreeList"
        @selection-change="handleSelectionChange"
        row-key="id"
        :tree-props="{ children: 'itemList', hasChildren: true }"
        style="width: 100%"
        :key="keyCount"
        :height="tableHeight"
        v-loading="loadingTable"
        element-loading-background="rgba(0,0,0,0.3)"
        element-loading-text="数据加载中。。"
      >
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column
          type="index"
          show-overflow-tooltip
          align="center"
          width="60px"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="ssbm"
          show-overflow-tooltip
          align="center"
          label="值班部门"
        >
        </el-table-column>
        <el-table-column
          prop="zbrq"
          show-overflow-tooltip
          align="center"
          label="值班日期"
        >
          <template #default="{ row }">
            <div>
              {{ row.zbrq ? row.zbrq.substring(0, 10) : row.zbrq }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="kssj"
          show-overflow-tooltip
          align="center"
          label="开始时间"
        >
        </el-table-column>
        <el-table-column
          prop="jssj"
          show-overflow-tooltip
          align="center"
          label="结束时间"
        >
        </el-table-column>
        <el-table-column
          prop="zbldXm"
          show-overflow-tooltip
          align="center"
          label="值班领导"
        >
        </el-table-column>
        <el-table-column
          prop="zbmj"
          show-overflow-tooltip
          align="center"
          label="民警"
        >
          <template #default="{ row }">
            <div>
              <el-tag
                class="mx-1"
                v-for="item in row.zbmj"
                v-show="item.jllx == '01'"
                :key="item.id"
                >{{ item.jlxm }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="zbfj"
          show-overflow-tooltip
          align="center"
          label="辅警"
        >
          <template #default="{ row }">
            <div>
              <el-tag
                class="mx-1"
                v-for="item in row.zbfj"
                v-show="item.jllx == '02'"
                :key="item.id"
                >{{ item.jlxm }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="280px"
        >
          <template #default="{ row }">
            <el-button @click="infDate(row)" size="small">详情</el-button>
            <el-button
              v-if="row.bbzt != 1 && row.bbzt != 0"
              @click="update(row)"
              size="small"
              >修改</el-button
            >
            <el-button
              v-if="row.bbzt != 0 && row.bbzt != 1"
              size="small"
              @click="baoBei(row, '0')"
              >报备</el-button
            >
            <el-button
              v-if="row.bbzt == 0"
              size="small"
              @click="baoBei(row, '1')"
              >结束报备</el-button
            >
            <el-button type="danger" size="small" @click="delDictItem(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div v-if="dialogFormVisible" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button
            type="primary"
            size="small"
            @click="submit"
            :loading="btnLoading"
            >{{ infoLoad ? "开始报备" : "结束报备" }}</el-button
          >
          <el-button size="small" @click="close">关闭</el-button>
        </div>
      </div>
      <el-form
        ref="elform"
        :model="form"
        :rules="rules"
        :inline="true"
        label-position="top"
      >
        <el-form-item label="值班部门" prop="ssbmid">
          <!-- <el-input
            style="width: 100%"
            v-model="form.ssbm"
            v-if="chackipt"
            @focus="chackipt = false"
          ></el-input> -->
          <MOSTY.Department
            width="180px"
            clearable
            filterable
            v-model="form.ssbmid"
          />
        </el-form-item>
        <el-form-item label="值班日期" prop="zbrq">
          <el-date-picker
            :disabled="ischooseTime"
            style="width: 100%"
            v-model="form.zbrq"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-row class="main_contain">
          <el-row class="zbbcList">
            <div style="display: flex; flex-wrap: wrap">
              <el-form-item label="值班领导">
                <el-input
                  clearable
                  @click="handleChoose(index, i, 'zzld')"
                  style="width: 100%"
                  v-model="form.zbldXm"
                  placeholder="请选择"
                ></el-input>
              </el-form-item>
              <el-form-item prop="zbzhzXm" label="值班指挥长">
                <el-input
                  clearable
                  @click="handleChoose(index, i, 'zhz')"
                  style="width: 100%"
                  v-model="form.zbzhzXm"
                  placeholder="请选择"
                ></el-input>
              </el-form-item>
              <el-form-item prop="zzzhzXm" label="专职指挥长">
                <el-input
                  clearable
                  style="width: 100%"
                  v-model="form.zzzhzXm"
                  @click="handleChoose(index, i, 'zzzhz')"
                  placeholder="请选择"
                ></el-input>
              </el-form-item>
              <el-form-item prop="fzzbXm" label="法制值班">
                <el-input
                  clearable
                  style="width: 100%"
                  v-model="form.fzzbXm"
                  @click="handleChoose(index, i, 'fzzb')"
                  placeholder="请选择"
                ></el-input>
              </el-form-item>
              <el-form-item prop="zbldDh" label="值班领导电话">
                <el-input
                  style="width: 100%"
                  v-model="form.zbldDh"
                  placeholder="请填写值班电话"
                ></el-input>
              </el-form-item>
              <el-form-item prop="hh" label="呼号">
                <el-input
                  style="width: 100%"
                  v-model="form.hh"
                  placeholder="请填写呼号"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="值班民警"
                @click.stop="choosePolice('MJ', i, index)"
              >
                <div class="ipt">
                  <el-tag
                    v-for="(tag, index) in form.mjList"
                    :key="tag.id"
                    class="mx-1"
                    closable
                    :type="tag.type"
                    @close="handleClose(tag, 'mj', index)"
                  >
                    {{ tag.jlxm }}
                  </el-tag>
                </div>
              </el-form-item>
              <el-form-item
                label="值班辅警"
                @click.stop="choosePolice('FJ', index, i)"
              >
                <div class="ipt">
                  <el-tag
                    v-for="(tag, index) in form.fjList"
                    :key="tag.id"
                    class="mx-1"
                    closable
                    :type="tag.type"
                    @close="handleClose(tag, 'fj', index)"
                  >
                    {{ tag.jlxm }}
                  </el-tag>
                </div>
              </el-form-item>
              <el-form-item style="width: 100%" label="选择班次" prop="qwbcid">
                <el-radio-group @change="setQwbc" v-model="form.qwbcid">
                  <el-radio
                    v-for="item in qwbaDataList"
                    :key="item.id"
                    :label="item.id"
                  >
                    <div class="tags" :style="{ borderColor: item.bcys }">
                      <span>{{ setHm(item.kssj) }}-{{ setHm(item.jssj) }}</span>
                      <span>{{ item.bcmc }}</span>
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="kssj" label="开始时间">
                <el-time-picker
                  style="width: 100%"
                  v-model="form.kssj"
                  format="HH时mm分"
                  @change="setZqsc"
                  value-format="HH:mm:ss"
                  placeholder="请选择开始时间"
                />
              </el-form-item>
              <el-form-item prop="jssj" label="结束时间">
                <el-time-picker
                  style="width: 100%"
                  format="HH时mm分"
                  value-format="HH:mm:ss"
                  v-model="form.jssj"
                  @change="setZqsc"
                  placeholder="请选择结束时间"
                />
              </el-form-item>
              <el-form-item prop="zbsc" label="值班时长">
                <el-input class="min" v-model="form.zbsc" style="width: 100%" />
              </el-form-item>
              <div class="zblistLine"></div>
            </div>
          </el-row>
        </el-row>

        <el-form-item label="备注" style="width: 100%">
          <el-input
            v-model="form.bz"
            placeholder="请输入关键字"
            show-word-limit
            type="textarea"
        /></el-form-item>
      </el-form>
    </div>

    <!-- 值班领导\值班指挥长\专职指挥长/法制值班 -->
    <ChooseUser
      v-model="chooseUserVisible"
      :LeaderType="LeaderType"
      @choosedUsersLeader="hanlderChoose"
    ></ChooseUser>
    <!-- 民警  辅警 -->
    <template v-if="PoliceType == 'MJ'">
      <MjLoad v-model="choosePoliceVisible" @choosedUsers="choosedPolice" />
    </template>
    <template v-else>
      <FjLoad v-model="choosePoliceVisible" @choosedUsers="choosedPolice" />
    </template>
    <!-- <ChoosePolice
      v-model="choosePoliceVisible"
      :PoliceType="PoliceType"
      @choosedPolice="choosedPolice"
    >
    </ChoosePolice> -->
  </div>
</template>

<script setup>
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
import ChooseUser from "@/components/MyComponents/ChooseUser";
import ChoosePolice from "@/components/MyComponents/choosePolice";

import {
  BbZbbb,
  getZbbb,
  addZbbb,
  getZbbbInfo,
  updateZbbb,
  deletezBbb,
  getMyBbInfoToday,
  getMyZbpbToday
} from "@/api/service/workingReport.js";

import { getQwbc } from "@/api/service/shift.js";
import * as MOSTY from "@/components/MyComponents/index";
import { selectDeptPage } from "@/api/user-manage";
import { getqwdj } from "@/api/service/grade.js";
import { getJzList } from "@/api/basicsmanage/servicejz.js";
import { getKfd } from "@/api/basicsmanage/quick-rebate.js";
import { getXfqy } from "@/api/basicsmanage/patrolArea.js";
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  getCurrentInstance,
  watch
} from "vue";
const { proxy } = getCurrentInstance();
const { D_ZDY_XFFWLX, D_BZ_ZZLX, D_BZ_WZLX, D_BZ_XLFS } = proxy.$dict(
  "D_ZDY_XFFWLX",
  "D_BZ_ZZLX",
  "D_BZ_WZLX",
  "D_BZ_XLFS"
);
const loadingTable = ref(false);
const tableData = ref([]); //表格数据
//搜索数据
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
const dialogFormVisible = ref(false); //弹窗
const Qzrq = ref([]); // 搜索时间
const tableHeight = ref(); // 表格高度
const qwbaDataList = ref([]); //勤务班次数据
const form = ref({}); //表单数据
const chooseUserVisible = ref(false); //选择领导
const choosePoliceVisible = ref(false); //民警\辅警弹窗
const LeaderType = ref(""); //领导弹窗
const PoliceType = ref(""); //民警辅警弹窗
const InNum = reactive({
  numl: "",
  num2: ""
}); //下标
const chackAdd = ref(false); //修改或者增加判断
const btnLoading = ref(false); //按钮截流
const depList = ref([]); //部门数据
const infoLoad = ref(false); //显示新增按钮
const total = ref(0);
const searchBox = ref(null); // 搜索盒子
const ids = ref([]); //批量删除的ID
const chackipt = ref(true);
const keyCount = ref(0); //tabel组件刷新值
const title = ref("巡防报备新增");
const elform = ref(null);
//表单验证
const rules = ref({
  zbrq: [
    {
      required: true,
      message: "请选择开始日期",
      trigger: "change"
    }
  ],
  ssbmid: [
    {
      required: true,
      message: "请选择值班部门",
      trigger: "change"
    }
  ]
});

const nowYear = ref(new Date().getFullYear());
const nowmonth = ref(new Date().getMonth() + 1);
const nowDay = ref(new Date().getDate());
const nowtime = ref("");

// 获取当天的值班报备信息或排班信息 没有报备信息则查询排班
const ischooseTime = ref(false);
function getZbbbXx() {
  getMyBbInfoToday().then((res) => {
    if (res === null) {
      getMyZbpbToday().then((respb) => {
        if (respb != null) {
          let time_month = nowmonth.value; //现在的月份
          let time_day = nowDay.value; //现在的天数
          if (nowmonth.value < 10) {
            time_month = 0 + "" + nowmonth.value;
          }
          if (nowDay.value < 10) {
            time_day = 0 + "" + nowDay.value;
          }
          nowtime.value = nowYear.value + "-" + time_month + "-" + time_day;
          infoLoad.value = true;
          form.value = respb;
          form.value.ssbmdm = form.value.ssbmdm * 1;
          form.value.mjList = JSON.parse(form.value.zbmj);
          form.value.fjList = JSON.parse(form.value.zbfj);
          form.value.zbrq = nowtime.value;
          ischooseTime.value = true;
        }
      });
    } else {
      infoLoad.value = false;
      form.value = res;
      form.value.ssbmdm = form.value.ssbmdm * 1;
      form.value.mjList = JSON.parse(form.value.zbmj);
      form.value.fjList = JSON.parse(form.value.zbfj);
      ischooseTime.value = false;
    }
  });
}

onMounted(() => {
  handleFilter(); //查询
  getQwbcData();
  selectDeptPage({}).then((res) => {
    depList.value = res.records;
  }); //查询部门
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
});
//搜索
function handleFilter() {
  listQuery.value.pageCurrent = 1;
  getListData();
}
//获取列表数据
function getListData() {
  loadingTable.value = true;
  getZbbb(listQuery.value).then((res) => {
    tableData.value = res.records ? res.records : [];
    tableData.value.forEach((item) => {
      item.zbmj = JSON.parse(item.zbmj);
      item.zbfj = JSON.parse(item.zbfj);
    });
    total.value = res.total;
    loadingTable.value = false;
  }).catch(()=>{
    loadingTable.value = false;
  });
}
// 搜索时间处理
function upQzrq() {
  if (Qzrq.value.length == 2) {
    listQuery.value.startTime = Qzrq.value[0];
    listQuery.value.endTime = Qzrq.value[1];
  }
}

//新增
function add() {
  getZbbbXx();
  infoLoad.value = true;
  chackAdd.value = true;
  chackipt.value = false;
  title.value = "值班报备新增";
  dialogFormVisible.value = true;
}
// 获取班次
function getQwbcData() {
  let params = {
    pageCurrent: 1,
    pageSize: 1000,
    bclx: "01"
  };
  getQwbc(params).then((res) => {
    qwbaDataList.value = res.records.map((item) => {
      return {
        bcys: item.bcys,
        kssj: item.kssj,
        jssj: item.jssj,
        id: item.id,
        zqsc: item.zqsc,
        bcmc: item.bcmc
      };
    });
  });
}

// 时分秒截取
function setHm(item) {
  return item.split(":")[0] + ":" + item.split(":")[1];
}

// 选择领导menq
function handleChoose(num1, num2, type) {
  InNum.num1 = num1;
  InNum.num2 = num2;
  LeaderType.value = type;
  chooseUserVisible.value = true;
}

//选则民警、辅警
function choosePolice(type, num1, num2) {
  InNum.num1 = num1;
  InNum.num2 = num2;
  PoliceType.value = type;
  choosePoliceVisible.value = true;
}

//用户领导
function hanlderChoose(users) {
  let type = users.type;
  const user = users.userList;
  if (type == "zzld") {
    form.value.zbldXm = user[0].userName;
    form.value.zbldId = user[0].id;
    form.value.zbldDh = user[0].mobile;
    form.value.zbldSfzh = user[0].idEntityCard;
  }
  if (type == "zhz") {
    form.value.zbzhzXm = user[0].userName;
    form.value.zbzhzDh = user[0].mobile;
    form.value.zbzhzId = user[0].id;
    form.value.zbzhzSfzh = user[0].idEntityCard;
  }
  if (type == "zzzhz") {
    form.value.zzzhzXm = user[0].userName;
    form.value.zzzhzDh = user[0].mobile;
    form.value.zzzhzId = user[0].id;
    form.value.zzzhzSfzh = user[0].idEntityCard;
  }
  if (type == "fzzb") {
    form.value.fzzbXm = user[0].userName;
    form.value.fzzbDh = user[0].mobile;
    form.value.fzzbId = user[0].id;
    form.value.fzzbSfzh = user[0].idEntityCard;
  }
  if (type == "MJ") {
    form.value.mjList = user.map((item) => {
      return {
        jlId: item.id,
        jllx: "01",
        jlxm: item.userName,
        sfzh: item.idEntityCard,
        xbdm: item.sex,
        lxdh: item.mobile
      };
    });
  }
  InNum.num1 = "";
  InNum.num2 = "";
}

// 选择辅警\民警
function choosedPolice(police) {
  if (PoliceType.value == "FJ") {
    form.value.fjList = police.map((item) => {
      return {
        jlId: item.id,
        jllx: "02",
        jlxm: item.xm,
        sfzh: item.sfzh,
        xbdm: item.xbdm,
        lxdh: item.lxdh
      };
    });
  } else if (PoliceType.value == "MJ") {
    form.value.mjList = police.map((item) => {
      return {
        jlId: item.ryid,
        jllx: "01",
        jlxm: item.xm,
        sfzh: item.sfzh,
        xbdm: item.xbdm,
        lxdh: item.lxdh
      };
    });
  }
  InNum.num1 = "";
  InNum.num2 = "";
}

// 点击班次选取
function setQwbc() {
  qwbaDataList.value.forEach((v) => {
    if (v.id == form.value.qwbcid) {
      form.value.kssj = v.kssj;
      form.value.jssj = v.jssj;
      form.value.qwbcid = v.id;
      form.value.zbsc = v.zqsc;
    }
  });
}
//提交
function submit() {
  if (infoLoad.value) {
    elform.value.validate((valid) => {
      if (valid) {
        let params = JSON.parse(JSON.stringify(form.value));
        params.jlList = [];
        if (form.value.fjList) {
          params.jlList = params.jlList.concat(form.value.fjList);
        }
        if (form.value.mjList) {
          params.jlList = params.jlList.concat(form.value.mjList);
        }
        params.bbzt = "02";

        btnLoading.value = true;
        if (chackAdd.value) {
          addZbbb(params)
            .then((res) => {
              // proxy.$message({
              //   type: "success",
              //   message: "新增成功"
              // });

              BbZbbb({ id: res, bbzt: 0 }).then(() => {
                proxy.$message({
                  type: "success",
                  message: `新增成功`
                });
                btnLoading.value = false;
                close();
                getListData();
              });
            })
            .catch(() => {
              btnLoading.value = false;
            });
        } else {
          updateZbbb(params)
            .then(() => {
              proxy.$message({
                type: "success",
                message: "修改成功"
              });
              close();
              btnLoading.value = false;
              dialogFormVisible.value = false;
              getListData();
            })
            .catch(() => {
              btnLoading.value = false;
              dialogFormVisible.value = false;
            });
        }
      }
    });
  } else {
    BbZbbb({ id: form.value.id, bbzt: 1 }).then(() => {
      proxy.$message({
        type: "success",
        message: `结束报备成功`
      });
      btnLoading.value = false;
      dialogFormVisible.value = false;
      getListData();
    });
  }
}
//关闭弹窗
function close() {
  dialogFormVisible.value = false;
  form.value = {};
}
// 点击详情
function infDate(row) {
  infoLoad.value = false;
  title.value = "巡防报备详情";
  getDetail(row);
}

//点击修改
function update(row) {
  infoLoad.value = true;
  title.value = "巡防报备修改";
  getDetail(row);
}
// 获取详情信息数据
function getDetail(row) {
  chackAdd.value = false;
  getZbbbInfo(row.id).then((res) => {
    form.value = res;
    form.value.mjList = JSON.parse(res.zbmj);
    form.value.fjList = JSON.parse(res.zbfj);
    chackipt.value = true;
    dialogFormVisible.value = true;
  });
}

//巡防力量弹框相关
function handleClose(tag, type, index) {
  if (type == "mj") {
    form.value.mjList.splice(index, 1);
  } else {
    form.value.fjList.splice(index, 1);
  }
}
//重置
function reset() {
  Qzrq.value = [];
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 20
  };
  getListData();
}
//计算执勤时长
function setZqsc() {
  if (form.value.jssj && form.value.kssj) {
    let end = new Date();
    end.setHours(form.value.jssj.split(":")[0]);
    end.setMinutes(form.value.jssj.split(":")[1]);
    let start = new Date();
    start.setHours(form.value.kssj.split(":")[0]);
    start.setMinutes(form.value.kssj.split(":")[1]);
    let time;
    if (end >= start) {
      time = parseInt(end - start) / 1000 / 60;
    } else {
      end.setDate(end.getDate() + 1);
      time = parseInt(end - start) / 1000 / 60;
    }
    form.value.zbsc = time;
  }
}
//报备
function baoBei(row, zt) {
  let text = "报备";
  if (zt == 1) {
    text = "结束报备";
    const bbjssj = "";
  } else {
    text = "开始报备";
  }
  proxy
    .$confirm(`是否${text}？`)
    .then(() => {
      BbZbbb({ id: row.id, bbzt: zt }).then(() => {
        proxy.$message({
          type: "success",
          message: `${text}成功`
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消操作");
    });
}
//删除
function delDictItem(row) {
  proxy
    .$confirm("确定删除报备数据？", "警告", { type: "warning" })
    .then(() => {
      deletezBbb([row.id]).then(() => {
        proxy.$message({
          type: "success",
          message: "删除成功"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}
// //批量数据
const handleSelectionChange = (val) => {
  ids.value = [];
  if (val) {
    val.forEach((item) => {
      ids.value.push(item.id);
    });
  }
};
// 删除方法
function batchDelete() {
  proxy
    .$confirm("确定批量删除报备数据？", "警告", { type: "warning" })
    .then(() => {
      deletezBbb(ids.value).then(() => {
        proxy.$message({
          type: "success",
          message: "删除成功"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
// 表格高度计算
const tabHeightFn = () => {
 tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
};
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.min {
  position: relative;
}
.min::after {
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  content: "分钟";
}
.tongji {
  line-height: 28px;
  color: #81c3ed;
  > span {
    font-size: 24px;
  }
}
.echarts {
  height: 160px;
  color: #81c3ed;
  display: flex;
  justify-content: space-between;
  .item {
    width: 23%;
  }
}
.chooce-bc {
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  display: flex;
  .chooce-bc-top {
    padding: 12px;
    flex: 1;
    border: 1px solid #03438b;
    .bc-title {
      width: 100%;
      height: 30px;
      font-size: 14px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .colose {
        cursor: pointer;
      }
    }
  }
  .choose-bc-bottom {
    padding: 12px;
    flex: 1;
    border: 1px solid #03438b;
    .bc-title {
      width: 100%;
      height: 30px;
      font-size: 14px;
      color: #fff;
    }
  }
  .chooce-bc-btn-box {
    height: 120px;
    overflow: hidden;
    overflow-y: auto;
    .chooce-bc-btn-item {
      float: left;
      cursor: pointer;
      margin-right: 7px;
      margin-bottom: 4px;
      line-height: 12px;
      text-align: center;
      font-size: 12px;
      padding: 4px;
      background: orange;
      border-radius: 10px;
      .item {
        line-height: 14px;
      }
    }
  }
}
.from_label {
  width: 100%;
  line-height: 2.5em;
  text-indent: -68px;
  font-size: 16px;
}
.ipt {
  border: 1px solid rgb(7, 85, 188);
  width: 100%;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
}
.tags {
  padding: 4px 12px;
  border-radius: 4px;
  color: #fff;
  border: 2px solid;
  display: flex;
  flex-direction: column-reverse;
  align-content: center;
  align-items: center;
  > span {
    line-height: 1em;
    font-size: 12px;
  }
}
.el-radio {
  margin-bottom: 14px;
}
.check_b {
  .active {
    background: linear-gradient(0deg, #1983e5, #1b67dd);
  }
}
</style>
