<template>
  <div>
    <el-dialog title="燃气用户" :visible.sync="open" width="1200px" append-to-body destroy-on-close :before-close="handleClose">

      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="用户名称" prop="nickName">
          <el-input
            v-model="queryParams.nickName"
            placeholder="请输入用户名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="表号" prop="username">
          <el-input
            v-model="queryParams.username"
            placeholder="请输入表号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="检测时间">
          <el-date-picker
            is-range
            v-model="inspectDate"
            size="small"
            type="datetimerange"
            range-separator="至"
            @change="timeChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="是否检测" prop="isInspect">
          <el-select v-model="queryParams.isInspect" size="small" placeholder="请选择检测状态">
            <el-option value="0" label="未检测"/>
            <el-option value="1" label="已检测"/>
            <el-option value="2" label="到访不遇"/>
          </el-select>
        </el-form-item>

        <el-form-item label="安检人" prop="inspector">
          <el-input
            v-model="queryParams.inspector"
            placeholder="请输入安检人"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="地址" prop="address">
          <el-input
            v-model="queryParams.address"
            placeholder="请输入地址"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            :loading="exportLoading"
          >导出</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="userList">
        <el-table-column label="序号" type="index" align="center" width="60">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="用户账号" align="center" prop="username" />-->
        <el-table-column label="用户名称" align="center" prop="nickName" >
          <span slot-scope="scope" v-if="scope.row.nickName">{{scope.row.nickName}}</span>
          <span v-else>-</span>
        </el-table-column>
        <el-table-column label="用户类型" align="center" prop="userType" >
          <span slot-scope="scope" v-if="scope.row.userType">{{scope.row.userType}}</span>
          <span v-else>-</span>
        </el-table-column>
        <el-table-column label="地址" align="center" prop="address" width="150" :show-overflow-tooltip="true">
          <span slot-scope="scope" v-if="scope.row.address">{{scope.row.address}}</span>
          <span v-else>-</span>
        </el-table-column>
        <el-table-column label="所属企业" align="center" prop="beyondEnterpriseName" >
          <span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span>
          <span v-else>-</span>
        </el-table-column>
        <el-table-column label="表号" align="center" prop="username" >
          <span slot-scope="scope" v-if="scope.row.username">{{scope.row.username}}</span>
          <span v-else>-</span>
        </el-table-column>
        <el-table-column label="电话" align="center" prop="phone" width="120">
          <span slot-scope="scope" v-if="scope.row.phone">{{scope.row.phone}}</span>
          <span v-else>-</span>
        </el-table-column>
        <el-table-column label="是否安检" align="center" prop="isInspect" >
          <template slot-scope="scope">
            <span v-if="scope.row.isInspect == '0'">未检测</span>
            <span v-if="scope.row.isInspect == '1'">已检测</span>
            <span v-if="scope.row.isInspect == '2'">到访不遇</span>
          </template>
        </el-table-column>
        <el-table-column label="最近安检人" align="center" prop="inspector" >
          <span slot-scope="scope" v-if="scope.row.inspector">{{scope.row.inspector}}</span>
          <span v-else>-</span>
        </el-table-column>
        <el-table-column label="最近安检时间" align="center" prop="inspectDate" :show-overflow-tooltip="true">
          <span slot-scope="scope" v-if="scope.row.inspectDate">{{scope.row.inspectDate}}</span>
          <span v-else>-</span>
        </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-document"
              @click="handleInspectDetailInfo(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="getGasUserInfo"
      />
    </el-dialog>

    <InspectDetail
      :taskId="taskId"
      :userId="receiveId"
      :open="inspectDetailOpen"
      @close="closeInspectDetail"
    />
  </div>
</template>

<script>
  import InspectDetail from "./inspectDetail";
  import { getDetectorUserInspectInfo, detectorUserExport } from "@/api/detector/detectorUser";
  export default {
    name: "gas-user-info",
    props:{
      open:{
        type: Boolean,
        default: false
      },
      taskId:{
        type: Number
      }
    },
    components:{
      InspectDetail
    },
    watch:{
      open(newVal){
        if(newVal){
          this.queryParams.taskId = this.taskId;
          this.getGasUserInfo();
        }
      }
    },
    data(){
      return{
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          username: null,
          nickName: null,
          linkman: null,
          isInspect: null,
          taskId: null,
          inspectBeginTime: null,
          inspectEndTime: null,
          inspector: null,
          address: null
        },
        total: 0,
        userList: [],
        loading: false,
        // 显示搜索条件
        showSearch: true,
        inspectInfoList: [],
        inspectDetailOpen: false,
        receiveId: null,
        inspectDate:[],
        exportLoading: false
      }
    },
    methods: {
      getGasUserInfo(){
        this.loading = true;
        getDetectorUserInspectInfo(this.queryParams).then(res =>{
          this.userList = res.rows;
          this.total = res.total;
          this.loading = false;
        })
      },
      handleClose(){
        this.$emit("close");
        this.resetQuery();
      },
      handleInspectDetailInfo(row){
        if(row.isInspect && row.isInspect == '1'){
          this.receiveId = row.userId;
          this.inspectDetailOpen = true;
        }else{
          this.$message.error('用户未检测')
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getGasUserInfo();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.inspectDate = [];
        this.queryParams.inspectBeginTime = null;
        this.queryParams.inspectEndTime = null;
        this.handleQuery();
      },
      closeInspectDetail(){
        this.inspectDetailOpen = false;
      },
      timeChange(val){
        this.queryParams.inspectBeginTime = val[0];
        this.queryParams.inspectEndTime = val[1];
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有用户安检任务数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return detectorUserExport(queryParams);
        }).then(response => {
            this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
      },
    }
  }
</script>

<style scoped>

</style>