<template>
  <h-view class="public-style contract-sign-list" title="电子签约">
    <h-content style="padding-top:20px">
      <div style="margin-left:20px">
        合同总计数&nbsp;&nbsp;&nbsp;&nbsp;
        <span style="color:red;font-weight:bold">{{count}}</span>个
      </div>
      <div class="search">
        <div class="searchInput">
          <input v-model="searchCondition.input" placeholder="请输入承租人名称" />
          <button
            @click="detectSearchCondition()"
            style="position:absolute;right:10px"
          >搜索</button>
        </div>
      </div>
      <scroll ref="scroll">
        <list-item :item-height="80">
          <div :key="index" :proportion="[5,1]" :show-arrow="true">
            <!-- <div class="con-num">合同编号: <span style="font-weight: 600">201821023721847</span></div> -->
            <item
              style="margin-top:10px"
              v-for="(item,index) in signData"
              :key="index"
              @click.native="goContractList(item)"
            >
              <img
                slot="left-icon"
                src="../../../assets/electronicContract/contract-icon.png"
                class="left-icon"
              />
              <div slot="name" class="text" style="font-size: 12px;">
                <div
                  class="cont-type"
                  style="color: #5a5959;font-size: 14px;font-weight:bold"
                >承租人：{{item.customername}}</div>
                <div
                  class="cont-type"
                  style="color: #5a5959;font-size: 14px"
                >经销商：{{item.dealername}}</div>
                <div
                  class="cont-type"
                  style="color: #5a5959;font-size: 14px"
                >产品名称：{{item.modelname}}</div>
                <div class="cont-type" style="color: #5a5959;font-size: 14px">机号：{{item.serialno}}</div>
                <div
                  class="cont-type"
                  style="color: #5a5959;font-size: 14px"
                >租金总额：{{item.contractamt}}</div>
                <div
                  class="cont-type"
                  style="color: #5a5959;font-size: 14px"
                >租赁开始日：{{item.leasebgndt}}</div>
                <div class="cont-type" style="color: #5a5959;font-size: 14px">合同状态：完成盖章</div>
              </div>
              <!-- <div  class="" style="width: 30%;font-size: 12px;"> -->
              <!-- <button
                style="width:60px;line-height:30px;border:1px solid #eee;margin-top:10px;border-radius:8px;height: 30px;background-color:#999999"
              >下载</button>-->
              <!-- </div> -->
              <img
                slot="right-icon"
                src="../../../assets/image/right-arrow@2x.png"
                class="right-icon"
              />
            </item>
          </div>
        </list-item>
      </scroll>
    </h-content>
  </h-view>
</template>

<script>
import { getUrlParam } from "@/scripts/utils";
export default {
  data() {
    return {
      con_list: [],
      infoShow: {},
      info: null,
      signData: null,
      searchCondition: {
        input: null
      },
      userInfo:null,
      count:""
    };
  },
  created() {
    this.wxConfig();
    this.offsize = 1;
    this.pagesize = 10;
    this.index = [1, 0, 0];
          // window.localStorage.openId = "1234567"
    if (window.localStorage.openId) {
      this.getUserInfo(window.localStorage.openId);
    }

  },
  mounted() {
    // this._initLoad()
  },
  methods: {
    switchTab: function(index) {
      console.log(index);
      let vm = this;
      vm.index = [0, 0];
      vm.index[index] = 1;
      vm.changeData();
    },
    changeData: function() {
      let vm = this;
      // vm.infoShow = vm.info[vm.getTabName()][0]
    },

    getUserInfo(openId) {
      let vm = this;
      let url =
        process.env.rootPath +
        "/sign/info/hclc/query/by/openid?openId=" +
        openId;
      vm.hlsPopup.showLoading("请稍等");

      // vm.getData();
      vm.$post(url).then(function(res) {
        vm.hlsPopup.hideLoading();
        if (res.rows.length > 0) {
          console.log(res.rows);
          var results = res.rows[0];
          vm.userInfo = results;
          vm.getData();
        }
      });
    },
    getData() {
      let vm = this;
      let url = process.env.basePath + "unSignContractQuery";
      let params = {
        // name: "北京骏马机械有限公司",
        name: vm.userInfo.name,
        ctino: vm.userInfo.idNo
        // ctino: ""
      };
      vm.hlsPopup.showLoading("请稍等");
      vm.$post(url, params).then(function(res) {
        vm.hlsPopup.hideLoading();
        if (res.success == true) {
          var dataInfo = JSON.parse(res.result.json);
          vm.signData = dataInfo.sign_con_list;
          vm.count = dataInfo.sign_con_list.length;
          console.log("skskkskssk", dataInfo.un_sign_con_list);
        }
      });
    },
    // 调用微信接口的基础配置
    wxConfig() {
      let clientUrl = "";
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        //这个是安卓操作系统
        console.log("机型：android");
        clientUrl = location.href;
      }
      if (isIOS) {
        //这个是ios操作系统
        console.log("机型：ios");
        clientUrl = location.href.split("#")[0];
      }
      // let url = $config.rootPath + '/js/sdk/getWxConfig?wxCode=' + $config.wxCode + '&clientUrl=' + clientUrl
      let url = process.env.basePathRl + "getSignature";
      let param = {
        apiKey: "handexinxi",
        url: clientUrl
      };
      hlsHttp.post(url, param).then(function(res) {
        wx.config({
          beta: true,
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.result.appId, // 必填，公众号的唯一标识
          timestamp: res.result.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
          signature: res.result.signature, // 必填，签名，见附录1
          jsApiList: [
            "chooseImage",
            "previewImage",
            "downloadImage",
            "getLocalImgData",
            "uploadImage",
            "hideOptionMenu"
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(function() {
          wx.hideOptionMenu();
        });
      });
    },
    // 去下载页
    goContractList(list) {
      this.$router.push({
        name: "ContractDownloadList",
        params: {
          itemData: list
        }
      });
    },
    detectSearchCondition() {
      let vm = this;
      let url = process.env.basePath + "unSignContractQuery";
      let params = {
        // name: "北京骏马机械有限公司",
        name: vm.userInfo.name,
        ctino: vm.userInfo.idNo,
        tenant_name: vm.searchCondition.input
      };
      vm.hlsPopup.showLoading("请稍等");
      vm.$post(url, params).then(function(res) {
        vm.hlsPopup.hideLoading();
        if (res.success == true) {
          var dataInfo = JSON.parse(res.result.json);
          vm.unSignData = dataInfo.un_sign_con_list;
          vm.signData = dataInfo.sign_con_list;
          vm.count = dataInfo.sign_con_list.length;
          console.log("搜索后的数据", JSON.parse(res.result.json));
        }
      });
    }
  }
};
</script>

<style lang="less" rel="stylesheet">
.contract-sign-list {
  .content {
    overflow: hidden;
  }
  .hls-switch-tab .tab-content .h-tab-item .h-item {
    width: 100%;
    border: 1px solid #cccccc;
    color: black;
    border-radius: 10px;
  }
  .hls-switch-tab .tab-content .h-tab-item.activated .h-item {
    color: white;
    background-color: #b2b2b2;
    border-radius: 10px;
  }
  .con-num {
    width: 90%;
    margin-left: 5%;
    font-size: 15px;
    color: #424242;
    margin-top: 15px;
    margin-bottom: 12px;
  }
  .hls-switch-tab .tab-content .h-tab-item {
    width: 50%;
    height: 0.7rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
  }
  .hls-switch-tab .tab-content .h-tab-item.activated .h-item {
    background-color: #b2b2b2;
    color: white;
    height: 0.7rem;
    border-radius: 5px;
  }
  .hls-switch-tab .tab-content .h-tab-item .h-item {
    color: black;
    height: 0.7rem;
    border-radius: 5px;
    border: 1px solid #cccccc;
  }
  .hls-switch-tab .tab-content .h-tab-item.activated .h-item .bottom-border {
    border-bottom: none;
  }
  .hls-switch-tab {
    position: relative;
  }
  .content {
    background-color: white;
  }
  .hls-switch-tab {
    margin-top: 10px;
  }

  .search {
    display: flex;
    //height: 50px;
    background-color: #fff;
    margin-top: 10px;
    // margin-bottom: 10px;
    position: relative;

    .searchInput {
      margin-left: 5%;
      display: -webkit-flex;
      border: 1px solid #cccccc;
      /* margin: 0.14rem 0.2rem; */
      width: 80%;
      height: 0.56rem;
      border-radius: 20px;
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-align-items: center;

      input {
        text-align: center;
        width: 90%;
        margin-left: 5%;
        font-size: 13px;
        height: 17px;
        line-height: 17px;
        border: none;
        margin-top: 3px;
        margin-bottom: 4px;
        //padding-left: 11px;
      }
    }
  }

  .vue-better-scroll {
    // top: 226px;
  }

  .vue-better-scroll__wrapper {
    margin-top: 10px;
  }
  .hls-list-item {
    margin-bottom: 0;
    padding-bottom: 10px;
  }

  .hls-item {
    padding: 0;
    border-radius: 20px;
    box-shadow: 0px 4px 0px 0px #cac9c9;
    &:nth-child(odd) {
      background-color: #f1f1f1;
    }

    &:nth-child(even) {
      background-color: #f1f1f1;
    }
    .add-name {
      flex: 9 1 0% !important;
    }
    .contents {
      width: 98%;
      margin-left: 1%;
    }
    .contents .add-name {
      .left-icon {
        width: 40px;
        margin-right: 0;
      }
      .right-icon {
        margin-left: 20%;
      }

      .text {
        margin-left: 15px;

        .cont {
          margin-top: 5px;
          font-size: 13px;
          line-height: 18px;

          &:first-child {
            margin-top: 0;
          }
        }

        .cont-num {
          margin-top: 8px;
          font-size: 15px;
          line-height: 21px;
          color: #5d98f6;
        }
      }
    }
  }
}
</style>