<style lang='less' scoped>
page {
    height: 100%;
    background: #ebf5fa;
}
.operating {
    width: 654rpx;
    padding-top: 244rpx;
    padding-left: 56rpx;
    padding-right: 56rpx;
    padding-bottom: 66rpx;
    height: 600rpx;
    background: linear-gradient(
        180deg,
        rgba(61, 203, 204, 0.2) 0%,
        rgba(61, 203, 204, 0) 100.34%
    );
    .title {
        padding-bottom: 72rpx;
        font-family: PingFang SC;
        font-size: 48rpx;
        font-weight: 600;
        line-height: 68rpx;
        color: rgba(27, 33, 41, 1);
    }
    .each-box {
        .img-box {
            width: 100%;
            height: 360rpx;
            margin-bottom: 64rpx;
        }
        .each-title {
            margin-bottom: 64rpx;
            height: 208rpx;
            background: linear-gradient(
                90deg,
                rgba(61, 203, 204, 0.3) 0%,
                rgba(61, 203, 204, 0) 100%
            );
            border-left: 3px solid #3dcbcc;
            padding-left: 32rpx;
            padding-top: 24rpx;
            box-sizing: border-box;
            .big-id {
                font-family: Persagy2.0;
                font-size: 44rpx;
                font-weight: 600;
                line-height: 64rpx;
                color: #1b2129;
            }
            .big-title {
                font-family: PingFang SC;
                font-size: 16px;
                font-weight: 600;
                line-height: 24px;
                color: #1b2129;
            }
            .titletop {
                margin-bottom: 64rpx;
                font-family: PingFang SC;
                font-size: 16px;
                font-weight: 600;
                line-height: 28px;
                color: #1b2129;
            }
        }
        .each-child {
            .child-title {
                margin-top: 64rpx;
                margin-bottom: 16rpx;
                font-family: PingFang SC;
                font-size: 32rpx;
                font-weight: 600;
                line-height: 56rpx;
                color: #1b2129;
            }
            .child-text {
                margin-bottom: 64rpx;
                font-family: PingFang SC;
                font-size: 32rpx;
                font-weight: 400;
                line-height: 56rpx;
                color: #626c78;
            }
        }
    }
    .info {
        height: 460rpx;
        padding: 48rpx 40rpx 48rpx 40rpx;
        box-sizing: border-box;
        border-radius: 32rpx;
        background: rgba(61, 203, 204, 0.2);
        .info-title {
            font-family: PingFang SC;
            font-size: 32rpx;
            font-weight: 600;
            line-height: 48rpx;
            color: rgba(27, 33, 41, 1);
        }
        .content {
            margin-top: 48rpx;
            margin-bottom: 48rpx;
        }
        .info-text {
            font-family: PingFang SC;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 44rpx;
            color: rgba(98, 108, 120, 1);
            .highlight {
                color: #1db1b2;
            }
        }
    }
    .pop {
        .up-box {
            text-align: center;
            height: 100rpx;
            padding: 13px 16px 13px 16px;
            border-bottom: 16rpx solid #f1f4f6;
            font-family: PingFang SC;
            font-size: 32rpx;
            font-weight: 400;
            line-height: 100rpx;
            color: #1db1b2;
        }
        .down-box {
            text-align: center;
            height: 180rpx;
            padding-bottom: 80rpx;
            font-family: PingFang SC;
            font-size: 32rpx;
            font-weight: 400;
            line-height: 100rpx;
            color: #8b949e;
        }
    }
}
</style>
<!-- 操作指引 -->
<template>
    <page-top-bar icon="{{h5Static+'/page-top-bar/return-icon.svg'}}"></page-top-bar>
    <div class="operating">
        <div class="title">关心环境，更关心你</div>
        <div
            class="each-box"
            v-for="item in arr"
            :key="item.id"
        >
            <image
                class="img-box"
                src="{{h5StaticPath }}/{{item.img}}"
            />
            <div class="each-title">
                <div class="big-id">{{item.id}}</div>
                <div class="big-title">{{item.title }}</div>
            </div>
            <div
                v-if="item.titletop"
                class="titletop"
            >{{ item.titletop }}</div>
            <div
                v-for="child in  item.content"
                :key="child.title"
                class="each-child"
            >
                <div
                    class="child-title"
                    v-if="child.title"
                >{{ child.title }}</div>
                <div class="child-text">{{ child.text }}</div>
            </div>
        </div>
        <div>
            <!-- 视频 -->
        </div>
        <div class="info">
            <div class="info-title">
                SagaCare – Care about you
            </div>
            <div class="content">
                <div class="info-text">更多智慧办公解决方案请详询：</div>
                <div
                    class="info-text"
                    @click="openPop(true)"
                >电话： <span class="highlight">{{ phoneNum }}</span></div>
                <div class="info-text">邮箱：{{ mailbox }} <span
                        class="highlight"
                        @click="handleCopy"
                    >复制</span></div>
            </div>
            <div class="info-text">各版块解决方案内容均包含硬件实施、软件配置、定制化咨询服务</div>
        </div>
        <van-popup
            custom-style="height: 20%"
            round
            :show="visibale"
            position="bottom"
            @close="visibale = false"
        >
            <div class="pop">
                <div
                    class="up-box"
                    @click="handleCall"
                >呼叫 {{ phoneNum }}</div>
                <div
                    class="down-box"
                    @click="openPop(false)"
                >取消</div>
            </div>
        </van-popup>
    </div>
</template>

<script>

import wepy from '@wepy/core'
import config from '@/config'
wepy.page({
  props: {},
  data: {
    h5Static: config.h5StaticPath,
    h5StaticPath: config.h5StaticPath + '/page-xiaosa',
    mailbox: 'sagacloud@sagacloud.cn',
    phoneNum: '16601113547',
    // phoneNum: '010 - 62668202',
    visibale: false,
    arr: [
      {
        id: '01',
        title: '痛！大的开放办公区，员工量大，冷热不均，过度用电',
        img: 'xiaosa-01.png',
        content: [
                    { title: '您是否还在用传统的空调面板？', text: '空调面板一排排，随便调节后，不清楚调节的是什么位置的空调；调节后没有效果。' },
                    { title: '您是否经常听到有员工说办公室太热了；而有员工又说办公室太冷了？', text: '每个员工的体感温度不同，所需要的温度也是不一样的，无法照顾到每一个人，总是有员工不满意。' },
                    { title: '您是否经常发现办公区无人，照明仍然亮着？', text: '在阳光充足的情况下；午休的时间；下班后等，不需要照明，灯仍然亮着，能源浪费着。' }
        ]
      },
      {
        id: '02',
        title: '痛！会议室管理不合理',
        img: 'xiaosa-02.png',
        content: [
                    { title: '没有预约机制', text: '经常有员工反馈，要么空出来好多会议室，要么没有可使用的会议室。' },
                    { title: '有预约机制', text: '有部分员工不做预约，直接使用，使用过程中，被赶出来；有部分员工预约时间比较久，实际开会时间很短，设备全开，无人使用。' }
        ]
      },
      {
        id: '03',
        title: '难！老板间，要特殊关注',
        img: 'xiaosa-03.png',
        content: [
                    { title: '无法做到单独对老板间管理', text: '相关设备智能开关，根据老板个人情况智能控制，提前做好准备，让老板无感且舒适。' }
        ]
      },
      {
        id: '04',
        title: '难！节能减排、双碳、ESG、企业可持续发展',
        img: 'xiaosa-04.png',
        content: [
                    { title: '', text: '低碳节能离不开全员的参与，而行为节能往往最不可控；' },
                    { title: '', text: '碳排放源不管是直接排放、能源间接排放还是其他间接排放，很难实现自身企业运营过程中的减碳。' }
        ]
      },
      {
        id: '05',
        title: '您所担忧的问题，我们都能解决',
        img: 'xiaosa-05.png',
        titletop: 'SagaCare智慧办公整体解决方案：',
        content: [
                    { title: '热舒适解决方案', text: '环境监测、空调个性化调节、空气质量管理等' },
                    { title: '光环境解决方案', text: '照明、遮阳、光感控制，节能管理等' },
                    { title: '智能会议室解决方案', text: '会议室预约、场景化控制、在室监测等' },
                    { title: '无感通行解决方案', text: '人脸识别门禁、访客管理等' },
                    { title: '…', text: '' }
        ]
      }
    ]

  },
  computed: {},
  methods: {
    openPop(val) {
      this.visibale = val
    },
    handleCall() {
      let _this = this
      wx.makePhoneCall({
        phoneNumber: this.phoneNum,
        complete() {
          _this.openPop(false)
        }
      })
    },
    handleCopy() {
      wx.setClipboardData({
        data: this.mailbox,
        success(res) {
          wx.getClipboardData({
            success(res) {
              console.log(res.data) // data
              wx.showToast({ title: '已复制', icon: 'none', duration: 1000 })
            }
          })
        }
      })
    }
  },
    // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
    // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  }
})
</script>
<config>
    {
        navigationStyle:"custom",
        backgroundColor: '#EBF5FA',
        usingComponents: {
            'page-top-bar': '~@/components/common/page-top-bar', 
            "van-popup": "module:@vant/weapp/dist/popup"
        }
    }

</config>
