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

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

    </div>
</template>

<script>
import { formLabelMember, columnsListMember } from '../table-member'
import {
  queryIsAllApi,
  addCrewApi
} from '@/api/base/crew'
import { commonMixin } from '@/views/base/mixins/common'
export default {
    name: 'TableMember',
    props: {
        memberParam: {
          type: Object,
          default: null
        }
    },
    mixins: [commonMixin],
    components: {  },
    created() {
      console.log(this.memberParam)
    },
    mounted() {

    },
    data() {
        return {
          formLabelMember,
          columnsListMember,
        }
    },
    methods: {
      queryIsAllApi,
      getIdList(idList) {
        this.exportList = []
        idList.forEach(item => {
          this.exportList.push(item.id)
        })
      },
      async onSubmit() {
        let res = await addCrewApi({
          id: this.memberParam.id,
          idList: this.exportList,
        })
        if(res.code === 200) {
          this.$modal.msgSuccess('添加成功')
          this.$emit('closeMember', 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>
