<template lang="pug">
  view.item-checkbox(: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-pannel1(@click="switchStatic")
      view.item
        view.item-name(:style="{color: (disabled? 'rgba(0,0,0,0.38)' : '')}") {{title}}
      image(:src="getArrowIcon()" :class="disabled? 'gray': ''")
      text.text-right(:style="{color: (disabled? 'rgba(0,0,0,0.38)' : '')}") {{currentValue}}
    view.dialog-divide(v-if="split")
    uni-popup(ref="showPopup" type="bottom")
      view.radio-dialog-background
        text.title {{dialogTitle}}
        view.vertical(v-for="(item, index) in data" :key="index")
          view.item(@click="selectItem(item, index)")
            text.left1 {{item[(dialogListItem || "text")]}}
            image.right1(:src="item.checked ? getOnPic() : getOffPic()" :class="disabled? 'gray': ''")
          view.dialog-divide
        text.cancel(@click="cancelDialog") 取消
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch} from "vue-property-decorator";
import UniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue"
import IconHelper from "../item-checkbox/IconHelper";

@Component({
  components: {
    UniPopup
  }
})
export default class ItemCheckbox extends Vue {
  public isCheck: boolean = false;

  @Prop() public index!: number;
  @Prop() public height!: number;
  @Prop() public title!: string;
  @Prop() public onImg!: string;
  @Prop() public offImg!: string;
  @Prop() public split!: boolean;
  @Prop() public dialogPosition!: string;
  @Prop() public dialogListItem!: string;
  @Prop() public dialogTitle!: string
  @Prop() public dialogData!: Array<any>;
  @Prop() public defaultValue!: string;
  @Prop() public disabled!: boolean;
  @Prop() public description!: string
  @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 picUrl: string = IconHelper.getRadioOff()//比对之后再更新icon路径
  public offDefaultPic: string = IconHelper.getRadioOff();
  public onDefaultPic: string = IconHelper.getRadioOn();

  private data: Array<any> = [];
  private currentValue: string = "";
  public borderTopLeftRadius: number = 0;
  public borderTopRightRadius: number = 0;
  public borderBottomLeftRadius: number = 0;
  public borderBottomRightRadius: number = 0;

  getArrowIcon() {
    return IconHelper.getArrow()
  }

  @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() {
    if (this.defaultValue) {
      this.currentValue = this.defaultValue;
    }
    if (!this.dialogData) {
      return;
    }
    this.data = this.dialogData
    this.data.forEach(item => {
      if (item.checked) {
        this.currentValue = item[(this.dialogListItem || "text")]
      }
    })
    this.$on("onchange", (data: any) => {
      this.currentValue = data.value;
    })
  }

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

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

  switchStatic() {
    if (this.disabled) {
      return;
    }
    //如果需要弹出对话框
    if (this.dialogData) {
      if((<any>this.$refs).showPopup) {
        (<any>this.$refs).showPopup.open((this.dialogPosition || "center"))
      }
      return;
    }
    this.isCheck = !this.isCheck;
    if (this.isCheck) {
      this.picUrl = this.onImg
    } else {
      this.picUrl = this.offImg
    }
  }

  selectItem(data: any, index: number) {
    this.data.forEach(item => {
      console.log(item)
      item.checked = false;
    })

    data.checked = !data.checked;
    this.currentValue = this.data[index][(this.dialogListItem || "text")];
    if((<any>this.$refs).showPopup) {
      (<any>this.$refs).showPopup.close()
    }

    try {
      // @ts-ignore
      this.$emit("onchange", {
        index: (this.index > -1 ? this.index : -1),
        value: this.currentValue,
        checked: data.checked
      })
    } catch {
    }
  }

  cancelDialog() {
    if((<any>this.$refs).showPopup) {
      (<any>this.$refs).showPopup.close()
    }
  }
}

</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-checkbox {
  background-color: #FFFFFF;
}

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

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

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

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

  image {
    position: absolute;
    right: $px17;
    margin-top: $px13;
    width: $px13;
    height: $px25;
  }

  .text-right {
    position: absolute;
    right: $px33;
    margin: $px16 $px5;
    font-size: $px16;
    color: #000000FF;
    opacity: 0.6;
  }
}

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

.radio-dialog-background {
  display: flex;
  flex-direction: column;
  width: 80vw;
  background-color: #FFFFFF;
  border-radius: $px17;
  padding-top: $px15;
  padding-right: $px25;
  padding-left: $px25;

  .vertical {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    margin-top: $px6;
  }

  .title {
    display: flex;
    font-size: $px22;
    color: #000000FF;
    opacity: 0.9;
  }
}

.item {
  display: flex;
  height: $px50;
  flex-direction: row;
}

.left1 {
  font-size: $px17;
  line-height: $px53;
  color: #000000FF;
  opacity: 0.9;
}

.right1 {
  line-height: $px27;
  height: $px27;
  width: $px27;
  color: #000000FF;
  opacity: 0.9;
  position: absolute;
  margin: $px13 $px0;
  right: $px0;
}

.cancel {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #00A5B5;
  line-height: $px62;
}
</style>