<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" />
        <el-table-column :label="i.label" :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 { getProjectStatistics, projectContractPage } from '@/api/project/tenderReview';
import { projectInfoAdd, projectTypeList, projectCompany, getUserProfile, userList } from '@/api/project/projectInformation';
import { payContCloum } from '@/utils/cloums';
const { proxy } = getCurrentInstance();
const { contract_type } = proxy.useDict('contract_type');
const emits = defineEmits();
const typeList = inject('typeList1');
const postList = ref([]);
const project_TypeId = ref([]);
const unit_list = ref([]);
const personList = ref([]);
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const DetailData = ref({});
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>