<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2024-01-30 15:46:45
-->
<template>
  <div class="szxx">
    <el-card
      :class="classJudge(item)"
      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><span class="color_iray">({{ item.qllx }})</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 tac" 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 tac" 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) {
          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 },
            '1230px',
            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
        );
      },
      /**
       * @description: classJudge 判断class
       * @param {*} item
       * @author: renchao
       */
      classJudge (item) {
        let className = "box-card";
        if (item.bdcqzlx == 1) {
          className += " zs-card";
        } else {
          className += " zm-card";
        }
        if (item.szcs == 0) {
          className += " no-print";
        }
        return className;
      },
    },
  };
</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: 350px;
      margin: 10px;
      box-shadow: none;
      background-image: url("~@/image/zm-bg.png");
      background-size: 100% 100%;
      border: 1px solid transparent;
      /deep/ .el-card__header {
        padding: 12px 66px;
        background-size: auto;
        border-bottom: 0;
        position: relative;
      }
      .szxx_header {
        color: #8b4534;
      }
      .szxx_body {
        height: 330px;
      }
    }
    .zs-card {
      border: 1px solid #a6b0be;
      background-image: none;
      /deep/ .el-card__header {
        background-image: url("~@/image/zs-red.png");
        .szxx_header {
          color: #ffe47c;
        }
      }
      .top_line {
        border-top: 1px solid #d3dbe5;
        width: 330px;
        margin: 0 auto 10px;
      }
    }
    .zm-card {
      /deep/ .el-card__header {
        &:after {
          content: "";
          display: inline-block;
          width: 330px;
          height: 1px;
          background-color: #b28676;
          position: absolute;
          left: 10px;
          bottom: 0;
        }
      }
    }
    .zm-card.no-print {
      background-image: url("~@/image/zm-gray.png");

      /deep/ .el-card__header {
        &:after {
          background-color: #6d7278;
        }
      }
      .szxx_header {
        color: #6d7278;
      }
    }
    .zs-card.no-print {
      /deep/ .el-card__header {
        background-image: url("~@/image/zs-gray.png");
        .szxx_header {
          color: #ffffff;
        }
      }
    }
  }

  .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: 2px;
      line-height: 22px;
    }
  }

  .text {
    margin-bottom: 8px;
    text-align: left;
    text-indent: 16px;
  }
  .text.tac {
    text-align: center;
  }

  .color_iray {
    color: #6d7278;
  }

  .color_red {
    color: #ab0c0c;
  }

  .middle_margin {
    margin-bottom: 10px;
  }

  .operation_button {
    border: 1px solid #5c95e5;
    padding: 5px;
    text-align: center;
  }

  .card_padding {
    padding-top: 8px;
    font-size: 14px;
    line-height: 22px;
  }
  /deep/.el-card__body {
    padding: 0px;
  }
</style>