<template lang="pug">
  view
    uni-popup(ref="dialogPopup" type="center")
      uni-calendar(@change="onChange" v-if="type=='calendar'")
      view.dialog-background(v-else)
        text.title-device {{title}}
        view.padding25(v-if="text && type!='input'")
        view.input-device(v-if="text")
          text {{text}}
        view.padding25(v-if="text && type!='input'")
        view.input-device(v-if="type=='input'")
          input(:placeholder="(placeholder || '')" v-model="currentValue")
        //view.split(v-if="!text && type!='input'")
        item-radio(v-else-if="type=='select'" v-for="(item, index) in optionsData" :key="index" :index="index" :title="(item[(optionShowField || 'text')] || item)" :titleFontSize="17" :checked="item.checked" @onchange="changeValue")
        picker-view(v-else-if="type=='date-pick'" :indicator-style="indicatorStyle" :value="dateList" @change="onPickDate")
          picker-view-column
            view.item(v-for="(item,index) in years" :key="index") {{item}}年
          picker-view-column
            view.item(v-for="(item,index) in months" :key="index") {{item}}月
          picker-view-column
            view.item(v-for="(item,index) in days" :key="index") {{item}}日
        view.option
          text.cancel(@click="close") 取消
          text.submit(@click="submit" v-if="type!='select'") 确定
</template>

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

@Component({
  components: {ItemRadio, UniPopup, UniCalendar}
})
export default class DialogPopup extends Vue {

  @Prop() public title!: string;
  @Prop() public index!: number;
  @Prop() public type!: 'input' | 'text' | 'select' | 'date-pick';
  @Prop() public text!: string;
  @Prop() public value!: string;
  @Prop() public placeholder!: string;
  @Prop() public options!: string[] | any[];
  @Prop() public optionShowField!: string;
  @Prop() public position!: 'center' | 'top' | 'bottom';
  @Prop() public onImg!: string;
  @Prop() public offImg!: string;
  @Prop() public defaultValue!: string;
  private indicatorStyle = 'height: 60px;'
  private years: any = [];
  private months: any = [];
  private days: any = [];
  private year: any;
  private month: any;
  private day: any;
  private dateList: any[] = [];
  private currentValue: any = '';
  private optionsData: string[] | any[] = [];

  onChange(data: any) {
    data.index = this.index;
    this.$emit("onchange", data);
    (<any>this.$refs).dialogPopup.close();
  }

  @Watch("value", {deep: true, immediate: true})
  setValue(val: any) {
    this.currentValue = val;
  }

  mounted() {
    this.optionsData = this.options;
    let date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.day = date.getDay();
    this.dateList = [9999, this.month - 1, this.day - 1];
    for (let i = 1990; i<=date.getFullYear(); i++) {
      this.years.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      this.months.push(i)
    }
    for (let i = 1; i <= 31; i++) {
      this.days.push(i)
    }
  }

  open() {
    (<any>this.$refs).dialogPopup.open((this.position || 'bottom'));
  }

  close() {
    (<any>this.$refs).dialogPopup.close();
  }

  submit() {
    this.$emit("onsubmit", this.currentValue);
    this.close();
  }

  changeValue(data: any) {
    let result: Array<any> = JSON.parse(JSON.stringify(this.optionsData));
    for(let i=0; i<result.length; i++) {
      result[i].checked = false;
    }
    result[data.index].checked = true;
    this.$emit("onsubmit", result[data.index]);
    this.optionsData = result;
    this.close();
  }

  onPickDate(e: any) {
    const val = e.detail.value
    this.year = this.years[val[0]]
    this.month = this.months[val[1]]
    this.day = this.days[val[2]]
    this.month = this.month.length > 1 ? this.month : "0" + this.month
    this.day = this.day.length > 1 ? this.day : "0" + this.day
    this.currentValue = this.year + "-" + this.month + "-" + this.day
  }
}
</script>

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


.dialog-background {
  width: calc(100vw - 36px);
  background-color: #FFFFFF;
  border-radius: $px17;
  box-sizing: border-box;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: $px17;

  .title-device {
    display: flex;
    line-height: $px62;
    margin-left: $px25;
    padding-top: $px15;
    padding-bottom: $px15;
    font-weight: 400;
    line-height: $px28;
    color: #000000;
    opacity: 0.9;
    font-size: $px21;
  }

  .input-device {
    padding: $px0 $px27;
    background-color: #FFFFFF;
    display: flex;
    input {
      height: $px55;
      line-height: $px55;
      border-bottom-width: $px1;
      border-bottom-color: #d5d5d6;
      border-bottom-style: solid;
      font-size: $px17;
      width: 100vw;
      input {
        width: 100vw;
      }
    }

    text {
      line-height: $px22;
      font-size: $px17;
      font-weight: 400;
      color: rgba(0,0,0,.9);
    }
  }

  .dialog-divide {
    display: flex;
    height: $px10;
    margin-left: $px18;
    margin-right: $px18;
    background-color: #FFFFFF;
  }

  .split {
    height: $px26;
  }

}

.option {
  display: flex;
  height: $px58;
  justify-content: center;
  margin-left: $px13;
  margin-right: $px13;
}


.cancel {
  flex: 1;
  text-align: center;
  margin-top: $px18;
  margin-bottom: $px18;
  font-size: $px17;
  color: #00A5B5;
}

.submit {
  flex: 1;
  text-align: center;
  margin-top: $px18;
  margin-bottom: $px18;
  font-size: $px17;
  color: #00A5B5;
  border-left-style: solid;
  border-left-color: rgba(0, 0, 0, 0.2);
  border-left-width: 1px;
}

picker-view {
  height: $px213;
  background-color: #FFFFFF;
  align-items: center;
  box-sizing: border-box;
  padding-left: $px3;
  padding-right: $px3;
}

.item {
  text-align: center;
}

/deep/ .uni-calendar {
  margin-left: $px17;
  margin-bottom: $px17;
  margin-right: $px17;
  margin-top: $px17;
}

/deep/ .uni-calendar__content {
  border-radius: $px24;
}

/deep/ .uni-calendar-item__weeks-box-item {
  width: $px34;
  height: $px44;
}

/deep/ .uni-calendar__header {
  border-bottom-width: $px0;
}

/deep/ .uni-calendar-item__weeks-box {
  border-radius: $px55;
  width: $px45;
  height: $px45;
}

/deep/ .uni-calendar__backtoday {
  background-color: #FFFFFF;
  border-radius: $px50;
  right: $px12;
  border-width: $px0;
  border-color: #00A5B5FF;
  border-style: solid;
  color: #00A5B5FF;
  top: $px15;
}

/deep/ .uni-calendar__header-btn {
  border-left-color: #bfbfbf;
  border-top-color: #bfbfbf;
}

/deep/ .uni-calendar__header-text {
  font-size: $px16;
  color: #333;
  font-weight: 550;
  top: -$px4;
}

/deep/ .uni-calendar__header-btn {
  margin-top: $px4;
}

/deep/ .uni-calendar-item--isDay {
  background-color: #00A5B5FF;
}
</style>
