<template>
  <div>
    <!-- 组织机构信息 -->
    <MOSTY.PageTree :pageTitle="'三同时管理'" :searchType="'03'" @getDeptId="getorgcode">
      <template #titleright>
        <!-- 头部 -->
        <div class="headBox" style="justify-content: space-between">
          <div class="toggle" :class="{ active: isOpen }" @click="handleClickOpen('01')">
            <span>统计</span>
            <!-- {{ isOpen ? "收起" : "展开" }} -->
            <el-icon>
              <DArrowLeft />
            </el-icon>
          </div>
        </div>
      </template>

      <template #serach>
        <div ref="getHeight">
          <div v-if="isOpen">
            <BaseTag :items="countlist" :num="4" />
          </div>
          <el-divider />
          <MOSTY.Search :searchArr="searchArr" @submit="onSearch" @reset="OnchangeReset">
            <template #lable>
              <!-- 筛选按钮  -->
              <div class="toggle" :class="{ active: isToggle }" @click="handleClickOpen('02')">
                <span style="white-space: nowrap">{{ isToggle ? "收起" : "展开" }}筛选</span>
                <el-icon>
                  <DArrowLeft />
                </el-icon>
              </div>
            </template>
          </MOSTY.Search>
          <div v-if="isToggle">
            <el-date-picker style="width: 250px" v-model="listQuery.year" type="year" format="YYYY" value-format="YYYY"
              placeholder="请选择立项年份" />
          </div>
        </div>
      </template>

      <!-- 表格 -->
      <template #table>
        <el-divider />
        <section class="button">
          <el-button @click="addInfo">
            <el-icon>
              <Plus />
            </el-icon><span>新增</span></el-button>
          <MOSTY.ExportExcel :exportSheets="exportSheets" :exportInfo="exportInfo" @getSheets="getSheets"
            :ditData="{ D_BZ_SGZT }" />
        </section>
        <!-- ^^^   新增按钮  ^^^  导出按钮 -->
        <section :style="{ height: totalHeight }">
          <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="tableData" :tableloading="tableloading"
            :isSelect="true" :isSort="true">
            <template #coveraera="{ row }">
              <span v-if="row.coveraera">{{ row.coveraera }}/㎡</span>
              <span v-else>无</span>
            </template>
            <template #buildaera="{ row }">
              <span v-if="row.buildaera">{{ row.buildaera }}/㎡</span>
              <span v-else>无</span>
            </template>
            <template #status="{ row }">
              <dict-tag v-if="row.status" :options="D_BZ_SGZT" :value="row.status" :tag="false" />
              <span v-else>无</span>
            </template>
            <template #actions="{ row }">
              <span class="operedit" @click="editInfo(row)">
                <el-icon>
                  <EditPen />
                </el-icon>编辑</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="handledelete(row)">
                <template #reference>
                  <span span class="operdel" size="small">
                    <el-icon>
                      <Delete />
                    </el-icon>
                    删除</span>
                </template>
              </el-popconfirm>
              <span class="operesee" @click="seeInfo(row)">
                <el-icon>
                  <View />
                </el-icon>查看</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
            @changeSize="handleSizeChange" />
        </div>
      </template>

    </MOSTY.PageTree>
    <!-- 新增弹出框 -->
    <div v-if="addDiaShow" class="dialog-box">
      <Addsts :saveBtnShow="saveBtnShow" :title="title" @changeAddVi="changeAddVi" :rowId="rowid" :keys="key"
        :zdlist="{ D_BZ_SGZT, D_BZ_STS_SPJB }"> </Addsts>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, nextTick } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import Addsts from "./commonds/addsts.vue"
import { ElMessage } from "element-plus"
import { postApi } from "@/api/tobAcco_api.js"
const { proxy } = getCurrentInstance()
const { D_BZ_SGZT, D_BZ_STS_SPJB } = proxy.$dict("D_BZ_SGZT", "D_BZ_STS_SPJB")
import BaseTag from "@/views/dataReportWork/org/components/baseTag"
const addDiaShow = ref(false)
const title = ref("")
const totalHeight = ref()
const isOpen = ref(false)
const isToggle = ref(false)
const key = ref(1)
const tableData = ref([])
const rowid = ref(null)
const saveBtnShow = ref("")
const listQuery = reactive({
  orgcode: "",
  projectname: "",
  status: "",
  judgelevel: "",
  year: new Date().getFullYear().toString()
})
// 分页表格变量
const getHeight = ref()

const searchArr = reactive([
  {
    showType: "input",
    prop: "projectname",
    width: '250px',
    placeholder: '请选择项目名称'
  },
  {
    showType: "selectTree",
    prop: "status",
    width: '250px',
    options: 'D_BZ_SGZT',
    placeholder: '请选择施工状态'
  },
  {
    showType: "select",
    prop: "judgelevel",
    width: '250px',
    options: D_BZ_STS_SPJB,
    placeholder: '请选择审批级别'
  }
]);
const countlist = reactive([
  { name: "总数", count: 0, dm: "20010101", icon: `aqss/icon_01.png` },
  { name: "在建数", count: 0, dm: "20010102", icon: `aqss/icon_02.png` },
  { name: "竣工数", count: 0, dm: "20010103", icon: `aqss/icon_03.png` }
])
const pageData = reactive({
  tableColumns: [
    { title: "项目名称", prop: "projectname" },
    { title: "所属单位", prop: "orgname" },
    { title: "归口部门", prop: "countyname" },
    { title: "负责人", prop: "liablename" },
    { title: "立项年份", prop: "year" },
    { title: "占地面积", prop: "coveraera", slot: true },
    { title: "建筑面积", prop: "buildaera", slot: true },
    { title: "投资金额", prop: "totalinvestment" },
    { title: "施工状态", prop: "status", slot: true },//slot:true
    { title: "操作", prop: "actions", slot: true }
  ],
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  }
})
const currentDeptName = ref("")
const exportInfo = reactive({
  name: "三同时管理",
  loading: false,
  disabled: false
})
const exportSheets = reactive([
  {
    name: "导出台账",
    sblx: "200101010000",
    index: true,
    title: "",
    column: [
      { title: "项目名称", prop: "projectname" },
      { title: "所属单位", prop: "orgname" },
      { title: "归口部门", prop: "countyname" },
      { title: "负责人", prop: "liablename" },
      { title: "立项年份", prop: "year" },
      { title: "占地面积", prop: "coveraera", slot: true },
      { title: "建筑面积", prop: "buildaera", slot: true },
      { title: "总投资", prop: "totalinvestment" },
      { title: "施工状态", prop: "status", slot: true }
    ],
    data: []
  }
])
const getSheets = go => {
  exportInfo.loading = true
  exportSheets[0].title = `${currentDeptName.value}工程建设项目“三同时”台账`

  postApi(listQuery, "/mosty-jcgl/stsFile/queryStsFileAll").then(res => {
    if (!res) exportInfo.loading = false
    exportSheets[0].data = res
    exportInfo.loading = false
    go()
  })
}


const handleClickOpen = (type) => {
  if (type == '01') {
    isOpen.value = !isOpen.value
  } else {
    isToggle.value = !isToggle.value
  }
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${318 + getHeight.value.offsetHeight}px)`
  })
}

// 获取表格数据
const tableloading = ref(false)
// 初始化
onMounted(() => {
  postApi(listQuery, `/mosty-jcgl/stsFile/stat`).then(res => {
    if (!res) return
    countlist[0].count = res.total
    countlist[1].count = res.zjCount
    countlist[2].count = res.jgCount
  })
  nextTick(() => {
    totalHeight.value = `calc(100vh - 380px)`
  })
})
function onSearch(boj) {
  listQuery.projectname = boj.projectname
  listQuery.status = boj.status
  listQuery.judgelevel = boj.judgelevel
  listQuery.pageCurrent = 1
  pageData.pageConfiger.pageCurrent = 1
  getTableData()
}
//获取部门数据
const getorgcode = val => {
  listQuery.orgcode = val.id
  pageData.pageConfiger.pageCurrent = 1
  currentDeptName.value = val.orgname
  getTableData()
}
//重置
function OnchangeReset() {
  pageData.pageConfiger.pageCurrent = 1
  listQuery.year = new Date().getFullYear().toString()
  getTableData()

}
const getTableData = () => {
  tableloading.value = true
  exportInfo.disabled = false
  postApi(listQuery, `/mosty-jcgl/stsFile/queryStsFile`).then(res => {
    if (res.records) {
      tableData.value = res.records
      pageData.pageConfiger.total = res.total
    } else {
      tableData.value = []
    }
    if (tableData.value.length === 0) exportInfo.disabled = true
  }).finally(() => {
    tableloading.value = false
  })
}



//新增
const addInfo = () => {
  tableloading.value = false
  title.value = "新增"
  addDiaShow.value = true
  saveBtnShow.value = true
  key.value++
  rowid.value = null
}
//修改
const editInfo = row => {
  title.value = "编辑"
  rowid.value = row.id
  addDiaShow.value = true
  saveBtnShow.value = true
}
//详情查看
const seeInfo = row => {
  title.value = "详情"
  rowid.value = row.id
  addDiaShow.value = true
  saveBtnShow.value = false
}
//删除
const handledelete = row => {
  postApi({}, "/mosty-jcgl/stsFile/deleteStsFile/" + row.id).then(res => {
    ElMessage.success("删除成功")
    getTableData()
  })
}
// 控制新增弹出框的展示
const changeAddVi = val => {
  addDiaShow.value = val
  rowid.value = null
  getTableData()
}
//页码发生变化
const handleCurrentChange = val => {
  listQuery.pageCurrent = val
  pageData.pageConfiger.pageCurrent = val
  getTableData()
}
//查询条数发生变化
const handleSizeChange = val => {
  listQuery.pageSize = val
  pageData.pageConfiger.pageSize = val
  getTableData()
}
</script>

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

.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);
    }
  }
}



.title {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #0f3916;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-icon {
    cursor: pointer;
  }
}

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

  .query-section {
    // display: flex;
    flex-wrap: wrap;
    width: 68%;
  }

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


  }
}



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