<template>
  <div class="water-analysis-page">
    <div class="top">
        <div class="LeftBox1">
        <el-progress
      type="circle"
      :percentage="DetailData.paymentRatio"
      :width="150"
      style="margin: 10px 10px 20px 100px"
      :stroke-width="20"
      striped
      striped-flow
    />
        <!-- <p class="HTNo">{{ DetailData.projectTypeName }}</p> -->
        <div style="width:380px;display:flex">
            <div class="HTMoney1">
          <div class="JENum">{{ DetailData.contractAmount }}<span style="font-size:14px">(万元)</span></div>
          <div class="JEName">合同金额</div>
        </div>
        <div class="HTMoney1">
          <div class="JENum">
            {{ DetailData.paymentMoney ? DetailData.paymentMoney : "--" }}<span style="font-size:14px">(万元)</span>
          </div>
          <div class="JEName">已支付金额</div>
        </div>
        </div>
      </div>
      <el-table
      :data="postList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column style="folat:right" label="序号" type="index" width="80" align="center" />
      <el-table-column
        :label="i.label"
        align="center"
        :prop="i.props"
        show-overflow-tooltip
        v-for="i in payContCloum"
      >
        <template #default="{ row }" v-if="i.props == 'contractType'">
          <dict-tag :options="contract_type" :value="row.contractType" />
        </template>
        <template #default="{ row }" v-if="i.props == 'signTime'">
          {{row.signTime?.substring(0, 10)  }}
        </template>
        <template #default="{ row }" v-if="i.props == 'paidMoney'">
          {{row.paidMoney ||0  }}(万元)
        </template>
        <template #default="{ row }" v-if="i.props == 'notPaidMoney'">
          {{row.notPaidMoney ||0  }}(万元)
        </template>
        <template #default="{ row }" v-if="i.props == 'money'">
          {{row.money ||0  }}(万元)
        </template>
        <template #default="{ row }" v-if="i.props == 'ratio'">
          {{row.ratio ||0  }}%
        </template>
        <template #default="{ row }" v-if="i.props == 'contractType'">
          <dict-tag :options="contract_type" :value="row.contractType" />
        </template>
      </el-table-column>
    </el-table>
    </div>
    
  </div>
</template>
<script setup>
import { workflowProcess } from "@/api/project/qualityRectificationDetails";
import {
  getProjectStatistics,
  projectContractPage
} from "@/api/project/tenderReview";
import {
  projectInfoAdd,
  projectTypeList,
  projectCompany,
  getUserProfile,
  userList,
  projectInfoSubmit,
  projectInfoedit,
} from "@/api/projectInformation";
import { regionList } from "@/api/projectTable";
import {
  onMounted,
  toRefs,
  defineEmits,
  reactive,
  defineProps,
  defineExpose,
  inject,
} from "vue";
import { payContCloum } from "@/utils/cloums";
const { proxy } = getCurrentInstance();
const {
  contract_type,
  project_status,
  project_operation_pattern,
  build_status,
  drainage_partition,
} = proxy.useDict(
  "contract_type",
  "project_status",
  "project_operation_pattern",
  "build_status",
  "drainage_partition"
);
const emits = defineEmits();
const typeList = inject("typeList1");
let areCode = ref(0);
const postList = ref([]);
const project_TypeId = ref([]);
const unit_list = ref([]);
const personList = ref([]);
const queryParams=ref({
    pageNum: 1,
    pageSize: 10})
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const DetailData=ref({})
//头部点击
function tabsNumClick(v) {
  tabsNum.value = v;
}
const submit = () => {
  proxy.$refs.ruleForm.validate((valid) => {
    if (valid) {
      // let { dealUsers, pushUsers } = FormList.value;
      // if (dealUsers?.length > 0 && Array.isArray(dealUsers)) {
      //   FormList.value.dealUsers = dealUsers?.join(",");
      // }
      // if (pushUsers?.length > 0 && Array.isArray(pushUsers)) {
      //   FormList.value.pushUsers = pushUsers.join(",");
      // }
      FormList.value.content = JSON.stringify([
        FormList.value.content[0],
        { type: "new", projectInfo: { ...FormList.value } },
      ]);
      console.log(JSON.stringify(FormList.value.content));
      console.log(FormList.value, "typeListtypeList");
      if (typeList.type == 3) {
        FormList.value.operation = "add";
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
            proxy.$refs.ruleForm.resetFields();
          }
        });
      } else if (typeList.type == 5) {
        FormList.value.operation = "update";
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
            proxy.$refs.ruleForm.resetFields();
          }
        });
      }
    }
  });
};
function closeds() {
  proxy.$refs.ruleForm.resetFields();
}
defineExpose({ submit, closeds });
const projectTypeListM = async () => {
  let { data } = await projectTypeList();
  project_TypeId.value = data;
};
const projectCompanyM = async () => {
  let { data } = await projectCompany();
  unit_list.value = data;
};
const getUserProfileM = async () => {
  let { data } = await getUserProfile();
  // unit_list.value = data
};
const userListM = async () => {
  let { data } = await userList();
  personList.value = data;
  FormList.value = typeList.value;
};
//获取合同
const getProjectStatisticsM = async (id) => {
  let { data } = await getProjectStatistics(id);
  DetailData.value = data;
};
const  projectContractPageM=async(p)=>{ 
  let {data}=await projectContractPage(p)
  postList.value = data
}
onMounted(() => {
  projectTypeListM();
  projectCompanyM();
  userListM();
  getProjectStatisticsM(typeList.value.projectNo);
  projectContractPageM({ projectNo:typeList.value.projectNo,pageSize:99999,pageNum:1})

});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  .top {
    display:flex;
  }
}
.LeftBox1 {
      width: 280px;
      margin-right: 30px;
      height: 100%;
      float: left;

      .HTNo {
        width: 340px;
        // text-align: center;
        font-size: 16px;
      }

      .HTMoney1 {
        width: 170px;
        height: 60px;
        float: left;
        display:inline-block;
        text-align: center;

        .JENum {
          width: 100%;
          height: 40px;
          font-size: 18px;
          font-weight: 400;
          color: #409eff;
        }

        .JEName {
          width: 100%;
          height: 40px;
          font-size: 16px;
          color: black;
        }
      }
    }

</style>