<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 16/11/07. -->
<!--A dialog. -->

<template>
  <div class="container">
    <lc-overlay v-if="show" :show="true" :hasAnimation="false"></lc-overlay>
    <div class="dialog-box" v-if="show" :style="{top:top+'px'}" @touchmove.prevent.stop>
      <div class="dialog-content">
        <slot name="img">
          <image class="content-img" v-if="img" :src="src"></image>
        </slot>
        <slot name="title">
          <text class="content-title" v-if="!img">{{title}}</text>
        </slot>
        <slot name="content">
          <text class="content-subtext">{{content}}</text>
        </slot>
        <div class="no-prompt"
             v-if="showNoPrompt"
             @click="noPromptClicked">
          <image :src="noPromptIcon" class="no-prompt-icon"></image>
          <text class="no-prompt-text">{{noPromptText}}</text>
        </div>
      </div>
      <div class="dialog-footer">
        <!-- 143549 jsn项目中页面跳转地址前面加上index.html时，页面引入lc-dialog组件，Android手机上必现点透，iOS手机上偶现点透，工程见附件 -->
        <div class="footer-btn cancel"
             v-if="type==='confirm'"
             @touchend.prevent="secondaryClicked">
          <text class="btn-text" :style="{ color: secondBtnColor,borderColor: secondBtnColor}">{{cancelText}}</text>
        </div>
        <div class="footer-btn confirm" @touchend.prevent="primaryClicked">
          <text class="btn-text" :style="{ color: mainBtnColor,borderColor: mainBtnColor }">{{confirmText}}</text>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .container {
    position: fixed;
    width: 750px;
    /*兼容H5异常*/
    z-index: 99999;
  }

  .dialog-box {
    position: fixed;
    left: 60px;
    width: 630px;
    border-radius: 12px;
    background-color: #FFFFFF;
    padding-top: 80px;
    padding-bottom: 60px;
    padding-left: 54px;
    padding-right: 54px;
    /* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20); 141675 【TS:201905220661-经纪业委会（云纪）-盛利强-【需求类型】	需求【需求描述】4.lc-dialog】*/ 
  }

  .dialog-content {
    padding-left: 45px;
    padding-right: 45px;
    align-items: center;
  }
  .content-img{
    width: 280px;
    height: 280px;
    border-radius: 140px;
  }
  .content-title {
    color: #4A4A4A;
    font-size: 34px;
    text-align: center;
    margin-bottom: 30px;
  }

  .content-subtext {
    color: #787878;
    font-size: 26px;
    line-height: 40px;
    text-align: center;
  }

  .dialog-footer {
    flex-direction: row;
    align-items: center;
    /* border-top-color: #F3F3F3;
    border-top-width: 1px; */
    margin-top: 60px;
    /*H5处理兼容*/
    /* border-top: 1px solid #F3F3F3; */
  }

  .footer-btn {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 90px;
  }

  .cancel {
    /* border-right-color: #F3F3F3;
    border-right-width: 1px; */
    /*H5处理兼容*/
    /* border-right: 1px solid #F3F3F3; */
  }

  .btn-text {
    font-size: 30px;
    color: #787878;
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 8px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    flex:1;
    border-width: 2px;
    border-style: solid;
  }

  .no-prompt {
    width: 486px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-top: 24px;
  }

  .no-prompt-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  .no-prompt-text {
    font-size: 24px;
    color: #A5A5A5;
  }
</style>

<script>
  import LcOverlay from '../lc-overlay'
  import { CHECKED, UN_CHECKED } from './type';

  export default {
    components: { LcOverlay },
    props: {
      type: {
        type: String,
        default: 'alert'
      },
      show: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      img: {
        type: Boolean,
        default: false
      },
      src: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      // top: {
      //   type: Number,
      //   default: 300
      // },
      cancelText: {
        type: String,
        default: '取消'
      },
      confirmText: {
        type: String,
        default: '确定'
      },
      mainBtnColor: {
        type: String,
        default: '#0785DB'
      },
      secondBtnColor: {
        type: String,
        default: '#787878'
      },
      showNoPrompt: {
        type: Boolean,
        default: false
      },
      noPromptText: {
        type: String,
        default: '不再提示'
      },
      isChecked: {
        type: Boolean,
        default: false
      }
    },
    data: () => ({
      noPromptIcon: UN_CHECKED,
      pageHeight: 1334
    }),
    created () {
      const { env: { deviceHeight, deviceWidth } } = weex.config;
      this.pageHeight = deviceHeight / deviceWidth * 750;
    },
     computed: {
        top(){
          if(this.img){
            return 300
          }else{
            return 350
          }
        }
     },  
    methods: {
      secondaryClicked () {
        this.$emit('LcDialogCancelBtnClicked', {
          type: 'cancel'
        });
      },
      primaryClicked (e) {
        this.$emit('LcDialogConfirmBtnClicked', {
          type: 'confirm'
        });
      },
      noPromptClicked (e) {
        const isChecked = !this.isChecked;
        this.noPromptIcon = isChecked ? CHECKED : UN_CHECKED;
        this.$emit('LcDialogNoPromptClicked', { isChecked });
      }
    }
  };
</script>
