<template>
  <div style="margin-top: 30px;" v-if="infoList.length > 0">
    <div style="font-size: 22px;margin-bottom: 12px;">·隐患列表</div>
    <el-table v-loading="loading" :data="infoList">
      <el-table-column label="隐患名称" align="center" prop="hiddenTroubleName" >
        <span slot-scope="scope" v-if="scope.row.hiddenTroubleName">{{scope.row.hiddenTroubleName}}</span>
        <span v-else>-</span>
      </el-table-column>
      <el-table-column label="隐患等级" align="center" prop="hiddenTroubleLevel">
        <template slot-scope="scope">
          <span v-if="scope.row.hiddenTroubleLevel == 1">一级隐患</span>
          <span v-if="scope.row.hiddenTroubleLevel == 2">二级隐患</span>
          <span v-if="scope.row.hiddenTroubleLevel == 3">三级隐患</span>
        </template>
      </el-table-column>
      <el-table-column label="隐患类型" align="center" prop="hiddenTroubleType">
        <template slot-scope="scope">
          <span v-if="scope.row.hiddenTroubleType == 1">漏气</span>
          <span v-if="scope.row.hiddenTroubleType == 2">腐蚀</span>
          <span v-if="scope.row.hiddenTroubleType == 3">裂缝</span>
          <span v-if="scope.row.hiddenTroubleType == 4">设备故障</span>
          <span v-if="scope.row.hiddenTroubleType == 5">安全距离不足</span>
          <span v-if="scope.row.hiddenTroubleType == 6">管道承重</span>
          <span v-if="scope.row.hiddenTroubleType == 7">其他</span>
        </template>

      </el-table-column>
      <el-table-column label="隐患描述" align="center" prop="hiddenTroubleDescribe" >
        <span slot-scope="scope" v-if="scope.row.hiddenTroubleDescribe">{{scope.row.hiddenTroubleDescribe}}</span>
        <span v-else>-</span>
      </el-table-column>

      <el-table-column label="上报时间" align="center" prop="reportTime" width="180">
        <template slot-scope="scope" >
          <span v-if="scope.row.reportTime">{{scope.row.reportTime}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="上报人" align="center" prop="reportPerson" >
        <span slot-scope="scope" v-if="scope.row.reportPerson">{{scope.row.reportPerson}}</span>
        <span v-else>-</span>
      </el-table-column>
      <el-table-column label="隐患处理状态" align="center" prop="hiddenTroubleDealStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.hiddenTroubleDealStatus == 1" style="color: #ff7272">待处理</span>
          <span v-if="scope.row.hiddenTroubleDealStatus == 2" style="color: #ffba00">处理中</span>
          <span v-if="scope.row.hiddenTroubleDealStatus == 3" style="color: #30B46B">已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
                     size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="details(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="detailsTitle" :visible.sync="detailsOpen"  width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="150px">

        <el-row>
          <el-col :span="22">
            <el-form-item label="隐患名称" prop="hiddenTroubleName">
              <el-input v-model="form.hiddenTroubleName" placeholder="请输入隐患名称" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="隐患等级" prop="hiddenTroubleLevel">
              <el-select v-model="form.hiddenTroubleLevel" placeholder="请选择隐患等级" style="width: 100%;":disabled="true">
                <el-option label="一级隐患" value="1" />
                <el-option label="二级隐患" value="2" />
                <el-option label="三级隐患" value="3" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="隐患类型" prop="hiddenTroubleType">
              <el-select v-model="form.hiddenTroubleType" placeholder="请选择隐患类型" style="width: 100%;":disabled="true">
                <el-option label="漏气" value="1" />
                <el-option label="腐蚀" value="2" />
                <el-option label="裂缝" value="3" />
                <el-option label="设备故障" value="4" />
                <el-option label="安全距离不足" value="5" />
                <el-option label="管道承重" value="6" />
                <el-option label="其他" value="7" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22">
            <el-form-item label="隐患描述" prop="hiddenTroubleDescribe">
              <el-input v-model="form.hiddenTroubleDescribe" type="textarea" placeholder="请输入隐患描述" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="25">
            <el-form-item label="经纬度坐标" prop="longitude" :disabled="true">
              <el-col :span="9">
                <el-input v-model="form.longitude" placeholder="请输入经度" :disabled="true"/>
              </el-col>
              <el-col :span="9" style="margin-left: 13px">
                <el-input v-model="form.latitude" placeholder="请输入纬度" :disabled="true"/>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="上传照片" :disabled="true">
              <FileUpload
                :disabled="true"
                listType="picture"
                :fileArr="fileList">
              </FileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="隐患处理状态"  prop="hiddenTroubleDealStatus">
              <el-select v-model="form.hiddenTroubleDealStatus" placeholder="请选择隐患处理状态" :disabled="true">
                <el-option label="待处理" value="1" />
                <el-option label="处理中" value="2" />
                <el-option label="已完成" value="3" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="隐患处理完成时间" v-if="form.hiddenTroubleDealStatus==3" prop="hiddenTroubleDealFinishTime">
              <el-date-picker clearable size="small" :disabled="true"
                              v-model="form.hiddenTroubleDealFinishTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择隐患处理完成时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="上传照片" :disabled="true"  v-if="form.hiddenTroubleDealStatus==3">
              <FileUpload
                :disabled="true"
                listType="picture"
                :fileArr="fileListn">
              </FileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="视频上传"  prop="videoUrl">
              <VideoUpload
                listType="picture"
                :disabled="true"
                v-if="detailsOpen"
                :fileArr="fileListVideo"
                :fileSize="20"
                :fileType="['mp4']"
              />
              <el-input v-show="false" disabled v-model="form.videoUrl"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22">
            <el-form-item label="隐患处理情况" v-if="form.hiddenTroubleDealStatus==3" prop="hiddenTroubleDealCondition" >
              <el-input v-model="form.hiddenTroubleDealCondition" type="textarea" placeholder="请输入隐患处理情况" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属单位" prop="beyondEnterpriseId">
              <el-select v-model="form.beyondEnterpriseId" placeholder="请选择所属单位名称" style="width: 100%" @change="selectworkAssignEnterprose($event)"  :disabled="true">
                <el-option
                  v-for="item in enterprises"
                  :key="item.enterpriseId"
                  :label="item.enterpriseName"
                  :value="item.enterpriseId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

    </el-dialog>

  </div>
</template>

<script>
  import { listInfo, getInfo } from "@/api/system/info";
  import FileUpload from '@/components/FileSuperviseUpload';
  import VideoUpload from "@/components/VideoUpload";
  import { enterpriseLists } from "@/api/regulation/info";
  export default {
    name: "hidden-info",
    props:{
      inspectId:{
        type: Number
      }
    },
    components:{
      FileUpload,
      VideoUpload
    },
    data(){
        return{
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            hiddenTroubleName: null,
            reportPerson: null,
            workId: null
          },
          loading: false,
          total: 0,
          infoList: [],
          devicePos: [],
          fileList: [],
          fileListn: [],
          detailsOpen: false,
          form: {},
          detailsTitle: "",
          enterprises: [],
          fileListVideo: []
        }
    },
    created() {
      this.queryParams.workId = this.inspectId;
      this.getList();
      this.getEnterpriseLists();
    },
    methods: {
      /** 查询燃气隐患列表 */
      getList() {
        this.loading = true;
        listInfo(this.queryParams).then(response => {
          for(var i = 0; i < response.rows.length; i++){
            if (response.rows[i].pictureUrl){
              response.rows[i].pictureUrl=response.rows[i].pictureUrl.split(",");
              response.rows[i].Url=response.rows[i].pictureUrl[0]
            }
          }
          this.infoList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /**详情按钮操作*/
      details(row){
        this.fileList=[]
        this.fileListn=[]
        this.reset();
        const hiddenTroubleId = row.hiddenTroubleId || this.ids
        getInfo(hiddenTroubleId).then(response => {
          this.form = response.data;
          this.detailsOpen = true;
          //图片回显
          if (this.form.pictureUrl){
            for(var i = 0; i < this.form.pictureUrl.split(',').length; i++){
              this.fileList.push({
                name: '照片',
                url: this.form.pictureUrl.split(',')[i],
              });
            }
          }
          if (this.form.dealUrl){
            for(var i = 0; i < this.form.dealUrl.split(',').length; i++){
              this.fileListn.push({
                name: '照片',
                url: this.form.dealUrl.split(',')[i],
              });
            }
          }
          if(this.form.videoUrl){
            this.fileListVideo = this.form.videoUrl.split(',');
          }
          this.detailsTitle = "燃气隐患详情";
          this.devicePos = [response.data.longitude, response.data.latitude];
        });
      },
      // 表单重置
      reset() {
        this.form = {
          hiddenTroubleId: null,
          workId: null,
          hiddenTroubleName: null,
          hiddenTroubleLevel: null,
          hiddenTroubleType: null,
          longitude: null,
          latitude: null,
          pictureUrl: null,
          hiddenTroubleDescribe: null,
          reportTime: null,
          reportPerson: null,
          hiddenTroubleDealStatus: '1',
          hiddenTroubleDealCondition: null,
          hiddenTroubleDealFinishTime: null,
          isDel: null,
          remarks: null,
          beyondEnterpriseId: null
        };
        this.resetForm("form");
      },
      //所属单位
      getEnterpriseLists(){
        const param = {};
        enterpriseLists(param).then(response => {
          if (response.rows.length>1){
            this.enterprises = response.rows;
          }else {
            this.form.beyondEnterpriseId=response.rows[0]
            this.enterprises = response.rows;
          }

        });
      },
      getFileInfo(res){
        this.form.dealPlan = res.fileName;
        this.pictureUrlList.push(res.url)
        console.log(this.pictureUrlList)
        this.form.pictureUrl=this.pictureUrlList.join(",");
        this.form.burl=res.burl;
        this.fileList.push({
          name: res.fileName,
          url: uploadfile,
          burl:res.burl,
        });
      },
      listRemove(e) {
        this.form.dealPlan = "";
        this.fileList.delete(e.uid)
        // this.fileList = [];
      },
      /**上传头像*/
      getFileInfon(res){
        this.form.dealPlan = res.fileName;
        this.pictureUrlList.push(res.url)
        this.form.dealUrl=this.pictureUrlList.join(",");
        this.form.burl=res.burl;
        this.fileListn.push({
          name: res.fileName,
          url: uploadfile,
          burl:res.burl,
        });
      },
      listRemoven(e) {
        this.form.dealPlan = "";
        this.fileListn.delete(e.uid)
        // this.fileList = [];
      },
    }
  }
</script>

<style scoped>

</style>