<template>
  <div class="bigBox">
    <section v-show="props.isShowTotal" ref="getHeight">
      <Total :obj="fromObj" ref="aqqcTotal" />
    </section>
    <!-- 查询 -->
    <el-divider />
    <div class="tabox">
      <section class="query-flex" ref="queryHeight">
        <section class="query-section">
          <section class="flex">
            <el-input placeholder="请输入典型案例标题或内容" v-model="pageData.listQuery.keywords" clearable
              style="width: 250px"></el-input>
            <el-date-picker class="ml12" v-model="pageData.listQuery.time" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
            <!-- <MOSTY.Department class="ml12" style="width: 250px" :searchType="'01'" placeholder="请选择部门"
                            clearable :deptType="'01'" v-model="pageData.listQuery.orgId" /> -->
            <el-input class="ml12" placeholder="请输入单位查询" v-model="pageData.listQuery.orgName" clearable
              style="width: 250px"></el-input>
          </section>
        </section>
        <div class="query-btn">
          <el-button @click="queryData" class="ml6">
            <el-icon>
              <Search />
            </el-icon>查询</el-button>
          <el-button @click="handleRest">
            <el-icon>
              <Refresh />
            </el-icon>重置</el-button>
        </div>
      </section>
      <el-divider />
      <section class="button">
        <el-button @click="handleMaskData('add', '新增', '')" v-if="isAqbm">
          <el-icon>
            <Plus />
          </el-icon>新增</el-button>
      </section>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
          :isSelect="true" :isSort="true" actionsW="280">
          <template #state="{ row }">
            <el-tag v-if="row.state == '01'" type="warning">待审批</el-tag>
            <el-tag v-else-if="row.state == '02'" type="success">已发布</el-tag>
            <el-tag v-else-if="row.state == '03'" type="danger">未通过</el-tag>
          </template>
          <template #sbStatus="{ row }">
            <el-tag :type="colorTypeObj[row.sbStatus]">{{ D_DTSB_AN_Obj[row.sbStatus] }}</el-tag>
          </template>
          <template #actions="{ row }" v-if="isProvinces">
            <span class="operedit" v-if="row.state != '03'" @click="handleMaskData('edit', '编辑', row.id)">
              <el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <span class="operedit" v-if="true" @click="handleMaskData('approve', '审批', row.id)">
              <el-icon>
                <EditPen />
              </el-icon>审批</span>
            <el-popconfirm confirm-button-text="是" v-if="row.state != '03'" cancel-button-text="否" icon-color="red"
              title="确定要删除?" @confirm="handleDelete(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="handleMaskData('view', '查看', row.id)">
              <el-icon>
                <View />
              </el-icon>查看</span>
          </template>
          <template #actions="{ row }" v-else>
            <span class="operedit" @click="handleMaskData('edit', '编辑', row.id)"
              v-if="row.state == '03' && isDwData(row.orgId)">
              <el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <el-popconfirm v-if="row.state == '03' && isDwData(row.orgId)" confirm-button-text="是"
              cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="handleDelete(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除</span>
              </template>
            </el-popconfirm>
            <el-popconfirm confirm-button-text="是" v-if="isShowReportBtn(row)" cancel-button-text="否" icon-color="red"
              title="确定要推送?" @confirm="handlePush(row)">
              <template #reference>
                <span class="operedit" size="small">
                  <el-icon>
                    <Upload />
                  </el-icon>
                  上报</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="handleMaskData('view', '查看', row.id)">
              <el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
          @changeSize="handleSizeChange" />
      </div>
    </div>
  </div>
  <!-- 典型案例 -->
  <div v-if="aqqcShow" class="dialog-box">
    <Detail :title="title" :type="type" @close="handleClose" :id="detailId" />
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import Detail from "./Detail.vue"
import { reactive, ref, onMounted, watch, nextTick, computed, getCurrentInstance } from "vue"
import { filterqx } from "@/utils/auth.js"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { ElMessage } from "element-plus"
import { getItem } from "@/utils/storage"
import Total from "./Total.vue"
import { useRoute, useRouter } from "vue-router"

const { proxy } = getCurrentInstance()
const { D_DTSB_AN } = proxy.$dict("D_DTSB_AN")

const props = defineProps({
  isShowTotal: {
    type: Boolean,
    default: false
  }
})
const route = useRoute()
const router = useRouter()

const tableloading = ref(false)
const aqqcShow = ref(false)
const getHeight = ref(null)
const queryHeight = ref(null)
const aqqcTotal = ref(null)
const detailId = ref("")
const title = ref("")
const type = ref("")
const pageData = reactive({
  listQuery: {
    keywords: "",
    orgId: "",
    time: []
  },
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },
  tableColumns: [
    {
      title: "动态单位",
      prop: "orgName"
    },
    {
      title: "动态名称",
      prop: "name"
    },
    // {
    //     title: "动态内容",
    //     prop: "content",
    //     slot: true
    // },
    {
      title: "动态申报时间",
      prop: "time"
    },

    {
      title: "动态发布时间",
      prop: "releaseTime"
    },
    {
      title: "撰稿人",
      prop: "writer"
    },
    {
      title: "状态",
      prop: "state",
      slot: true
    },
    // {
    //   title: "上报状态",
    //   prop: "sbStatus",
    //   slot: true
    // },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
const fromObj = ref({ type: "1" })
const totalHeight = ref(null)
// 推送状态
const D_DTSB_AN_Obj = computed(() => {
  if (!D_DTSB_AN.value?.length) return {}
  let obj = {}
  D_DTSB_AN.value.forEach(item => {
    obj[item.value] = item.label
  })
  return obj
})
/** 审核对照对象 00 未上报，01 审核中，02  市公司审核完成，03  省审核中  04省公司审核完成 */
const colorTypeObj = {
  "00": "",
  "01": "danger",
  "02": "success",
  "03": "danger",
  "04": "success"
}
// 是否是安全部门
const isAqbm = computed(() => {
  return filterqx("isaqbm") == "1"
})
// 是否是省账号 且安全部门
const isProvinces = computed(() => {
  return filterqx("isaqbm") == "1" && filterqx("isSgs") == "1"
})
/** 是否是省账号 */
const isProvinceTrue = computed(() => {
  return filterqx("isSgs") == "1"
})
// 是否是本单位数据
const isDwData = _id => {
  return getItem("deptId").ssdwid == _id
}
watch(
  () => props.isShowTotal,
  val => {
    nextTick(() => {
      if (val) {
        totalHeight.value = `calc(100vh - ${340 + queryHeight.value.offsetHeight + getHeight.value.offsetHeight}px)`
        return
      }
      totalHeight.value = `calc(100vh - 372px)`
    })
  },
  {
    deep: true,
    immediate: true
  }
)
onMounted(() => {
  queryData()
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${340 + getHeight.value.offsetHeight + queryHeight.value.offsetHeight}px)`
  })
  if (route.query.id) goToAudit(route.query)
})
// 关闭弹窗
const handleClose = val => {
  aqqcShow.value = false
  if (val) {
    queryData()
  }
  if (route.query.id) {
    router.replace({ path: "/dutyBook/aqdt/index" })
  }
}
// 重置过滤条件
const handleRest = () => {
  Object.assign(pageData.listQuery, {
    keywords: "",
    orgId: "",
    orgName: "",
    time: []
  })
  // pageData.listQuery.orgName
  pageData.pageConfiger.pageCurrent = 1
  queryData()
}
//列表查询
function queryData() {
  tableloading.value = true
  postApi({ ...pageData.pageConfiger, ...pageData.listQuery }, "/mosty-jcgl/securityDynamics/querySecurityDynamics")
    .then(res => {
      if (res) {
        pageData.tableData = res.records
        pageData.pageConfiger.total = res.total
      }
    })
    .finally(() => {
      tableloading.value = false
    })
}
//新增 修改 详情
const handleMaskData = (val, _title, _id) => {
  detailId.value = _id
  type.value = val
  title.value = "安全动态" + _title
  aqqcShow.value = true
}
const isShowReportBtn = row => {
  if (row.state != "02") return false
  if (filterqx("isaqbm") != "1") return false
  // 省
  if (filterqx("isSgs") == "1") {
    return false
    // 市
  } else if (filterqx("isgs") == "1") {
    return row.sbStatus == "02"
    // 县
  } else {
    return row.sbStatus == "00"
  }
}
/**推送 */
const handlePush = row => {
  getApi({ id: row.id }, `/mosty-jcgl/securityDynamics/reporting`).then(() => {
    ElMessage.success("推送成功")
    queryData()
  })
}
//删除
const handleDelete = row => {
  postApi([row.id], `/mosty-jcgl/securityDynamics/delSecurityDynamics`).then(() => {
    ElMessage.success("删除成功")
    queryData()
  })
}
//页码发生变化
const handleCurrentChange = val => {
  pageData.pageConfiger.pageCurrent = val
  if (isAqbm.value) {
    queryData()
  }
}
//查询条数发生变化
const handleSizeChange = val => {
  pageData.pageConfiger.pageSize = val
  if (isAqbm.value) {
    queryData()
  }
}
/** 跳转审核详情 */
function goToAudit(query) {
  handleMaskData("approve", "审批", query.id)
}
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 12px 0;
}

.query-flex {
  display: flex;
  justify-content: space-between;

  .query-section {
    width: 68%;
  }

  .query-btn {
    width: 250px;
    display: flex;
    justify-content: flex-end;

    .toggle {
      height: 32px;
      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);
        }
      }
    }
  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
