<template>
  <MOSTY.PageTree :pageTitle="'变更列表'" :searchType="'03'" @getDeptId="getdeptId">
    <!-- 头部统计-->
    <template #titleright>
      <div style="position: relative">
        <div class="toggle" :class="{ active: isOpen }" @click="handleClickOpen">
          <span>统计</span>
          <el-icon>
            <DArrowLeft />
          </el-icon>
        </div>
      </div>
    </template>
    <template #serach>
      <div ref="getHeight">
        <div v-if="isOpen">
          <BaseTag :items="countlist" :num="4" />
        </div>
      </div>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <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_TB_BGLB }" />
      </section>
    </template>
    <!-- 表格 -->
    <template #table>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" @SortChange="SortChange" style="width: 100%;">
          <template #changeType="{ row }">
            <dict-tag :options="D_TB_BGLB" :value="row.changeType" :tag="false" />
          </template>
          <template #files="{ row }">
            <MOSTY.ViewDownload :fileId="row.files" :type="['view', 'download']" />
          </template>
          <template #reviewFiles="{ row }">
            <MOSTY.ViewDownload :fileId="row.reviewFiles" :type="['view', 'download']" />
          </template>
          <template #realFiles="{ row }">
            <MOSTY.ViewDownload :fileId="row.realFiles" :type="['view', 'download']" />
          </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="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </template>
  </MOSTY.PageTree>
  <!-- 新增弹出框 -->
  <Addbg :saveBtnShow="saveBtnShow" :keys="key" :addDiaShow="addDiaShow" :title="title" @changeAddVi="changeAddVi"
    :rowid="rowid"> </Addbg>
</template>
<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, nextTick, watch } from "vue"
import Addbg from "./commonds/addbg.vue"
import { ElMessage } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import { postApi } from "@/api/tobAcco_api.js"
import BaseTag from "@/views/dataReportWork/org/components/baseTag"
import { filterYear } from "@/utils/auth.js";
const { proxy } = getCurrentInstance()
const { D_TB_BGLB } = proxy.$dict("D_TB_BGLB")
const totalHeight = ref()
const getHeight = ref()
const searchArr = reactive([
  {
    showType: "input",
    prop: "projectname",
    width: '250px',
    placeholder: '请输入变更名称'
  },
  {
    showType: "select",
    prop: "changeType",
    options: D_TB_BGLB,
    placeholder: '请选择更改类别'
  },
  {
    showType: "year",
    prop: "year",
    default: new Date().getFullYear().toString(),
    options: filterYear(),
    placeholder: '请选择工作年份'
  }
])
const tableColumns = reactive([
  {
    title: "单位",
    prop: "orgname",
    width: "250px"
  },
  {
    title: "变更名称",
    prop: "titlename",
  },
  {
    title: "变更类型",
    prop: "changeType",
    slot: true
  },
  {
    title: "变更内容",
    prop: "changeContent",
  },
  {
    title: "变更方案",
    prop: "files",
    slot: true
  },
  {
    title: "评审记录",
    prop: "reviewFiles",
    slot: true
  },
  {
    title: "实施资料",
    prop: "realFiles",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const key = ref(1)
const pageConfiger = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
})
const tableData = ref([])
const listQuery = reactive({
  orgcode: "",
  projectName: "",
  changeType: "",
  changeTime: "", // new Date().getFullYear().toString(),
  pageCurrent: 1,
  pageSize: 10
})
const saveBtnShow = ref("")
const isOpen = ref(false)
const countlist = ref([])
const currentDeptName = ref("")
const exportInfo = reactive({
  name: "变更管理",
  loading: false,
  disabled: false
})
const exportSheets = reactive([
  {
    name: "导出台账",
    sblx: "200101010000",
    index: true,
    title: "",
    column: [
      { title: "单位", prop: "orgname" },
      { title: "变更名称", prop: "titlename" },
      { title: "变更类型", prop: "changeType", slot: true },
      { title: "变更内容", prop: "changeContent" },
      { title: "占地面积", prop: "coveraera", slot: true },
      { title: "建筑面积", prop: "buildaera", slot: true },
      { title: "总投资", prop: "totalinvestment" },
      { title: "施工状态", prop: "constructionStatus" }
    ],
    data: []
  }
])
const handleClickOpen = (type) => {
  isOpen.value = !isOpen.value
  if (isOpen.value) {
    totalHeight.value = `calc(100vh - ${551 + getHeight.value.offsetHeight}px)`
  } else {
    totalHeight.value = `calc(100vh - 380px)`
  }

}
onMounted(() => {
  nextTick(() => {
    totalHeight.value = `calc(100vh - 380px)`
  })
})
function onSearch(boj) {
  listQuery.projectName = boj.projectname
  listQuery.changeType = boj.changeType
  listQuery.changeTime = boj.year
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  getTableData()
  getcount()
}
watch(
  () => isOpen.value,
  (n, o) => {
    countlist.value = []
    if (n) {
      getcount()
    }
  },
  { deep: true }
)
function getcount() {
  postApi(listQuery, `/mosty-jcgl/change/stat`).then(res => {
    countlist.value = []
    D_TB_BGLB.value.forEach((item, i) => {
      countlist.value.push({
        name: item.label,
        count: res.find(e => e.changeType === item.value) ? res.find(e => e.changeType === item.value).coveraera : 0,
        dm: item.value,
        icon: `aqss/icon_${(i + 1 + "").padStart(2, "0")}.png`
      })
    })
  })
}
//获取部门数据
const getdeptId = val => {
  listQuery.orgcode = val.id
  listQuery.pageCurrent = 1
  getTableData()
  getcount()
  currentDeptName.value = val.orgname
}

const rowid = ref(null)
const addDiaShow = ref(false)

// 控制新增与检查配置修改的标题
const title = ref("")
// 获取表格数据
const tableloading = ref(false)
const getTableData = () => {
  tableloading.value = true
  postApi(listQuery, `/mosty-jcgl/change/queryChange`).then(res => {
    if (res.records) {
      tableloading.value = false
      tableData.value = res.records
      pageConfiger.total = res.total
    } else {
      tableData.value = []
      tableloading.value = false
    }
  }).finally(() => {
    tableloading.value = false
  })
}

const getSheets = go => {
  exportInfo.loading = true
  exportSheets[0].title = `${currentDeptName.value}变更管理`

  let { orgcode, projectName, changeType, changeTime } = listQuery
  postApi({ orgcode, projectName, changeType, changeTime }, "/mosty-jcgl/change/queryChangeAll").then(res => {
    if (!res) exportInfo.loading = false
    exportSheets[0].data = res
    exportInfo.loading = false
    go()
  })
}

///新增
const addInfo = () => {
  title.value = "新增"
  addDiaShow.value = true
  saveBtnShow.value = true
  rowid.value = null
  key.value++
}
//修改
const editInfo = row => {
  title.value = "编辑"
  rowid.value = row.id
  addDiaShow.value = true
  saveBtnShow.value = true
}
//删除
const handledelete = row => {
  postApi({}, "/mosty-jcgl/change/deleteChangeOne/" + row.id).then(res => {
    ElMessage.success("删除成功")
    getTableData()
  })
}
const seeInfo = row => {
  title.value = "详情"
  rowid.value = row.id
  addDiaShow.value = true
  saveBtnShow.value = false
}
// 控制新增弹出框的展示
const changeAddVi = val => {
  addDiaShow.value = val
  rowid.value = null
  getTableData()
}

//页码发生变化
const handleCurrentChange = val => {
  listQuery.pageCurrent = val
  pageConfiger.pageCurrent = val
  getTableData()
}
//查询条数发生变化
const handleSizeChange = val => {
  listQuery.pageSize = val
  pageConfiger.pageSize = val
  getTableData()
}


</script>

<style lang="scss" scoped>
.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);
    }
  }

  &.tos {
    z-index: 9;
    top: 10px;
    right: 0;
    position: absolute;
    margin-right: 0 !important;
  }
}

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

  .el-icon {
    cursor: pointer;
  }
}







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