<template>
  <div class="home_wrapper">
    <div class="header_main"
         :style="`background-image:url(${require(showBtn?'@/assets/images/sunVillage_info/list_head.png':'@/assets/images/sunVillage_info/list_head_red.png')})`"
    >
      资产公开
      <div class="return_btn" @click="onClickLeft"></div>
    </div>

    <div class="center_box">
      <div class="name_box">
        <van-row>
          <van-col :span="24">资产名称</van-col>
        </van-row>
        <van-row v-for="(item,index) in applicationList" :key="index">
          <van-col :span="24">{{item.name}}</van-col>
        </van-row>
        <div class="name_bg"></div>
        <img src="../../assets/images/sunVillage_info/name_icon.png" class="name_icon"/>
      </div>

      <div class="right_box">
        <div class="right_box_box">
          <van-row>
            <van-col :span="6">资产编码</van-col>
            <van-col :span="3">资产类别</van-col>
            <van-col :span="3">构建时间</van-col>
            <van-col :span="3">使用情况</van-col>
            <van-col :span="3">数量</van-col>
            <van-col :span="3">单位</van-col>
            <van-col :span="3">原值</van-col>
          </van-row>
          <van-row v-for="(item,index) in applicationList" :key="index">
            <van-col :span="6">{{item.code}}</van-col>
            <van-col :span="3">{{item.assetType}}</van-col>
            <van-col :span="3">{{item.buildTime}}</van-col>
            <van-col :span="3">{{item.useType}}</van-col>
            <van-col :span="3">{{item.netValue}}</van-col>
            <van-col :span="3">{{item.unit}}</van-col>
            <van-col :span="3">{{item.originalValue}}</van-col>
          </van-row>
        </div>
      </div>

      <div class="clear"></div>
    </div>

  </div>
</template>

<script>
  import { orcodeListZC } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        applicationList:[],
        applicationListSecond:[],
        assetStatusOptions:[],
        applicationSummary:[],
        auditStatus:[],
        loading: false,
        finished: false,
        show: false,
        showTab: false,
        fileList:[],
        listLength:'0',
        searchInput:'',
        queryParams:{
          translate_dict:1,
          pageNum:1,
          pageSize:9999999,
          orderByColumn: 'code',
          isAsc: 'asc',
          bookId: '',
        },
        uploadFiles1:[],
        projectId:'',
        projectIndex:'',
        showBtn:false,
        yearMonth:[],
        deptName:'',
        openName:'',
      };
    },
    created() {
      this.queryParams.bookId = Cookies.get('bookId');
      this.getList()
    },
    methods: {
      getList(){
        var _this = this;
        setTimeout(() => {
          console.log(_this.queryParams)
          orcodeListZC(_this.queryParams).then(response => {
            _this.applicationList = response.rows;
            if(_this.applicationList.length >= response.total){
              _this.finished = true;
              return;
            }else{
              _this.loading = false;
              _this.queryParams.pageNum += 1 ;
            }
          });
        }, 1000);
      },
      tabClick(year){
        this.queryParams.year = year ;
        this.applicationList = [];
        this.getList();
      },
      tabShow(){
        this.showTab = !this.showTab;
      },
      /** 删除按钮操作 */
      handleDelete(row,index) {
        let assetStatus = row.assetStatus ? row.assetStatus : data[0].assetStatus;
        if (assetStatus === '2' || assetStatus === '3') {
          this.$notify({
            message: "不允许删除已出售或已报废的资产",
            type: "warning",
          });
          return;
        }
        let useType = row.useType;
        if(useType == 3) {
          this.$notify({
            message: "出租或出借的资产不允许删除",
            type: "warning",
          });
          return ;
        }
        const ids = row.id || this.ids;

        this.$dialog.alert(
          {
            message:'是否确认删除固定资产?',
            title:"警告",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }
        )
          .then(function () {
            return delPermanent(ids);
          })
          .then(() => {
            this.applicationList.splice(index, 1);
            this.$notify({ type: 'success', message: '删除成功' });
          });
      },
      goAdd(){
        this.$router.push('/sunVillage_info/list_finance_add')
      },
      goDetail(id){
        this.$router.push({path:'/sunVillage_info/list_finance_detail',query: {id:id,type:'finance'}})
      },
      goEdit(id){
        this.$router.push({path:'/sunVillage_info/list_finance_edit',query: {id:id,type:'finance'}})
      },
      goRemove(id){
        this.$dialog.alert({
          title: '提示',
          message: '确认删除？',
        })
          .then(() => {
            openRemove(id).then(response => {
              this.$notify({ type: 'success', message: '删除成功' });
              this.getList()
            });
          })
          .catch(() => {
            // on cancel
          });

      }
    },
  }
</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;
      }
      .add_btn{
        width: 56.4px;
        height: 40.8px;
        background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
        background-size: 47px 34px;
        position: absolute;
        right: 38px;
        top: 36px;
      }
    }
    .record_main{
      padding:30px 22px;
      .record_det{
        height: 38px;
        line-height: 38px;
        display: flex;
        justify-content:space-between;
        .year_l{
          font-size: 30px;
          display: flex;
          align-items: center;
          color: #858585;

          .unit{
            padding-left: 5px;
          }
          .icon{
            width: 23px;
            height: 12px;
            display: block;
            background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;
            background-size: 100% 100%;
            margin-bottom: 4px;
            margin-right: 8px;
            &.zk {
              transform: rotate(0deg)
            }
            &.ss{
              transform: rotate(180deg)
            }

          }
        }
        .total_r{
          font-size: 26px;
          letter-spacing: 2px;
        }
      }
      .record_list{
        display: flex;
        flex-flow: wrap;
        margin-top: 12PX;
        .flex_block{
          font-size: 30px;
          color: #878787;
          padding-right: 30px;
          &.current{
            color: #4199fe;
            font-weight: bold;
          }
        }
      }
    }
    .list_main{
      padding:0 22px;
      .item{
        height: 100px;
        border-radius: 30px;
        background: #fff;
        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
        padding:15px 32px;
        display: flex;
        margin-bottom: 20px;
        .info{
          flex:1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .title{
            display: flex;
            font-size: 32px;
            align-items: center;
            height: 58px;
            .icon_box{
              width: 34px;
              display: block;
              height: 30px;
              background: url('../../assets/images/sunVillage_info/list_icon_2.png') no-repeat;
              background-size: 100% 100%;
              margin-right: 10px;
            }
            .news_title{
              max-width:416px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
            }
            .tips_mark{
              width: 34px;
              height: 34px;
              background: #fa0c0c;
              border-radius: 8px;
              font-size: 24px;
              color: #fff;
              text-align: center;
              line-height: 34px;
              margin-left: 10px;
            }
          }
          .red{
            color: #fa0c0c;
          }
          .green{
            color: #4caf50;
          }
          .time{
            font-size: 32px;
            display: flex;
            align-items: center;
            justify-content: right;
            height: 30px;
            margin-top: 6px;
            .icon_time{
              width: 25px;
              height: 25px;
              background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;
              background-size: 100% 100%;
              margin-right: 10px;
            }
          }
        }
        .operation{
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          text-align: center;
          .opera_btn{
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content:center;

            &.delete{
              background:#df0707;
              margin-left: 28px;
              .icon{
                width: 22px;
                height: 29px;
                background: url('../../assets/images/sunVillage_info/list_icon_7.png') no-repeat;
                background-size: 100% 100%;
                display: block;
              }
            }
            &.edit{
              background: #79cf13;
              .icon {
                width: 26px;
                height: 25px;
                background: url('../../assets/images/sunVillage_info/list_icon_6.png') no-repeat;
                background-size: 100% 100%;
                display: block;
              }
            }
            &.view{
              background: #3494ff;
              .icon {
                width: 29px;
                height: 21px;
                background: url('../../assets/images/sunVillage_info/list_icon_3.png') no-repeat;
                background-size: 100% 100%;
                display: block;
              }
            }
          }
        }
      }

    }
    .bottom_tips{
      font-size: 24px;
      color: #a7a6a6;
      text-align: center;
      margin-top: 32px;
      background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
      background-size: 260px 2px;
      .xs{
        padding:0 8px;
        background: #e9e9e9;
      }
    }
    .banner {
      display: flex;
      background:#3494ff;
      color:#fff;
      text-align: center;
      margin:3%;
      border-radius: 10PX;
    }
    .banner_tabs{
      flex:1;
      padding:10PX 0;
      font-size: 16PX;
      div:nth-child(2){
        font-size: 14PX;
        margin-top: 5PX;
      }
    }
  }
  .top_head_title{
    font-size: 16PX;
    text-align: center;
    padding: 15PX 0;
  }
  .name_box{
    float: left;
    width: 180PX;
    position: relative;
    .name_bg{
      background-color: rgba(47,172,254,0.2);
      width: 180PX;
      height: 100%;
      position: absolute;
      top: 0;
    }
    .name_icon{
      position: absolute;
      top: 40PX;
      left: 50%;
      transform: translateX(-50%);
    }
    .van-row:nth-child(odd){
      .van-col {
        background-color: #ffffff;
      }
    }
    .van-row:nth-child(1){
      border-top-left-radius: 10PX;
      border-bottom-left-radius: 10PX;
      background-color: #ffffff;
      .van-col {
        background-color: #2facfe;
        color: #ffffff;
        border-radius: 10PX;
        text-align: center;
      }
    }
    .van-col{
      font-size: 16PX;
      padding: 0PX 10PX;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      word-break: break-all;
      overflow: hidden;
      line-height: 41PX;
      text-align: left;
    }
  }
  .center_box{
    padding: 0 3%;
    margin-top: 30PX;
  }
  .right_box{
    float: left;
    width: calc(100% - 180PX);
    overflow:hidden;
    overflow-x: scroll;
    white-space:nowrap;
    display: -webkit-box;
    -webkit-overflow-scrolling: touch;
    .right_box_box{
      width: 800PX;
    }
    .van-row:nth-child(odd){
      background-color: #ffffff;
    }
    .van-row:nth-child(1){
      border-top-right-radius: 10PX;
      border-bottom-right-radius: 10PX;
      .van-col{
        color: #2facfe;
        text-align: center;
      }
    }
    .van-col{
      font-size: 16PX;
      padding: 0PX 10PX;
      text-align: center;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      word-break: break-all;
      overflow: hidden;
      line-height: 41PX;
    }
  }
  .clear{
    clear: both;
  }
  .bottom_box{
    padding: 0 3%;
    p{
      float: left;
      width: 180PX;
      padding: 10PX 15PX;
      text-align: center;
      font-size: 16PX;
      color: red;
    }
    .van-row{
      float: left;
      width: calc(100% - 180PX);
      .van-col{
        font-size: 16PX;
        padding: 10PX 15PX;
        text-align: center;
        color: red;
      }
    }
  }
</style>
