<template>
  <div class="home_wrapper">
    <div class="header_main">
      承包合同详情
      <div class="return_btn" @click="onClickLeft"></div>
    </div>
    <div class="list_main">
      <van-divider>承包合同合同信息</van-divider>
      <van-field v-model="form.cbhtbm" label="承包合同编码" placeholder="承包合同编码" input-align="right" :border="false"/>
      <van-field v-model="form.ycbhtbm" label="原承包合同编码" placeholder="原承包合同编码" input-align="right" :border="false"/>
      <van-field v-model="form.cbflx" label="承包方类型" placeholder="承包方类型" input-align="right" :border="false"/>
      <van-field v-model="form.cbfbm" label="承包方编码" placeholder="承包方编码" input-align="right" :border="false"/>
      <van-field v-model="form.cbfmc" label="承包方名称" placeholder="承包方名称" input-align="right" :border="false"/>
      <van-field v-model="form.cbfs" label="承包方式" placeholder="承包方式" input-align="right" :border="false"/>
      <van-field v-model="form.cbdkzs" label="承包地块总数" placeholder="承包地块总数" input-align="right" :border="false"/>
      <van-field v-model="form.cbqxq" label="承包期限起" placeholder="承包期限起" input-align="right" :border="false"/>
      <van-field v-model="form.cbqxz" label="承包期限止" placeholder="承包期限止" input-align="right" :border="false"/>
      <van-field v-model="form.htzmjm" label="合同总面积(亩)" placeholder="合同总面积(亩)" input-align="right" :border="false"/>
      <van-field v-model="form.yhtzmjm" label="原合同总面积(亩)" placeholder="原合同总面积(亩)" input-align="right" :border="false"/>
      <van-field v-model="form.qdsj" label="签订时间" placeholder="签订时间" input-align="right" :border="false"/>
      <van-field v-model="form.cbhtzt" label="承包合同状态" placeholder="承包合同状态" input-align="right" :border="false"/>
      <van-field v-model="form.signingMode" label="签订方式" placeholder="签订方式" input-align="right" :border="false"/>
      <van-field v-model="form.signingStatus" label="签订状态" placeholder="签订状态" input-align="right" :border="false"/>
<!--      <van-field v-model="form.contractRemark" label="合同备注" placeholder="合同备注" input-align="right" :border="false"/>-->

      <van-divider>甲方信息</van-divider>
      <van-field v-model="form.firstIsSign" label="甲方已签" placeholder="甲方已签" input-align="right" :border="false"/>
      <van-field v-model="form.firstPartyAt" label="甲方签字日期" placeholder="甲方签字日期" input-align="right" :border="false"/>
      <van-field label="甲方签字" input-align="right" :border="false" />
      <img :src="'/api'+form.firstSigning" width="100%" alt="" v-if="form.firstSigning" />
      <van-field label="村级公章" input-align="right" :border="false" />
      <img :src="'/api'+form.firstSeal" width="100%" alt="" v-if="form.firstSeal" />

      <van-divider>乙方信息</van-divider>
      <van-field v-model="form.secondIsSign" label="乙方已签" placeholder="乙方已签" input-align="right" :border="false" />
      <van-field v-model="form.secondPartyAt" label="乙方签字日期" placeholder="乙方签字日期" input-align="right" :border="false" />
      <van-field label="乙方签字" input-align="right" :border="false" />
      <img :src="'/api'+form.secondSigning" width="100%" alt="" v-if="form.secondSigning">
    </div>
  </div>
</template>

<script>
  import {getCbht} from "@/api/sunVillage_info/fixedAssets";

  export default {
    name: "sunVillageInfoListCbhtDetail",
    data() {
      return {
        form: {},
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      getDetail() {
        let query = {
          translate_dict: 1
        };
        getCbht(query, this.$route.query.id).then((res) => {
          if (res.code === 200) {
            this.form = res.data;
          }
        })
      },

    },
  }
</script>

<style scoped lang="scss">
  /deep/ .van-button--primary {
    background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
    background-size: 100% 100%;
    border: none;
  }

  .home_wrapper {
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;

    .header_main {
      height: 116px;
      background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
      background-size: 100% 100%;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 36px;
      line-height: 116px;
      text-align: center;
      color: #fff;
      position: relative;

      .return_btn {
        width: 24px;
        height: 43.2px;
        background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
        background-size: 20px 36px;
        position: absolute;
        left: 38px;
        top: 36px;
      }
    }

    .release_head {
      height: 90px;
      padding: 0 23px;
      display: flex;
      align-items: center;
      font-size: 26px;
      color: #929292;

      .people {
        flex: 1;
        display: flex;
        align-items: center;

        .icon {
          width: 24px;
          height: 21px;
          background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
          background-size: 100% 100%;
          display: block;
          margin-right: 8px;
        }
      }

      .time {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .icon {
          width: 25px;
          height: 25px;
          background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
          background-size: 100% 100%;
          display: block;
          margin-right: 8px;
        }
      }
    }

    .release_conetnt {
      padding: 0 22px;
      font-size: 32px;
      color: #252525;
      line-height: 44px;

      img {
        max-width: 100%;
        margin-bottom: 16px;
      }

      p {
        margin-bottom: 16px;
      }
    }

    .list_main {
      padding: 25px;
      background: #ffffff;
      width: 94%;
      margin: 25px auto 0;
      border-radius: 15PX;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    }

    .titBox {
      display: flex;
      align-items: center;
    }

    .tit {
      font-size: 36px;
      font-weight: bold;
    }

    /deep/ .van-cell {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important;
    }

    /deep/ .van-field__label {
      /*padding-left: 10PX;*/
      width: auto;
      display: flex;
      align-items: center;
    }

    /deep/ .van-cell--required::before {
      left: 85PX;
    }

    /deep/ .van-field__error-message {
      display: none;
    }
  }
</style>
