<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">{{ $t('common.接管记录') }}</div>
      <div class="dialog-header__close" @click="$emit('close')">{{ $t('controlMenu.关闭') }}</div>
    </div>
    <div class="dialog-content">
      <el-table :data="list" height="200px">
        <el-table-column :label="`${hangar ? $t('controlMenu.机库') : $t('controlMenu.无人机')}${$t('controlMenu.名称')}`" align="center" prop="deviceName"></el-table-column>
        <el-table-column :label="`${hangar ? $t('controlMenu.机库') : $t('controlMenu.无人机')}${$t('controlMenu.所属单位')}`" align="center" prop="deviceDeptName"></el-table-column>
        <el-table-column :label="$t('controlMenu.接管状态')" align="center" prop="takeStats">
          <template slot-scope="scope">
         <div :class="scope.row.takeStats ?'color-aqua':'color-tomato'">
          {{scope.row.takeStats ? $t('controlMenu.接管中') : $t('controlMenu.未接管')}}
         </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('controlMenu.当前控制单位')" align="center" prop="userDeptName"></el-table-column>
        <el-table-column :label="$t('controlMenu.当前控制用户')" align="center" prop="takeUserName"></el-table-column>
        <el-table-column :label="$t('controlMenu.操作')" align="center" prop="name">
          <template slot-scope="scope">
            <el-buttonclas @click="onExit(scope.row)" type="text" class="color-aqua cp" size="small" v-if="scope.row.takeStats">{{ $t('controlMenu.退出接管') }}</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() {
      console.log(this.uav,'this.uav');
      
      let res = await Control_API.getTakeRecord({
        deviceType: this.hangar ? 2 : 1,
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        deviceId : this.hangar? this.hangar?.deviceId:this.uav?.deviceId
      });
      this.list.splice(0, this.list.length, ...res.data?.list??[])
      // this.list = res.data;
    },
    onExit(item) {
      this.$confirm(this.$t('controlMenu.确认退出该用户接管'), this.$t('controlMenu.提示'), {
        confirmButtonText: this.$t('controlMenu.确定'),
        cancelButtonText: this.$t('controlMenu.取消'),
        type: "warning",
      }).then(async () => {
        await Control_API.setUavControlOff({
          deviceId: item.deviceId,
        });
        this.init();
        this.$message({
          type: "success",
          message: this.$t('controlMenu.操作完成'),
        });
      });
    },
    onPageChange() {},
  },
};
</script>

<style lang="scss" scoped>
.dialog1027::v-deep {
  width: 770px;
  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>