<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item v-if="taskDetailData.type == 1" label="用户姓名" prop="username">
        <el-input
          v-model="queryParams.username"
          placeholder="请输入用户姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item  v-if="taskDetailData.type == 2" label="商户名称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入商户名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item  v-if="taskDetailData.type == 3" label="单位名称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入单位名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item v-if="taskDetailData.type == 2 || taskDetailData.type == 3" label="联系人" prop="username">
        <el-input
          v-model="queryParams.username"
          placeholder="请输入联系人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item v-if="taskDetailData.type == 1 || taskDetailData.type == 2" label="表号" prop="usernum">
        <el-input
          v-model="queryParams.usernum"
          placeholder="请输入表号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


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

      <el-form-item label="不遇次数" prop="missNum">
        <el-select v-model="queryParams.missNum" placeholder="请选择到访不遇次数">
          <el-option label="1次" value="1"/>
          <el-option label="2次" value="2"/>
          <el-option label="3次" value="3"/>
          <el-option label="多次" value="4"/>
        </el-select>
      </el-form-item>

      <el-form-item v-if="taskDetailData.type == 1" label="所属村庄" prop="village">
        <el-select
          v-model="queryParams.village"
          placeholder="请选择所属村庄/小区"
          clearable
          size="small"
        >
          <el-option
            v-for="community in communityInfos"
            :key="community.id"
            :label="community.name"
            :value="community.id"
          />
        </el-select>
      </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"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="inspectList">
      <el-table-column v-if="taskDetailData.type == 1" label="用户姓名" align="center" prop="username" />
      <el-table-column v-if="taskDetailData.type == 2 || taskDetailData.type == 3" :label="taskDetailData.type == 2 ? '商户名称' : '单位名称'" align="center" prop="companyName" />
      <el-table-column v-if="taskDetailData.type == 2 || taskDetailData.type == 3" label="联系人" align="center" prop="username" />
      <el-table-column label="联系方式" align="center" prop="phone" />
      <el-table-column label="表号" align="center" prop="usernum" v-if="taskDetailData.type == 1 || taskDetailData.type == 2" :show-overflow-tooltip="true"/>
      <el-table-column label="所属区域" align="center" prop="phone" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.countyName }}{{ scope.row.streetName}}{{ scope.row.villageName }}
        </template>
      </el-table-column>
      <el-table-column label="通气状态" align="center" :formatter="statusFormat"/>
      <el-table-column label="到访不遇次数" align="center" prop="missNum" />
      <el-table-column label="安检人" align="center" prop="nickName" />
      <el-table-column label="安检时间" align="center" prop="createTime" width="160"/>
      <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="handleDetail(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"
    />

    <UserInspctinfo
      :taskId="''+queryParams.taskId"
      :userId="userId"
      :open="detailListOpen"
      @close="detailListOpen = false"
    />
  </div>

</template>

<script>
  import { communityList } from "@/api/baseinfo/community";
  import UserInspctinfo from "../../inspect/jumInspect/index";
  import { selectVisitorMissInfo, visitorMissInfoExport } from "@/api/checktask/inspect";
  export default {
    name: "visitor-miss-info",
    components:{
      UserInspctinfo
    },
    props:{
      taskDetailData:{
        type: Object
      }
    },
    data(){
        return{
          open: false,
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            taskId: null,
            btype: null,
            username: null,
            usernum: null,
            nickName: null,
            village: null,
            missNum: null,
            companyName: null
          },
          communityInfos: [],
          inspectList: [],
          loading: false,
          statusOptions: [
            {
              id: -1,
              name: "未安检",
            },
            {
              id: 0,
              name: "到访不遇",
            },
            {
              id: 1,
              name: "拒绝安检",
            },
            {
              id: 2,
              name: "已安检",
            },
            {
              id: 3,
              name: "表前已安检",
            },
          ],
          ustatusOptions: [],
          detailListOpen: false,
          userId: null,
          total: 0,
        }
    },
    created(){
      if(this.taskDetailData.type == 1){
        this.getCommunityInfo();
      }
      this.queryParams.taskId = this.taskDetailData.id;
      this.queryParams.btype = this.taskDetailData.type;
      this.getList();
      this.getDicts("t_user_status").then((response) => {
          this.ustatusOptions = response.data;
      });
    },
    methods: {
      getList(){
        this.loading = true;
        selectVisitorMissInfo(this.queryParams).then(res =>{
          this.loading = false;
          if(res.code == 200){
              this.inspectList = res.rows;
              this.total = res.total;
          }
        })
      },
      handleQuery(){
        this.getList();
      },
      resetQuery(){
        this.resetForm("queryForm");
        this.handleQuery();
      },
      getCommunityInfo(){
        communityList().then(res =>{
            if(res.code == 200 && res.data){
            this.communityInfos = res.data;
          }
        })
      },
      statusFormat(row, column) {
        return this.selectDictLabel(this.ustatusOptions, row.ustatus);
      },
      //详情
      handleDetail(row) {
        if (row.inspectStatus == -1) {
          this.$message.error("该用户未进行安检");
          return;
        }
        this.taskId = this.queryParams.taskId;
        this.userId = row.userId;
        this.detailListOpen = true;
      },

      handleExport(){
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有到访不遇数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return visitorMissInfoExport(queryParams);
        }).then(response => {
            this.download(response.msg);
        }).catch(() => {});

      }

    }
  }
</script>

<style scoped>

</style>
