<template>
  <div class="app-container">
    <!--搜索区-->
    <div v-if="!isDetail">
      <el-select
        v-model="page.data.deviceSn"
        filterable
        clearable
        placeholder="请选择设备编号"
        class="margin-left input"
      >
        <el-option
          v-for="item in machine_list"
          :key="item.sn"
          :label="item.sn"
          :value="item.sn"
        />
      </el-select>
      <!-- <el-input
        v-model="page.data.aaaaa"
        placeholder="请输入设备地点"
        class="margin-left input"
      ></el-input> -->
      <!-- <el-input
        v-model="page.data.bbbbb"
        placeholder="请输入设备类型"
        class="margin-left input"
      ></el-input> -->
      <el-select
        v-model="page.data.adminId"
        filterable
        clearable
        placeholder="请选择所属账号"
        class="margin-left input"
      >
        <el-option
          v-for="item in account_list"
          :key="item.adminId"
          :label="item.username"
          :value="item.adminId"
        />
      </el-select>
      <el-select
        v-model="page.data.issueType"
        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-button
        type="primary"
        icon="el-icon-search"
        class="margin-left"
        @click="fetchData"
      >搜索</el-button>
      <!--主表格-->
      <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="设备sn" align="center">
          <template slot-scope="scope">
            {{ scope.row.deviceSn | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="在离线状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.online" type="success">在线</el-tag>
            <el-tag v-else-if="!scope.row.online" type="info">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="设备地点" align="center">
          <template slot-scope="scope">
            {{ scope.row.name | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="设备类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.faceDeviceTypeName | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="所属账号" align="center">
          <template slot-scope="scope">
            {{ scope.row.adminUserName | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="下发人员数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.issueFaceCount | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="下发类型" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.issueType === 'all'"
              type="success"
              effect="plain"
            >全量下发</el-tag>
            <el-tag
              v-else-if="scope.row.issueType === 'increment'"
              type="primary"
              effect="plain"
            >增量下发</el-tag>
            <el-tag
              v-else-if="scope.row.issueType === 'face_delete'"
              type="warning"
              effect="plain"
            >单个删除</el-tag>
            <el-tag
              v-else-if="scope.row.issueType === 'face_delete_all'"
              type="danger"
              effect="plain"
            >全量删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column :key="isUpdate" label="下发状态" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.issueStatus === 'cancel'"
              type="info"
            >已取消</el-tag>
            <el-tag
              v-else-if="scope.row.issueStatus === 'success'"
              type="success"
            >成功</el-tag>
            <el-tag
              v-else-if="scope.row.issueStatus === 'interruption'"
              type="warning"
            >中断</el-tag>
            <el-tag
              v-else-if="scope.row.issueStatus === 'failed'"
              type="danger"
            >失败</el-tag>
            <el-tag
              v-else-if="scope.row.issueStatus === 'pending'"
              type="primary"
            >等待中</el-tag>
            <el-progress
              v-if="scope.row.issueStatus == 'processing'"
              :percentage="scope.row.issuePercent"
            />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{ scope.row.remarks }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="操作区" width="180">
          <template slot-scope="scope">
            <el-button
              v-if="
                scope.row.issueStatus === 'processing' ||
                  scope.row.issueStatus === 'pending'
              "
              type="warning"
              size="small"
              @click="retryOrCancel(scope.row.id, 1)"
            >取消</el-button>
            <el-button
              v-if="
                scope.row.issueStatus === 'interruption' ||
                  scope.row.issueStatus === 'failed'
              "
              type="primary"
              size="small"
              plain
              @click="retryOrCancel(scope.row.id, 2)"
            >重试</el-button>
            <el-button
              type="primary"
              size="small"
              @click="detailFun(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <pagination
        :total="total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="fetchData"
      />
    </div>
    <div v-if="isDetail">
      <div class="detail-top">
        <div class="detail-tit">下发详情</div>
        <el-button
          type="primary"
          size="small"
          @click="isDetail = false"
        >返回</el-button>
      </div>
      <detailPage :row-data="rowData" />
    </div>
  </div>
</template>

<script>
import { getFaceDeviceList } from '@/api/old_api_pengwenbing'
import {
  getUserListSearch,
  devicePage,
  deviceCancel,
  deviceRetry
} from '@/api/user_manage'
import Pagination from '@/components/Pagination'
import detailPage from './detailPage.vue'
import { init } from '@/utils/getWebSocket'

export default {
  components: { Pagination, detailPage },
  filters: {
    matchNull(str) {
      if (!str) {
        return '-'
      } else {
        return str
      }
    }
  },
  data() {
    return {
      isDetail: false,
      // 主表格&主表格加载状态
      list: null,
      listLoading: true,
      // 分页参数
      page: {
        data: {
          adminId: null,
          deviceSn: null,
          issueType: null,
          issueStatus: null
        },
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 设备列表_搜索
      machine_list: [],
      account_list: [],
      type_list: [
        { id: 'all', name: '全量下发' },
        { id: 'increment', name: '增量下发' },
        { id: 'face_delete', name: '单个删除' },
        { id: 'face_delete_all', name: '全量删除' }
      ],
      status_list: [
        { id: 'pending', name: '等待中' },
        { id: 'processing', name: '下发中' },
        { id: 'interruption', name: '中断' },
        { id: 'success', name: '成功' },
        { id: 'failed', name: '失败' },
        { id: 'cancel', name: '已取消' }
      ],
      rowData: {},
      isUpdate: Math.random()
    }
  },
  computed: {
    WebSocketData: function() {
      return this.$store.getters.WebSocketData
    }
  },
  watch: {
    WebSocketData(n) {
      this.getLogs()
    }
  },
  created() {
    init()
    this.fetchData()
    this.getFaceDeviceList()
    this.getUserListSearch()
  },
  methods: {
    // 获取列表数据
    async fetchData() {
      this.listLoading = true
      await devicePage(this.page).then((res) => {
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      })
    },
    // 获取设备列表-搜索
    getFaceDeviceList() {
      getFaceDeviceList().then((res) => {
        this.machine_list = res.data
      })
    },
    getUserListSearch() {
      getUserListSearch().then((res) => {
        this.account_list = res.data
      })
    },
    // 取消/重试
    retryOrCancel(id, type) {
      this.$confirm(`确定要${type == 1 ? '取消' : '重试'}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        try {
          let res = {}
          switch (type) {
            case 1:
              res = await deviceCancel(id)
              break
            case 2:
              res = await deviceRetry(id)
              break
            default:
              break
          }
          this.fetchData()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        } catch (error) {
          console.log(error)
        }
      })
    },
    // 详情
    detailFun(row) {
      this.rowData = row
      this.isDetail = true
    },
    async getLogs() {
      const that = this
      const data = that.$store.getters.WebSocketData
      if (data && data.op == 'ISSUE_CALLBACK') {
        const index = that.list.findIndex(
          (item) => item.traceId == data.data.traceId
        )
        if (index > -1) {
          const itemData = that.list[index]
          itemData.issuePercent = data.data.issuePercent
          itemData.issueStatus = data.data.issueStatus
          that.isUpdate = Math.random()
          that.$set(that.list, index, itemData)
        }
      }
    },
    // 返回列表序号
    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;
}
.detail-top {
  display: flex;
  justify-content: left;
  align-items: center;
}
.detail-tit {
  font-size: 18px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-right: 20px;
}
</style>
