<template lang="pug">
  view.item-switch(:style="{opacity: disabled? 0.4: 1, borderTopLeftRadius: (this.borderTopLeftRadius * 2) + 'rpx',borderTopRightRadius: (this.borderTopRightRadius * 2) + 'rpx',borderBottomLeftRadius: (this.borderBottomLeftRadius * 2) + 'rpx',borderBottomRightRadius: (this.borderBottomRightRadius * 2) + 'rpx'}")
    view.item-switch-panel(:style="{height: (description? '134rpx': '106rpx')}")
      view.item(v-if="description")
        view.item-name(:style="{color: (disabled? 'rgba(0,0,0,0.38)' : '')}")
          text {{title}}
        view.item-desc(:style="{color: (disabled? 'rgba(0,0,0,0.38)' : '')}")
          text {{description}}
      view.item2(v-else)
        view.item-name(:style="{color: (disabled? 'rgba(0,0,0,0.38)' : '')}")
          text {{title}}
      image(v-if="description" :src="isCheck ? getOnPic() : getOffPic()" @onchange="onClick" @click="onClick" :class="disabled? 'gray': ''")
      image.img2(v-else :src="isCheck ? getOnPic() : getOffPic()" @click="onClick" :class="disabled? 'gray': ''")
    view.dialog-divide
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch} from "vue-property-decorator";
import IconHelper from "../item-switch/IconHelper";

@Component
export default class ItemSwitch extends Vue {

  public offDefaultPic: string = IconHelper.getSwitchOff();
  public onDefaultPic: string = IconHelper.getSwitchOn();
  private isCheck: boolean = false;
  private value: boolean = false;

  @Prop() public index!: number;
  @Prop() public checked!: boolean;
  @Prop() public height!: number;
  @Prop() public title!: string;
  @Prop() public description!: string;
  @Prop() public disabled!: boolean;
  @Prop() public onImg!: string;
  @Prop() public offImg!: string;
  @Prop() public split!: boolean;
  @Prop() public iconSize!: { width: number, height: number };
  @Prop() public radius!: number;
  @Prop() public radiusTop!: number;
  @Prop() public radiusLeft!: number;
  @Prop() public radiusRight!: number;
  @Prop() public radiusBottom!: number;

  public borderTopLeftRadius: number = 0;
  public borderTopRightRadius: number = 0;
  public borderBottomLeftRadius: number = 0;
  public borderBottomRightRadius: number = 0;

  @Watch("radiusTop", {deep: true, immediate: true})
  setRadiusTop(value: number) {
    if (!value) {
      return;
    }
    this.borderTopLeftRadius = value;
    this.borderTopRightRadius = value;
    this.borderBottomLeftRadius = 0;
    this.borderBottomRightRadius = 0;
  }

  @Watch("radiusLeft", {deep: true, immediate: true})
  setRadiusLeft(value: number) {
    if (!value) {
      return;
    }
    this.borderTopLeftRadius = value;
    this.borderTopRightRadius = 0;
    this.borderBottomLeftRadius = value;
    this.borderBottomRightRadius = 0;
  }

  @Watch("radiusBottom", {deep: true, immediate: true})
  setRadiusBottom(value: number) {
    if (!value) {
      return;
    }
    this.borderTopLeftRadius = 0;
    this.borderTopRightRadius = 0;
    this.borderBottomLeftRadius = value;
    this.borderBottomRightRadius = value;
  }

  @Watch("radiusRight", {deep: true, immediate: true})
  setRadiusRight(value: number) {
    if (!value) {
      return;
    }
    this.borderTopLeftRadius = 0;
    this.borderTopRightRadius = value;
    this.borderBottomLeftRadius = 0;
    this.borderBottomRightRadius = value;
  }

  @Watch("radius", {deep: true, immediate: true})
  setRadius(value: number) {
    if (!value) {
      return;
    }
    this.borderTopLeftRadius = value;
    this.borderTopRightRadius = value;
    this.borderBottomLeftRadius = value;
    this.borderBottomRightRadius = value;
  }

  mounted() {
    this.$on("onchange", (data: any) => {
      this.value = data.value;
      this.isCheck = !this.isCheck;
    })
  }

  getOnPic() {
    return this.onImg || this.onDefaultPic;
  }

  getOffPic() {
    return this.offImg || this.offDefaultPic;
  }

  onClick() {
    if (this.disabled) {
      return;
    }
    let data = {index: this.index, value: !this.value, checked: !this.value};
    this.$emit("onchange", data)
    this.$emit("click", data)
  }
}

</script>

<style scoped lang="scss">
@import '../../static/styles/h5-unit';
@import '../../static/styles/base';


.gray {
  -webkit-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
  filter: grayscale(100%);
  /* filter:url('../img/gray.svg#grayscale'); */
  filter: gray;
}

.item-switch-panel {
  display: flex;
  flex-direction: row;
  align-items: center;

  .item {
    display: flex;
    flex-direction: column;

    .item-name {
      margin-left: $px17;
      margin-top: $px12;
      font-size: $px17;
      color: #000000FF;
      opacity: 0.9;
    }

    .item-desc {
      margin-left: $px17;
      margin-top: $px2;
      font-size: $px15;
      color: #000000FF;
      opacity: 0.6;
    }
  }

  .item2 {
    display: flex;
    flex-direction: column;

    .item-name {
      margin-left: $px17;
      margin-top: -$px2;
      font-size: $px17;
      color: #000000FF;
      opacity: 0.9;
    }
  }

  switch {
    position: absolute;
    right: $px17;
    margin-top: $px24;
    transform: scale(0.7);
  }

  image {
    position: absolute;
    right: $px17;
    width: $px41;
    height: $px24;
  }

  .img2 {
    position: absolute;
    right: $px17;
    margin-top: $px6;
    width: $px41;
    height: $px24;
  }
}

.item-pannel2 {
  height: $px53;
  display: flex;

  .item-left {
    margin-left: $px17;
    margin-top: $px15;
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    color: #000000FF;
    opacity: 0.9;
  }

  .img-right {
    position: absolute;
    right: $px20;
    width: $px8;
    height: $px15;
    margin: $px17 $px0;
  }
}

.dialog-divide {
  border-bottom-width: $px1;
  border-bottom-color: #ecebeb;
  border-bottom-style: solid;
  margin-left: $px17;
  margin-right: $px17;
}

</style>