<template>
    <div class="fullHeight whiteBlock">
        <!--功能被取消-->
        <!-- <div class="topBox " v-if="false">
            <div>{{$t('message.laborDev.topBoxMsg')}}</div>
            <div class="item-main">
                <div v-for="(item,index) in devTypeList" @click="choiceDevice(index)" class="item-select">
                    {{item}}
                    <img :src="index===beaconForm.supplierType?devIcon.active:devIcon.grey" alt="">
                </div>
            </div>
        </div> -->
        <div class="table_wrap">
            <div class="titleBox">
                <!-- {{$t('message.laborDev.titleBox')}}：{{beaconForm.supplierType!=''?devTypeList[parseInt(beaconForm.supplierType)].name:''}}<br><br> -->
                <el-button type="primary" @click="addPoint" size="medium">{{$t('message.laborDev.add')}}</el-button>
                <el-button
                        type="primary"
                        @click="initDialog=true;canCloseInitDialog=true;noEdit=true"
                        size="medium"
                >{{$t('message.laborDev.projectInit')}}
                </el-button>
                <!-- 对接协议下载 -->
                <!-- <span class="downloadBtn primaryText" @click="downloadFn">{{$t('message.laborDev.protocolDownload')}}</span> -->
            </div>
            <vue-scroll>
                <ul class="devList">
                    <li v-for="(i,index) in pointList" @mousemove="current=index" @mouseleave="current=-1">
                        <div class="whiteBlock">
                            <p>{{$t('message.laborDev.devName')}}：{{i.devName}}</p>
                            <div>{{$t('message.laborDev.devSn')}}：{{i.devSn}}</div>
                            <div>{{$t('message.laborDev.in')}}：
                                <tag :type="tagArr[i.isEnter]"
                                     :text="$t('message.laborDev.whetherList')[i.isEnter]"></tag>
                            </div>
                            <div>{{$t('message.laborDev.out')}}：
                                <tag :type="tagArr[i.isOut]" :text="$t('message.laborDev.whetherList')[i.isOut]"></tag>
                            </div>
                            <!--                        <div>进出场时间段：进场（06:00-12:00），出场（12:00-05:00）</div>-->
                            <div class="icon-Group">
                                <p>状态：
                                    <tag text="在线" v-show="i.devOnline==1"></tag>
                                    <tag text="离线" v-show="i.devOnline==0"></tag>
                                </p>
                                <div v-if="current===index">
                                    <span @click="editPoint(i)"><i class="el-icon-edit"></i>{{$t('message.laborDev.btn_edit')}}</span>
                                    <span @click="removePoint(i)"><i class="el-icon-delete"></i>{{$t('message.laborDev.btn_delete')}}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="noData" v-if="!pointList.length">
                    <img src="../../../assets/images/noData.png" alt="">
                    <p>{{$t('message.laborDev.noData')}}</p>
                </div>
            </vue-scroll>
            <!--<tag text="默认"></tag>
            <tag type="normal" text="normal"></tag>
            <tag type="grey" text="grey"></tag>
            <tag type="violet" text="violet"></tag>
            <tag type="warning" text="warning"></tag>
            <tag type="danger" text="danger"></tag>
            <tag type="success" text="success"></tag>
            <tag type="info" text="info"></tag>-->
            <!--<el-table class="tables" :data="pointList">
                <el-table-column
                        type="index"
                        width="50"
                        align="center"
                        :label="$t('message.personnelPosition.beaconManage.table.index')"
                ></el-table-column>

                <el-table-column prop="devName" :label="$t('message.laborDev.devName')"
                                 align="center"></el-table-column>
                <el-table-column prop="devSn" :label="$t('message.laborDev.devSn')" align="center"></el-table-column>
                &lt;!&ndash;                <el-table-column :label="$t('message.laborDev.devAddr')" align="center"></el-table-column>&ndash;&gt;
                <el-table-column prop="isEnter" :label="$t('message.laborDev.in')" align="center">
                    <template slot-scope="scope">{{scope.row.isEnter===1?'是':'否'}}</template>
                </el-table-column>
                <el-table-column prop="isOut" :label="$t('message.laborDev.out')" align="center">
                    <template slot-scope="scope">{{scope.row.isOut===1?'是':'否'}}</template>
                </el-table-column>
                <el-table-column
                        :label="$t('message.personnelPosition.beaconManage.table.operation')"
                        align="center"
                        width="250"
                >
                    <template slot-scope="scope">
                        <div class="tableBtns">
                            <div @click="editPoint(scope.row)" class="operationText">
                                <img src="@/assets/images/icon-edit.png" width="15px" height="15px"/>
                                <span>{{$t('message.personnelPosition.beaconManage.table.edit')}}</span>
                            </div>
                            <div @click="removePoint(scope.row)" class="operationText">
                                <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                                <span>{{$t('message.personnelPosition.beaconManage.table.delete')}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>-->
        </div>
        <!-- 项目初始化 -->
        <el-dialog @close="CloseChoiceDevice"
                   :title="$t('message.laborDev.projectInit')"
                   :visible.sync="initDialog"
                   width="667px"
                   :modal-append-to-body="false"
                   :show-close="canCloseInitDialog"
                   :close-on-click-modal="canCloseInitDialog"
        >
            <div class="dialog_content">
                <el-form
                        size="medium"
                        :model="beaconForm"
                        ref="beaconForm"
                        :rules="beaconFormRules"
                        label-width="125px"
                        class="dialogFormBox"
                >
                    <el-form-item :label="$t('message.laborDev.devTypeLabel')" prop="supplierType">
                        <el-select
                                v-model="beaconForm.supplierType" :disabled="noEdit"
                                :placeholder="$t('message.personnelPosition.please_select')"
                        >
                            <el-option
                                    :label="item.name"
                                    :value="item.id"
                                    v-for="(item,index) in devTypeList"
                                    :key="index"
                            ></el-option>
                        </el-select>
                        <el-button style=" position: absolute;right: -95px;top: 3px;" v-show="beaconForm.supplierType==4" type="primary" @click="openPlat" size="small">
                            <!-- 打开平台 -->
                            {{ $t('message.laborDev.openPlatform') }}
                        </el-button>
                    </el-form-item>
                    <!-- v-if="beaconForm.supplierType!=5" -->
                    <el-form-item :label="$t('message.laborDev.appID')" v-if="beaconForm.supplierType!=5"  prop="appId" :rules='[
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: ["blur", "change"],
                        }
                    ]'>
                        <el-input :disabled="noEdit"
                                  v-model="beaconForm.appId"
                                  :placeholder="$t('message.personnelPosition.please_enter')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item v-if="beaconForm.supplierType!=4&&beaconForm.supplierType!=6&&beaconForm.supplierType!=5" :label="$t('message.laborDev.projectAppKey')" prop="appKey" :rules='[
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: ["blur", "change"],
                        }
                    ]'>
                        <el-input :disabled="noEdit"
                                  v-model="beaconForm.appKey"
                                  :placeholder="$t('message.personnelPosition.please_enter')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item v-if="beaconForm.supplierType!=6&&beaconForm.supplierType!=5" :label="$t('message.laborDev.projectAppSecret')" prop="appSecret" :rules='[
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: ["blur", "change"],
                        }
                    ]'>
                        <el-input :disabled="noEdit"
                                  v-model="beaconForm.appSecret"
                                  :placeholder="$t('message.personnelPosition.please_enter')"
                        ></el-input>
                    </el-form-item>
                    
                    <!-- 推送服务器地址 -->
                    <el-form-item v-if="beaconForm.supplierType==6 || beaconForm.supplierType==5" :label="$t('message.laborDev.pushServerAddress')" prop="serviceUrl" :rules='[
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: ["blur", "change"],
                        }
                    ]'>
                        <el-input :disabled="noEdit"
                                  v-model="beaconForm.serviceUrl"
                                  :placeholder="$t('message.personnelPosition.please_enter')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.laborDev.isSendToDev')" prop="issueDev">
                        <!-- 否 -->
                        <el-radio :disabled="noEdit" v-model="beaconForm.issueDev" :label="0">{{$t('message.laborDev.whetherList')[0]}}</el-radio>
                        <!-- 是 -->
                        <el-radio :disabled="noEdit" v-model="beaconForm.issueDev" :label="1">{{$t('message.laborDev.whetherList')[1]}}</el-radio>
                    </el-form-item>
                    <el-form-item :label="$t('message.laborDev.uploadToGover')" prop="housing">
                        <el-checkbox-group v-model="selectedHousingList">
                            <el-checkbox v-for="(item,index) in housingList" :key="index" :label="item.id+''">{{item.serviceName}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <div class="dialog-footer">
                        <!-- 取消按钮 -->
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-circle-close"
                            @click="cancelBeaconFn"
                            size="medium"
                            >取消
                        </el-button>
                        <el-button
                            type="primary"
                            icon="el-icon-circle-check"
                            @click="saveBeaconFn"
                            size="medium"
                            >{{$t('message.personnelPosition.determine')}}
                        </el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
        <!-- 添加编辑设备 -->
        <el-dialog
                @close="DevClose"
                :modal-append-to-body="false"
                :title="addEditDialogTitle"
                :visible.sync="addEditDialog"
                width="967px"
                
        >
            
            <div class="dialog_content">
                <vue-scroll style="height: 500px">
                <el-form
                        size="medium"
                        :model="addEditForm"
                        ref="addEditForm"
                        :rules="addEditFormRules"
                        label-width="120px"
                        class="dialogFormBox"
                >
                    <el-form-item :label="$t('message.laborDev.devName')" prop="devName">
                        <el-input
                                v-model="addEditForm.devName"
                                :placeholder="$t('message.personnelPosition.please_enter')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.laborDev.devSn')" prop="devSn">
                        <el-input :disabled="!isAdd"
                                v-model="addEditForm.devSn"
                                :placeholder="$t('message.personnelPosition.please_enter')"
                        ></el-input>
                    </el-form-item>

                    <!-- 归属区域 -->
                    <el-form-item v-if="company == 'nanchang'" :label="$t('message.laborDev.devGroupType')" prop="devGroupType">
                        <el-select :disabled="!isAdd"
                                v-model="addEditForm.devGroupType"
                                :placeholder="$t('message.personnelPosition.please_select')"
                        >
                             <el-option
                                    :label="item.name"
                                    :value="item.id"
                                    v-for="(item,index) in devGroupTypeList"
                                    :key="index"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item :label="$t('message.laborDev.in')" prop="enterTime">
                        <el-radio-group v-model="addEditForm.isEnter" @change="changRadio(addEditForm.isEnter,'enter')">
                            <el-radio :label="0">{{$t('message.laborDev.whetherList')[0]}}</el-radio>
                            <el-radio :label="1">{{$t('message.laborDev.whetherList')[1]}}</el-radio>
                        </el-radio-group>
                        <el-checkbox v-show="addEditForm.isEnter===1" style="display:block" :indeterminate="isIndeterminate" v-model="checkAllEnter" @change="handleCheckAllChange(checkAllEnter,'enter')">
                            <!-- 全选 -->
                            {{ $t('message.laborDev.selectAll') }}
                            </el-checkbox>
                        <el-checkbox-group v-show="addEditForm.isEnter===1" v-model="enableInList" @change="handleCheckedChange(enableInList,'enter')">
                            <!--i.type=!i.type-->
                            <el-checkbox
                                    v-for="i in timeList"
                                    :value="i.id"
                                    :label="i.id"
                                    @change="setEnableIn(i,i.id)"
                                    :key="i.id"
                                    :checked="i.type"
                            >{{i.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item :label="$t('message.laborDev.out')" prop="outTime">
                        <el-radio-group v-model="addEditForm.isOut" @change="changRadio(addEditForm.isOut,'out')">
                            <el-radio :label="0">{{$t('message.laborDev.whetherList')[0]}}</el-radio>
                            <el-radio :label="1">{{$t('message.laborDev.whetherList')[1]}}</el-radio>
                        </el-radio-group>
                        <el-checkbox  v-show="addEditForm.isOut===1" style="display:block" :indeterminate="isIndeterminate2" v-model="checkAllOut" @change="handleCheckAllChange(checkAllOut,'out')">
                            <!-- 全选 -->
                            {{ $t('message.laborDev.selectAll') }}
                        </el-checkbox>
                        <el-checkbox-group v-show="addEditForm.isOut===1" v-model="enableOutList" @change="handleCheckedChange(enableOutList,'out')">
                            <el-checkbox
                                    v-for="i in timeList"
                                    :value="i.id"
                                    :label="i.id"
                                    :key="i.id"
                                    @change="setEnableOut(i,i.id)"
                                    :checked="i.type"
                            >{{i.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                </el-form>
                </vue-scroll>
                <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="addEditDialog = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.personnelPosition.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="saveDevFn"
                                size="medium"
                        >{{$t('message.personnelPosition.determine')}}
                        </el-button>
                    </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import tag from '@/components/tag';
    import {
        getProjectUfaceConfigInfo,
        projectUfaceConfigEdit,
        ufaceDevAdd,
        ufaceDevEdit,
        ufaceDevDelete,
        ufaceDevList,selectHousingListApi
    } from "../../../assets/js/api/laborPerson";

    export default {
        components: {
            tag
        },
        data() {
            return {
                checkAllEnter: false,
                isIndeterminate: false,
                checkAllOut: false,
                isIndeterminate2: false,
                noEdit: true,//不允许配置信息
                record: [],//用于储存选择前的
                devIcon: {
                    active: require('../../../assets/images/switch_active.png'),
                    grey: require('../../../assets/images/switch.png'),
                },
                current: -1,
                // selectDev: '',
                tagArr: ['info', 'success'],
                enableInList: [], //入场时间
                enableOutList: [], //出场时间
                pointList: [],
                initDialog: false,
                beaconForm: {
                    supplierType: '',
                    appId: "",
                    appSecret: "",
                    appKey: "",
                    projectSn: this.$store.state.projectSn,
                    housing:'',
                    issueDev:"",
                    serviceUrl:''
                },
                beaconFormRules: {
                    supplierType: [
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: "blur",
                        },
                    ],
                    // appId: [
                    //     {
                    //         required: true,
                    //         message: this.$t("message.personnelPosition.required"),
                    //         trigger: "blur",
                    //     },
                    //     {
                    //         required: true,
                    //         message: this.$t("message.personnelPosition.required"),
                    //         trigger: "change",
                    //     },
                    // ],
                    // appSecret: [
                    //     {
                    //         required: true,
                    //         message: this.$t("message.personnelPosition.required"),
                    //         trigger: "blur",
                    //     },
                    //     {
                    //         required: true,
                    //         message: this.$t("message.personnelPosition.required"),
                    //         trigger: "change",
                    //     },
                    // ],
                    issueDev:[
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: "change",
                        },
                    ],
                },
                addEditDialog: false,
                addEditDialogTitle: "",
                addEditForm: {
                    devName: '',
                    devSn: '',
                    isEnter: '',
                    isOut: '',
                    devGroupType: 1
                },
                addEditFormRules: {
                    devName: [
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: "blur",
                        },
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: "change",
                        },
                    ],
                    devSn: [
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: "blur",
                        },
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: "change",
                        },
                    ],
                    devGroupType: [
                        {
                            required: true,
                            message: this.$t("message.personnelPosition.required"),
                            trigger: "change",
                        },
                    ]

                },
                isAdd: true,
                devTypeList: this.$t("message.laborDev.devTypeList"),
                // devTypeList:[{name:'杭州宇泛智能科技',id:1},{name:'芊熠智能',id:4},{name:'佳信捷',id:6}],
                devGroupTypeList: this.$t("message.laborDev.devGroupTypeList"),
                canCloseInitDialog: false,
                timeList: [
                    {id: 0, name: "00:01~01:00"},
                    {id: 1, name: "01:01~02:00"},
                    {id: 2, name: "02:01~03:00"},
                    {id: 3, name: "03:01~04:00"},
                    {id: 4, name: "04:01~05:00"},
                    {id: 5, name: "05:01~06:00"},
                    {id: 6, name: "06:01~07:00"},
                    {id: 7, name: "07:01~08:00"},
                    {id: 8, name: "08:01~09:00"},
                    {id: 9, name: "09:01~10:00"},
                    {id: 10, name: "10:01~11:00"},
                    {id: 11, name: "11:01~12:00"},
                    {id: 12, name: "12:01~13:00"},
                    {id: 13, name: "13:01~14:00"},
                    {id: 14, name: "14:01~15:00"},
                    {id: 15, name: "15:01~16:00"},
                    {id: 16, name: "16:01~17:00"},
                    {id: 17, name: "17:01~18:00"},
                    {id: 18, name: "18:01~19:00"},
                    {id: 19, name: "19:01~20:00"},
                    {id: 20, name: "20:01~22:00"},
                    {id: 21, name: "21:01~23:00"},
                    {id: 22, name: "22:01~24:00"},
                    {id: 23, name: "23:01~00:00"},
                ],
                housingList:[],
                selectedHousingList:[],
            };
        },
        created() {
            this.company = COMPANY;
            console.log(this.company)
        },
        mounted() {
            this.getConfig();
            this.selectHousingList()
            this.getList()
        },
        methods: {
            handleCheckAllChange(val,type){
                if(type == 'enter'){
                     this.enableInList = val ? [ 0,
                    1,
                    2,
                    3,
                    4,
                    5,
                    6,
                    7,
                    8,
                    9,
                    10,
                    11,
                    12,
                    13,
                    14,
                    15,
                    16,
                    17,
                    18,
                    19,
                    20,
                    21,
                    22,
                    23,] : [];
                this.isIndeterminate = false;
                } else if(type == 'out'){
                    this.enableOutList = val ? [ 0,
                    1,
                    2,
                    3,
                    4,
                    5,
                    6,
                    7,
                    8,
                    9,
                    10,
                    11,
                    12,
                    13,
                    14,
                    15,
                    16,
                    17,
                    18,
                    19,
                    20,
                    21,
                    22,
                    23,] : [];
                    this.isIndeterminate2 = false;
                }
            },
            handleCheckedChange(val,type){
                let checkedCount = val.length;
                if(type == 'enter'){
                    this.checkAllEnter = checkedCount === this.timeList.length;
                    this.isIndeterminate = checkedCount > 0 && checkedCount < this.timeList.length;
                } else if(type == 'out'){
                    this.checkAllOut = checkedCount === this.timeList.length;
                    this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.timeList.length;
                }
            },
            changRadio(val,type){
                console.log(val,type)
                if(type == 'enter'){
                    this.isIndeterminate = false;
                    this.checkAllEnter = false
                    this.enableInList = []
                } else if(type == 'out'){
                    this.enableOutList = []
                    this.checkAllOut = false
                    this.isIndeterminate2 = false;
                }
            },
            downloadFn(){
                // HTTP人脸设备对接协议
                window.open('/doc/'+this.$t("message.laborDev.faceDockingProtocol")+'.docx')
            },
            openPlat(){
                window.open('http://scenario.qy-rgs.com:9000/auth/page')
            },
            selectHousingList(){
                selectHousingListApi({}).then((res) => {
                    console.log('=======',res)
                    this.housingList=res.result
                });
            },
            getConfig() {
                getProjectUfaceConfigInfo({
                    projectSn: this.$store.state.projectSn,
                }).then((result) => {
                    if (result.success) {
                        if (!result.result) {
                            console.log("弹窗");
                            // this.canCloseInitDialog = true;
                            this.noEdit = false;
                            this.initDialog = true;
                        } else {
                            this.beaconForm = result.result;
                            if(this.beaconForm.housing){
                                if(this.beaconForm.housing.indexOf(',')!=-1){
                                    this.selectedHousingList=this.beaconForm.housing.split(',')
                                }else{
                                    this.selectedHousingList=[this.beaconForm.housing]
                                }
                                
                            }
                            // console.log("配置", result.result);
                            // this.selectDev = result.result.supplierType;
                            this.getList();
                        }
                    }
                });
            },
            getList() {
                ufaceDevList({projectSn: this.$store.state.projectSn}).then((list) => {
                    console.log("列表", list);
                    this.pointList = list.result;
                });
            },
            setEnableIn(i, id) {
                // this.enableOutList=[];
                i.type = !i.type;
                // this.enableOutList.push(id);
                // this.timeList[index]=id;
                console.log(
                    "a入厂时间",
                    this.enableInList,
                    "出厂时间",
                    this.enableOutList
                );
            },
            setEnableOut(i, id) {
                // this.enableInList=[];
                i.type = !i.type;
                /*this.enableInList.map(value => {
                    if (value === id) {
                        console.log('val', value)
                    }
                })*/
                console.log(id)
                // this.enableInList.forEach((item,index)=>{
                //     if(item != id){
                //         this.enableInList.push(id);
                //         return;
                //     }else{
                //         this.enableInList.splice(index,1)
                //         return;
                //     }
                // })
                console.log(
                    "b入厂时间",
                    this.enableInList,
                    "出厂时间",
                    this.enableOutList
                );
            },
            addPoint() {
                this.isAdd = true;
                this.addEditDialogTitle = this.$t("message.laborDev.add");
                this.addEditDialog = true;
            },
            editPoint(devInfo) {
                this.isAdd = false;
                this.addEditDialogTitle = this.$t("message.laborDev.edit"); //编辑卡片
                this.addEditForm = devInfo;
                console.log("编辑", devInfo);
                // this.enableInList = [1]
                // this.enableOutList = [2,3]
                if(devInfo.enterTime){
                    this.enableInList = devInfo.enterTime.split(",").map(Number).sort(function(a, b){return a - b});
                    if(this.enableInList.length>0){
                        let checkedCount = this.enableInList.length;
                        this.checkAllEnter = checkedCount === this.timeList.length;
                        this.isIndeterminate = checkedCount > 0 && checkedCount < this.timeList.length;
                    }
                } else {
                    this.enableInList = []
                }
                if(devInfo.outTime){
                    this.enableOutList = devInfo.outTime.split(",").map(Number).sort(function(a, b){return a - b});
                    if(this.enableOutList.length>0){
                        let checkedCount = this.enableOutList.length;
                        this.checkAllOut = checkedCount === this.timeList.length;
                        this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.timeList.length;
                    }
                }
                

                console.log("入厂时间转", this.enableInList);
                console.log("出厂时间转", this.enableOutList);
                this.addEditDialog = true;
            },
            removePoint(item) {
                this.$confirm(
                    this.$t("message.personnelPosition.beaconManage.table.confirmText") +
                    "【" +
                    item.devName +
                    "】?",
                    this.$t("message.personnelPosition.beaconManage.table.Tips"),
                    {
                        confirmButtonText: this.$t(
                            "message.personnelPosition.confirmButtonText"
                        ),
                        cancelButtonText: this.$t(
                            "message.personnelPosition.cancelButtonText"
                        ),
                        type: "warning",
                    }
                )
                    .then(() => {
                        ufaceDevDelete({id: item.id}).then((res) => {
                            this.$message.success(
                                this.$t("message.personnelPosition.delete_success")
                            ); //删除成功!
                            this.getList();
                        });
                    })
            },
            // 取消
            cancelBeaconFn(){
                this.initDialog = false
                 this.beaconForm= {
                    supplierType: '',
                    appId: "",
                    appSecret: "",
                    appKey: "",
                    projectSn: this.$store.state.projectSn,
                    housing:'',
                    issueDev:"",
                    serviceUrl:''
                }
            },
            saveBeaconFn() {
                this.$refs["beaconForm"].validate((valid) => {
                    if (valid) {
                        if(this.selectedHousingList.length>0){
                            this.beaconForm.housing=this.selectedHousingList.join(',')
                        }else{
                            this.beaconForm.housing=0
                        }
                        projectUfaceConfigEdit(this.beaconForm).then((res) => {
                            console.log('初始化设备',res)
                            this.getConfig();//???获取配置
                            // this.getList();
                            this.$message.success(
                                this.$t("message.personnelPosition.add_success")
                            ); //添加成功！
                            this.beaconDialog = false;
                            this.initDialog = false;
                        });
                    } else {
                        console.log("error submit!!");
                        return false;
                         
                    }
                });
            },
            isRepeat(arr){
                let obj = {};
                for(var i in arr){
                    if(obj[arr[i]]){
                        return true;
                    }
                    obj[arr[i]] = true
                }
                return false
            },
            //添加或编辑设备
            saveDevFn() {
            
                this.$refs["addEditForm"].validate((valid) => {
                    if (valid) {
                        if ((this.addEditForm.isEnter === 0 || this.addEditForm.isEnter === '') && (this.addEditForm.isOut === 0 || this.addEditForm.isOut === '')) {
                            this.$message.error(this.$t("message.laborDev.error"));
                            return;
                        }
                        let arr = []
                        this.enableInList.forEach(item=>{
                            arr.push(item)
                        })
                        this.enableOutList.forEach(item=>{
                            arr.push(item)
                        })
                        console.log(arr)
                        if(this.isRepeat(arr)){
                            this.$message.error(this.$t("message.laborDev.error1")); // 同一时间段内无法同时选择进出！
                            return;
                        }

                        if (this.isAdd) {
                            // if (this.enableInList.length + this.enableOutList.length === 24) {
                            console.log(
                                "$入厂时间",
                                this.enableInList,
                                "出厂时间",
                                this.enableOutList
                            );
                            
                            this.addEditForm.enterTime = this.enableInList.join(",");
                            this.addEditForm.outTime = this.enableOutList.join(",");
                            this.addEditForm.projectSn = this.$store.state.projectSn;
                            console.log("信息", this.addEditForm);
                            
                            ufaceDevAdd(this.addEditForm).then((result) => {
                                console.log("设备添加成功", result);
                                this.$message.success(result.message);
                                this.addEditDialog = false;
                                this.getList();
                                this.resetForm()
                            });


                            // } else {
                            //     console.log('入场出场时间不完整', this.enableInList, this.enableOutList)
                            // }
                            /*addPositionBeaconApi(this.addEditForm).then((res) => {
                                              this.beaconDialog = false;
                                              this.loadBeaconData();
                                              this.$message.success(
                                                this.$t("message.personnelPosition.add_success")
                                              ); //添加成功！
                                            });*/
                        } else {
                            //editPositionBeaconApi
                            this.addEditForm.enterTime = this.enableInList.join(",");
                            this.addEditForm.outTime = this.enableOutList.join(",");
                            console.log("信息", this.addEditForm);
                            delete this.addEditForm.heartBeatTime;
                            ufaceDevEdit(this.addEditForm).then((res) => {
                                this.beaconDialog = false;
                                this.getList();
                                this.$message.success(
                                    this.$t("message.personnelPosition.edit_success")
                                ); //编辑成功！
                                this.resetForm()
                                this.addEditDialog = false;
                            });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            resetForm(){
                this.addEditForm.enterTime = [];
                this.addEditForm.outTime = [];
                this.checkAllEnter = false
                this.isIndeterminate = false
                this.checkAllOut = false
                this.isIndeterminate2 = false
            },
            DevClose() {
                // Object.assign(this.$data.enableInList, this.$options.data().enableInList)
                this.enableInList = [
                    0,
                    1,
                    2,
                    3,
                    4,
                    5,
                    6,
                    7,
                    8,
                    9,
                    10,
                    11,
                    12,
                    13,
                    14,
                    15,
                    16,
                    17,
                    18,
                    19,
                    20,
                    21,
                    22,
                    23,
                ];
                this.enableOutList = [];
                this.addEditForm = {
                    devName: '',
                    devSn: '',
                    isEnter: '',
                    isOut: '',
                    devGroupType: 1
                }
                this.$nextTick(() => {
                    this.$refs.addEditForm.clearValidate();
                })
            },
            choiceDevice(index) {
                if (this.beaconForm.supplierType !== index) {
                    this.record = [];
                    this.record.push(this.beaconForm.supplierType);
                    console.log('this.beaconForm.supplierType', this.beaconForm.supplierType)
                    this.canCloseInitDialog = true;
                    this.initDialog = true;
                    this.beaconForm.supplierType = index;
                    // this.beaconForm.selectDev = index;
                    console.log('历史记录', this.record)
                }
            },
            CloseChoiceDevice() {
                // this.beaconForm.supplierType = this.record[0];
            }
        },
    };
</script>
<style lang="less" scoped>
    .flex {
        display: flex;
    }

    .noData {
        .flex;
        flex-direction: column;
        align-items: center;
        margin-top: 5%;

        > p {
            margin-top: 10px;
        }
    }

    .topBox {
        padding: 20px 25px;

        .item-main {
            .flex;

            .item-select {
                .flex;
                align-items: center;
                padding-top: 16px;
                margin-right: 69px;

                img {
                    margin-left: 10px;
                }
            }
        }
    }

    .titleBox {
        padding: 20px 0 0 25px;
        position: relative;
        // margin-top: 20px;
    }

    .devList {
        .flex;
        flex-wrap: wrap;
        /*background-color: #f3f5fd;*/
        padding: 24px 25px;

        > li {
            width: 33.33%;
            /*background-color: #f3f5fd;*/
            box-sizing: border-box;

            > p {
                color: rgba(38, 45, 71, 100);
                font-size: 16px;
                font-weight: bold;
            }

            > div {
                padding: 18px 25px;
                word-break: break-word;
                border-radius: 3px;
                border: 1px solid @borderColor;
                margin: 0 24px 20px 0;

                > div {
                    opacity: 0.8;
                    font-size: 14px;
                    margin-top: 7px;
                }
            }

            .icon-Group {
                .flex;
                justify-content: space-between;
                margin-top: 17px;

                > div > span {
                    opacity: 0.6;
                    cursor: pointer;
                    margin-right: 20px;
                }

                .el-icon-edit, .el-icon-delete {
                    margin-right: 10px;
                }

                .el-icon-edit {
                    color: #3A7BFF;
                }

                .el-icon-delete {
                    color: red;
                }
            }
        }

        > li:nth-child(3n+3) > div {
            margin-right: 0;
        }

        // > li > div:hover {
        //     background-color: rgba(243, 245, 255, 1);
        //     box-shadow: 0 1px 8px 2px rgba(81, 129, 246, 0.16);
        // }
    }

    .dialogFormBox {
        /*width: 840px;*/
    }
    .downloadBtn{
        position: absolute;
        right: 20px;
        top: 25px;
        text-decoration: underline;
        cursor: pointer;
    }
</style>