<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-05 14:28:25
-->
<template>
  <div class="szxx">
    <el-card :class="item.szcs == 0 ? 'box-card':'box-card bg-red'" v-for="(item, index) in tableData" :key="index">
      <div slot="header" class="szxx_header">
        <span class="header_type">{{
            item.bdcqzlx == 1 ? "不动产权证书" : "不动产登记证明"
        }}</span>
        <div class="header_text">{{ item.bdcqzh }}</div>
      </div>
      <div class="szxx_body card_padding">
        <div class="text color_iray">
          <span>{{ item.qllx }}</span>
        </div>
        <div class="text color_red">
          <span>{{ item.qlr }}</span>
        </div>
        <div class="text color_iray">
          <span>{{ item.gyqk }}</span>
        </div>
        <div class="text color_red">
          <span>{{ item.bdcdyh }}</span>
        </div>
        <div class="text color_iray">
          <span>{{ item.zl }}</span>
        </div>
        <div class="text color_red">
          <span>{{ item.yt }}</span>
        </div>
        <div class="text color_iray">
          <span>{{ item.mj }}</span>
        </div>
        <div class="text color_red">
          <span>{{ item.syqx }}</span>
        </div>
        <div class="text color_iray">
          <span>印刷序列号：{{ item.ysxlh }}</span>
        </div>
      </div>
      <div class="card_padding" v-if="viewEdit">
        <div class="top_line middle_margin"></div>
        <div class="text" v-if="item.ysxlh">
          <el-button class="operation_button" type="text" @click="openInvalidDiglog(item)">再次打印（{{ item.szcs
          }})</el-button>
          <el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button>
        </div>
        <div class="text" v-else>
          <el-button class="operation_button" type="text" @click="openZsylDialog(item, 2)">证书打印（{{ item.szcs
          }}）</el-button>
          <el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</el-button>
        </div>
      </div>
    </el-card>

    <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import store from '@/store/index.js'
  import { getSlsqBdcqzList } from "@/api/bdcqz.js";
  export default {
    props: {},
    data () {
      return {
        //表单是否可操作
        viewEdit: false,
        dialog: false,
        tableData: [],
        bdcqzlx: 1,
        bdcqz: {}
      }
    },
    computed: {
      ...mapGetters(['workFresh'])
    },
    watch: {
      workFresh: {
        handler (newVal, oldVal) {
          console.log(newVal, 'newVal');
          if (newVal) this.list()
        }
      }
    },
    created () {
      this.list()
      this.viewEdit = this.$parent.currentSelectTab.ableOperation
    },
    methods: {
      /**
       * @description: 初始化列表
       * @author: renchao
       */
      list () {
        return new Promise((resolve, reject) => {
          var bsmSlsq = this.$route.query.bsmSlsq;
          getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
            resolve(res.code);
            if (res.code === 200) {
              this.tableData = res.result;
              if (res.result) {
                this.bdcqz = res.result[0];
              }
            }
          })
        })
      },
      /**
       * @description: 打开证书预览弹窗
       * @param {*} item
       * @param {*} type
       * @author: renchao
       */
      openZsylDialog (item, type) {
        store.dispatch('user/reWorkFresh', false)
        if (type == 1) {
          //证书证明预览
          this.$popupDialog("证书证明预览", "workflow/components/dialog/zsyl", { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, "76%", true);
        } else {
          this.$popupDialog("证书证明打印", "workflow/components/dialog/zsdy", { ...item }, "76%", true);
        }
      },
      /**
       * @description: 再次打印
       * @param {*} item
       * @author: renchao
       */
      openInvalidDiglog (item) {
        this.$popupDialog("证书证明打印", "workflow/components/dialog/zsdy", { ...item }, "76%", true);
      },
      /**
       * @description: openRecordPop
       * @param {*} item
       * @author: renchao
       */
      openRecordPop (item) {
        this.$popupDialog("缮证记录", "workflow/components/dialog/szRecord", { bsmBdcqz: item.bsmBdcqz }, '60%', true)
      }
    },
  };
</script>
<style scoped lang='scss'>
  @import "~@/styles/public.scss";
  .szxx {
    box-sizing: border-box;
    padding-right: 15px;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 55px;

    .box-card {
      float: left;
      width: 300px;
      margin-top: 10px;
      margin-right: 10px;
      // .szxx_body {
      //   height: 240px;
      // }
    }
  }

  .szxx_header {
    // color: #ffffff;
    font-weight: bolder;
    font-size: 16px;

    .header_type {
      display: flex;
      justify-content: center;
      align-content: center;
    }

    .header_text {
      text-align: center;
      margin-top: 10px;
      line-height: 30px;
    }
  }

  .top_line {
    border-top: 2px solid rgb(222, 222, 222);
  }

  .text {
    margin-bottom: 10px;
    text-align: center;
  }

  .color_iray {
    color: rgb(153, 153, 153);
  }

  .color_red {
    color: rgb(255, 89, 24);
  }

  .middle_margin {
    margin-bottom: 10px;
  }

  .operation_button {
    border: 1px solid rgb(0, 121, 254);
    padding: 5px;
    text-align: center;
  }

  .card_padding {
    padding-top: 8px;
    font-size: 16px;
  }
  .box-card {
    .szxx_header {
      color: #303133;
    }
    // 证书背景色
    /deep/.el-card__header {
      background-color: #e2dfe0;
    }
  }
  .bg-red {
    .szxx_header {
      color: #fff;
    }
    /deep/.el-card__header {
      background-color: rgb(198, 67, 83);
    }
  }

  /deep/.el-card__body {
    padding: 0px;
  }
</style>