<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 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-select size="default" v-model="state.projectState" placeholder="请选择建设进度"
                            style="width: 240px;margin: 0 10px;">
                            <el-option label="全部" value="" />
                            <el-option label="未开工" value="0" />
                            <el-option label="在建" value="1" />
                            <el-option label="竣工" value="2" />
                            <el-option label="停工" value="3" />
                        </el-select>

                        <el-select size="default" v-model="state.saleState" placeholder="请选择销售状态" style="width: 240px">
                            <el-option label="全部" value="" />
                            <el-option label="未售" value="0" />
                            <el-option label="在售" value="1" />
                            <el-option label="售罄" value="2" />
                        </el-select>

                        <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>
                        <el-button size="default" type="primary" class="ml10" @click="dialogVisible = true">
                          <el-icon><ele-Refresh /></el-icon>合并
                        </el-button>
                        <el-button size="default" type="primary" class="ml10" @click="chushihua">
                          <el-icon><ele-RefreshLeft /></el-icon>初始化
                        </el-button>
                    </div>
                    <el-table  @selection-change="handleSelectionChange" :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="areaName" label="所属区县" width="160" />
                        <el-table-column prop="corpName" label="企业名称" />
                        <el-table-column prop="projectName" label="项目名称" width="400" />
                        <el-table-column prop="constructArea" label="建筑面积">
                          <template #default="scope">
                            <span>{{ proxy?.$method.numFormat(scope.row.constructArea) + '㎡' || 0 }}</span>
                          </template>
                        </el-table-column>

                        <el-table-column prop="projectConstructState" label="建设进度" width="160">
                            <template #default="scope">
                                <span style="color: #7e6900;" v-if="scope.row.projectConstructState == 0">未开工</span>
                                <span style="color: #409eff;" v-if="scope.row.projectConstructState == 1">在建</span>
                                <span style="color: #5FB878;" v-if="scope.row.projectConstructState == 2">竣工</span>
                                <span style="color: #f20000;" v-if="scope.row.projectConstructState == 3">停工</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="projectSaleState" label="销售状态" width="160">
                            <template #default="scope">
                                <span v-if="scope.row.projectSaleState == 0">未售</span>
                                <span v-if="scope.row.projectSaleState == 1">在售</span>
                                <span v-if="scope.row.projectSaleState == 2">售罄</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template #default="scope">
                                <el-button size="small" text type="primary"
                                    @click="onOpenEditDic(scope.row)">详情</el-button>
                              <el-button size="small" text type="primary"
                                         @click="huixian(scope.row);dialogVisibleTgtj = true ;">编辑</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="500">
          <div>
            <div style="display: flex;flex-direction: row;align-items: center">
              <div style="font-size: 16px">项目名称：</div>
              <el-input v-model="state.xmmcNew" style="width: 240px" placeholder="输入新的项目名称" />
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="chensnia()">确定</el-button>
              <el-button  @click="dialogVisible = false">取消</el-button>
            </div>
          </template>
        </el-dialog>

        <el-dialog v-model="dialogVisibleTgtj" title="项目信息" width="1200">
          <div style="display: flex;flex-direction: row;border: 1px solid #e5e5e5;padding: 20px">
            <div style="">
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">项目名称</div>：
                <el-input v-model="state.xghx.projectName" style="width: 400px" placeholder="输入项目名称" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">项目编号</div>：
                <el-input v-model="state.xghx.projectNumber" style="width: 400px" placeholder="输入项目编号" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">项目地址</div>：
                <el-input v-model="state.xghx.address" style="width: 400px" placeholder="输入项目地址" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">户数</div>：
                <el-input v-model="state.xghx.houseTotal" style="width: 400px" placeholder="输入户数" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">楼憧数</div>：
                <el-input v-model="state.xghx.buildTotal" style="width: 400px" placeholder="输入楼憧数" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">占地面积</div>：
                <el-input v-model="state.xghx.coverArea" style="width: 400px" placeholder="输入占地面积" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">建筑面积</div>：
                <el-input v-model="state.xghx.constructArea" style="width: 400px" placeholder="输入建筑面积" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">销售状态</div>：
                <el-radio-group v-model="state.xghx.projectSaleState">
                  <el-radio :label="0">未售</el-radio>
                  <el-radio :label="1">在售</el-radio>
                  <el-radio :label="2">售罄</el-radio>
                </el-radio-group>
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">建设进度</div>：
                <el-radio-group v-model="state.xghx.projectConstructState">
                  <el-radio :label="0">未开工</el-radio>
                  <el-radio :label="1">在建</el-radio>
                  <el-radio :label="2">竣工</el-radio>
                  <el-radio :label="3">停工</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div style="padding: 0 20px">
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">计划开工日期</div>：
                <el-input v-model="state.xghx.planStartDate"  :value="(proxy?.$method.formatDate(state.xghx.planStartDate, true))" style="width: 400px" placeholder="输入信息" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">计划竣工日期</div>：
                <el-input v-model="state.xghx.planEndDate" :value="(proxy?.$method.formatDate(state.xghx.planEndDate, true))" style="width: 400px" placeholder="输入信息" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">实际开工日期</div>：
                <el-input v-model="state.xghx.actualStartDate " :value="(proxy?.$method.formatDate(state.xghx.actualStartDate, true))" style="width: 400px" placeholder="输入信息" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">实际竣工日期</div>：
                <el-input v-model="state.xghx.actualEndDate" :value="(proxy?.$method.formatDate(state.xghx.actualEndDate, true))" style="width: 400px" placeholder="输入信息" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">计划交付日期</div>：
                <el-input v-model="state.xghx.planDeliveryDate" :value="(proxy?.$method.formatDate(state.xghx.planDeliveryDate, true))" style="width: 400px" placeholder="输入信息" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">实际交付日期</div>：
                <el-input v-model="state.xghx.deliveryDate" :value="(proxy?.$method.formatDate(state.xghx.deliveryDate, true))" style="width: 400px" placeholder="输入信息" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">经度</div>：
                <el-input v-model="state.xghx.longitude" style="width: 400px" placeholder="输入信息" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">纬度</div>：
                <el-input v-model="state.xghx.latitude" style="width: 400px" placeholder="输入信息" />
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">区县</div>：
                <el-select v-model="state.xghx.areaCode" filterable placeholder="请选择" style="width: 400px">
                  <el-option v-for="item in state.county" :key="item.value" :label="item.label" :value="item.value.toString()" />
                </el-select>
              </div>
              <div style="display: flex;flex-direction: row;align-items: center" class="mantop">
                <div style="font-size: 16px" class="text-align-last">项目性质</div>：
                <el-checkbox-group v-model="state.xghx.projectUse">
                  <el-checkbox label="0" value='0'>其他</el-checkbox>
                  <el-checkbox label="1" value="1">住宅</el-checkbox>
                  <el-checkbox label="2" value="2">商业</el-checkbox>
                  <el-checkbox label="3" value="3">商住</el-checkbox>
                  <el-checkbox label="4" value="4">商业、办公</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>

          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="tjtjxginfo">确定</el-button>
              <el-button  @click="dialogVisibleTgtj = 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;
    state.radio = state.county[0].value
    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:"",
  xghx:{
    projectName:"",
    projectNumber:"",
    address:"",
    houseTotal:"",
    buildTotal:"",
    coverArea:"",
    constructArea:"",
    projectSaleState:"",
    projectConstructState:"",

    planStartDate:"",
    planEndDate:"",
    actualStartDate:"",
    actualEndDate:"",
    planDeliveryDate:"",
    deliveryDate:"",
    longitude:"",
    latitude:"",
    areaCode:"",

    projectUse:'',

  }as any,//修改信息回显
  listinfo:'',
  xmmcNew:"",
  originalId:"",
  radios:"0",
});
const handleSelectionChange = (val: User[]) => {
  state.info = val
  var list = val
  var listAny:any = []
  list.forEach(item=>{
    listAny.push(item.originalId)
  })
  state.listinfo = listAny
}

const huixian = async (inds:any) => {
  state.originalId = inds.id
  let item = await proIndexApi().xgxmxx(state.originalId);
  state.xghx = item.data
  if(state.xghx.projectUse == null){
    state.xghx.projectUse = []
  }else {
    state.xghx.projectUse = state.xghx.projectUse.split(",")
  }
  state.xghx.collectionTime = null
  state.xghx.sendTime = null
}
const chushihua = async () => {
  let item = await proIndexApi().chushihua();
  ElMessage({
    message: item.data.msg,
    type: 'warning',
  })
}

const tjtjxginfo = async () => {
  state.xghx.projectUse = state.xghx.projectUse.join()
  let item = await proIndexApi().xgxmbtn({
    id:state.originalId,
    ...state.xghx
  });
  ElMessageBox.alert(item.msg, '提示', {
    confirmButtonText: 'OK',
  })
  dialogVisibleTgtj.value = false
  ApiIndex()
}
const chensnia = async () => {
  if(state.listinfo.length == 0){
    return  ElMessage({
      message: '请选择合并小区',
      type: 'warning',
    })
  }
  if(state.xmmcNew == ''){
    return  ElMessage({
      message: '请输入项目名称',
      type: 'warning',
    })
  }
  let item = await proIndexApi().hebing({
    projectName:state.xmmcNew,
    projectOriginalIds:state.listinfo,
  });
  var items  = item.data
  ElMessageBox.alert(
      '<div>楼幢合并成功条数：'+ items.buildingCount +
      '条。</div><div>楼幢建设进度合并成功条数：'+ items.buildingProgressCount +
      '条。</div><div>楼幢账户合并成功条数：' + items.buildingSuperviseCount +
      '条。</div><div>房屋合并成功条数：' + items.houseCount +
      '条。</div><div>合同合并成功条数：' + items.contractCount +
      '条。</div><div>建设用地规划许可证合并成功条数：' + items.landPlanCount +
      '条。</div><div>土地使用权证合并成功条数：' + items.landUseCount +
      '条。</div><div>工程施工许可证合并成功条数：' + items.projectPermitCount +
      '条。</div><div>工程规划许可证合并成功条数：' + items.projectPlanCount +
      '条。</div><div>监管账户收支明细合并成功条数：' + items.superviseAccountCount +
      '条。</div><div>资金交易明细合并成功条数：' + items.transactionCount + '条.</<div>',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
      }
  )
  dialogVisible.value = false
  ApiIndex()
}

// 接口
const ApiIndex = async () => {
    console.log(state.tableData.param.pageNum)
    //后期清空
    state.search = Session.get('xmmc')
    state.projectState = Session.get('projectState')
    state.saleState = Session.get('saleState')
    //
    let item = await proIndexApi().tablelistApi({
        areaCode: state.radio,
        projectName: state.search,
        projectConstructState: state.projectState,
        projectSaleState: state.saleState,
        page: state.tableData.param.pageNum,
        limit: state.tableData.param.pageSize,
    });
    item.data.forEach((res: any) => {
        state.county.forEach((ifres: any) => {
            if (res.areaCode == ifres.value) {
                res.areaName = ifres.label
            }
        })
    })
    state.tableData.data = item.data
    state.tableData.total = item.count;
    setTimeout(() => {
        state.tableData.loading = false;
    }, 500);
}
//查询企业
const seletgetTableData = (e?: number) => {
    state.tableData.param.pageNum = 1
    Session.set('xmmc',state.search)
    Session.set('projectState',state.projectState)
    Session.set('saleState',state.saleState)
    if (e == 0) {
      Session.remove('xmmc')
      Session.remove('projectState')
      Session.remove('saleState')
      Session.remove('xmmc')
      state.search = '';
    }
    ApiIndex()
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.tableData.param.pageNum = val;
    ApiIndex();
};
const onHandleSizeChange = (val: number) => {
    state.tableData.param.pageSize = val;
    ApiIndex();
};
//跳转页面
const onOpenEditDic = (val: any) => {
    const set = val.projectNumber;
    router.push({
        path: '/projectQuery/details',
        query: {
            id: val.originalId,
            type: set
        }
    });
}
</script>

<style scoped lang="scss">
.mantop{
  margin-top: 20px;
}
.text-align-last{
  width:100px;
}
.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>
