<template>
  <div class="app-container">
    <!-- 投标结果 -->
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryRef" inline v-show="showSearch">
      <el-form-item label="项目名称:" style="width: 20%">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <!-- <br /> -->
      <el-form-item label="中标单位:">
        <el-input
          style="width: 240px"
          v-model="queryParams.successfulUnitName"
          placeholder="请输入中标单位"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="投标时间:">
        <el-date-picker
          style="width: 240px"
          v-model="queryParams.timer"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"

          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="开标日期:">
        <el-date-picker
          style="width: 240px"
          v-model="queryParams.timer2"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"

          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['system:post:add']"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:post:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['system:post:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['system:post:export']">导出</el-button>
            </el-col> -->
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="postList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column
        :label="i.label"
        align="center"
        :prop="i.props"
        show-overflow-tooltip
        v-for="i in tenderResultCloum"
      >
        <template #default="{ row }" v-if="i.props == 'successfulMoney'">
         {{ row.successfulMoney }}(万元)
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="250"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="View"
            @click="handleDetails(scope.row)"
            v-hasPermi="['system:post:View']"
            >详情</el-button
          >
          <el-button
            link
            type="warning"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:post:edit']"
            >修改</el-button
          >
          <el-button
            link
            type="danger"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:post:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="open" width="68%">
      <el-form
        ref="postRef"
        :model="form"
        :rules="rules"
        label-width="140px"
        :inline="true"
      >
        <el-form-item label="项目名称:" prop="projectNo" style="width: 45%">
          <el-select
            v-model="form.projectNo"
            placeholder="请选择请选择项目"
            clearable
            style="width: 100%"
            @change="TouBiaoInfo(form.projectNo, 'add')"
          >
            <el-option
              v-for="dict in ProjectListData"
              :key="dict.projectNo"
              :label="dict.projectName"
              :value="dict.projectNo"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="项目编号:" style="width: 45%">
          <el-input
            disabled
            v-model="form.projectNo"
            placeholder="请先选择项目名称"
          />
        </el-form-item>
        <br />
        <el-form-item label="投标编号:" style="width: 45%">
          <el-select
            v-model="form.tenderExaminationId"
            placeholder="请选择投标编号"
            clearable
            style="width: 100%"
            @change="BiaoShuChange"
          >
            <el-option
              v-for="dict in BiaoShuList"
              :key="dict.tenderNumber"
              :label="dict.tenderNumber"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="中标金额:" style="width: 45%">
          <el-input
            v-model.number="form.successfulMoney"
            placeholder="请输入中标金额"
            style="width: 100%"
          >
            <template #append>万元</template>
          </el-input>
        </el-form-item>
        <br />
        <el-form-item label="投标时间:" style="width: 45%">
          <el-date-picker
            style="width: 100%"
            v-model="form.bidTime"
            type="date"
            placeholder="请选择投标时间"
            format="YYYY-MM-DD"
            disabled
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="开标日期:" style="width: 45%">
          <el-date-picker
            style="width: 100%"
            v-model="form.bidOpenDate"
            type="date"
            placeholder="请选择开标日期"
            format="YYYY-MM-DD"
            disabled
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="中标单位:" style="width: 45%">
          <el-input
            v-model="form.tenderCompanyName"
            placeholder="请输入中标单位"
            disabled
          />
        </el-form-item>
        <el-form-item label="项目建设内容:" style="width: 93%">
          <el-input
            v-model="form.projectConstructionContent"
            placeholder="请输入项目建设内容"
            :autosize="{ minRows: 5, maxRows: 7 }"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="附件" style="width: 93%;margin-top: 10px;">
          <el-upload
            v-model:file-list="fileList1"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-preview="handlePreview"
            style="width: 100%"
            :before-remove="beforeRemove"
          >
            <el-button type="primary">选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">支持CSV格式,可一次性上传多个文件</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保 存</el-button>
          <el-button @click="cancel">关 闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      title="标书审查详情"
      v-model="open2"
      width="68%"
      id="DiaLogBox"
    >
      <!-- 信息头部 -->
      <div class="DetailHeader">
        <span class="DetailName">{{ DetailData.projectName }}</span>
        <span class="DetailTypeName">{{
          DetailData.projectTypeName ? DetailData.projectTypeName : "海绵道路"
        }}</span>
        <span class="DetailNo">{{ DetailData.projectNo }}</span>
      </div>
      <!-- 金额统计 -->
      <div class="DetailMoney">
        <div class="MoneyList">
          <div class="leftBox">
            <div
              class="Left_top"
              :title="DetailData.contractMoney"
              style="color: #0f69ff"
            >
              {{ DetailData.contractMoney }}
            </div>
            <div class="Left_Bottom">合同金额(万元)</div>
          </div>
          <div class="RightBox"></div>
        </div>
        <div class="MoneyList">
          <div class="leftBox">
            <div
              class="Left_top"
              :title="DetailData.paidMoney"
              style="color: #28d290"
            >
              {{ DetailData.paidMoney }}
            </div>
            <div class="Left_Bottom">已经支付(万元)</div>
          </div>
          <div class="RightBox">
            <el-progress
              type="circle"
              color=""
              width="50"
              class="progressDom"
              :percentage="DetailData.paymentRatio"
              status="success"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
              </template></el-progress
            >
          </div>
        </div>
        <div class="MoneyList">
          <div class="leftBox">
            <div
              class="Left_top"
              :title="DetailData.notPaidMoney"
              style="color: #f15261"
            >
              {{ DetailData.notPaidMoney }}
            </div>
            <div class="Left_Bottom">未支付(万元)</div>
          </div>
          <div class="RightBox"></div>
        </div>
      </div>
      <!-- 项目基本信息 -->
      <div class="ProjectInfo">
        <p class="ProjectInfoTitle">项目基本信息</p>
        <div class="InfoList">
          <div class="InfoListLable">项目名称</div>
          <div class="InfoListvalue">{{ DetailData.projectName }}</div>
        </div>
        <div class="InfoList">
          <div class="InfoListLable">项目编号</div>
          <div class="InfoListvalue">{{ DetailData.projectNo }}</div>
        </div>
        <div class="InfoList">
          <div class="InfoListLable">投标编号</div>
          <div class="InfoListvalue">{{ DetailData.tenderExaminationId }}</div>
        </div>
        <div class="InfoList">
          <div class="InfoListLable">中标金额</div>
          <div class="InfoListvalue">{{ DetailData.successfulMoney }}</div>
        </div>
        <div class="InfoList">
          <div class="InfoListLable">投标时间</div>
          <div class="InfoListvalue">{{ DetailData.bidTime }}</div>
        </div>
        <div class="InfoList">
          <div class="InfoListLable">开标日期</div>
          <div class="InfoListvalue">{{ DetailData.bidOpenDate }}</div>
        </div>
        <div class="InfoList">
          <div class="InfoListLable">中标单位</div>
          <div class="InfoListvalue">{{ DetailData.tenderCompanyName }}</div>
        </div>
        <div class="InfoList InfoList2">
          <div class="InfoListLable">项目建设内容</div>
          <div class="InfoListvalue">
            {{ DetailData.projectConstructionContent }}
          </div>
        </div>
        <div class="InfoList3">
          <div class="InfoListLable">附件</div>
          <div class="InfoListvalue" style="margin-top: 10px;">
            <el-upload
              v-model:file-list="fileList1"
              class="upload-demo"
              action="/system/upload"
              disabled
              multiple
              :on-preview="handlePreview"
            >
            </el-upload>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open2 = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Post">
import { ElMessage, ElMessageBox } from "element-plus";
import {
  projectTenderResultPage,
  projectTenderResultAdd,
  projectTenderResultIDS,
  projectTenderResultSelectDetail,
  projectTenderResultEdit,
  FileSystemList,
  projectTenderExaminationtList,
  projectInfoList,
} from "@/api/project/tenderReview";
import { getToken } from "@/utils/auth";
import { ref } from "vue";
import { tenderResultCloum } from "@/utils/cloums";
const { proxy } = getCurrentInstance();

const postList = ref([]);
const open = ref(false);
const open2 = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const dialogReadonly = ref(false);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    successfulUnitName: undefined,
    projectName: undefined,
    timer: "",
    timer2: "",
    bidStartTime: "",
    bidEndTime: "",
    bidOpenStartDate: "",
    bidOpenEndDate: "",
  },
  rules: {
    projectNo: [
      { required: true, message: "项目名称不能为空", trigger: "blur" },
    ],
  },
  DetailData: {
    id: "1673260631415787522",
    tenderExaminationId: "1673136855483052034",
    projectNo: "AA0022335123",
    projectName: "2323",
    projectTypeName: "",
    contractMoney: "10000.82",
    paidMoney: "0",
    notPaidMoney: "10000.82",
    bidTime: "2023-06-26",
    bidOpenDate: "2023-06-01",
    tenderNumber: "TB2023062600001",
    successfulMoney: "159624136.25",
    tenderCompanyName: "投标公司名称",
    projectConstructionContent: "这里是项目建设内容",
    bidSummarize: "这里是修改的总结",
    ll: "0",
  },
});

const { queryParams, form, rules, DetailData } = toRefs(data);
const shortcuts = [
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
const BiaoShuList = ref([]);
const ProjectListData = ref([]);
const dialogType = ref("");
const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});
/** 文件上传 */
const fileList1 = ref([]);
function handlePreview(file) {
  console.log(file);
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function beforeRemove(file) {
  return true
}
/** 查询列表 */
function getList() {
  loading.value = true;
  projectTenderResultPage(queryParams.value).then((response) => {
    postList.value = response.data;
    total.value = response.total;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    projectNo: undefined,
    tenderExaminationId: undefined,
    successfulMoney: undefined,
    tenderCompanyName: undefined,
    projectConstructionContent: undefined,
    fileSaveRequestList: [],
    id: undefined,
    bidTime: undefined,
    bidOpenDate: undefined,
  };
  BiaoShuList.value = [];
  fileList1.value = [];
  proxy.resetForm("postRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  if (queryParams.value.timer) {
    queryParams.value.bidStartTime = queryParams.value.timer[0];
    queryParams.value.bidEndTime = queryParams.value.timer[1];
  } else {
    queryParams.value.bidStartTime = "";
    queryParams.value.bidEndTime = "";
  }
  if (queryParams.value.timer2) {
    queryParams.value.bidOpenStartDate = queryParams.value.timer2[0];
    queryParams.value.bidOpenEndDate = queryParams.value.timer2[1];
  } else {
    queryParams.value.bidOpenStartDate = "";
    queryParams.value.bidOpenEndDate = "";
  }
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = { pageNum: 1, pageSize: 10 };
  getList();
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.postId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  dialogType.value = "add";
  title.value = "投标结果添加";
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const id = row.id || ids.value;
  dialogType.value = "edit";
  projectTenderResultSelectDetail(id).then((response) => {
    form.value = response.data;
    TouBiaoInfo(form.value.projectNo, "edit");
    form.value.fileSaveRequestList = [];
    open.value = true;
    title.value = "修改投标结果";
  });
  // 获取文件列表
  FileSystemList({
    refId: id,
    refType: "proProjectTenderResult",
  }).then((response) => {
    response.data.forEach((element) => {
      fileList1.value.push(element);
    });
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["postRef"].validate((valid) => {
    if (valid) {
      fileList1.value.forEach((element) => {
        // 基本信息
        if (element.hasOwnProperty("response")) {
          element.response.data.refType = "proProjectTenderResult";
          form.value.fileSaveRequestList.push(element.response.data);
        } else {
          form.value.fileSaveRequestList.push(element);
        }
      });
      if (form.value.id != undefined) {
        projectTenderResultEdit(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        projectTenderResultAdd(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  const id = row.id || ids.value;
  proxy.$modal
    .confirm('是否确认删除编号为"' + id + '"的数据项？')
    .then(function () {
      return projectTenderResultIDS(id);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "system/post/export",
    {
      ...queryParams.value,
    },
    `post_${new Date().getTime()}.xlsx`
  );
}
/**通过项目编号获取投标信息 */
function TouBiaoInfo(projectNo, type) {
  console.log(projectNo);
  let params = {
    projectNo: projectNo,
  };
  if (type == "add") {
    form.value.tenderExaminationId = undefined;
    form.value.bidTime = undefined;
    form.value.projectConstructionContent = undefined;
    form.value.bidOpenDate = undefined;
    form.value.tenderCompanyName = undefined;
  }

  projectTenderExaminationtList(params).then((response) => {
    BiaoShuList.value = response.data;
  });
}
/**选择/修改 标书 */
function BiaoShuChange(val) {
  console.log(val);
  // 通过选择的值去查找当前标书的其他信息并填充至表单

  form.value.bidTime = undefined;
  form.value.projectConstructionContent = undefined;
  form.value.bidOpenDate = undefined;
  form.value.tenderCompanyName = undefined;
  BiaoShuList.value.forEach((element) => {
    if (element.id == val) {
      form.value.projectConstructionContent =
        element.projectConstructionContent;
      form.value.bidTime = element.bidTime;
      form.value.bidOpenDate = element.bidOpenDate;
      form.value.tenderCompanyName = element.tenderCompanyName;
    }
  });
}
/**获取所有的项目数据 */
function loadProjerctListData() {
  projectInfoList().then((response) => {
    ProjectListData.value = response.data;
  });
}

/**详情按钮 */
function handleDetails(row) {
  reset();
  dialogReadonly.value = true;
  const id = row.id || ids.value;
  projectTenderResultSelectDetail(id).then((response) => {
    DetailData.value = response.data;
    open2.value = true;
  });
  // 获取文件列表
  FileSystemList({
    refId: id,
    refType: "proProjectTenderResult",
  }).then((response) => {
    response.data.forEach((element) => {
      fileList1.value.push(element);
    });
  });
}
getList();
loadProjerctListData();
</script>

<style scoped lang="scss">
:deep(.el-dialog__body) {
  background-color: #eef1fb;
  height: auto;
  max-height: 750px;
  overflow: auto;
}

#DiaLogBox {
  .DetailHeader {
    width: 100%;
    height: 54px;
    line-height: 53px;
    box-sizing: border-box;
    border-top: 1px solid #eaeaea;
    background-color: #fff;

    .DetailName {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      margin: 0 10px 0 20px;
    }

    .DetailTypeName {
      width: 66px;
      height: 20px;
      background: #dffff0;
      border: 1px solid #3ad68e;
      border-radius: 2px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #3ad68e;
      margin-right: 20px;
    }

    .DetailNo {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #666666;
    }
  }

  .DetailMoney {
    width: 100%;
    height: 111px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    border-radius: 6px;
    margin-top: 20px;

    .MoneyList {
      width: 230px;
      height: 70px;
      background: #f8faff;
      border: 1px solid #eaeaea;
      border-radius: 2px;
      float: left;
      margin: 20px;
      box-sizing: border-box;
      padding-left: 24px;

      .leftBox {
        width: 130px;
        height: 70px;
        float: left;

        .Left_top {
          width: 100%;
          height: 35px;
          line-height: 40px;
          text-align: left;
          font-size: 24px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .Left_Bottom {
          width: 100%;
          height: 35px;
          line-height: 30px;
          text-align: left;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
        }
      }

      .RightBox {
        float: left;
        width: 70px;
        height: 70px;

        .progressDom {
          width: 50px;
          height: 50px;
          margin: 10px;
        }
      }
    }
  }

  .ProjectInfo {
    width: 100%;
    height: auto;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    border-radius: 6px;
    font-size: 0;
    margin-top: 20px;

    .ProjectInfoTitle {
      width: 100%;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      padding-left: 24px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      margin: 0;
    }

    .InfoList {
      display: inline-block;
      width: 50%;
      height: 42px;
      border: 1px solid #d8ddef;
      box-sizing: border-box;
      // margin-left: 1%;

      .InfoListLable {
        height: 40px;
        line-height: 40px;
        width: 100px;
        float: left;
        background-color: #f3f7ff;
        box-sizing: border-box;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #666666;
        text-align: center;
      }

      .InfoListvalue {
        width: calc(100% - 100px);
        height: 40px;
        line-height: 40px;
        float: left;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        text-align: right;
        padding-right: 10px;
      }
    }

    .InfoList2 {
      width: 100%;
      height: 82px;

      .InfoListLable {
        height: 100%;
        height: 80px;
        line-height: 80px;
      }

      .InfoListvalue {
        height: 100%;
        height: 80px;
      }
    }

    .InfoList3 {
      width: 100%;
      min-height: 60px;
      height: auto;

      .InfoListLable {
        width: 100px;
        float: left;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #000000;
        text-align: center;
        line-height: 60px;
      }

      .InfoListvalue {
        float: left;
        width: calc(100% - 100px);
        height: auto;
      }
    }
  }
}
</style>