<template>
  <Dialog
    title="工程列表"
    :visible="dialogVisible"
    width="70%"
    @change-visible="changeVisible"
  >
    <div class="dialog-body-container">
      <el-form inline :model="searchForm" class="search-form">
        <el-form-item label="区域：">
          <el-select v-model="searchForm.project_place1" clearable>
            <el-option
              v-for="region in regions"
              :label="region.name"
              :value="region.id"
              :key="region.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="扬尘监测：">
          <el-select v-model="searchForm.noise_status" clearable>
            <el-option label="已接入" value="1"></el-option>
            <el-option label="未接入" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="视频监控：">
          <el-select v-model="searchForm.monitor_status" clearable>
            <el-option label="已接入" value="1"></el-option>
            <el-option label="未接入" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="施工单位：">
          <el-input v-model="searchForm.unit_name"></el-input>
        </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"
        :auto-load="false"
      >
        <template #noise_status="{ data }">
          <img
            class="icon-img"
            v-if="data.noise_status == 1"
            src="@/assets/images/common/pm10-icon-active.png"
            alt=""
            @click="openProjectDetail('Dust', data)"
          />
          <img
            class="icon-img"
            v-else
            src="@/assets/images/common/pm10-icon.png"
            alt=""
            @click="showErrPm"
          />
        </template>
        <template #monitor_status="{ data }">
          <img
            class="icon-img"
            v-if="data.monitor_status == 1"
            src="@/assets/images/common/video-icon-active.png"
            alt=""
            @click="openProjectDetail('VideoSupervisory', data)"
          />
          <img
            class="icon-img"
            v-else
            src="@/assets/images/common/video-icon.png"
            alt=""
            @click="showErrVideo"
          />
        </template>
      </DialogApiDataTable>
    </div>

    <ProjectDialog
      v-if="projectDialogVisible"
      :visible="projectDialogVisible"
      :project-name="currentProjectName"
      :project-id="projectId"
      @change-visible="(val) => (projectDialogVisible = val)"
    ></ProjectDialog>
  </Dialog>
</template>
<script>
import { getRegions, getProjectList } from "@/api/index";
import ProjectDialog from "@/views/DataStatis/project/Index.vue";
export default {
  name: "ProjectListDialog",
  components: { ProjectDialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    areaId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      regions: [],
      searchForm: {},
      columns: [
        { label: "区域", prop: "project_region_name" },
        { label: "工程名称", prop: "project_name" },
        { label: "施工单位", prop: "sg_unit_name" },
        { label: "面积(㎡)", prop: "area" },
        { label: "造价(万元)", prop: "project_currency" },
        { label: "扬尘监测", prop: "noise_status", hasSlot: true },
        { label: "视频监控", prop: "monitor_status", hasSlot: true },
      ],
      api: getProjectList,
      projectDialogVisible: false,
      currentProjectName: "",
      projectId: "",
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("change-visible", val);
      },
    },
  },
  methods: {
    changeVisible(val) {
      console.log(val);
      this.dialogVisible = val;
    },
    handleSearch() {
      this.$refs.table.getData();
    },
    showErrPm() {
      this.$message.error("扬尘暂未接入");
    },
    showErrVideo() {
      this.$message.error("视频暂未接入");
    },
    openProjectDetail(type, data) {
      this.currentProjectName = data.project_name;
      this.projectId = data.id;
      this.projectDialogVisible = true;
      this.$eventBus.$emit("switchTab", type);
    },
  },
  mounted() {
    getRegions().then((res) => {
      this.regions = res.data;
    });
  },

  watch: {
    visible(val) {
      if (val) {
        this.searchForm = {
          project_place1: this.areaId,
        };
        this.$nextTick(() => {
          this.$refs.table.getData();
        });
      }
    },
  },
};
</script>
    <style lang="less" scoped>
::v-deep .search-form .el-select {
  width: 100px !important;
}

::v-deep .el-input .el-input__inner {
  background: #072350 !important;
  border: none !important;

  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.dialog-body-container {
  height: calc(100% - 50px);
}
.icon-img {
  width: 50px;
  vertical-align: top;
  cursor: pointer;
}
</style>