<template>
  <div class="dialog-body-container">
    <el-form inline :model="searchForm" class="search-form">
      <el-form-item label="所在地区：">
        <el-select v-model="searchForm.city_id" size="small">
          <el-option
            v-for="city in cities"
            :label="city.name"
            :value="city.id"
            :key="city.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="工程名称：">
        <el-input v-model="searchForm.project_name" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch" size="small"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <DialogApiDataTable
      :has-index="true"
      ref="table"
      :columns="columns"
      :parameters="searchForm"
      :api="api"
    >
      <template #regulation_score="{ data }">
        <span
          :style="{
            color: data.regulation_score < warningNum[2] ? '#f86262' : '',
          }"
        >
          {{ data.regulation_score }}
        </span>
      </template>
      <template #quality_check_score="{ data }">
        <span
          :style="{
            color: data.quality_check_score < warningNum[4] ? '#f86262' : '',
          }"
        >
          {{ data.quality_check_score }}
        </span>
      </template>
      <template #quality_score="{ data }">
        <span
          :style="{
            color: data.quality_score < warningNum[5] ? '#f86262' : '',
          }"
        >
          {{ data.quality_score }}
        </span>
      </template>
      <template #excellence_score="{ data }">
        <span
          :style="{
            color: data.excellence_score < warningNum[3] ? '#f86262' : '',
          }"
        >
          {{ data.excellence_score }}
        </span>
      </template>
      <template #total_score="{ data }">
        <span
          :style="{ color: data.total_score < warningNum[6] ? '#f86262' : '' }"
        >
          {{ data.total_score }}
        </span>
      </template>
    </DialogApiDataTable>
  </div>
</template>
<script>
import { getProjectList, getMapData } from "@/api/dataStatis";

export default {
  name: "WarningMsg",
  props: {
    projectId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      searchForm: {},
      columns: [
        {
          label: "工程名称",
          prop: "project_name",
          minWidth: "220px",
          align: "left",
        },
        { label: "所属地区", prop: "city_name" },
        {
          label: "政府监管得分",
          prop: "regulation_score",
          hasSlot: true,
          sortable: true,
        },
        {
          label: "质量检测得分",
          prop: "quality_check_score",
          hasSlot: true,
          sortable: true,
        },
        {
          label: "质量评定得分",
          prop: "quality_score",
          hasSlot: true,
          sortable: true,
        },
        {
          label: "创新创优得分",
          prop: "excellence_score",
          hasSlot: true,
          sortable: true,
        },
        {
          label: "整体得分",
          prop: "total_score",
          hasSlot: true,
          sortable: true,
        },
      ],

      api: getProjectList,
      cities: [],
      warningNum: window.warningNum,
    };
  },
  mounted() {
    getMapData().then((res) => {
      this.cities = res.data;
    });
  },
  methods: {
    handleSearch() {
      this.$refs.table.getData();
    },
    openPdf(url) {
      window.open(url);
    },
    changeTime(tr) {
      this.searchForm.start_time = tr[0] ? tr[0] : "";
      this.searchForm.end_time = tr[1] ? tr[1] : "";
    },
  },
};
</script>
  <style lang="less" scoped>
.search-form {
  margin: 20px 0 0px 0;
}

.blue {
  color: #0178ff;
  &:hover {
    cursor: pointer;
  }
}
.dialog-body-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>