<template>
  <h-view id="home" class="public-style" title="小易">
    <h-header :has-border="false" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$hlsExit()">
        <i class="ion-ios-arrow-back"/>
      </div>
      <div slot="center">小易</div>
    </h-header>
    <s-tab :has-border="true" :show-divider="true" :show-bottom-border="true">
      <tab-item>Vue</tab-item>
      <tab-item @click.native="showModal = !showModal">APP</tab-item>
    </s-tab>
    <div style="backgroundColor:red;height:50px"/>
    <h-content >
      <list-item :show-focus-border="true">
        <item :show-arrow="true" :arrow-right="arrarRight">
          <section slot="name">姓名</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">金额</section>
          <div slot="content">{{ number | currency }}</div>
        </item>
        <item>
          <section slot="name">年龄</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">性别</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">出生日前</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">体重</section>
          <section slot="content">111111</section>
        </item>
        <item>
          <section slot="name">身高</section>
          <section slot="content">111111</section>

        </item>
        <item>
          <section slot="name">血型</section>
          <section slot="content">111111</section>

        </item>
        <item>
          <section slot="name">胸围</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">腰围</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">tun</section>
          <input slot="content" type="text">
        </item>
      </list-item>
      <list-item :item-height="50">
        <item>
          <section slot="name">姓名</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">年龄</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">性别</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">出生日前</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">体重</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">身高</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">血型</section>
          <input slot="content" type="text" >
        </item>
        <item>
          <section slot="name">胸围</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">腰围</section>
          <input slot="content" type="text">
        </item>
        <item>
          <section slot="name">tun</section>
          <input slot="content" type="text">
        </item>
        <SelectFiled
          v-model="sex" :dataArray="sexList" :required="true" clearable
          label="性别"
          value-key="code_value"
          value-name="code_value_name" @onSelect="select"/>
      </list-item>
      <DateFiled
        v-model="nowDate" :required="true" clearable label="时间"
        @onSelect="select"/>

        <!--      <h-range
        :decimal="decimal" v-model="rangeValue" :min="min" :max="max"
        :step="step" :disabled="disabled" :disabled-opacity="disabledOpacity" :range-bar-height="rangeBarHeight"
        :range-handle-height="rangeHandleHeight" @change="change" @touchstart="touchStart" @touchend="touchEnd"/>

      <h-progress :percent="70"/>-->

    </h-content>
    <!-- <s-tab>
      <tab-item>Vue</tab-item>
      <tab-item>APP</tab-item>
    </s-tab> -->
    <!-- <div style="height: 40px;"/> -->
    <bottom-tab/>
    <h-modal v-model="showModal" position="top">
      <div>123</div>
    </h-modal>
  </h-view>
</template>

<script>
import {Range} from 'vux'
export default {
  components: {
    Range,
  },
  data () {
    return {
      number: 0.48,
      arrarRight: require('../assets/image/right-arrow@2x.png'),
      userImg: window.localStorage.userImg || '',
      message: [{
        'isFromeMe': false,
        'content': '小易7*24小时为您服务!',
      }],
      robot_message: {
        question: null,
      },
      autosize: true,
      height: '',
      showModal: false,
      decimal: false,
      rangeValue: 40,
      min: 20,
      max: 80,
      step: 10,
      disabled: true,
      disabledOpacity: 0.5,
      rangeBarHeight: 1,
      rangeHandleHeight: 20,
      sex: 0,
      sexList: [{'code_value': 0, 'code_value_name': '女'}, {'code_value': 1, 'code_value_name': '男'}],
      nowDate: '2020-12-25',

    }
  },
  watch: {},
  created: function () {

  },
  mounted () {
    // this.height = this.$refs.textarea.clientHeight
  },
  methods: {
    scrollBottom () {
      let div = document.getElementById('home-content')
      div.scrollTop = div.scrollHeight
    },
    sendMsg () {
      let vm = this
      let RobotMessage = {}
      if (this.robot_message.question) {
        let object = {
          'isFromeMe': true,
          'content': this.robot_message.question,
        }
        this.message.push(object)
        let url = process.env.rootPath + '?sysName=HLS_ROBOT&apiName=query_answer'
        let question = encodeURIComponent(this.robot_message.question)
        let params = {
          'channel': 'app',
          'userId': window.localStorage.user_id,
          'sessionId': window.localStorage.user_id,
          'question': question,
        }
        vm.hlsHttp.post(url, params).then(function (res) {
          vm.resetHeight()

          // 机器人聊天数据存表
          RobotMessage.question = vm.robot_message.question
          RobotMessage.chatId = res.chatId
          vm.robot_message.question = null
          if (res.answers) {
            let answer = res.answers[0]
            let reponse = {
              'isFromeMe': false,
              'content': answer.answer,
            }
            // 界面显示聊天
            vm.message.push(reponse)

            // 答案
            RobotMessage.answer = answer.answer
            // 历史记录表
            vm.addRobotMessage(RobotMessage)
          }
        })
      } else {
        vm.hlsPopup.showLongCenter('内容不能为空')
      }
    },
    addRobotMessage (robotMessage) {
      let vm = this
      let url = process.env.rootPath + '/app/addRobotMessage'
      let params = {
        'channel': 'app',
        'userId': window.localStorage.user_id,
        'sessionId': window.localStorage.user_id,
        'question': robotMessage.question,
        'chatId': robotMessage.chatId,
        'answer': robotMessage.answer,
        'respond': robotMessage.answer,
      }
      vm.hlsHttp.post(url, params).then(function (res) {
        vm.scrollBottom()
      })
    },
    showImg ($event) {
      let vm = this
      if ($event.target.tagName.toLowerCase() === 'img') {
        let src = $event.target.src
        vm.hlsPopup.showBigPicture({
          imgUrl: src,
        })
      } else if ($event.target.tagName.toLowerCase() === 'a') {
        let href = $event.target.href
        cordova.InAppBrowser.open(href, '_system', 'location=yes')
      }
    },

    resetHeight () {
      // this.$refs.textarea.clientHeight = this.height;
      this.$refs.textarea.style.height = this.height + 'px'
    },

    change (val) {
      // this.rangeValue = val
      console.log(val)
    },
    touchStart (e) {
      console.log(e)
    },
    touchEnd (e) {
      console.log(e)
    },

    select (v1, v2, v3) {
      debugger
    },

  },
}
</script>
<style lang="less" type="text/less">
  #home {
    background-color: #eeeeee;
     .h-bottom-tab{
     box-shadow: none;
    }
    .modal{
      top:50%
    }
    .content {
      background-color: #eeeeee;
      //border: 1px solid red;
      .message {
        position: relative;
      }
      .message-wrap {
        padding: 7px;
        overflow: auto;
        position: relative;
        .message {
          float: left;
          margin-left: 16px;
          background-color: #fff;
          padding: 10px 8px;
          line-height: 18px;
          max-width: 270px;
          border-radius: 5px;
          font-size: 16px;
          letter-spacing: 1px; /*no*/
          text-align: left;
          img{
            width: 100%;
          }
        }
        .head-pic-right {
          float: right;
          max-height: 40px;
          height: 40px;
          max-width: 40px;
          width: 40px;
          border-radius: 20px;
          margin-left: 10px;
        }
        .head-pic {
          float: left;
          max-height: 40px;
          height: 40px;
          max-width: 40px;
          width: 40px;
          border-radius: 20px;
        }
        .message-right {
          float: right;
          margin-right: 8px;
          background-color: #97d55b;
          padding: 10px 8px;
          line-height: 18px;
          max-width: 225px;
          border-radius: 5px;
          font-size: 16px;
          letter-spacing: 1px; /*no*/
          text-align: left;
          word-break: break-all;
        }
        .triangle-left {
          left: 45px;
          border-color: transparent #FFF transparent transparent;
          display: inline-block;
          width: 0;
          height: 0;
          position: absolute;
          border-width: 8px 10px;
          border-style: solid;
          top: 17px;
        }
        .triangle-right {
          right: 47px;
          border-color: transparent transparent transparent #97d55b;
          display: inline-block;
          width: 0;
          height: 0;
          position: absolute;
          border-width: 8px 10px;
          border-style: solid;
          top: 17px;
        }
      }
    }
    .bar-footer {
      height: auto !important;
      min-height: 44px;
     // padding: 0;
      margin-top: 0;
      background-color: #fafafa;
      bottom: 0;
      background-image: none;
      .item-input {
        border: none !important;
        padding: 3px 0 3px 5px;
        width: 85%;
        background: #fff;
        margin: 5px 0;
      }
      .footer-btn-wrap {
        height: 100%;
        font-size: 16px;
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
        .send-button {
          height: 30px;
          width: 100%;
          //border: 1px solid red;
          display: flex;
          align-items: center;
          justify-content: center;
          p {
            margin: 0 auto;
          }
        }
      }
      textarea {
        line-height: 20px;
        font-size: 16px;
        width: 100%;
        resize: none;
        padding: 2px;
        border: none;
      }
    }

  }

  .platform-ios{
    #home {
    }
  }

  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      //.h-ios {
      #home {
      }
    }
  }
</style>
