<template>
  <h-view class="public-style contract-sign-list" title="电子签约">
    <h-content class>
      <s-tab @tabClick="switchTab">
        <tab-item>待签约</tab-item>
        <tab-item>已签约</tab-item>
      </s-tab>
      <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" :pullUp="true">
        <!-- @pullingUp="loadMore"  -->
        <!-- 未签约 -->
        <list-item :item-height="80" v-if="myIndex == 0">
          <!-- <div :key="index" :proportion="[5,1]" :show-arrow="true"> -->
          <!-- <div class="con-num">合同编号: <span style="font-weight: 600">201821023721847</span></div> -->
          <item
            @click.native="goContractList(item)"
            style="margin-top:10px"
            v-for="(item,index) in unSignData"
            :key="index"
          >
            <img
              slot="left-icon"
              src="../../../assets/electronicContract/contract-icon.png"
              class="left-icon"
            />
            <div slot="name" class="text" style="width: 70%;font-size: 12px;">
              <div
                class="cont-type"
                style="color: #5a5959;font-size: 14px"
              >承租人：{{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>
            <img
              slot="right-icon"
              src="../../../assets/image/right-arrow@2x.png"
              class="right-icon"
            />
          </item>

          <!-- </div> -->
        </list-item>

        <!-- 已签约 -->
        <list-item :item-height="80" v-if="myIndex == 1">
          <!-- <div :key="index" :proportion="[5,1]" :show-arrow="true"> -->
          <div class="cont-type" style="color: #e42112;font-size: 18px;text-align: center;margin-top: 10px;">提示：待签署人全部签署完成以后，可进行合同下载</div>
          <item style="margin-top:10px" v-for="(item,index) in signData" :key="index">
            <!-- <img
              slot="left-icon"
              src="../../../assets/electronicContract/contract-icon.png"
              class="left-icon"
            /> -->
            <div slot="name" class="text" style="width: 70%;font-size: 12px;">
              <div
                class="cont-type"
                style="color: #5a5959;font-size: 14px"
              >承租人：{{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>
            <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 {
      userInfo: [], //用户信息
      // con_list: [],
      // infoShow: {},
      // info: null,
      searchCondition: {
        input: null
      },
      unSignData: null,
      signData: null,
      myIndex: 0
    };
  },
  created() {
    this.wxConfig();
    // code = "111";
    // console.log('sjsjsjsjsjsjsjsj',code);
    if (window.localStorage.openId) {
      this.getUserInfo(window.localStorage.openId);
    }
    this.offsize = 1;
    this.pagesize = 10;
    this.index = [1, 0, 0];
  },
  mounted() {
    // this.getData();
  },
  methods: {
    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('22222222',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
      };
      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;
          console.log("skskkskssk", dataInfo.un_sign_con_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;
          console.log('搜索后的数据',JSON.parse(res.result.json))
        }
      });
    },
    switchTab: function(index) {
      let vm = this;
      vm.myIndex = index;
      // vm.index = [0, 0];
      // vm.index[index] = 1;
      console.log(vm.index);

      vm.getData();
    },
    // 跳转详情页
    goContractList(list) {
      // console.log('slslslslsl',list)
      this.$router.push({
        name: "ElectronicContractList",
        params: {
          itemData: 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();
        });
      });
    }
  },
  activated() {
    // this.getData();
  }
};
</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;
  }
  .hls-switch-tab .tab-content {
    width: 90%;
    margin-left: 5%;
  }
  .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>
