<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <div class="right-panel-search">
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="syncData"
            :loading="syncLoading"
            >同步</el-button
          >
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        :params="apiParams"
        row-key="id"
        @selection-change="selectionChange"
        stripe
      >
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="id" prop="id" min-width="90"></el-table-column>
        <el-table-column
          label="mac"
          prop="code"
          min-width="90"
        ></el-table-column>
        <el-table-column label="电量" prop="third_info" min-width="90">
          <template #default="scope">
            <span v-if="scope.row.third_info"
              >{{ scope.row.third_info.battery }}%</span
            >
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="third_info" min-width="90">
          <template #default="scope">
            <span
              v-if="
                scope.row.third_info && scope.row.third_info.workStatus === 0
              "
              ><el-tag>运动</el-tag></span
            >
            <span
              v-else-if="
                scope.row.third_info && scope.row.third_info.workStatus === 2
              "
              ><el-tag type="warning">静止</el-tag></span
            >
            <span v-else><el-tag type="warning">静止</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column label="在线" prop="third_info" min-width="90">
          <template #default="scope">
            <span v-if="scope.row.third_info.online"><el-tag type="success">在线</el-tag></span>
            <span v-else><el-tag type="warning">离线</el-tag></span>
          </template>
        </el-table-column>
		<el-table-column label="绑定对象" prop="employee" min-width="90">
          <template #default="scope">
            <span v-if="scope.row.employee">{{scope.row.employee_.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="180">
          <template #default="scope">
            <el-button-group>
              <el-button
                v-if="scope.row.employee !== null"
                text
                type="warning"
                size="small"
                @click="handleBindBlt(20, scope.row)"
                >解绑</el-button
              >
              <el-button
                v-else
                text
                type="primary"
                size="small"
                @click="handleBindBlt(10, scope.row)"
                >绑定</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-Dialog
    title="绑定定位卡"
    v-model="showBindBlt"
    destroy-on-close
    @closed="closeDrawer"
  >
    <el-form ref="dialogForm" :model="form" label-width="120px">
      <!-- <el-form-item label="卡号">
        {{ form.blt }}
      </el-form-item> -->
	  <el-form-item label="mac">
        {{ bindBltMac }}
      </el-form-item>
      <el-form-item label="绑定员工" v-if="dis==false">
        <el-input
								v-model="form.employee_name"
								style="width:200px"
								disabled
								></el-input>
							<ehsUserSelect :multiple="false" @submit="getEmployee"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button v-if="form.type === 10" type="primary" @click="submitBindBlt"
        >绑定</el-button
      >
      <el-button v-if="form.type === 20" type="primary" @click="submitBindBlt"
        >解绑</el-button
      >
      <el-button @click="showBindBlt = false">取消</el-button>
    </template>
  </el-Dialog>
</template>
<script>
import channelView from "./vchannel_view";
export default {
  name: "blt",
  components: {
    channelView,
  },
  data() {
    return {
      syncLoading: false,
      apiObj: this.$API.third.tdevice.list,
      apiParams: {
        type: 30,
      },
      selection: [],
      search: {
        keyword: null,
      },
      dis: false,
      showBindBlt: false,
      employeeList: [],
      bindBltMac: "",
      form: {
        type: 10,
        blt: "",
        employee: null,
      },
    };
  },
  mounted() {
  },
  methods: {
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //同步
    async syncData() {
      this.syncLoading = true;
      var res = await this.$API.third.tdevice.bltSync.req({});
      this.$refs.table.refresh();
      this.syncLoading = false;
    },
    getEmployee(data) {
				this.form.employee=data.employee;
				this.form.employee_name=data.name
		},
    handleBindBlt(type, row) {
      this.dis = false;
      this.form.blt = row.id;
      this.form.code = row.code;
      this.bindBltMac = row.code;
      this.form.type = type;
      if (type === 20) {
        this.dis = true;
        this.form.employee = row.employee;
      }
      this.showBindBlt = true;
    },
    submitBindBlt() {
      let that = this
      let form = {
        code: this.form.code,
        type: this.form.type,
        employee: this.form.employee
      }
      that.$API.third.tdevice.bltBind.req(form).then((res) => {
          this.showBindBlt = false;
          that.$refs.table.refresh();
      });
    },
  },
};
</script>
