<template>
  <div class="deviceSet manage-page">
    <div class="table-title">
      <img src="../../assets/manageImg/deviceInfoManage.png" alt="">{{$t('deviceManagement.title')}}
    </div>
    <div class="flex-view">
      <div class="manage-btn" @click="active = 0" :class="active == 0 ? 'active' : ''">
        <img src="../../assets/manageImg/manage-btn-icon2.png" alt="">
        {{$t('deviceManagement.deviceTypes.fertilizer')}}
      </div>
      <div class="manage-btn" @click="active = 1" :class="active == 1 ? 'active' : ''">
        <img src="../../assets/manageImg/manage-btn-icon1.png" alt="">
        {{$t('deviceManagement.deviceTypes.controller')}}
      </div>
      <div class="manage-btn" @click="active = 2" :class="active == 2 ? 'active' : ''">
        <img src="../../assets/manageImg/manage-btn-icon1.png" alt="">
        {{$t('deviceManagement.deviceTypes.smartController')}}
      </div>
          <div class="manage-btn" @click="active = 3" :class="active == 3 ? 'active' : ''">
        <img src="../../assets/manageImg/manage-btn-icon1.png" alt="">
        {{$t('deviceManagement.deviceTypes.weatherStation')}}
      </div>
          <div class="manage-btn" @click="active = 4" :class="active == 4 ? 'active' : ''">
        <img src="../../assets/manageImg/manage-btn-icon1.png" alt="">
        {{$t('deviceManagement.deviceTypes.dataCollector')}}
      </div>
    </div>
    <div class="table-view" style="width: 100%;" v-if="active === 0">
      <el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
        <!-- <el-table-column  label="序号">
          <template slot-scope="scope">
              <div>{{scope.$index+1 }}
              </div>
            </template>
</el-table-column> -->
        <el-table-column prop="deviceId" :label="$t('deviceManagement.tableHeaders.deviceCode')">
        </el-table-column>
        <el-table-column prop="deviceTypeName" :label="$t('deviceManagement.tableHeaders.deviceName')">
        </el-table-column>
        <el-table-column :label="$t('nameText.operations')">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel(scope.row, scope.$index)">
                <img src="../../assets/manageImg/table-edit.png" alt="">{{$t('deviceManagement.tableHeaders.edit')}}
              </div>
              <div class="table-operate red" @click="openModelName(scope.row, scope.$index)">
                <img src="../../assets/manageImg/table-edit.png" alt="">{{$t('deviceManagement.tableHeaders.modifyMoreNames')}}
              </div>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div class="table-view" style="width: 100%;" v-if="active===1">
      <el-table :data="tableData1" :row-class-name="tableRowClassName" height="620" style="width: 100%">
        <!-- <el-table-column  label="序号">
          <template slot-scope="scope">
              <div>{{scope.$index+1 }}
              </div>
            </template>
        </el-table-column> -->
        <el-table-column prop="deviceId" :label="$t('deviceManagement.tableHeaders.deviceCode')">
        </el-table-column>
        <el-table-column prop="deviceTypeName" :label="$t('deviceManagement.tableHeaders.deviceName')">
        </el-table-column>
        <el-table-column :label="$t('nameText.operations')">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel1(scope.row, scope.$index)">
                <img src="../../assets/manageImg/table-edit.png" alt="">{{$t('deviceManagement.tableHeaders.edit')}}
              </div>
              <div class="table-operate blue"  @click="openRoleModel(scope.row.deviceId)">
                <img src="../../assets/manageImg/table-edit.png" alt="">{{$t('deviceManagement.tableHeaders.permissionEdit')}}
              </div>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-view" style="width: 100%;" v-if="active===2">
      <el-table :data="tableData2" :row-class-name="tableRowClassName" height="620" style="width: 100%">
        <!-- <el-table-column  label="序号">
          <template slot-scope="scope">
              <div>{{scope.$index+1 }}
              </div>
            </template>
        </el-table-column> -->
        <el-table-column prop="deviceId" :label="$t('deviceManagement.tableHeaders.deviceCode')">
        </el-table-column>
        <el-table-column prop="deviceTypeName" :label="$t('deviceManagement.tableHeaders.deviceName')">
        </el-table-column>
        <el-table-column :label="$t('nameText.operations')">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel1(scope.row, scope.$index)">
                <img src="../../assets/manageImg/table-edit.png" alt="">{{$t('deviceManagement.tableHeaders.edit')}}
              </div>
              <div class="table-operate red" @click="openModelName1(scope.row, scope.$index)">
                <img src="../../assets/manageImg/table-edit.png" alt="">{{$t('deviceManagement.tableHeaders.modifyMoreNames')}}
              </div>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
        <div class="table-view" style="width: 100%;" v-if="active === 3">
      <el-table :data="tableData3" :row-class-name="tableRowClassName" height="620" style="width: 100%">
        <!-- <el-table-column  label="序号">
          <template slot-scope="scope">
              <div>{{scope.$index+1 }}
              </div>
            </template>
</el-table-column> -->
        <el-table-column prop="deviceId" :label="$t('deviceManagement.tableHeaders.deviceCode')">
        </el-table-column>
        <el-table-column prop="deviceTypeName" :label="$t('deviceManagement.tableHeaders.deviceName')">
        </el-table-column>
        <el-table-column :label="$t('nameText.operations')">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel(scope.row, scope.$index)">
                <img src="../../assets/manageImg/table-edit.png" alt="">{{$t('deviceManagement.tableHeaders.edit')}}
              </div>
            
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
       <div class="table-view" style="width: 100%;" v-if="active === 4">
      <el-table :data="tableData4" :row-class-name="tableRowClassName" height="620" style="width: 100%">
        <!-- <el-table-column  label="序号">
          <template slot-scope="scope">
              <div>{{scope.$index+1 }}
              </div>
            </template>
</el-table-column> -->
        <el-table-column prop="deviceId" :label="$t('deviceManagement.tableHeaders.deviceCode')">
        </el-table-column>
        <el-table-column prop="deviceTypeName" :label="$t('deviceManagement.tableHeaders.deviceName')">
        </el-table-column>
        <el-table-column :label="$t('nameText.operations')">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel(scope.row, scope.$index)">
                <img src="../../assets/manageImg/table-edit.png" alt="">{{$t('deviceManagement.tableHeaders.edit')}}
              </div>
           
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog  :close-on-click-modal="false" title="" top="10vh" :visible.sync="addModel" width="700px" class="vrcode-model manage-model"
      :append-to-body="true">
      <div class="vrcode-model-title">
        {{$t('deviceManagement.dialogs.editTitle')}}
      </div>
      <div class="vrcode-content" v-if="nowData">
        <div class="manage-left">
          <div class="manage-input">
            <div class="input-title">{{$t('nameText.deviceCode')}}</div>
            <input type="text" v-model="nowData.deviceId" disabled :placeholder="$t('placeholder.deviceCodePlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{$t('nameText.deviceName')}}</div>
            <input type="text" v-model="nowData.deviceTypeName" :placeholder="$t('placeholder.deviceNamePlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{$t('deviceManagement.dialogs.statusPageName')}}</div>
            <input type="text" v-model="nowData.stationName" :placeholder="$t('placeholder.statusPageNamePlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{$t('deviceManagement.dialogs.cameraName')}}</div>
            <input type="text" v-model="nowData.cameraSerialNumber" :placeholder="$t('placeholder.cameraNamePlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{$t('deviceManagement.dialogs.cameraChannel')}}</div>
            <input type="number" v-model="nowData.cameraChannelNumber" :placeholder="$t('placeholder.cameraChannelPlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{$t('nameText.sortOrder')}}</div>
            <input type="number" v-model="nowData.equipmentStatu" :placeholder="$t('placeholder.sortOrderPlaceholder')">
          </div>
        </div>
        <div class="manage-right">
          <div class="manage-img">
            <label for="sel-img">
              <img class="" :src="nowData.hls" alt="">
            </label>
            <input ref="fileInput" type="file" :multiple="false" id="sel-img" accept="image/*"
              @change="handleImageChange($event, 0)" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel">{{$t('index.confirm')}}</div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">{{$t('index.cancel')}}</div>
      </span>
    </el-dialog>
<!-- 施肥机的修改名字 -->
    <el-dialog  :close-on-click-modal="false" title="提示" top="10vh" :visible.sync="changeName" width="760px" class="vrcode-model manage-model"
      :append-to-body="true">
      <div class="vrcode-model-title">
          {{$t('deviceManagement.dialogs.modifyNamesTitle')}}
      </div>
      <div class="vrcode-content" v-if="nameList">
        <div class="manage-left">
          <div class="manage-input w-160">
            <div class="input-title">{{$t('deviceManagement.dialogs.fertilizationRecipes')}}</div>
            <input type="text" v-model="nameList.fertilizationOne" :placeholder="$t('placeholder.recipePlaceholder', {n: 1})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.fertilizationTwo" :placeholder="$t('placeholder.recipePlaceholder', {n: 2})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.fertilizationThree" :placeholder="$t('placeholder.recipePlaceholder', {n: 3})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.fertilizationFour" :placeholder="$t('placeholder.recipePlaceholder', {n: 4})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.fertilizationFive" :placeholder="$t('placeholder.recipePlaceholder', {n: 5})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.fertilizationSix" :placeholder="$t('placeholder.recipePlaceholder', {n: 6})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.fertilizationSeven" :placeholder="$t('placeholder.recipePlaceholder', {n: 7})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.fertilizationEight" :placeholder="$t('placeholder.recipePlaceholder', {n: 8})">
          </div>
        </div>
        <div class="manage-center">
          <div class="manage-input w-160">
            <div class="input-title">{{$t('deviceManagement.dialogs.irrigationGroups')}}</div>
            <input type="text" v-model="nameList.solenoidOne" :placeholder="$t('placeholder.groupPlaceholder', {n: 1})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidTwo" :placeholder="$t('placeholder.groupPlaceholder', {n: 2})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidThree" :placeholder="$t('placeholder.groupPlaceholder', {n: 3})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidFour" :placeholder="$t('placeholder.groupPlaceholder', {n: 4})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidFive" :placeholder="$t('placeholder.groupPlaceholder', {n: 5})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidSix" :placeholder="$t('placeholder.groupPlaceholder', {n: 6})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidSeven" :placeholder="$t('placeholder.groupPlaceholder', {n: 7})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidEight" :placeholder="$t('placeholder.groupPlaceholder', {n: 8})">
          </div>
        </div>
      
        <div class="manage-center">
          <div class="manage-input w-160">
            <div class="input-title">{{$t('deviceManagement.dialogs.irrigationGroups9_16')}}</div>
            <input type="text" v-model="nameList.solenoidNine" :placeholder="$t('placeholder.groupPlaceholder', {n: 9})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidTen" :placeholder="$t('placeholder.groupPlaceholder', {n: 10})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidElven" :placeholder="$t('placeholder.groupPlaceholder', {n: 11})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidTwelve" :placeholder="$t('placeholder.groupPlaceholder', {n: 12})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidThirteen" :placeholder="$t('placeholder.groupPlaceholder', {n: 13})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidFourteen" :placeholder="$t('placeholder.groupPlaceholder', {n: 14})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidFifteen" :placeholder="$t('placeholder.groupPlaceholder', {n: 15})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.solenoidSixteen" :placeholder="$t('placeholder.groupPlaceholder', {n: 16})">
          </div>
        </div>
   
        <div class="manage-right">
          <div class="manage-input w-160">
            <div class="input-title">{{$t('deviceManagement.dialogs.externalDevices')}}</div>
            <input type="text" v-model="nameList.externalOne" :placeholder="$t('placeholder.externalPlaceholder', {n: 1})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.externalTwo" :placeholder="$t('placeholder.externalPlaceholder', {n: 2})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.externalThree" :placeholder="$t('placeholder.externalPlaceholder', {n: 3})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="nameList.externalFour" :placeholder="$t('placeholder.externalPlaceholder', {n: 4})">
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel2">{{$t('index.confirm')}}</div>
        <div class="vrcode-btn cancle-btn w-100" @click="changeName = false">{{$t('index.cancel')}}</div>
      </span>
    </el-dialog>
    <!-- 控制器编辑 -->
    <el-dialog  :close-on-click-modal="false" title="提示" top="10vh" :visible.sync="addModel1" width="564px" class="vrcode-model manage-model"
      :append-to-body="true">
      <div class="vrcode-model-title">
        {{$t('nameText.edit')}}
      </div>
      <div class="vrcode-content" v-if="nowData1">
        <div class="manage-left">
          <div class="manage-input">
            <div class="input-title">{{$t('nameText.deviceCode')}}</div>
            <input type="text" v-model="nowData1.deviceId" disabled :placeholder="$t('placeholder.deviceCodePlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{$t('deviceManagement.dialogs.cameraName')}}</div>
            <input type="text" v-model="nowData1.cameraSerialNumber" :placeholder="$t('placeholder.cameraNamePlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{$t('nameText.sortOrder')}}</div>
            <input type="number" v-model="nowData1.equipmentStatu" :placeholder="$t('placeholder.sortOrderPlaceholder')">
          </div>
          <div class="manage-img-small">
            <label for="sel-img">
              <img class="" :src="nowData1.hls" alt="">
            </label>
            <input ref="fileInput1" type="file" :multiple="false" id="sel-img" accept="image/*"
              @change="handleImageChange($event,1)" />
          </div>
        </div>
        <div class="manage-right">
          <div class="manage-input">
            <div class="input-title">{{$t('nameText.deviceName')}}</div>
            <input type="text" v-model="nowData1.deviceTypeName" :placeholder="$t('placeholder.deviceNamePlaceholder')">
          </div>

          <div class="manage-input">
            <div class="input-title">{{$t('deviceManagement.dialogs.cameraChannel')}}</div>
            <input type="number" v-model="nowData1.cameraChannelNumber" :placeholder="$t('deviceManagement.dialogs.cameraChannel')">
          </div>
          <div class="manage-text">
          {{$t('deviceManagement.dialogs.noteText')}}
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel1">{{$t('index.confirm')}}</div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel1 = false">{{$t('index.cancel')}}</div>
      </span>
    </el-dialog>
<!-- 智能灌溉 -->
<el-dialog  :close-on-click-modal="false" title="" top="10vh" :visible.sync="changeName1" width="760px" class="vrcode-model manage-model"
      :append-to-body="true">
      <div class="vrcode-model-title">
          {{$t('deviceManagement.dialogs.modifyNamesTitle')}}
      </div>
      <div class="vrcode-content" v-if="name20List">
        <div class="manage-left">
          <div class="manage-input w-160">
            <div class="input-title">{{$t('deviceManagement.dialogs.smartIrrigation')}}</div>
            <input type="text" v-model="name20List.name1" :placeholder="$t('placeholder.smartPlaceholder', {n: 1})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name2" :placeholder="$t('placeholder.smartPlaceholder', {n: 2})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name3" :placeholder="$t('placeholder.smartPlaceholder', {n: 3})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name4" :placeholder="$t('placeholder.smartPlaceholder', {n: 4})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name5" :placeholder="$t('placeholder.smartPlaceholder', {n: 5})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name6" :placeholder="$t('placeholder.smartPlaceholder', {n: 6})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name7" :placeholder="$t('placeholder.smartPlaceholder', {n: 7})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name8" :placeholder="$t('placeholder.smartPlaceholder', {n: 8})">
          </div>
        </div>
        <div class="manage-center">
          <div class="manage-input w-160">
            <div class="input-title">{{$t('deviceManagement.dialogs.smartIrrigation9_16')}}</div>
            <input type="text" v-model="name20List.name9"  :placeholder="$t('placeholder.smartPlaceholder', {n: 9})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name10" :placeholder="$t('placeholder.smartPlaceholder', {n: 10})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name11" :placeholder="$t('placeholder.smartPlaceholder', {n: 11})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name12" :placeholder="$t('placeholder.smartPlaceholder', {n: 12})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name13" :placeholder="$t('placeholder.smartPlaceholder', {n: 13})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name14" :placeholder="$t('placeholder.smartPlaceholder', {n: 14})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name15" :placeholder="$t('placeholder.smartPlaceholder', {n: 15})">
          </div>
          <div class="manage-input w-160">
            <input type="text" v-model="name20List.name16" :placeholder="$t('placeholder.smartPlaceholder', {n: 16})">
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel3">{{$t('index.confirm')}}</div>
        <div class="vrcode-btn cancle-btn w-100" @click="changeName = false">{{$t('index.cancel')}}</div>
      </span>
    </el-dialog>

    
    <el-dialog  :close-on-click-modal="false" :title="$t('deviceManagement.dialogs.permissionManagement')" :append-to-body="true" :visible.sync="roleModel" width="70%">
      <div class="model-title">{{$t('deviceManagement.dialogs.permissionManagement')}}</div>
      <div class="model-sel scroll">
        <div v-for="item, index in allDevicestatus" :key="index">
          <div @click="selClick(item)" :class="item.state==0 ? 'sel' : 'no-sel'"></div>
          {{ item.nickName }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <div class="vrcode-btn blue-btn">添加标准控制器</div> -->
        <div class="vrcode-btn cancle-btn w-100" @click="roleModel = false">{{$t('index.confirm')}}</div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      addModel: false,
      addModel1: false,
      changeName: false,
      nowData: null,
      nowData1: null,
      nameList:null,//施肥机名字
      name20List:null,//智能灌溉名字
      changeName1:false,//智能灌溉的弹窗

      allDevicestatus:[],
      roleModel:false,
      nowDeviceId:'',
    }
  },
  // watch:{
  //   active(){
  //     setTimeout(() => {
  //       this.$forceUpdate()
  //     }, 10);
  //   },
  // },
  mounted() { this.dataInit() },
  methods: {

    dataInit() {
      var user = JSON.parse(localStorage.getItem('userInfo'))
      this.api.selUserbyid(user.userid).then(res => {
        this.tableData = []
        this.tableData1 = []
        this.tableData2 = []
        this.tableData3 = []
        this.tableData4 = []
        if (res.data.code == 200) {
          res.data.data.devices.forEach((el, index) => {
            if (el.deviceName == 10) {
              this.tableData1.push(el)
            } else if (el.deviceName == 1) {
              this.tableData.push(el)
            } else if (el.deviceName == 20) {
              this.tableData2.push(el)
            } else if (el.deviceName == 30) {
              this.tableData3.push(el)
            } else if (el.deviceName == 40) {
              this.tableData4.push(el)
            }
          })
        }
      })
    },
    selClick(item){
      var data
      if(item.state==0){
          data=  {
            "deviceId": this.nowDeviceId,
            "permission": item.id,
            "state":1
        }
      }else{
        data=  {
            "deviceId": this.nowDeviceId,
            "permission": item.id,
            "state":0
        }
      }
      item.state = data.state
                this.$forceUpdate();
               var apiData=JSON.parse(JSON.stringify(data))
                this.api.updatePermissionState(apiData).then((res => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: this.$t('message.change'),
                            type: "success",
                        });
                        // this.getcontrol_cpermission()
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: "warning",
                        });
                    }
                }))
    },
openRoleModel(deviceId) {
      this.loading = this.$loading({
        lock: true,
        text: this.$t('message.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.selDevicestatus = []
      this.nowDeviceId=deviceId
  
      // 线调取全部权限
      this.api.getcontrol_cpermission(deviceId).then(res => {
        if (res.data.code == 200) {
          this.allDevicestatus = res.data.data
          this.roleModel=true
          this.loading.close()
          // 再根据deviceId调取单个设备权限 并且查询共同name
          // this.getcontrol_cpermission()
        } else {
          this.loading.close()
          this.$message.error(res.data.msg);
        }
      })
    },
    changeAddModel() {
      this.loading = this.$loading({
        lock: true,
        text: this.$t('message.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var data = this.nowData
      this.api.updatedevice(data).then(res => {
        this.loading.close()
        if (res.data.code == 200) {
          this.dataInit()
          this.$message.success(res.data.msg);
          this.addModel = false
        } else {
          this.$message.error(res.data.msg);
          this.addModel = false
        }
      })
    },
    openModelName(item,index){
      this.loading = this.$loading({
        lock: true,
        text: this.$t('message.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var data={deviceId:item.deviceId}
      this.api.getByid(data).then(res=>{
        this.loading.close()
        if (res.data.code == 200) {
          this.nameList=res.data.data
          this.changeName=true
        } else {
          this.$message.error(res.data.msg);
        }
      })
},
openModelName1(item,index){
      this.loading = this.$loading({
        lock: true,
        text: this.$t('message.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var data={deviceId:item.deviceId}
      this.api.getFi_getName(data).then(res=>{
        this.loading.close()
        if (res.data.code == 200) {
          this.name20List=res.data.data
          this.changeName1=true
        } else {
          this.$message.error(res.data.msg);
        }
      })
},
changeAddModel3(){
  this.loading = this.$loading({
        lock: true,
        text: this.$t('message.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var data = this.name20List
      this.api.getFi_updateName(data).then(res=>{
        this.loading.close()
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.changeName1 = false
        } else {
          this.$message.error(res.data.msg);
          this.changeName1 = false
        }
      })
},
    changeAddModel1() {
      this.loading = this.$loading({
        lock: true,
        text: this.$t('message.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var data = this.nowData1
      this.api.updatedevice(data).then(res => {
        this.loading.close()
        if (res.data.code == 200) {
          this.dataInit()
          this.$message.success(res.data.msg);
          this.addModel1 = false
        } else {
          this.$message.error(res.data.msg);
          this.addModel1 = false
        }
      })
    },
    changeAddModel2(){
      this.loading = this.$loading({
        lock: true,
        text: this.$t('message.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var data = this.nameList
      this.api.updateFsname(data).then(res=>{
        this.loading.close()
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.changeName = false
        } else {
          this.$message.error(res.data.msg);
          this.changeName = false
        }
      })
    },
    handleImageChange(event,type) {
      this.loading = this.$loading({
        lock: true,
        text:  this.$t('message.uploading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const imageData = e.target.result;
        const convertedFile = new File([imageData], file.name, { type: file.type });
        // 处理转换后的文件...

        var data = { file: convertedFile }
        this.api.manageUploadImage(data).then(res => {
          this.loading.close()
        if (res.data.code == 200) {
          if(type==0){
            this.nowData.hls=res.data.msg
            this.$refs.fileInput.value = '';
          }else{
            this.nowData1.hls=res.data.msg 
            this.$refs.fileInput1.value = '';
          }
         
        } else {
         
        }
        })
      };
      reader.readAsArrayBuffer(file);

    },
    openModel(item, index) {
      this.nowData = JSON.parse(JSON.stringify(item))
      this.addModel = true
    },
    openModel1(item, index) {
      this.nowData1 = JSON.parse(JSON.stringify(item))
      this.addModel1 = true
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    }
  },

}
</script>
<style lang="scss"></style>