<template>
  <div class="detail-box">
    <div v-loading="downloadLoading" class="top flex">
      <div class="left">
        <div class="small-tit">设备</div>
        <div class="second-line">
          SN：{{ detailData.deviceSn }}
          <el-tag v-if="detailData.online" type="success">在线</el-tag>
          <el-tag v-else-if="!detailData.online" type="info">离线</el-tag>
        </div>
        <div class="third-line">
          <span class="m-r">类型：{{ detailData.faceDeviceTypeName }}</span>
          <span class="m-r">地点：{{ detailData.name }}</span>
          <span class="m-r">所属账号：{{ detailData.adminUserName }}</span>
        </div>
      </div>
      <div class="right">
        <div class="small-tit">下发</div>
        <div class="second-line flex">
          <div class="m-r d-p">
            <span>人员数量：{{ detailData.issueFaceCount }}条</span>
            <el-button
              v-if="detailData.issueFaceCount > 0"
              type="primary"
              size="mini"
              @click="uploadList(1)"
            >全部名单</el-button>
          </div>
          <div class="m-r d-p">
            <span
              class="blue"
            >成功数量：{{ detailData.hadIssueFaceCount }}条</span>
            <el-button
              v-if="detailData.hadIssueFaceCount > 0"
              type="primary"
              size="mini"
              @click="uploadList(2)"
            >成功名单</el-button>
          </div>
          <div class="d-p">
            <span
              class="red"
            >失败数量：{{ detailData.unIssueFaceCount }}条</span>
            <el-button
              v-if="detailData.unIssueFaceCount > 0"
              type="primary"
              size="mini"
              @click="uploadList(3)"
            >失败名单</el-button>
          </div>
        </div>
        <div class="third-line">
          <span
            class="m-r"
          >下发类型：
            <el-tag
              v-if="detailData.issueType === 'all'"
              type="success"
            >全量下发</el-tag>
            <el-tag
              v-else-if="detailData.issueType === 'increment'"
            >增量下发</el-tag>
          </span>
          <span class="m-r">
            <span>下发状态：</span>
            <el-tag
              v-if="detailData.issueStatus === 'cancel'"
              type="info"
            >已取消</el-tag>
            <el-tag
              v-else-if="detailData.issueStatus === 'success'"
              type="success"
            >成功</el-tag>
            <el-tag
              v-else-if="detailData.issueStatus === 'interruption'"
              type="warning"
            >中断</el-tag>
            <el-tag
              v-else-if="detailData.issueStatus === 'failed'"
              type="danger"
            >失败</el-tag>
            <el-tag
              v-else-if="detailData.issueStatus === 'pending'"
              type="primary"
            >等待中</el-tag>
            <el-progress
              v-if="detailData.issueStatus == 'processing'"
              :percentage="issuePercent"
              :show-text="false"
            />
            <span
              v-if="detailData.issueStatus == 'processing'"
              class="blue"
            >{{ hadIssuedFaceCount }} / {{ detailData.issueFaceCount }}</span>
          </span>
        </div>
      </div>
    </div>
    <!--搜索区-->
    <div>
      <el-input
        v-model="page.data.username"
        placeholder="请输入姓名"
        class="margin-left input"
      />
      <el-input
        v-model="page.data.phone"
        placeholder="请输入手机号"
        class="margin-left input"
      />
      <el-input
        v-model="page.data.idNumber"
        placeholder="请输入身份证号"
        class="margin-left input"
      />
      <el-input
        v-model="page.data.cardIdEx"
        placeholder="请输入卡号"
        class="margin-left input"
      />
      <!-- <el-select
        filterable
        clearable
        v-model="page.data.zoneIds"
        placeholder="请选择所属区域"
        class="margin-left input"
      >
        <el-option
          v-for="item in area_list"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select> -->
      <el-select
        v-model="page.data.userType"
        filterable
        clearable
        placeholder="请选择人员类型"
        class="margin-left input"
      >
        <el-option
          v-for="item in type_list"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="page.data.issueStatus"
        filterable
        clearable
        placeholder="请选择下发状态"
        class="margin-left input"
      >
        <el-option
          v-for="item in status_list"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-date-picker
        v-model="page.data.startTime"
        type="datetime"
        placeholder="请选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        class="margin-left"
      />
      <el-date-picker
        v-model="page.data.endTime"
        type="datetime"
        placeholder="请选择结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        class="margin-left"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        class="margin-left"
        @click="fetchData"
      >搜索</el-button>
    </div>
    <!--主表格-->
    <el-table
      ref="table_form"
      v-loading="listLoading"
      class="table"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="实名照片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            :src="scope.row.photo"
            :preview-src-list="[scope.row.photo]"
          >
            <div slot="error" class="image-slot">
              {{ scope.row.photo ? "加载失败" : "暂无照片" }}
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.userName | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center">
        <template slot-scope="scope">
          {{ scope.row.idNumber | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="卡号" align="center">
        <template slot-scope="scope">
          {{ scope.row.cardIdEx | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="人员类型" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.userType === 105"
            effect="plain"
            type="success"
          >员工</el-tag>
          <el-tag
            v-else-if="scope.row.userType === 104"
            effect="plain"
            type="primary"
          >访客</el-tag>
          <el-tag
            v-else-if="scope.row.userType === 101"
            effect="plain"
            type="info"
          >黑名单</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="有效期开始时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="有效期结束时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.endTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="下发时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.issueTime }}
        </template>
      </el-table-column>
      <el-table-column label="下发状态" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.issueStatus === 'success'"
            effect="plain"
            type="success"
          >成功</el-tag>
          <el-tag
            v-else-if="scope.row.issueStatus === 'failed'"
            effect="plain"
            type="danger"
          >失败</el-tag>
          <el-tag
            v-else-if="scope.row.issueStatus === 'processing'"
            effect="plain"
            type="primary"
          >下发中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          {{ scope.row.remarks }}
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import { itemPage, deviceDetail, itemExport } from '@/api/user_manage'
import { getAreaList } from '@/api/area'
import Pagination from '@/components/Pagination'
import detailPage from './detailPage.vue'
import { ws } from '@/utils/getWebSocket'
export default {
  components: { Pagination, detailPage },
  filters: {
    matchNull(str) {
      if (!str) {
        return '-'
      } else {
        return str
      }
    }
  },
  props: {
    rowData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      isDetail: true,
      detailData: {},
      // 主表格&主表格加载状态
      list: null,
      listLoading: true,
      downloadLoading: false, // 导出加载
      // 分页参数
      page: {
        data: {
          deviceSn: null,
          userType: null,
          issueStatus: null,
          startTime: null,
          endTime: null,
          username: '',
          phone: '',
          idNumber: '',
          cardIdEx: null,
          zoneIds: null
        },
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 设备列表_搜索
      area_list: [],
      type_list: [
        { id: 105, name: '员工' },
        { id: 104, name: '访客' }
      ],
      status_list: [
        { id: 'processing', name: '下发中' },
        { id: 'success', name: '成功' },
        { id: 'failed', name: '失败' }
      ],
      issuePercent: 0,
      hadIssuedFaceCount: 0
    }
  },
  computed: {
    WebSocketData: function() {
      return this.$store.getters.WebSocketData
    }
  },
  watch: {
    WebSocketData(n) {
      this.getLogs()
    }
  },
  created() {
    // init();
    this.getArea()
    this.fetchData()
  },
  methods: {
    // 获取列表数据
    async fetchData() {
      this.listLoading = true
      this.page.data.issueDeviceId = this.rowData.id
      const res1 = await deviceDetail(this.rowData.id)
      const res2 = await itemPage(this.page)
      this.detailData = res1.data
      const sendObj = {
        'op': 'FETCH_TASK_PROGRESS',
        'msg': '主动获取任务进度',
        'data': {
          'traceId': this.rowData.traceId,
          'deviceSn': this.detailData.deviceSn
        },
        'sn': this.detailData.deviceSn,
        'source': 'TQ'
      }
      if (this.detailData.issueStatus == 'processing') {
        ws.send(JSON.stringify(sendObj))
      }
      this.list = res2.data.list
      this.total = res2.data.total
      this.listLoading = false
    },
    getLogs() {
      const that = this
      const data = that.$store.getters.WebSocketData
      if (
        data &&
        data.op == 'ISSUE_CALLBACK' &&
        data.data.traceId == this.rowData.traceId
      ) {
        this.detailData.hadIssueFaceCount = data.data.hadIssuedFaceSuccessCount || 0
        this.detailData.unIssueFaceCount = data.data.hadIssuedFaceFailedCount || 0
        this.issuePercent = data.data.issuePercent
        this.hadIssuedFaceCount = data.data.hadIssuedFaceCount
      }
    },
    uploadList(type) {
      const data = {
        issueDeviceId: this.rowData.id
      }
      switch (type) {
        case 2:
          data.issueStatus = 'success'
          break
        case 3:
          data.issueStatus = 'failed'
          break
        default:
          break
      }
      this.downloadLoading = true
      itemExport(data).then((res) => {
        window.location.href = res.data
        this.downloadLoading = false
      })
    },
    // 搜索
    async getArea() {
      const form = {
        zoneId: this.$store.getters.adminId,
        adminId: null,
        sn: null
      }
      try {
        const result = await getAreaList(form)
        this.area_list = result.data
      } catch (e) {
        console.log(e)
        this.area_list = []
      }
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1
    }
  }
}
</script>
<style scoped>
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 200px;
}

.top {
  background-color: #f8faff;
  border-radius: 5px;
  padding: 12px 27px;
  justify-content: space-between;
  min-width: 1000px;
  margin: 20px 0;
}
.small-tit {
  color: rgba(0, 126, 255, 1);
  font-size: 16px;
  font-weight: 500;
  background: rgba(98, 159, 249, 0.12);
  padding: 5px 20px;
  border-radius: 15px;
  display: inline-block;
}
.second-line {
  font-size: 16px;
  font-weight: 500;
  margin: 8px 0;
}
.el-progress {
  width: 150px;
  display: inline-block;
  margin-right: 8px;
}
.d-p {
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}
.d-p > .el-button {
  margin-left: 10px;
}
.m-r {
  margin-right: 32px;
}
.blue {
  color: rgba(64, 158, 255, 1);
  /* font-size: 14px; */
}
.red {
  color: rgba(245, 100, 100, 1);
}
</style>
