<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-button size="default" type="primary" class="ml10" @click="dialogVisible = true ; shoudongtianjia()">
                            <el-icon><ele-Search /></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="areaName" label="区县" />
                        <el-table-column prop="landUseNo" label="土地证编号" />
                        <el-table-column prop="projectName" label="项目名称" />
                        <el-table-column prop="useArea" label="使用权面积">
                            <template #default="scope">
                                <span> {{ proxy?.$method.numFormat(scope.row.useArea) }}㎡</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="gainType" label="使用权取得方式">
                            <template #default="scope">
                              <span v-if="scope.row.gainType == 1">出让</span>
                              <span v-if="scope.row.gainType == 2">招标</span>
                              <span v-if="scope.row.gainType == 3">拍卖</span>
                              <span v-if="scope.row.gainType == 4">挂牌</span>
                              <span v-if="scope.row.gainType == 5">协议出让</span>
                              <span v-if="scope.row.gainType == 6">划拨</span>
                              <span v-if="scope.row.gainType == 7">租赁</span>
                              <span v-if="scope.row.gainType == 8">作价出资或入股</span>
                              <span v-if="scope.row.gainType == 9">授权经营</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="issueDate" label="发证日期">
                          <template #default="scope">
                            {{ proxy?.$method.formatDate(scope.row.issueDate, true) }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间">
                            <template #default="scope">
                                {{ proxy?.$method.formatDate(scope.row.createTime, true) }}
                            </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="1400">
        <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="shoudongtianjia();state.tableDatas.params.pageSizes = 5;state.tableDatas.params.pageNums = 1">
              <el-icon><ele-Search /></el-icon>查询
            </el-button>
          <el-table  @selection-change="handleSelectionChange" :data="state.tableDatas.datas" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="areaName" label="区县编码" width="120" />
            <el-table-column prop="approvalLandNo" label="证书编号" />
            <el-table-column prop="projectName" label="项目名称" />
            <el-table-column prop="landAddress" label="用地位置" />
            <el-table-column prop="landArea" label="用地面积" width="120">
              <template #default="scope">
                <span> {{ proxy?.$method.numFormat(scope.row.landArea) }}㎡</span>
              </template>
            </el-table-column>
            <el-table-column prop="issueDate" label="发证日期" width="120">
              <template #default="scope">
                <span>{{ proxy?.$method.formatDate(scope.row.issueDate, true) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="gainType" label="使用权取得方式" width="150">
              <template #default="scope">
                <span v-if="scope.row.gainType == 1">出让</span>
                <span v-if="scope.row.gainType == 2">招标</span>
                <span v-if="scope.row.gainType == 3">拍卖</span>
                <span v-if="scope.row.gainType == 4">挂牌</span>
                <span v-if="scope.row.gainType == 5">协议出让</span>
                <span v-if="scope.row.gainType == 6">划拨</span>
                <span v-if="scope.row.gainType == 7">租赁</span>
                <span v-if="scope.row.gainType == 8">作价出资或入股</span>
                <span v-if="scope.row.gainType == 9">授权经营</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template #default="scope">
                <el-popconfirm title="是否删除该土地信息"  @confirm="shanchulist(scope.row)">
                  <template #reference>
                    <el-button size="small" text type="primary" @click="">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @current-change="onHandleSizeChanges" class="mt15" v-model:current-page="state.tableDatas.params.pageNums" background
                         v-model:page-size="state.tableDatas.params.pageSizes"
                         layout="total, prev , pager, next" :total="state.tableDatas.totals">
          </el-pagination>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="tablesBtn">确定</el-button>
            <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 { entApi } from "/@/api/ent/index";
import { useRouter } from "vue-router";
import { proIndexApi } from "/@/api/pro";
import { useCurrentInstance } from '/@/method/get'
import {ElMessage} from "element-plus";
const { proxy } = useCurrentInstance()

const dialogVisible = 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,

  tableDatas: {
    datas: [],
    totals: 1000,
    params: {
      pageNums: 1,
      pageSizes: 5,
    },
  } as any,
  projectName:"",
  listinfo:"",
});
// 接口
const shanchulist  = async (inds:any) => {
  let originalId = inds.id
  let item = await proIndexApi().tablsshanchu(originalId);
  ElMessage({
    message: item.msg,
    type: 'success',
  })
  shoudongtianjia()
}
const handleSelectionChange = (val: User[]) => {
  var list = val
  var listAny:any = []
  list.forEach(item=>{
    listAny.push(item.id)
  })
  state.listinfo = listAny
}
const tablesBtn = async  () => {
  let item = await proIndexApi().tablsBtns(state.listinfo)
  ElMessage({
    message: item.msg,
    type: 'success',
  })
  dialogVisible.value = false
  ApiIndex()
}
const shoudongtianjia = async () => {
  let item = await proIndexApi().ndwkftables({
      projectName:state.projectName,
      page: state.tableDatas.params.pageNums,
      limit: state.tableDatas.params.pageSizes,
  });
  item.data.forEach((res: any) => {
    state.county.forEach((ifres: any) => {
      if (res.areaCode == ifres.value) {
        res.areaName = ifres.label
      }
    })
  })
  state.tableDatas.datas = item.data
  state.tableDatas.totals = item.count;
}
const onHandleSizeChanges = (val: number) => {
  state.tableDatas.params.pageNums = val;
  shoudongtianjia();
};
const ApiIndex = async () => {
    state.tableData.loading = true;
    let item = await proIndexApi().tablenouselistApi({
        areaCode: state.radio,
        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
    if (e == 0) state.search = '';
    ApiIndex()
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.tableData.param.pageNum = val;
    ApiIndex();
};
const onHandleSizeChange = (val: number) => {
    state.tableData.param.pageSize = val;
    ApiIndex();
};
</script>

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