<template>
  <div class="dialog1027" v-interact>
    <div class="dialog-header">
      <img class="dialog-header__icon" src="../../../../../../../assets/images/mount_head.png" />
      <div class="dialog-header__title">接管记录</div>
      <div class="dialog-header__close" @click="$emit('close')">关闭</div>
    </div>
    <div class="dialog-content">
      <el-table :data="list" height="200px">
        <el-table-column :label="`${hangar ? '机库' : '无人机'}名称`" align="center" prop="deviceName"></el-table-column>
        <el-table-column :label="`${hangar ? '机库' : '无人机'}所属单位`" align="center" prop="deviceDeptName"></el-table-column>
        <el-table-column label="接管状态" align="center" prop="takeStats">
          <template slot-scope="scope">
         <div :class="scope.row.takeStats ?'color-aqua':'color-tomato'">
          {{scope.row.takeStats ? '接管中' : '未接管'}}
         </div>
          </template>
        </el-table-column>
        <el-table-column label="当前控制单位" align="center" prop="takeUserName"></el-table-column>
        <el-table-column label="操作" align="center" prop="name">
          <template slot-scope="scope">
            <el-buttonclas @click="onExit(scope.row)" type="text" class="color-aqua" size="small" v-if="scope.row.takeStats">退出接管</el-buttonclas>
          </template>
        </el-table-column>
      </el-table>  
    </div>  
    <el-pagination
      layout="prev, pager, next"
      :total="page.total"
      :page-size="page.pageSize"
      @current-change="onPageChange"
      :current-page="page.pageNo"
    ></el-pagination>
  </div>
</template>

<script>
import { Control_API } from "../../../../../../../api";
import { mapState } from "vuex";

export default {
  name: "TakeOverRecords",
  data() {
    return {
      list: [],
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/hangar", ["hangar"]),
    ...mapState("MMCFlightControlCenter/uav", ["uav"]),
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let res = await Control_API.getTakeRecord({
        deviceType: this.hangar ? 2 : 1,
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        deviceId : this.uav? this.uav?.deviceId:this.hangar?.deviceId
      });
      this.list.splice(0, this.list.length, ...res.data?.list??[])
      // this.list = res.data;
      console.log("接管记录", this.list);
    },
    onExit(item) {
      this.$confirm("确认退出该用户接管?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await Control_API.setUavControlOff({
          deviceId: item.deviceId,
        });
        this.$message({
          type: "success",
          message: "操作完成",
        });
      });
    },
    onPageChange() {},
  },
};
</script>

<style lang="scss" scoped>
.dialog1027::v-deep {
  width: 700px;
  position: absolute !important;
  left: 50%;
  top: calc(100% + 25px);
  margin-left: -350px;
  padding: 0 !important;
  height: 300px;

  .el-table {
    background-color: transparent;
    * {
      background-color: transparent !important;
      color: #fff;
    }
  }
}
.dialog-content{
  .color-aqua{
    color: aqua;
  }
  .color-tomato{
    color: #ff993f;
  }
}
</style>