<template>
  <h-view id="addCar">

    <h-header :proportion="[5, 1, 1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png">
        <span>合同明细</span>
      </div>
    </h-header>

    <Tab :title="text" @getTabNum="getTabNum" />

    <h-content>
      <div v-show="tabNum === 0">
        <div class="userInfo">合同信息</div>
        <list-item :item-height="44">
          <item>
            <div slot="name">合同编号</div>
            <input slot="content" v-model="project_number" readonly placeholder="暂无数据">
          </item>
          <item>
            <div slot="name">承租人名称</div>
            <input slot="content" v-model="detail.bp_name" placeholder="暂无数据" readonly="true">
          </item>
          <item>
            <div slot="name">产品名称</div>
            <input slot="content" v-model="detail.division_n" readonly placeholder="暂无数据">
          </item>
          <item>
            <div slot="name">产品型号</div>
            <input slot="content" v-model="detail.product_code" readonly placeholder="暂无数据">
          </item>
          <item>
            <div slot="name">合同金额</div>
            <input slot="content" v-model="detail.total_price" readonly placeholder="暂无数据">
          </item>
          <item>
            <div slot="name">合同类型</div>
            <input slot="content" v-model="detail.total_price" readonly placeholder="暂无数据">
          </item>
          <item>
            <div slot="name">主机厂</div>
            <input slot="content" v-model="detail.total_price" readonly placeholder="暂无数据">
          </item>
          <item>
            <div slot="name">租赁物数量</div>
            <input slot="content" v-model="detail.product_num" readonly placeholder="请输入租赁物数量">
          </item>
          <item>
            <div slot="name">商务政策</div>
            <input slot="content" v-model="detail.product_plan_id_n" readonly placeholder="暂无数据">
          </item>
          <item>
            <div slot="name" class="firstPay">签约日期</div>
            <input slot="content" v-model="detail.sale_date" readonly placeholder="请选择日期 " class="firstPay">
          </item>
          <item>
            <div slot="name" class="firstPay">首次分期付款日</div>
            <input slot="content" v-model="detail.lease_start_date" readonly placeholder="请选择日期 " class="firstPay">
          </item>
          <item :showArrow="true" @click.native="goPlan">
            <div slot="name">查看还款计划（变更前）</div>
            <input slot="content" readonly>
          </item>
          <item :showArrow="true" @click.native="goPlan">
            <div slot="name">查看还款计划（变更后）</div>
            <input slot="content" readonly>
          </item>
        </list-item>
      </div>

      <div v-show="tabNum === 1">
        <list-item :item-height="56" class="contract-text" style="background-color:rgb(250,250,250);">
          <item v-for="(item, index) in attachArray" :proportion="[7, 1]" :key="index">
            <div slot="name" class="aguremrnt-list">
              <img src="@/assets/constractSigning/npack.png" alt class="pics">
              <p class="second first">{{ item.attachment_file }}</p>
              <img v-if="item.read_status === 'N'" class="unread" src="@/assets/constractSigning/unchecked.png">
              <img v-if="item.read_status === 'Y'" class="unread" src="@/assets/constractSigning/checked.png">
              <div v-if="item.template_code === 'PRE_ABC_PAYMENT'" class="wrap-img" @click="entryInfo">
                <img src="@/assets/constractSigning/scan.png">
              </div>
            </div>
            <div slot="content" class="in-detail" @click="goContent(item, index)">
              <img src="@/assets/constractSigning/detail.png" alt>
            </div>
          </item>
        </list-item>
      </div>
    </h-content>

    <bottom-tab v-show="!overdue">
      <tab-button class="save" @click.native="cancel">撤销</tab-button>
      <tab-button class="approve" @click.native="isApprove">提交申请</tab-button>
    </bottom-tab>

  </h-view>
</template>
<script>
import Tab from '@/pages/carConfirm/tab'
export default {
  components: { Tab },
  data() {
    return {
      overdue: false, // 是否已办， 由上个页面参数传递

      project_id: this.$route.query.project_id,
      project_number: this.$route.query.project_number,

      // 合同文本
      attachArray: [],

      // tab 页
      text: {
        first: '合同详情',
        second: '合同文本',
      },
      tabNum: 0,

      // 合同信息
      detail: {
        product_num: '',
        first_pay: '',
        gps_fee: '',
        bp_name: '',
        project_number: '',
        bp_agent_name: '',
        product_plan_id_n: '',
        division: '',
        division_n: '',
        product_plan_id: '',
        project_id: '',
        bp_id: '',
        product_code: '',
        sale_date: '',
        lease_start_date: '',
      },
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$route.query.project_id) {
        vm.getDetail()
      }
    })
  },
  methods: {
    goContent(item, index) {
      // 详情
      // 合同状态更新保存
      let vm = this
      vm.attachFlag = true
      vm.attachUrl = item.attachment_file_path
      let url = process.env.basePath + 'prj_content_check_status_save'
      let param = {
        master: {
          content_id: item.content_id,
          check_status: 'Y',
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(res => {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          let temp = vm.attachArray[index]
          temp.read_status = 'Y'
          vm.$router.push({ name: 'previewPdf', params: { attachUrl: vm.attachUrl } })
          vm.attachArray.splice(vm.attachArray[index], 1, temp)
        } else {
          vm.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    goPlan() {
      let vm = this
      vm.$router.push({
        name: 'ContractRepayPlan', // 是否更改？
        params: {
          product_num: vm.detail.product_num,
          project_id: vm.project_id,
        },
      })
    },
    getTabNum(i) {
      this.tabNum = i
      if (i === 1) {
        this.getAttachment()
      }
    },
    cancel() {
    },
    // 合同文本
    getAttachment() {
      let vm = this
      let url = process.env.basePath + 'get_content_app_agent'
      let param = {
        project_id: "177049",
        data_class: 'LEASE_ITEM',
        bp_id: JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(res => {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.attachArray = res.attachments
        } else {
          vm.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    isApprove() {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确定提交至客户签署吗？',
        onConfirm: (data) => {
          if (data === 1) {
            this.approve()
          }
        },
      })
    },
    approve() {
      let vm = this
      let url = process.env.basePath + 'car_apply_submit'
      let param = {
        master: {
          project_id: vm.project_id,
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showSuccess('申请成功')
          setTimeout(() => {
            vm.$router.push({
              name: 'StartList',
            })
          }, 2000)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getDetail() {
      let vm = this
      let url = process.env.basePath + 'con_contract_detial'
      let param = {
        project_id: this.$route.query.project_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.detail, res.info)
          vm.detail.sale_date ? vm.detail.sale_date = vm.detail.sale_date.substr(0, 10) : vm.detail.sale_date = ''
          vm.detail.lease_start_date ? vm.detail.lease_start_date = vm.detail.lease_start_date.substr(0, 10) : vm.detail.lease_start_date = ''
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },

  },
}
</script>

<style lang="less" scoped>
#addCar {
  .aguremrnt-list {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    height: 100%;

    .unread {
      width: 34px;
      height: 20px;
      margin: 0 10px;
    }

    .wrap-img {
      width: 12%;
      height: 100%;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
      background: rgb(254, 251, 233);

      img {
        width: 22px;
        height: 20px;
      }
    }

    .pic {
      margin-left: -3px;
    }

    .pics {
      //    width: 21px;
      height: 30px;
    }

    .read {
      height: 16px;
      margin-top: 8px;
      margin-left: 6px;
    }

    .second {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      margin-left: 16px;
      color: #383f45;
      letter-spacing: 0.43px;
    }

    .first {
      margin-left: 13px;
      width: 60%;
    }
  }

  .contract-text {
    .border-red {
      border: 2px solid rgba(255, 0, 0, 0.4);
    }

    .hls-item {
      margin-top: 8px;
      background-color: #fff;
    }

    .contents {
      padding: 0;
    }

    .in-detail {
      background-color: rgba(0, 70, 156, 0.08);
      width: 48px;
      height: 56px;
      text-align: center;
      line-height: 65px;

      img {
        width: 16px;
      }
    }

    .in-all {
      //width: 96px;
      display: flex;

      img {
        width: 16px;
      }

      div {
        width: 48px;
        height: 56px;
        text-align: center;
        line-height: 65px;
      }

      div:first-child {
        background-color: rgba(252, 200, 0, 0.1);
      }

      div:nth-child(2) {
        background-color: rgba(0, 70, 156, 0.08);
      }
    }
  }

  input::placeholder {
    color: #888c8f;
  }

  .firstPay {
    color: #ff9200;
    font-weight: bold;
  }

  .trans-enter-active,
  .trans-leave-active {
    transition: opacity 0.5s;
  }

  .trans-enter,
  .trans-leave-active {
    opacity: 0;
  }

  .wrap {
    padding-top: 92px;
  }

  .userInfo {
    height: 45px;
    line-height: 45px;
    color: #0041c4;
    font-size: 15px;
    margin-left: 16px;
    position: relative;
  }

  .userInfo::before {
    content: "";
    display: block;
    width: 4px;
    height: 20px;
    background-color: #0041c4;
    position: absolute;
    left: -15px;
    top: 12px;
  }

  .approve {
    color: #fff;
    background-color: #0041c4;
  }

  .save {
    border: 1px solid #fdb62f;
    border-radius: 4px;
    color: #fdb62f;
  }

  /deep/ .hls-item .contents .add-name {
    flex: 2 1 0% !important;
  }
}
</style>