/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="control-model-group">
    <div :class="className" class="group-control">
      <div class="control-model" v-for="(item, index) in controllist" :key="index">

        <template v-if="othersControl && specialControl.indexOf(item.id) !== -1">
          <div class="single-model-new"
            :style="{'backgroundColor': item.bgcolor}"
            @click="selectModel(item)"
            v-if="isHasPermission(item.permission) && (funcSort === 'allFunc' || (funcSort === 'thirdPartyFunc'&& thirdPartyControl.indexOf(item.id) !== -1))">
            <div class="closephase-icon">
              <OthersIconSvg :type="item.type" />
            </div>
            <div class="single-model-name-theme">{{item.iconName}}</div>
          </div>
        </template>

        <template v-else>
          <div class="single-model-new"
          :style="{'backgroundColor': item.bgcolor}"
          @click="selectModel(item)"
          :class="preselecttype == item.type? 'single-model-select' : ''"
          v-if="isHasPermission(item.permission) && (funcSort === 'allFunc' || (funcSort === 'thirdPartyFunc'&& thirdPartyControl.indexOf(item.id) !== -1))">
          <!-- <svg-icon :icon-class="item.iconClass" className="model-icon"></svg-icon> -->
          <div class="model-icon">
            <IconSvg :type="item.type" />
          </div>
          <div class="single-model-name-theme">{{item.iconName}}</div>
        </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { hasPermission, getTheme } from '../../../../utils/auth'

import IconSvg from './icon.vue'
import OthersIconSvg from './othersIcon.vue'

export default {
  name: 'ControlModelGroup',
  components: {
    IconSvg,
    OthersIconSvg
  },
  props: {
    className: {
      type: String
    },
    controlList: {
      type: Array
    },
    funcSort: {
      type: String,
      default: 'allFunc'
    },
    othersControl: {
      type: Boolean,
      default: false
    },
    thirdPartyControl: {
      type: Array
    }
  },
  data () {
    return {
      preselecttype: '',
      controllist: [],
      specialControl: [23, 24, 100]
    }
  },
  computed: {
  },
  watch: {
    controlList: {
      handler (newVal, oldVal) {
        this.controllist = JSON.parse(JSON.stringify(newVal))
      },
      deep: true
    }
  },
  methods: {
    isHasPermission (path) {
      let res = hasPermission(path)
      return res
    },
    selectModel (item) {
      this.preselecttype = item.type
      this.clickType(item)
      if (this.specialControl.indexOf(item.id) !== -1) {
        this.$emit('selectSpecialModel')
      }
      this.$emit('selectModel', item)
    },
    init () {
      this.selectModel(this.controllist[0])
    },
    clickType (item) {
      this.curTypeItem = item
      for (let i = 0; i < this.controllist.length; i++) {
        if (this.controllist[i].clicked) {
          delete this.controllist[i].clicked
          this.controllist[i].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
        }
      }
      for (let i = 0; i < this.controllist.length; i++) {
        if (this.controllist[i].type === item.type) {
          this.controllist[i].clicked = true
          this.controllist[i].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
        }
      }
    }
  },
  mounted () {
    this.controllist = JSON.parse(JSON.stringify(this.controlList))
  }
}
</script>
