<script>
import { getZcqk, getJdjc, getWgpc, getWbqk } from "@/api/iot.js";
import punishmentMixin from "@/mixin/unit.js";
import moment from "moment";
export default {
  name: "MaintenanceModalContent",
  mixins: [punishmentMixin],
  data() {
    return {
      options: [],
      fxdjList: [],
      tableData: [],
      unitList: [],
      zqsj: null,
      params: {
        pageSize: 10,
        pageNum: 1,
        jzid: null,
      },
      total: 0,
      search: "",
      checked: 0,
    };
  },
  props: {
    qy: String,
    default: Object,
  },
  watch: {
    default: {
      handler() {
        console.log(this.default);
        const params = JSON.parse(JSON.stringify(this.params));
        params.jzid = this.default.jzid;
        this.checked = this.default.checked;
        this.params = params;
        this.funList();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    change(idx) {
      this.checked = idx;
      this.funList();
    },
    funList() {
      const params = JSON.parse(JSON.stringify(this.params));
      let func = null;
      if (this.checked === 0) {
        func = getZcqk;
      } else if (this.checked === 1) {
        func = getJdjc;
      } else if (this.checked === 2) {
        func = getWgpc;
      } else if (this.checked === 3) {
        func = getWbqk;
      }
      func(params).then((res) => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.funList();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.funList();
    },
    resetForm() {
      this.params = {
        pageSize: 10,
        pageNum: 1,
        scrj: null,
      };
      this.funList();
    },
  },
  created() {
    console.log(this.default);
    const params = JSON.parse(JSON.stringify(this.params));
    params.jzid = this.default.jzid;
    this.checked = this.default.checked;
    this.params = params;

    this.funList();
  },
};
</script>

<template>
  <div>
    <!-- 搜索 -->
    <div class="maintenance-supervision">
      <div class="maintenance-supervision_header">
        <el-form class="form" v-model="params">
          <div class="maintenance-supervision_header">
            <button-group @change="change" :defaultValue="checked">
              <button-group-item> 自查情况 </button-group-item>
              <button-group-item> 监督检查 </button-group-item>
              <button-group-item> 网格排查 </button-group-item>
              <button-group-item> 维保情况 </button-group-item>
            </button-group>
          </div>
        </el-form>
        <div class="btn-item">
          <el-button @click="funList">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </div>
    </div>

    <!-- 自查情况 -->
    <basic-table
      :data="tableData"
      style="text-align: center"
      v-if="checked === 0"
    >
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column
        label="巡查日期"
        width="100"
        prop="createDate"
      ></el-table-column>
      <el-table-column
        prop="type"
        label="巡查类型"
        min-width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="巡查人"
        show-overflow-tooltip
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="taskFlag"
        label="巡查结果"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.taskFlag === 2" style="color: #23f59d"
            >正常</span
          >
          <span v-if="scope.row.taskFlag === 1" style="color: #df575b"
            >异常</span
          >
          <span v-if="scope.row.taskFlag === 0" style="color: #df575b"
            >未检</span
          >
        </template>
      </el-table-column>
    </basic-table>

    <!-- 监督检查 -->
    <basic-table
      :data="tableData"
      style="text-align: center"
      v-if="checked === 1"
    >
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column
        label="检查日期"
        width="100"
        prop="startTime"
      ></el-table-column>
      <el-table-column
        prop="jcdw"
        label="检查单位"
        min-width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="bjcdwmc"
        label="检查对象"
        show-overflow-tooltip
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="jclx"
        label="检查类型"
        show-overflow-tooltip
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="jcjg"
        label="检查结果"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.jcjg === '合格'" style="color: #23f59d"
            >合格</span
          >
          <span v-else-if="scope.row.jcjg === '不合格'" style="color: #df575b"
            >不合格</span
          >
          <span v-else style="color: #df575b">未检</span>
        </template>
      </el-table-column>
    </basic-table>

    <!-- 网格排查 -->
    <basic-table
      :data="tableData"
      style="text-align: center"
      v-if="checked === 2"
    >
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column
        label="检查日期"
        width="100"
        prop="djsj"
      ></el-table-column>
      <el-table-column
        prop="zgzrdw"
        label="排查单位"
        min-width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="zgzrr"
        label="排查人员"
        show-overflow-tooltip
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="sl"
        label="发现隐患数"
        show-overflow-tooltip
        min-width="100"
      >
        <template>{{ 1 }}</template>
      </el-table-column>
    </basic-table>

    <!-- 维保情况 -->
    <basic-table
      :data="tableData"
      style="text-align: center"
      v-if="checked === 3"
    >
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column
        label="维保日期"
        width="100"
        prop="wbsj"
      ></el-table-column>
      <el-table-column
        prop="wbzq"
        label="维保周期"
        min-width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="xcjcr"
        label="现场检查人"
        show-overflow-tooltip
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="zyzt"
        label="维保结果"
        show-overflow-tooltip
        min-width="100"
      ></el-table-column>
    </basic-table>

    <br />
    <basic-pagination
      layout="->,prev, pager, next, sizes,jumper"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.pageSize"
      :current-page="params.PageNum"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="less">
.maintenance-supervision {
  // padding: 10px 10px 0px 20px;
  ::v-deep(.el-input__inner) {
    width: 200px !important;
    border: none;
    background: linear-gradient(
      360deg,
      rgba(0, 148, 255, 0.5) 0%,
      rgba(0, 148, 255, 0.31) 100%
    );
    color: #fff;
    height: 30px !important;
  }
  ::v-deep(.el-button) {
    border: none;
    background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
    color: #fff;
  }
  .maintenance-supervision_header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // border-bottom: 1px solid #154956;
    padding-bottom: 10px;
    font-size: 12px;
    color: rgb(79, 149, 186);
    // .select-item{
    //   margin-right: 20px;
    // }
  }
  .btn-item {
    margin-bottom: 10px;
  }

  .warp {
    height: 520px;
    margin: 0 auto;
    overflow: hidden;
    .item {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      cursor: pointer;
    }
  }
  /deep/.el-input__inner {
    background-color: #184254;
    width: 150px;
    height: 30px;
    margin-bottom: 5px;
  }
  /deep/.el-button {
    width: 100px;
    height: 32px;
    font-size: 14px;
    line-height: 2px;
    // margin: 0 20px 0 30px;
    color: #fff;
    border-radius: 5px;
    border: none;
  }
  /deep/.el-button:hover {
    color: rgb(80, 147, 224);
  }
  /deep/.select_btn {
    position: absolute;
    top: 225px;
    right: 320px;
    //下拉框
  }
  /deep/.el-input {
    width: 150px;
    // margin-left: 20px;
  }
  .header {
    color: #fff;
    height: 33px !important;
    line-height: 33px !important;
    background-color: rgba(0, 163, 255, 0.3) !important;
    color: #61dbff;
    margin-top: 15px;
    margin-bottom: 6px;
  }

  .row,
  li,
  a {
    display: block;
    height: 39px;
    line-height: 39px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.2);
    .time,
    .num,
    .person,
    .result {
      flex: 0.33;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .num {
      flex: 0.15;
    }
  }
  .inp {
    margin-left: 20px;
  }
}
.unit-bulid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
}
.unit-num {
  width: 200px;
  height: 109px;
  border: 1px solid #0463a7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  line-height: 59px;
}
.form {
  flex-grow: 1;
  width: 80%;
  display: flex;
}
::v-deep(.el-range-separator) {
  line-height: 24px !important;
  color: #ffffff !important;
}
::v-deep(.el-date-editor .el-range-input) {
  color: #ffffff !important;
}
::v-deep(.el-date-editor .el-range__icon) {
  line-height: 24px !important;
}
::v-deep(.el-date-editor .el-range__close-icon) {
  line-height: 24px !important;
}
</style>
