<template>
  <div class="water-analysis-page">
    <el-table :key="isFlag" :data="tableData" v-loading="tableLoading" max-height="500">
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column :label="i.lable" :prop="i.value" show-overflow-tooltip v-for="i in projectInformationCloum">
        <template #default="{ row }" v-if="i.value == 'projectName'">
          <span @click="onCheck(row, 2, '详情')" class="projectName"> {{ row.projectName }}</span>
        </template>
        <template #default="{ row }" v-if="i.value == 'projectStatus'">
          <dict-tag :options="project_status" :value="row.projectStatus" />
        </template>
        <template #default="{ row }" v-if="i.value == 'valuation'"> {{ row.valuation || 0 }}(万元) </template>
        <template #default="{ row }" v-if="i.value == 'projectProgress'"> {{ row.projectProgress || 0 }}% </template>
        <template #default="{ row }" v-if="i.value == 'completeTotalInvest'"> {{ row.completeTotalInvest || 0 }}万元 </template>
        <template #default="{ row }" v-if="i.value == 'completeSpongeInvest'"> {{ row.completeSpongeInvest || 0 }}万元 </template>
        <template #default="{ row }" v-if="i.value == 'startTime'">
          {{ row.startTime.substring(0, 10) }}
        </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 == 'constructUnit'">
          <dict-tag :options="unit_list" :value="row.constructUnit" />
          {{ unit_listM(row.constructUnit) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="{ row }">
          <el-button link type="primary" icon="View" @click="onCheck(row, 2, '详情')">详情</el-button>
          <!-- <el-button link type="success" plain icon="DArrowRight" @click="onCheck(row, 6, '转交')"
            >转交</el-button
          > -->
          <el-button v-show="FormList.belong == 1" link type="warning" icon="Edit" @click="onCheck(row, 5, '修改')">修改</el-button>
          <el-button v-show="FormList.belong == 1" icon="Delete" link type="danger" @click="onCheck(row, 4, '删除')">删除</el-button>

          <!-- <el-button link type="danger" @click="onCheck(row, 3)">删除</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="'项目信息' + title" :modal-append-to-body="false" :close-on-click-modal="false" width="92%">
    <tableDalgo ref="tableDalgoRef" @onModalClose="onModalClose" v-if="visible"></tableDalgo>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-show="typeList.type != 2" type="primary" @click="submit">确定</el-button>
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="editvisible" title="项目信息修改" :modal-append-to-body="false" :close-on-click-modal="false" width="80%">
    <addDalg ref="tableDalgoRef" :typeList="typeList" @onModalClose="onModalClose" v-if="editvisible"></addDalg>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-show="typeList.type != 2" type="primary" @click="submit">确定</el-button>
        <el-button @click="editvisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="zjtdialgo" title="项目信息转交" :modal-append-to-body="false" :close-on-click-modal="false" width="50%">
    <el-form label-width="auto" ref="ruleForm" :model="FormList" :key="isKey">
      <el-form-item label="接收人:" props="dealUsers">
        <el-select clearable v-model="FormList.dealUsers" style="width: 100%" class="m-2" placeholder="指定处理人" size="mini">
          <el-option v-for="item in personList" :key="item.userId" :label="item.nickName" :value="item.userId" />
        </el-select>
      </el-form-item>

      <el-form-item label="转交原因:" props="supplement">
        <el-input v-model="FormList.supplement" type="textarea" placeholder="转交原因" />
      </el-form-item>
      <el-form-item label="项目资料是否已经上传平台:" props="supplement">
        <el-radio-group v-model="FormList.Istable" class="ml-4">
          <el-radio label="1" size="large">是</el-radio>
          <el-radio label="2" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="contentClick(true)">确定</el-button>
      <el-button @click="zjtdialgo = false">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getInfo, projectInfoDelete, projectInfoGet, projectInfoAdd, userList } from '@/api/project/projectInformation';
import { projectInformationCloum } from '@/utils/cloums';

const personList = ref([]);
import { ElMessage, ElMessageBox } from 'element-plus';
import tableDalgo from './tableDalgo.vue';
import { formatMonths } from '@/utils';
const ruleForm = ref(null);
const { proxy } = getCurrentInstance();
const { project_status, dangerous_status } = proxy.useDict('project_status', 'dangerous_status');
import { projectCompany } from '@/api/project/projectTable';
import addDalg from './addDalg.vue';

let visible = ref(false);
let isFlag = ref(1);
let tableDalgoRef = ref();
const title = ref();
let zjtdialgo = ref(false);
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
  belong: '1',
});
const totals = ref(0);
const unit_list = ref([]);
const editvisible = ref(false);
//动态组件
let dataForm = reactive({
  date: formatMonths(new Date()),
  tableData: '',
  tableDateTwo: '',
  tableLoading: true,
});
let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
//获取列表数据
const getInfoList = async prams => {
  FormList.value.belong = prams.belong;
  tableLoading.value = true;
  let { data, total } = await getInfo(prams);
  tableData.value = data;
  totals.value = total;
  tableLoading.value = false;
};
defineExpose({ getInfoList });
let typeList = ref({});
const onCheck = (row, ty, t) => {
  title.value = t;
  projectInfoGet(row.id).then(({ code, data }) => {
    if (code == 200) {
      typeList.value = { ...data, type: ty };
      if (ty == 3 || ty == 2) {
        visible.value = true;
      } else if (ty == 4) {
        ElMessageBox.confirm(`您确定删除项目信息吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          projectInfoDeleteM(typeList.value);
        });
      } else if (ty == 5) {
        editvisible.value = true;
      } else if (ty == 6) {
        zjtdialgo.value = true;
      }
    }
  });
};
provide('typeList1', typeList);
//删除
const projectInfoDeleteM = async id => {
  let { dealUsers, workflowUserId } = id;
  if (dealUsers?.length > 0 && Array.isArray(dealUsers)) {
    typeList.value.dealUsers = dealUsers?.join(',');
  }
  if (workflowUserId?.length > 0 && Array.isArray(workflowUserId)) {
    typeList.value.workflowUserId = workflowUserId.join(',');
  }
  typeList.value.operation = 'delete';
  typeList.value.content = JSON.stringify([
    { type: 'new', projectInfo: { ...typeList.value } },
    { type: 'old', projectInfo: { ...typeList } },
  ]);
  projectInfoAdd(typeList.value).then(({ code }) => {
    if (code == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      });
      getInfoList(FormList.value);
    }
  });
};
//撤回操作
const Returncnfiorm = async id => {
  let { code } = await projectInfoDelete(id);
};
function onModalClose() {
  visible.value = false;
  editvisible.value = false;
  getInfoList(FormList.value);
}
function submit() {
  tableDalgoRef.value.submit();
}
const projectCompanyM = async () => {
  let { data } = await projectCompany();
  unit_list.value = data;
};
function unit_listM(v) {
  console.log('unit_listunit_list', unit_list.value, v);
  let arr = unit_list.value.filter(i => {
    return v == i.id;
  });
  return arr[0]?.makeCompanyName;
}

const userListM = async () => {
  let { data } = await userList();
  personList.value = data;
};
// 转交
function contentClick(v) {}
onMounted(() => {
  projectCompanyM();
  userListM();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  height: 90vh;
  :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);
  }
}
</style>