<template>
  <div class="app-container">
    <div style="width: 100%;height: 10em;">
      <div class="second-div">
        <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
          <img src="../../../assets/hidden.png" width="40%" style="margin-top: 2rem;">
          <p>隐患数量</p>
        </div>
        <div style="width: 50%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{hiddenObj.hiddenTotal}}</div>
      </div>
      <div class="second-div">
        <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
          <img src="../../../assets/hidden.png" width="40%" style="margin-top: 2rem;">
          <p>已完成数量</p>
        </div>
        <div style="width: 50%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{hiddenObj.completedTotal}}</div>
      </div>
      <div class="second-div">
        <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
          <img src="../../../assets/hidden.png" width="40%" style="margin-top: 2rem;">
          <p>未完成数量</p>
        </div>
        <div style="width: 50%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{hiddenObj.incompleteTotal}}</div>
      </div>
      <div class="second-div">
        <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
          <img src="../../../assets/yh1.png" width="40%" style="margin-top: 2rem;">
          <p>一级隐患</p>
        </div>
        <div style="width: 50%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{hiddenObj.oneLevelTotal}}</div>
      </div>
      <div class="second-div">
        <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
          <img src="../../../assets/yh2.png" width="40%" style="margin-top: 2rem;">
          <p>二级隐患</p>
        </div>
        <div style="width: 50%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{hiddenObj.twoLevelTotal}}</div>
      </div>
      <div class="second-div">
        <div style="width: 50%;height: 100%; text-align: center;float: left;font-size: 15px;">
          <img src="../../../assets/yh3.png" width="40%" style="margin-top: 2rem;">
          <p>三级隐患</p>
        </div>
        <div style="width: 50%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{hiddenObj.threeLevelTotal}}</div>
      </div>
    </div>

    <div style="width: 100%; padding: 30px 10px 0px 15px;">
      <el-table v-loading="loading" :data="hiddenList" >
        <el-table-column label="隐患名称" align="center" prop="hiddenTitle" width="200px"/>
        <el-table-column label="隐患等级" align="center" prop="hiddenType">
          <template slot-scope="scope">
            <span v-if="scope.row.hiddenType == '1'">一级隐患</span>
            <span v-if="scope.row.hiddenType == '2'">二级隐患</span>
            <span v-if="scope.row.hiddenType == '3'">三级隐患</span>
          </template>
        </el-table-column>
        <el-table-column label="隐患位置" align="center" prop="hiddenLocation" width="300px"/>
        <el-table-column label="隐患发现人员" align="center" prop="hiddenFindPeople"/>
        <el-table-column label="发现时间" align="center" prop="hiddenFindDate" width="150px"/>
        <el-table-column label="处理方案" align="center" prop="dealPlanUrl" width="150px">
          <template slot-scope="scope">
          <span
            class="dbtn"
            @click="checkFile(scope.row.dealPlanUrl)"
            v-if="scope.row.dealPlan != ''"
          >
            <i class="el-icon el-icon-view"></i>查看/下载
          </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="整治情况" align="center" prop="remediation" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.remediation == '1'">已完成</span>
            <span v-if="scope.row.remediation == '2'">未完成</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="showDetail(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body @cancel="cancel" @close="cancel">
        <el-row>
          <el-col :span="14">
            <el-form ref="detailForm" :model="detailForm" label-width="120px">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="隐患名称:">
                    <font>{{detailForm.hiddenTitle}}</font>
                  </el-form-item>
                  <el-form-item label="隐患发现人员:">
                    <font>{{detailForm.hiddenFindPeople}}</font>
                  </el-form-item>
                  <el-form-item label="发现时间:">
                    <font>{{detailForm.hiddenFindDate}}</font>
                  </el-form-item>
                </el-col>
                <el-col :span="13">
                  <el-form-item label="隐患等级:">
                    <font v-if="detailForm.hiddenType == '1'">一级隐患</font>
                    <font v-if="detailForm.hiddenType == '2'">二级隐患</font>
                    <font v-if="detailForm.hiddenType == '3'">三级隐患</font>
                  </el-form-item>
                  <el-form-item label="隐患位置:">
                    <font>{{detailForm.hiddenLocation}}</font>
                  </el-form-item>
                  <el-form-item label="处理方案:">
                    <span class="dbtn" @click="checkFile(detailForm.dealPlanUrl)" v-if="detailForm.dealPlan != ''">
                      <i class="el-icon el-icon-view"></i>查看/下载
                    </span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="隐患内容:">
                  <font>{{detailForm.hiddenContent}}</font>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="整治情况:">
                  <font v-if="detailForm.remediation == '1'">已完成</font>
                  <font v-if="detailForm.remediation == '2'">未完成</font>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="备注信息:">
                  <font v-if="detailForm.remarks != '' && detailForm.remarks != null">{{detailForm.remarks}}</font>
                  <font v-else> - </font>
                </el-form-item>
              </el-row>
            </el-form>
          </el-col>

          <el-col :span="9">
            <div style="width: 100%;height: 390px;margin-top: -25px; border: 1px solid rgb(218, 213, 213);margin-bottom: 10px;">
              <div style="width: 100%;height: 100%" id="hiddenContainer"></div>
            </div>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { hiddenStatistic } from "@/api/statistic/statisticAnalysis";
  import { listHidden, getHidden } from "@/api/standingBook/hidden";
  import { EditorMap } from "@/utils/mapClass/getPath.js";

  export default {
    name: "HiddenStatisticAnalysis",
    components: {
    },
    data() {
      return {
        // 统计数据
        hiddenObj: {},
        // 遮罩层
        loading: true,
        // 隐患台账表格数据
        hiddenList: [],
        // 总条数
        total: 0,
        // 地图
        map: null,
        devicePos: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        detailForm: {},
      };
    },
    created() {
    },
    mounted() {
      this.getStatiData();
      this.getList();
    },
    methods: {
      getStatiData() {
        hiddenStatistic().then(response => {
          this.hiddenObj = response.data;
          console.log("this.hiddenObj",this.hiddenObj)
        });
      },
      getList() {
        this.loading = true;
        listHidden(this.queryParams).then(response => {
          this.hiddenList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      checkFile(url) {
        window.open(url,'_blank');
      },
      reset() {
        this.detailForm = {
          hiddenId: null,
          hiddenTitle: null,
          hiddenContent: null,
          hiddenLocation: null,
          longitude:null,
          latitude: null,
          hiddenType: null,
          hiddenFindPeople: null,
          hiddenFindDate: null,
          dealPlan: null,
          remediation: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          isDel: null,
          remarks: null
        };
        this.resetForm("detailForm");
        this.devicePos = [];
      },
      /** 详细信息跳转 */
      showDetail(row) {
        this.reset();
        getHidden(row.hiddenId).then(response => {
          this.detailForm = response.data;
          this.devicePos = [this.detailForm.longitude, this.detailForm.latitude];
          console.log("this.devicePos",this.devicePos);
          this.open = true;
          this.title = "隐患整治台账详情";

          this.$nextTick(() => {
            this.map = new EditorMap("hiddenContainer", {}, this);
            this.map.addDevice({ path: this.devicePos });
            this.map.nowMouseTarget = null;
            this.map.mousetoolClose(false);
          });
        });
      },
      cancel() {
        this.open = false;
        this.reset();
        this.map.destroy();
      },
    }
  };
</script>
<style>
  .second-div{
    margin-top: 20px;
    width: 15%;
    float: left;
    margin-left: 1.5%;
    height: 9rem;
    color: #515a6e;
    background-color: #FFF;
    border-radius: 5px;
    border: 2px solid rgb(22, 151, 207, 0.3);
    box-shadow:  0 0 8px 8px rgba(131, 229, 255, 0.1)inset, 0 0 7px 7px rgba(22, 151, 207, 0.2);
  }
  .dbtn {
    display: inline-block;
    line-height: normal;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
    border-radius: 3px;
    border-style: solid;
    border-width: 0;
    color: rgb(48, 180, 107);
  }
  .dbtn:hover {
    border-width: 1px;
    border-color: rgb(48, 180, 107);
  }
</style>
