<template>
  <div class="water-analysis-page1">
    <el-table
      :key="isFlag"
      :data="tableData"
      v-loading="tableLoading"
      stripe
      max-height="500"
    >
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column
        :label="i.label"
        align="center"
        :prop="i.props"
        show-overflow-tooltip
        v-for="i in xmGisCloum"
      >
      <template #default="{ row }" v-if="i.props == 'projectName'">
         <span  @click="onCheck(row, 1, '详情')" class="projectName" > {{ row.projectName }}</span>
        </template>
        <template #default="{ row }" v-if="i.props == 'facilityType'">
          <dict-tag :options="facility_type" :value="row.facilityType" />
        </template>
        <template #default="{ row }" v-if="i.props == 'facilityType'">
          <dict-tag :options="facility_type" :value="row.facilityType" />
        </template>
        <template #default="{ row }" v-if="i.props == 'color'">
          <div
            :style="{
              width: '30px',
              height: '30px',
              backgroundColor: row.color,
              'margin-left': '53px',
            }"
          ></div>
        </template>
        <template #default="{ row }" v-if="i.props == 'boundaryColor'">
          <div
            :style="{
              width: '30px',
              height: '30px',
              backgroundColor: row.boundaryColor,
              'margin-left': '53px',
            }"
          ></div>
        </template>
        <template #default="{ row }" v-if="i.props == 'boundaryType'">
          <dict-tag :options="boundary_type" :value="row.boundaryType" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="是否启用" align="center" prop="status"  >
                <template #default="{row}">
                    {{ row.status==1? '是':'否' }}
               </template>
            </el-table-column> -->
      <el-table-column fixed="right" label="操作" width="210" align="center">
        <template #default="{ row }">
          <el-button icon="View" link type="primary" @click="onCheck(row, 1,'详情')"
            >详情</el-button
          >
          <el-button icon="Edit" link type="warning" @click="onCheck(row, 2,'修改')"
            >修改</el-button
          >
          <el-button icon="Delete" link type="danger" @click="onCheck(row, 3)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="FormList.totals > 0"
      :total="FormList.totals"
      v-model:page="FormList.pageNum"
      v-model:limit="FormList.pageSize"
      @pagination="getInfoList(FormList)"
    />
    <el-dialog
      v-model="visible"
      :title="'项目GIS配置'+title"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="70%"
    >
      <tableDalgo
        ref="tableDalgoRef"
        v-if="visible"
        @onModalClose="onModalClose"
        :typeList="typeList"
      ></tableDalgo>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="typeList?.type != 1" type="primary" @click="submit"
            >保存</el-button
          >
          <el-button @click="visible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { defineExpose } from "vue";
import { getInfo, projectInfoDelete, projectInfoGet } from "@/api/xmGis";
import { getToken } from "@/utils/auth";
import tableDalgo from "./tableDalgo.vue";
import { downloadBlob, formatDate, formatMonths } from "@/utils/projectTable";
import { ElMessage, ElMessageBox } from "element-plus";
import { xmGisCloum } from "@/utils/cloums";
const { proxy } = getCurrentInstance();
const { ownership, boundary_type, facility_type } = proxy.useDict(
  "ownership",
  "boundary_type",
  "facility_type"
);
const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});
const ruleForm = ref(null);
const tableDalgoRef = ref();
import { reactive } from "vue";
let visible = ref(false);
let isFlag = ref(1);
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const title=ref('')
//动态组件
let dataForm = reactive({
  date: formatMonths(new Date()),
  tableData: "",
  tableDateTwo: "",
  tableLoading: true,
});
let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
//获取列表数据
const getInfoList = async (prams) => {
  tableLoading.value = true;
  let { data, total } = await getInfo(prams);
  tableData.value = data;
  FormList.value.totals = total;
  setTimeout(() => {
    tableLoading.value = false;
  }, 1000);
};
//搜索
const search = (p) => {
  getInfoList(p);
};
defineExpose({ search });
// 查看上报数据
let typeList = ref({});
const onCheck = (row, ty,t) => {
  title.value=t
  if (ty == 1 || ty == 2) {
    projectInfoGet(row.id).then(({ code, data }) => {
      if (code == 200) {
        typeList.value = { ...data, type: ty };
        visible.value = true;
        isFlag.value++;
      }
    });
  } else if (ty == 3) {
    ElMessageBox.confirm(`您确定删除项目信息吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
             })
    .then(() => {
      projectInfoDeleteM(row.id)
    })
    // emgBox(row.id, projectInfoDeleteM, "您确定删除吗？");
  }
};
//删除
const projectInfoDeleteM = async (id) => {
  let { code } = await projectInfoDelete(id);
  ElMessage({
            message: "删除成功",
            type: "success",
          });
  getInfoList(FormList.value);

};
//撤回操作
const Returncnfiorm = async (id) => {
  let { code } = await projectInfoDelete(id);
};
function onModalClose() {
  visible.value = false;
  getInfoList(FormList.value);
}
function submit() {
  tableDalgoRef.value.submit();
}
onMounted(() => {
  getInfoList(FormList.value);
});
</script>
<style lang="scss" scoped>
.water-analysis-page1 {
  // padding: 20px;
  // border: 1px solid #ddd;
  height: 90vh;
  .top {
    // margin-bottom: 15px;
  }
  .el-input__inner {
    // color: #fff;//
  }
  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(22, 132, 252);
    border-left: 1px solid rgb(22, 132, 252);
  }
}
:deep(.el-dialog__body) {
  background-color: #eef1fb;
  height: 750px;
  overflow: auto;
}
</style>