<template>
  <div class="home-container layout-pd">

<!--    <el-row :gutter="15" class="home-card-one mb15">
      <el-col :xl="24">
        <el-card shadow="hover">
          <el-radio-group v-model="state.radio" @change="seletgetTableData">
            <el-radio label="">潍坊市</el-radio>
            <el-radio v-for="(item, index) in state.county" :key="index" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-card>
      </el-col>
    </el-row>-->
    <el-row :gutter="15" class="home-card-one mb15">
      <el-col :xl="24">
        <el-card shadow="hover">
          <div class="system-user-search mb15">
            <el-input size="default" v-model="state.search" placeholder="请输入项目名称"
                      style="max-width: 180px"></el-input>
            <el-button size="default" type="primary" class="ml10" @click="seletgetTableData()">
              <el-icon><ele-Search /></el-icon>查询
            </el-button>
            <el-button size="default" type="primary" class="ml10" @click="seletgetTableData(0)">
              <el-icon><ele-RefreshRight /></el-icon>重置
            </el-button>
          </div>
          <el-table  :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="projectName" label="项目名称"  width="250" />
            <el-table-column prop="singleProjectName" label="单项工程名称" width="450" />
            <el-table-column prop="projectArea" label="建设规模(㎡)"  width="150">
              <template #default="scope">
                <span>{{scope.row.projectArea || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="actualOpenDate" label="计划开工日期"  width="150">
              <template #default="scope">
                <span>{{scope.row.actualOpenDate || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="actualEndDate" label="计划竣工日期"  width="200">
              <template #default="scope">
                <span>{{scope.row.actualEndDate || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="progress" label="施工阶段"  width="170">
              <template #default="scope">
                <span>{{scope.row.progress || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="projectState" label="工程状态"/>
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button size="small" text type="primary"
                           @click=" state.tableDatas.datas =''; state.projectName = ''; state.tableDatas.params.pageNums = 1 ;onOpendis(scope.row)">关联楼幢</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
                         class="mt15" v-model:current-page="state.tableData.param.pageNum" background
                         v-model:page-size="state.tableData.param.pageSize"
                         layout="total, prev,sizes, pager, next, jumper" :total="state.tableData.total">
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-model="dialogVisible" title="证书关联" width="80%" :draggable="true">
      <div style="border: 1px solid #e5e5e5;padding: 20px">
        <el-input size="default" v-model="state.projectName" placeholder="请输入项目名称"
                  style="max-width: 180px"></el-input>
        <el-button size="default" type="primary" class="ml10" @click="onOpenEditDic('');state.tableDatas.params.pageSizes = 10;state.tableDatas.params.pageNums = 1">
          <el-icon><ele-Search /></el-icon>查询
        </el-button>
        <el-button size="default" type="primary" class="ml10" @click="shanchulist('')">
          <el-icon><ele-Search /></el-icon>关联
        </el-button>
        <br>
        <el-table  @selection-change="handleSelectionChange"  v-loading="state.tableDatas.loadings" :data="state.tableDatas.datas" style="width: 100%">
          <template #empty>
            <div v-if="state.projectName ==''">
              <el-empty description="请输入项目名称"></el-empty>
            </div>
            <div v-else>
              <el-empty description="暂无数据"></el-empty>
            </div>
          </template>
          <el-table-column type="selection" width="55" />
          <el-table-column prop="projectName" label="项目名称"  />
          <el-table-column prop="buildingName" label="楼幢名称" />
          <el-table-column prop="calculateArea" label="建筑面积(㎡)" >
            <template #default="scope">
              <span>{{ proxy?.$method.numFormat(scope.row.calculateArea) || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="楼幢坐落" width="400" />
          <el-table-column prop="unitNum" label="单元数"></el-table-column>
          <el-table-column prop="totalHouseNum" label="总套数"></el-table-column>
        </el-table>
        <el-pagination @size-change="onHandleSizeChanges" @current-change="onHandleCurrentChanges" class="mt15"
                       v-model:current-page="state.tableDatas.params.pageNums" background
                       v-model:page-size="state.tableDatas.params.pageSizes"
                       layout="total, prev,sizes, pager, next, jumper" :total="state.tableDatas.totals">
        </el-pagination>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button  @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="enterIndexssss">
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from "vue";
import { projectQueryApi } from "/@/api/projectQuery/index";
import { ElMessage ,ElMessageBox} from 'element-plus'
import { entApi } from "/@/api/ent/index";
import { useRouter } from "vue-router";
import { Session } from '/@/utils/storage';
import { proIndexApi } from "/@/api/pro";
import {useCurrentInstance} from "/@/method/get";
const { proxy } = useCurrentInstance();

const dialogVisible = ref(false)
const dialogVisibleTgtj = ref(false)

const ApiCity = async () => {
  // let itemQx = await entApi().typeApi(); //区县数据
  // state.county = itemQx.data;
  ApiIndex()
}
onMounted(() => {
  ApiCity();
})
//柱状图
// 定义变量内容
const router = useRouter();
const state = reactive<any>({
  projectState: '',
  saleState: '',
  search: "",
  radio: "",
  county: [],
  tableData: {
    data: [],
    total: 1000,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  } as any,
  info:"",
  xmmcNew:"",
  radios:"0",
  //弹窗
  tableDatas: {
    datas: [],
    totals: 1,
    loadings: false,
    params: {
      pageNums: 1,
      pageSizes: 10,
    },
  } as any,
  projectName:"",
  listinfo:"",
  constructionPermit:"",
  deliverStateName:"",
}as any);
const handleSelectionChange = (val: any) => {
  state.info = val
  var list = val
  var listAny:any = []
  list.forEach(item=>{
    listAny.push(item.originalId)
  })
  state.listinfo = listAny
}
// 接口
const ApiIndex = async () => {
  let item = await proIndexApi().sgxkzlist({
    page: state.tableData.param.pageNum,
    limit: state.tableData.param.pageSize,
    projectName:state.search,
  });
  state.tableData.data = item.data
  state.tableData.total = item.count;
  setTimeout(() => {
    state.tableData.loading = false;
  }, 500);
}
//查询企业
const seletgetTableData = (e?: number) => {
  if(e == 0){
    state.search = ''
  }
  state.tableData.param.pageNum = 1
  ApiIndex()
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  ApiIndex();
};
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  ApiIndex();
};
//跳转页面

const shanchulist  = async (inds?:any) => {
  let item = await proIndexApi().sgxkzLzlistGuanlian({
    deliverStateName:state.deliverStateName,
    constructionPermit:state.constructionPermit,
    buildingOriginalIds:state.listinfo,
  });
  ElMessage({
    message: item.msg,
    type: 'success',
  })
  dialogVisible.value = false

  state.tableData.param.pageNum = 1
  ApiIndex()
}
const onHandleSizeChanges = (val: number) => {
  state.tableDatas.params.pageSizes = val;
  onOpenEditDic('')
};
const onHandleCurrentChanges = (val: number) => {
  state.tableDatas.params.pageNums = val;
  onOpenEditDic('');
};
const onOpendis = async (val: any) => {
  dialogVisible.value = true
  if(val){
    state.constructionPermit = val.constructionPermit
    state.deliverStateName = val.projectState
  }
}
const onOpenEditDic = async () => {
  dialogVisible.value = true
  if(state.projectName == ''){
    return
  }
  state.tableDatas.loadings = true
  let item = await proIndexApi().sgxkzLzlist({
    projectName:state.projectName,
    page: state.tableDatas.params.pageNums,
    limit: state.tableDatas.params.pageSizes,
  });
  state.tableDatas.datas = item.data
  state.tableDatas.totals = item.count;
  state.tableDatas.loadings = false
}
</script>

<style scoped lang="scss">
.mantop{
  margin-top: 20px;
}
.text-align-last{
  text-align-last: justify;
  width:70px;
}
.title {
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  border-left: 3px solid #409EFE;
  margin-right: 20px;
}

.home-container {
  overflow: hidden;

  .home-card-one {
    .home-card-item {
      width: 100%;
      height: 130px;
      border-radius: 4px;
      transition: all ease 0.3s;
      padding: 20px;
      overflow: hidden;
      background: var(--el-color-white);
      color: var(--el-text-color-primary);
      border: 1px solid var(--next-border-color-light);

      &:hover {
        box-shadow: 0 2px 12px var(--next-color-dark-hover);
        transition: all ease 0.3s;
      }

      &-icon {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        flex-shrink: 1;

        i {
          color: var(--el-text-color-placeholder);
        }
      }

      &-title {
        font-size: 15px;
        font-weight: bold;
        height: 30px;
      }
    }
  }

  .home-card-one {
    @for $i from 0 through 3 {
      .home-one-animation#{$i} {
        opacity: 0;
        animation-name: error-num;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/4) + s;
      }
    }
  }
}
</style>
