<template>
    <!-- 工程管理 新增、编辑 表单组件 -->
    <div>
      <TableModel
        :formLabel="formLabelHat"
        :columnsList="columnsListHat"
        :request-api="queryHatApi"
        ref="tableRef"
        @transIdList="getIdList"
        :show-right-tools="false"
        :show-operation="false"
        style="margin-bottom: 100px"
        :sel-single="true"
      >
      </TableModel>

      <div
        style="display: flex; justify-content: right"
      >
        <el-button type="success" @click="onSubmit">绑定</el-button>
        <el-button
          @click="
            () => {
                this.$emit('closeHat', true)
            }
        "
        >取消</el-button
        >
      </div>

    </div>
</template>

<script>
import { formLabelHat, columnsListHat } from '../table-hat'
import {
  queryHatApi,
  bindHatApi,
} from '@/api/base/crew'
import { commonMixin } from '@/views/base/mixins/common'
export default {
    name: 'TableCrew',
    props: {
        hatParam: {
          type: Object,
          default: null
        }
    },
    mixins: [commonMixin],
    components: {  },
    created() {
      console.log(this.hatParam)
    },
    mounted() {

    },
    data() {
        return {
          formLabelHat,
          columnsListHat,
        }
    },
    methods: {
      queryHatApi,
      bindHatApi,
      getIdList(idList) {
        this.exportList = []
        idList.forEach(item => {
          this.exportList.push(item.devId)
        })
      },
      async onSubmit() {
        if(!this.exportList) {
          this.$modal.msgError('未选中智能安全帽！')
        } else if(this.exportList.length > 1) {
          this.$modal.msgError('只能选择一种安全帽！')
        } else {
          console.log(this.exportList, this.hatParam)
          let res = await bindHatApi({
            id: this.hatParam.id,
            devId: this.exportList[0]
          })
          if(res.code === 200) {
            this.$modal.msgSuccess('绑定成功')
            this.$emit('closeHat', true)
          }
        }
      }
    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
.binding, .unbind{
  cursor: pointer;
}
.binding:hover{
  border-bottom: 2px solid #11AB21;
}
.unbind:hover{
  border-bottom: 2px solid #FF0000;
}
</style>
