<!--
 * @Description: 签约单列表
   * @Author: your name
 * @Date: 2019-09-25 10:30:46/>: your name
   -->

<template>
  <h-view id="sign" class="public-style" title="经销商签约">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>经销商签约</span>
      </div>
    </h-header>
    <Tab @getTabNum="getTabNum"/>
    <div class="hinput">
      <div class="search-box">
        <input type="text" placeholder="请输入进件号/承租人名称">
        <img src="@/assets/distributorSign/search.png" alt="">
      </div>
    </div>
    <h-content v-if="tabNum === 0">
      <div v-for="(item,index) in submitLists" :key="index" class="contract-list">
        <div class="item">
          <img src="@/assets/distributorSign/icon-进件合同.png" alt="">
          <p class="incoming-num">进件号</p>
          <p class="code">{{ item.project_number }}</p>
        </div>
        <div class="details" @click="goDetails(item)">
          <div class="option">
            <p class="name">承租人</p>
            <p class="full-name normal">{{ item.bp_name }}</p>
          </div>
          <div class="option">
            <p class="name">合同金额</p>
            <p class="normal money">{{ item.total_price|NumFormat }}</p>
            <img src="@/assets/distributorSign/goDetails.png" alt="">
          </div>
          <div class="option">
            <p class="name">申请时间</p>
            <p class="normal">{{ dateConverse(item.confirm_start_date) }}</p>
          </div>
        </div>
      </div>
    </h-content>

    <h-content v-if="tabNum === 1">
      <div v-for="(item,index) in approvedLists" :key="index" class="contract-list">
        <div class="item">
          <img src="@/assets/distributorSign/icon-进件合同.png" alt="">
          <p class="incoming-num">进件号</p>
          <p class="code">{{ item.project_number }}</p>
        </div>
        <div class="details" @click="goDetails(item)">
          <div class="option">
            <p class="name">承租人</p>
            <p class="full-name normal">{{ item.bp_name }}</p>
          </div>
          <div class="option">
            <p class="name">合同金额</p>
            <p class="normal money">{{ item.total_price|NumFormat }}</p>
            <img src="@/assets/distributorSign/goDetails.png" alt="">
          </div>
          <div class="option">
            <p class="name">申请时间</p>
            <p class="normal">{{ dateConverse(item.confirm_start_date) }}</p>
          </div>
        </div>
      </div>
    </h-content>

  </h-view>
</template>

<script>
import Tab from '@/pages/distributorSign/tab'
export default {
  name: 'ContractList',
  filters: {
    NumFormat: function (value) {
      if (!value) return '0.00'
      var intPart = Number(value) | 0 // 获取整数部分
      var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
      var floatPart = '.00' // 预定义小数部分
      var value2Array = value.split('.')
      // =2表示数据有小数位
      if (value2Array.length === 2) {
        floatPart = value2Array[1].toString() // 拿到小数部分

        if (floatPart.length === 1) { // 补0,实际上用不着
          return intPartFormat + '.' + floatPart + '0'
        } else {
          return intPartFormat + '.' + floatPart
        }
      } else {
        return intPartFormat + floatPart
      }
    },
  },
  components: {
    Tab,
  },
  data () {
    return {
      tabNum: 0,
      lists: [],
      submitLists: [],
      approvedLists: [],
    }
  },
  created () {
    console.log(window.localStorage.user_phone)
    let vm = this
    let url = $config.basePath + 'prj_confirm_list_query'
    let param = {
      user_phone: window.localStorage.user_phone,
    }
    vm.hlsHttp.post(url, param).then(function (res) {
      console.log(res.result)
      if (res.result === 'S') {
        vm.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT')
        vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED')
        // vm.lists = res.lists
      }
    })
  },
  methods: {
    goDetails (item) {
      console.log(item.project_id, item.bp_class)
      window.sessionStorage.setItem('bp_class', item.bp_class)
      window.sessionStorage.setItem('project_id', item.project_id)
      this.$router.push({
        name: 'ContractDetails',
        params: {
          confirm_id: item.confirm_id,
          confirm_status: item.confirm_status,
          hasButtom: true,
        },
      })
    },
    getTabNum (i) {
      this.tabNum = i
    },
    dateConverse (date) {
      return date.replace(/\//g, '-')
    },
  },
}
</script>
<style lang="less" scoped>
  #sign {
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }

      span {
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.61px;
        line-height: 24px;
      }
    }

    .hinput {
      position: relative;
      z-index: 50;
      width: 100%;
      height: 68px;
      border-bottom: 1px solid #cccccc70;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 3px;
      background: #fff;
      margin-bottom: 9px;

      .search-box {
        width: 93.6%;
        height: 36px;
        font-size: 14px;
        color: #B4B4B5;
        letter-spacing: 0;
        font-family: PingFangSC-Regular;
        border: 1px solid rgba(56, 63, 69, 0.60);
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        input {
          width: 90%;
          height: 100%;
          opacity: 0.4;
          border: none;
          line-height: 34px;
        }
      }
    }

    .content {
      padding-bottom: 14px;
    }

    .contract-list {
      width: 100%;
      height: 120px;
      // border: 1px solid #ccc;
      background: #fff;
      //margin-bottom: 8px;
      .item {
        width: 100%;
        height: 34px;
        background: rgba(00, 70, 156, 0.1);
        display: flex;
        flex-direction: row;
        align-items: center;

        img {
          margin-left: 16.6px;
        }

        .incoming-num {
          font-family: PingFangSC-Semibold;
          // width: 42px;
          height: 20px;
          font-weight: bolder;
          line-height: 20px;
          font-size: 14px;
          color: #00469C;
          letter-spacing: 0;
          margin-left: 8.8px;
        }

        .code {
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #00469C;
          margin-left: 8px;
          font-weight: bolder
        }
      }

      .details {
        width: 100%;
        height: 86px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 6px 0;

        .option {
          width: 100%;
          height: 18px;
          display: flex;
          flex-direction: row;

          .name {
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: rgba(56, 63, 69, 0.60);
            width: 80px;
            height: 18px;
            line-height: 18px;
            text-align: right
          }

          .normal {
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: #383F45;
            height: 18px;
            line-height: 18px;
            margin-left: 8px;
          }

          .money {
            color: #FCC800;
          }

          img {
            margin-left: 47%
          }

        }
        .option:nth-of-type(2) {
          position: relative;
          img{
            position: absolute;
            right: 10px;
          }
        }
      }
    }
  }

</style>