<template lang="pug">
  view.list-item
    item-radio(
      v-if="type==`radio`"
      :index="index"
      :check="checked"
      :height="height"
      :title="title"
      :description="description"
      :disabled="disabled"
      :split="split"
      :radius="radius"
      :radiusTop="radiusTop"
      :radiusLeft="radiusLeft"
      :radiusRight="radiusRight"
      :radiusBottom="radiusBottom"
      :title-color="titleColor"
      :title-font-size="titleFontSize"
      :description-color="descriptionColor"
      :description-font-size="descriptionFontSize"
      @click="onClick"
      @onchange="onChange"
    )
    item-switch(
      v-if="type==`switch`"
      :index="index"
      :checked="checked"
      :height="height"
      :title="title"
      :description="description"
      :disabled="disabled"
      :split="split"
      :radius="radius"
      :radiusTop="radiusTop"
      :radiusLeft="radiusLeft"
      :radiusRight="radiusRight"
      :radiusBottom="radiusBottom"
      @click="onClick"
      @onchange="onChange"
    )
    item-checkbox(
      v-else-if="type==`navigate`"
      :index="index"
      :check="checked"
      :height="height"
      :title="title"
      :description="description"
      :disabled="disabled"
      :split="split"
      :dialogPosition="dialogPosition"
      :dialogListItem="dialogListItem"
      :dialogTitle="dialogTitle"
      :dialogData="dialogData"
      :defaultValue="defaultValue"
      :radius="radius"
      :radiusTop="radiusTop"
      :radiusLeft="radiusLeft"
      :radiusRight="radiusRight"
      :radiusBottom="radiusBottom"
      @click="onClick"
      @onchange="onChange"
    )
    item-radio(
      v-else-if="type==`navigate`"
      :index="index"
      :check="checked"
      :height="height"
      :title="title"
      :description="description"
      :disabled="disabled"
      :split="split"
      :onImg="getOnPic()"
      :offImg="getOffPic()"
      :iconSize="{ width: 12, height: 24 }"
      :radius="radius"
      :radiusTop="radiusTop"
      :radiusLeft="radiusLeft"
      :radiusRight="radiusRight"
      :radiusBottom="radiusBottom"
      :title-color="titleColor"
      :title-font-size="titleFontSize"
      :description-color="descriptionColor"
      :description-font-size="descriptionFontSize"
      @click="onClick"
      @onchange="onChange"
    )
    item-radio(
      v-else
      :index="index"
      :check="checked"
      :height="height"
      :title="title"
      :description="description"
      :disabled="disabled"
      :split="split"
      :onImg="getOnPic()"
      :offImg="getOffPic()"
      :iconSize="{ width: 12, height: 24 }"
      :showIcon="showIcon"
      :defaultValue="defaultValue"
      :radius="radius"
      :radiusTop="radiusTop"
      :radiusLeft="radiusLeft"
      :radiusRight="radiusRight"
      :radiusBottom="radiusBottom"
      :title-color="titleColor"
      :title-font-size="titleFontSize"
      :description-color="descriptionColor"
      :description-font-size="descriptionFontSize"
      @click="onClick"
      @onchange="onChange"
    )
</template>

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

@Component({
  components: {ItemSwitch, ItemRadio, ItemCheckbox}
})
export default class ListItem extends Vue {

  private offDefaultPic: string = IconHelper.getArrow();
  private onDefaultPic: string = IconHelper.getArrow();

  @Prop() public index!: number;
  @Prop() public checked!: boolean;
  @Prop() public height!: number;
  @Prop() public title!: string;
  @Prop() public type!: "navigate" | "radio" | "checkbox" | "switch";
  @Prop() public description!: string
  @Prop() public disabled!: boolean;
  @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 url!: string
  @Prop() public showIcon!: boolean;
  @Prop() public radius!: number;
  @Prop() public radiusTop!: number;
  @Prop() public radiusLeft!: number;
  @Prop() public radiusRight!: number;
  @Prop() public radiusBottom!: number;
  @Prop() public borderTopLeftRadius!: number;
  @Prop() public borderTopRightRadius!: number;
  @Prop() public borderBottomLeftRadius!: number;
  @Prop() public borderBottomRightRadius!: number;
  @Prop() public titleFontSize!: number;
  @Prop() public titleColor!: string;
  @Prop() public descriptionFontSize!: number;
  @Prop() public descriptionColor!: string;

  mounted() {
    this.$on("click", (data: any)=> {
      if(this.type=='navigate' && this.url) {
        uni.navigateTo({ url: this.url });
      }
    })
  }

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

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

  onClick(data: any) {
    if(this.disabled) {
      return;
    }
    this.$emit("click", data)
  }

  onChange(data: any) {
    if(this.disabled) {
      return;
    }
    this.$emit("onchange", data)
  }
}

</script>

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


.list-item {
  border: rgba(0,0,0,0);
  border-style: solid;
  border-width: 0px;
}
</style>