<template>
  <div class="app-container">
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :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-tag type="success" effect="plain" v-if="scope.row.taskType === 1"
            >全量下发</el-tag
          >
          <el-tag type="warning" effect="plain" v-if="scope.row.taskType === 2"
            >单个下发</el-tag
          >
          <el-tag type="success" effect="plain" v-if="scope.row.taskType === 3"
            >增量下发</el-tag
          >
          <el-tag type="danger" effect="plain" v-if="scope.row.taskType === 4"
            >单个删除</el-tag
          >
          <el-tag type="danger" effect="plain" v-if="scope.row.taskType === 5"
            >全量删除</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="设备号" align="center">
        <template slot-scope="scope">
          {{ scope.row.sn || "暂无" }}
        </template>
      </el-table-column>
      <el-table-column label="设备地点" align="center">
        <template slot-scope="scope">
          {{ scope.row.deviceAddress || "暂无" }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="人员数据" align="center">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="checkUserMsg(scope.row.id)"
            >查看</el-button
          >
        </template>
      </el-table-column> -->
      <el-table-column label="重试次数" align="center">
        <template slot-scope="scope">
          {{ scope.row.retryTime || "暂无" }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime || "暂无" }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag
            type="warning"
            effect="plain"
            v-if="scope.row.taskStatus === 1"
            >待处理</el-tag
          >
          <el-tag
            type="info"
            effect="plain"
            v-else-if="scope.row.taskStatus === 2"
            >已失败</el-tag
          >
          <el-tag effect="plain" v-else-if="scope.row.taskStatus === 3"
            >已完成</el-tag
          >
          <el-tag
            type="danger"
            effect="plain"
            v-else-if="scope.row.taskStatus === 4"
            >已终止</el-tag
          >
          <el-tag
            type="success"
            effect="plain"
            v-else-if="scope.row.taskStatus === 5"
            >正在处理</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="下发结果" align="center" width="120">
        <template slot-scope="scope">
          <span
            v-if="
              (scope.row.taskType === 1 || scope.row.taskType === 3) &&
              scope.row.taskStatus == 3 &&
              !scope.row.executeResult
            "
            >已全部下发</span
          >
          <span
            v-else-if="
              (scope.row.taskType === 1 || scope.row.taskType === 3) &&
              scope.row.taskStatus == 3 &&
              scope.row.executeResult
            "
            @click="download(scope.row.executeResult)"
            class="updata-color el-icon-download"
            >下载错误列表</span
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" width="120px">
        <template slot-scope="scope">
          <el-button
            type="warning"
            :disabled="scope.row.taskStatus != 1"
            size="small"
            @click="cancelHandle(scope.row)"
            >取消</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!--对话框-->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="1000px"
      :close-on-click-modal="false"
    >
      <el-table
        class="table"
        ref="table_form"
        v-loading="listLoading"
        :data="check_list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" align="center" width="80px" type="index">
        </el-table-column>
        <el-table-column label="实名照片" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 70px; height: 70px"
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]"
            >
              <div slot="error" class="image-slot">
                {{ scope.row.avatar ? "加载失败" : "暂无照片" }}
              </div>
            </el-image>
          </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.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>
    </el-dialog>
  </div>
</template>

<script>
import { getByPage, cancelTask, getDetailById } from "@/api/user_manage";
import Pagination from "@/components/Pagination";

export default {
  name: "",
  components: { Pagination },
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: false,
      // 分页参数
      page: {
        data: {},
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      check_list: [],
      dialogVisible: false,
    };
  },
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      getByPage(this.page).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // checkUserMsg(id) {
    //   this.listLoading = true;
    //   getDetailById(id).then((res) => {
    //     this.check_list = res.data;
    //     this.listLoading = false;
    //     this.dialogVisible = true;
    //   });
    // },
    // 取消
    cancelHandle(row) {
      this.$confirm("确定要取消吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        cancelTask(row.id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "取消成功!",
          });
        });
      });
    },
    // 导出记录
    download(url) {
      this.downloadLoading = true;
      window.location.href = url;
      this.downloadLoading = false;
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
  computed: {},
  watch: {},
  created() {
    this.fetchData();
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.el-table {
  margin-top: 10px;
}
.updata-color {
  color: #409eff;
  cursor: pointer;
}
</style>
