<template>
    <div class="home_wrapper">
      <div class="header_main" >
        承包网签
        <div class="return_btn" @click="onClickLeft"></div>
      </div>

      <!--    发包方    -->
      <div class="list_main top_main">
        <div class="titBox">
          <img src="../../assets/images/sunVillage_info/list_contract_signature_icon_01.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
          <p class="tit">发包方</p>
        </div>
        <!--    已授权    -->
        <img v-if="form.fbfsfsq" src="../../assets/images/sunVillage_info/list_contract_signature_icon_09.png" style="width: 33%;" />

        <!--    未授权    -->
        <p class="top_main_btn"  v-if="!form.fbfsfsq" @click="$router.push({name:'sunVillageInfoListFbfsq'})">进入授权 ></p>
      </div>

      <!--    承包方    -->
      <div class="list_main">
        <div class="titBox">
          <img src="../../assets/images/sunVillage_info/list_contract_signature_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
          <p class="tit">承包方</p>
          <p class="tt_num">共<span>{{form.cbfzhs}}</span>户</p>
        </div>

        <div class="list_main_content">
          <div class="list_main_block">
            <div class="list_main_block_tt">
              <div class="list_main_block_icon">
                <img src="../../assets/images/sunVillage_info/list_contract_signature_icon_04.png" style="width:12PX;height:12PX;"/>
              </div>
              <p>未审核</p>
              <p>{{form.cbfwshhsbfb}}</p>
            </div>
            <p class="list_main_block_num"><span>{{form.cbfwshhs}}</span>户</p>
            <p class="list_main_block_btn"  @click="$router.push({name:'sunVillageInfoListContractor',query:{status:true}})">进入查看 ></p>
          </div>

          <div class="list_main_block">
            <div class="list_main_block_tt">
              <div class="list_main_block_icon">
                <img src="../../assets/images/sunVillage_info/list_contract_signature_icon_05.png" style="width:12PX;height:12PX;"/>
              </div>
              <p>未授权</p>
              <p>{{form.cbfwsqhsbfb}}</p>
            </div>
            <p class="list_main_block_num"><span>{{form.cbfwsqhs}}</span>户</p>
            <p class="list_main_block_btn" @click="$router.push({name:'sunVillageInfoListContractor',query:{sqStatus:true}})">进入查看 ></p>
          </div>
        </div>

      </div>

      <!--    承包合同    -->
      <div class="list_main">
        <div class="titBox">
          <img src="../../assets/images/sunVillage_info/list_contract_signature_icon_03.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
          <p class="tit">承包合同</p>
          <p class="tt_num" @click="$router.push({name:'sunVillageInfoListCbht',query:{wcStatus:false}})">进入合同 ></p>
        </div>
        <div class="list_main_content">
          <div class="list_main_block">
            <div class="list_main_block_tt">
              <div class="list_main_block_icon">
                <img src="../../assets/images/sunVillage_info/list_contract_signature_icon_06.png" style="width:12PX;height:12PX;"/>
              </div>
              <p>筹备中</p>
              <p>{{form.htcbzfsbfb}}</p>
            </div>
            <p class="list_main_block_num"><span>{{form.htcbzfs}}</span>份</p>
            <p class="list_main_block_btn" v-if="form.htcbzfs > 0" @click="batchEqbContractSignProcess">转入待签 ></p>
          </div>

          <div class="list_main_block">
            <div class="list_main_block_tt">
              <div class="list_main_block_icon">
                <img src="../../assets/images/sunVillage_info/list_contract_signature_icon_07.png" style="width:12PX;height:12PX;"/>
              </div>
              <p>双方待签</p>
              <p>{{form.htdqfsbfb}}</p>
            </div>
            <p class="list_main_block_num"><span>{{form.htdqfs}}</span>份</p>
            <p class="list_main_block_btn" v-if="form.htdqfs > 0" @click="batchContractSign">批量签署 ></p>
          </div>

          <div class="list_main_block">
            <div class="list_main_block_tt">
              <div class="list_main_block_icon">
                <img src="../../assets/images/sunVillage_info/list_contract_signature_icon_08.png" style="width:12PX;height:12PX;"/>
              </div>
              <p>已完成</p>
              <p style="background-color: #d2f1d1;color: #30bf2c;">{{form.htywcfsbfb}}</p>
            </div>
            <p class="list_main_block_num"><span>{{form.htywcfs}}</span>份</p>
            <p class="list_main_block_btn" @click="$router.push({name:'sunVillageInfoListCbht',query:{wcStatus:true}})">进入查看 ></p>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
  import { cbfDataStatistics} from "@/api/sunVillage_info/sysCbf";
  import { batchEqbContractSigning,batchEqbContractSignProcess} from "@/api/sunVillage_info/fixedAssets";
  import $ from "jquery";
  import Cookies from "js-cookie";
  export default {
    name: "sunVillageInfoListContractSignature",
    data() {
      return {
            form:{},
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData(){
        cbfDataStatistics().then(res=>{
          this.form = res.data;
        });
      },
      batchContractSign(val){
        this.$toast.loading({
          message: "数据处理中",
          forbidClick: true,
          duration: 10000000000,
        });
        batchEqbContractSigning(val).then(response => {
          this.$toast.clear();
          this.$toast.success('批量签署完成');
          let _this = this;
          setTimeout(function(){
            _this.getData();
          },3000)
        });
      },
      batchEqbContractSignProcess(val){
        this.$toast.loading({
          message: "数据处理中",
          forbidClick: true,
          duration: 10000000000,
        });
        batchEqbContractSignProcess(val).then(response => {
          this.$toast.clear();
          this.$toast.success('转入待签完成');
          let _this = this;
          setTimeout(function(){
            _this.getData();
          },3000)
        });
      },
    },
  }
</script>

<style scoped lang="scss">
.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;
        }
    }
  .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);
    .list_main_content{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .list_main_block{
      padding:25px;
      width: 48%;
      border-radius: 15PX;
      box-shadow: 0PX 2PX 5PX rgba(63, 68, 75, 0.2);
      margin-top: 25px;
      .list_main_block_tt{
        display: flex;
        align-items: center;
        .list_main_block_icon{
          padding: 5PX;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          box-shadow: 0PX 2PX 5PX rgba(63, 68, 75, 0.2);
          margin-right: 5PX;
        }
        p{
          line-height: 1;
          &:nth-child(2){
            font-size: 14PX;
          }
          &:nth-child(3){
            font-size: 14PX;
            color: #fa0c0c;
            background-color: #fecece;
            padding: 5PX 10PX;
            border-top-right-radius: 10PX;
            margin-left: auto;
          }
        }
      }
      .list_main_block_num{
        font-size: 16PX;
        margin: 5PX 0;
        span{
          font-size: 24PX;
          font-weight: bold;
        }
      }
      .list_main_block_btn{
        font-size: 14PX;
        color: #686868;
      }
    }
  }
  .titBox{
    display: flex;
    align-items: center;
    .tt_num{
      font-size: 16PX;
      color: #686868;
      margin-left: auto;
      span{
        font-size: 18PX;
        color: #2f8be5;
        font-weight: bold;
      }
    }
  }
  .tit{
    font-size: 36px;
    color: #2f8be5;
  }
  .top_main{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:10px 25px;
    .top_main_btn{
      font-size: 14PX;
      color: #686868;
      padding: 8PX 15PX;
      box-shadow: 0PX 2PX 5PX rgba(63, 68, 75, 0.2);
      border-radius: 8PX;
      margin: 10PX 0;
    }
  }
}
</style>
