<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 class="add_btn" @click="goAdd" v-show="showBtn"></div>-->
    </div>
<!--    <div class="record_main">-->
<!--      <div class="record_det">-->
<!--        <div class="year_l" @click="tabShow"><i :class="{'icon':true , 'zk':!showTab ,  'ss':showTab } "></i>{{queryParams.year == '' ? '全部': queryParams.year}}<span class="unit">{{queryParams.year == '' ? '': '年'}}</span></div>-->
<!--        <div class="total_r">共{{listLength}}条公告</div>-->
<!--      </div>-->
<!--      <div class="record_list" v-if="showTab">-->
<!--        <div :class="{'flex_block':true , 'current':queryParams.year == ''}" @click="tabClick('')">全部</div>-->
<!--        <div v-for="(item,index) in yearList" :key="index" :class="{'flex_block':true , 'current':queryParams.year == item}" @click="tabClick(item)">{{item}}</div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="list_main">
        <!----1-->
        <div class="item">
          <div class="info">
            <div class="title">
                <i class="icon_box"></i>
                <p class="news_title">居委会公章</p>
                <img v-if="seal!='/api'" @click="deleteSeal" src="../../assets/images/sunVillage_info/signature_icon_07.png" width="30" alt="" style="margin-left: auto;display: block;">
  <!--              <img src="../../assets/images/sunVillage_info/signature_icon_08.png" width="30" alt="" style="margin-left: 5px;">-->
                <van-uploader :after-read="addSeal">
                  <img src="../../assets/images/sunVillage_info/signature_icon_09.png" width="30" alt="" style="margin-left: 5px;display: block;">
                </van-uploader>
            </div>
            <div class="time">
              <img :src="seal" alt="" width="60%">
            </div>
          </div>
        </div>
        <!----1-->
        <div class="item">
          <div class="info">
            <div class="title">
              <i class="icon_box"></i>
              <p class="news_title">经济组织公章</p>
              <img v-if="seal2!='/api'" @click="deleteSeal2" src="../../assets/images/sunVillage_info/signature_icon_07.png" width="30" alt="" style="margin-left: auto;display: block;">
<!--              <img src="../../assets/images/sunVillage_info/signature_icon_08.png" width="30" alt="" style="margin-left: 5px;">-->
              <van-uploader :after-read="addSeal2">
                <img src="../../assets/images/sunVillage_info/signature_icon_09.png" width="30" alt="" style="margin-left: 5px;display: block;">
              </van-uploader>
            </div>
            <div class="time">
              <img :src="seal2" alt="" width="60%">
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import {commonUpload, current, updateSeal, updateSeal2} from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        applicationList:[],
        applicationListSecond:[],
        assetStatusOptions:[],
        otherGkTypeOptions:[],
        auditStatus:[],
        loading: false,
        finished: false,
        show: false,
        showTab: false,
        fileList:[],
        showBtn:true,
        nowYear:new Date().getFullYear(),
        yearList:[],
        seal:'',
        seal2:''
      };
    },
    created() {
      if (this.$route.query.type == 'code'){
        this.showBtn = false;
      }
      this.getList()
    },
    methods: {
      getList(){
        var _this = this;
        current().then(response => {
          this.seal = '/api'+response.data.seal;
          this.seal2 = '/api'+response.data.seal2;
        });
      },
      deleteSeal(){
        this.$dialog.alert({
          title: '提示',
          message: '确认删除？',
          showCancelButton:true,
        })
        .then(() => {
          updateSeal().then(response => {
            this.seal = '';
            this.$notify({ type: 'success', message: '删除成功' });
          });
        })
        .catch(() => {
          // on cancel
        });
      },
      addSeal(file){
        let params1 = new FormData();
        params1.append("file", file.file);
        updateSeal(params1).then(response => {
          this.seal = response.url;
        });
      },
      deleteSeal2(){
        this.$dialog.alert({
          title: '提示',
          message: '确认删除？',
          showCancelButton:true,
        })
          .then(() => {
            updateSeal2().then(response => {
              this.seal2 = '';
              this.$notify({ type: 'success', message: '删除成功' });
            });
          })
          .catch(() => {
            // on cancel
          });
      },
      addSeal2(file){
        let params1 = new FormData();
        params1.append("file", file.file);
        updateSeal2(params1).then(response => {
          this.seal2 = response.url;
        });
      },
      goRemove(id,index){
        this.$dialog.alert({
          title: '提示',
          message: '确认删除？',
          showCancelButton:true,
        })
          .then(() => {
            otherRemove(id).then(response => {
              this.$notify({ type: 'success', message: '删除成功' });
              this.applicationList.splice(index,1);
            });
          })
          .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;
      margin-top: 15PX;
      .item{
        border-radius: 30px;
        background: #fff;
        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
        padding:25px 32px;
        margin-bottom: 20px;
        .info{
          .title{
            display: flex;
            font-size: 32px;
            align-items: center;
            height: 58px;
            justify-content: space-between;
            .icon_box{
              width: 34px;
              display: block;
              height: 30px;
              background: url('../../assets/images/sunVillage_info/signature_icon_05.png') no-repeat;
              background-size: 100% 100%;
              margin-right: 10px;
              flex-shrink: 0;
            }
            .news_title{
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              word-break: break-all;
              overflow: hidden;
              color: #333333;
            }
            .tips_mark{
              background: #ffedcd;
              border-radius: 8px;
              font-size: 24px;
              color: #f8a83d;
              text-align: center;
              line-height: 34px;
              flex-shrink: 0;
              padding: 0 5Px;
              margin-left: auto;
            }
            .tips_mark2{
              background: #eb1616;
              border-radius: 8px;
              font-size: 24px;
              color: #ffffff;
              text-align: center;
              line-height: 34px;
              flex-shrink: 0;
              padding: 0 5Px;
              margin-left: 10PX;
            }
          }
          .time{
            font-size: 16PX;
            color: #333333;
            display: flex;
            align-items: center;
            margin-top: 5PX;
            justify-content: center;
            .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{
        display: flex;
        align-items: center;
        justify-content: right;
        text-align: center;
        border-radius: 30px;
        background: #fff;
        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
        height: 100%;
        padding: 0 15Px;
        margin-left: 10PX;
        .opera_btn{
          border-radius: 50%;
          &.delete{
            background:#df0707;
            margin-left: 10PX;
            .icon{
              width: 22PX;
              height: 29PX;
              background: url('../../assets/images/sunVillage_info/signature_icon_03.png') no-repeat;
              background-size: 100% 100%;
              display: block;
            }
          }
          &.edit{
            background: #79cf13;
            margin-left: 10PX;
            .icon {
              width: 26PX;
              height: 25PX;
              background: url('../../assets/images/sunVillage_info/signature_icon_02.png') no-repeat;
              background-size: 100% 100%;
              display: block;
            }
          }
          &.view{
            background: #3494ff;
            margin-left: 10PX;
            .icon {
              width: 29PX;
              height: 21PX;
              background: url('../../assets/images/sunVillage_info/signature_icon_04.png') no-repeat;
              background-size: 100% 100%;
              display: block;
            }
          }
          &.list{
            background: #79cf13;
            margin-left: 10PX;
            .icon {
              width: 29px;
              height: 21px;
              background: url('../../assets/images/sunVillage_info/list_icon_10.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;
      }
    }
  }
</style>
