<template>
  <div class="water-analysis-page">
    <el-table
      :data="tableData"
      v-loading="tableLoading"
      stripe
       max-height="500"
    >
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column
        :label="i.lable"
        align="center"
        :prop="i.value"
        show-overflow-tooltip
        v-for="i in projectTableCloum"
      >
        <template #default="{ row }" v-if="i.value == 'recentSubmitter'">
          {{ row.recentSubmitter }}
        </template>
        <template #default="{ row }" v-if="i.value == 'projectName'">
          <span @click="onCheck(row, 1, '详情')" class="projectName">
            {{ row.projectName }}</span
          >
        </template>
        <template #default="{ row }" v-if="i.value == 'status'">
          <span style="color: red" v-if="row.fromStatus">驳回</span>
          <dict-tag v-else :options="dangerous_status" :value="row.status" />
        </template>
        <template
          #default="{ row }"
          v-if="i.value == 'projectOperationPattern'"
        >
          <dict-tag
            :options="project_operation_pattern"
            :value="row.projectOperationPattern"
          />
        </template>
        <template #default="{ row }" v-if="i.value == 'phone'">
          <span :title="row.phone">{{
            row.phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
          }}</span>
        </template>
        <template #default="{ row }" v-if="i.value == 'valuation'">
          {{ row.valuation || 0 }}(万元)
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250" align="center">
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            icon="View"
            @click="onCheck(row, 1, '详情')"
            >详情</el-button
          >
          <el-button
            v-if="row.status == 'examine' && FormList.queryScope == 'todo'"
            icon="Edit"
            link
            type="success"
            @click="onCheck(row, 2, '处理')"
            >处理</el-button
          >
          <el-button
            icon="EditPen"
            v-if="
              (row.status == 'submit' || row.status == 'start') &&
              FormList.queryScope != 'done'&& userName == row.createBy
            "
            link
            type="success"
            @click="onCheck(row, 3, '提交')"
            >提交</el-button
          >
          <!-- <el-button
            icon="Delete"
            v-if="
              (row.status == 'start' || row.status == 'end') &&
              FormList.queryScope == 'main'
            "
            link
            type="danger"
            @click="onCheck(row, 8)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totals > 0"
      :total="totals"
      v-model:page="FormList.pageNum"
      v-model:limit="FormList.pageSize"
      @pagination="getInfoList(FormList)"
    />
  </div>
  <!-- 查看详情弹框 -->
  <el-dialog
    v-model="visible"
    :title="'项目立项' + FormList.tittle"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="90%"
    height="98%"
  >
    <tableDalgo
      ref="tableDalgoRef"
      :key="isKey"
      @onModalClose="onModalClose"
      :typeList="typeList"
      v-if="visible"
    ></tableDalgo>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-show="typeList.type == '3'" @click="open2" type="primary"
          >提交</el-button
        >
        <el-button v-show="typeList.type == 2" type="primary" @click="open2(1)"
          >通过</el-button
        >
        <el-button v-show="typeList.type == 2" type="danger" @click="open2(2)"
          >驳回</el-button
        >
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { defineExpose } from "vue";
import {
  getInfo,
  projectInfoDelete,
  projectInfoGet,
  getInfoMamin,
} from "@/api/projectTable";
import tableDalgo from "./tableDalgo.vue";
import emgBox from "@/utils/ElMessageBox";
import { projectTableCloum } from "@/utils/cloums";
const { proxy } = getCurrentInstance();
const { project_operation_pattern, dangerous_status } = proxy.useDict(
  "project_operation_pattern",
  "dangerous_status"
);
const visible = ref(false);
const userName = sessionStorage.getItem('userName')
const tableDalgoRef = ref();
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
  queryScope: "todo",
  tittle: "",
});
const isKey = ref(0);
const tableData = ref([]);
const totals = ref(0);
const tableLoading = ref(false);
const typeList = ref({});

//获取列表数据
const getInfoList = async (prams) => {
  tableLoading.value = true;
  FormList.value = prams;
  if (prams.queryScope == "main") {
    let { data, total } = await getInfoMamin(prams);
    tableData.value = data;
    totals.value = total;
    tableLoading.value = false;
  } else {
    let { data, total } = await getInfo(prams);
    tableLoading.value = false;
    tableData.value = data;
    totals.value = total;
  }
};
//搜索
defineExpose({ getInfoList });
const onCheck = (row, v, t) => {
  FormList.value.tittle = t;
  if (v == 8) {
    emgBox(row.id, projectInfoDeleteM, "您确定删除吗？");
  } else {
    if (v == 2 || v == 3 || v == 1) {
      projectInfoGet(row.id).then(({ code, data }) => {
        if (code == 200) {
          typeList.value = { ...data, type: v };
          visible.value = true;
        }
      });
    }
  }
};
//删除
const projectInfoDeleteM = async (id) => {
  let { code } = await projectInfoDelete(id);
  getInfoList(FormList.value);
};
function onModalClose() {
  getInfoList(FormList.value);
  nextTick(() => {
    visible.value = false;
    isKey.value++;
  });
}
function closed() {
  tableDalgoRef.value.closed();
}
function open2(v) {
  tableDalgoRef.value.submit(v);
}
onMounted(() => {
  // getInfoList(FormList.value);
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  height: 90vh;

  .top {
    // margin-bottom: 15px;
  }
  .el-input__inner {
  }
  ::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: 850px;
  overflow: auto;
}
</style>