<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">
          <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"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <DialogApiDataTable
      :has-index="true"
      ref="table"
      :columns="columns"
      :parameters="searchForm"
      :api="api"
    >
      <template #quality_check_score="{ data }">
        <span
          :style="{ color: data.quality_check_score < 80 ? '#f86262' : '' }"
        >
          {{ data.quality_check_score }}
        </span>
      </template>
      <template #quality_score="{ data }">
        <span :style="{ color: data.quality_score < 80 ? '#f86262' : '' }">
          {{ data.quality_score }}
        </span>
      </template>
      <template #quality_total_score="{ data }">
        <span
          :style="{ color: data.quality_total_score < 80 ? '#f86262' : '' }"
        >
          {{ data.quality_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: "300px",
          align: "left",
        },
        { label: "所属地区", prop: "city_name" },
        {
          label: "质量检测得分",
          prop: "quality_check_score",
          hasSlot: true,
          sortable: true,
        },
        {
          label: "质量评定得分",
          prop: "quality_score",
          hasSlot: true,
          sortable: true,
        },
        {
          label: "总得分",
          prop: "quality_total_score",
          hasSlot: true,
          sortable: true,
        },
      ],
      dateRange: [],
      api: getProjectList,
      cities: [],
    };
  },
  mounted() {
    getMapData().then((res) => {
      this.cities = res.data;
    });
  },
  methods: {
    handleSearch() {
      this.$refs.table.getData();
    },
    openPdf(url) {
      window.open(url);
    },
  },
};
</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>