<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-08 16:38:43
-->
<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) {
        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
      );
    },
    /**
     * @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: 280px;
    }
  }
  .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>