<template>
  <div class="szxx">
    <el-card class="box-card" 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="top_line middle_margin"></div>
        <div class="text color_iray">
          <span>印刷序列号：{{ item.ysxlh }}</span>
        </div>
      </div>
      <div class="card_padding">
        <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="openZsylDialog(item, 1)"
            >缮证记录</el-button
          >
        </div>
        <div class="text" v-else>
          <el-button
            class="operation_button"
            type="text"
            @click="openZsylDialog(item, 2)"
            >证书打印（{{ item.szcs }}）</el-button
          >
        </div>
      </div>
    </el-card>
    <el-dialog
      title="证书打印"
      :visible.sync="invalidDiglog"
      width="30%"
      :modal-append-to-body="false"
      top="30vh"
    >
      <div class="invalid-diglog">
        <div class="invalid-title">
          <i class="el-icon-question invalid-icon"></i>
          <div class="invalid-body">您确定作废证书并再次打印？</div>
        </div>
        <div class="invalid-reson">作废原因：</div>
        <el-input
          v-model="zfyy"
          placeholder="请输入作废原因"
          type="textarea"
          :rows="4"
        ></el-input>
        <div class="dialog-footer">
          <el-button @click="closeInvalidDiglog()">取 消</el-button>
          <el-button type="primary" @click="confirmInvalid()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <bdcqzPrint ref="bdcqzPrint" v-model="dialog" :bdcqz="bdcqz" />
    <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
  </div>
</template>
<script>
import { getSlsqBdcqzList, invalidCertificate } from "@/api/bdcqz.js";
import bdcqzPrint from "./zsdy.vue";
export default {
  components: { bdcqzPrint },
  props: {},
  data() {
    return {
      dialog: false,
      tableData: [],
      bdcqzlx: 1,
      bdcqz: {},
      zfyy: "",
      invalidDiglog: false,
      bsmSz: "",
    };
  },
  created() {
    this.list();
  },
  methods: {
    //初始化列表
    list() {
      var bsmSlsq = this.$route.query.bsmSlsq;
      getSlsqBdcqzList({ bsmSlsq: bsmSlsq }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.result;
          if (res.result) {
            this.bdcqz = res.result[0];
          }
        }
      });
    },
    //打开证书预览弹窗
    openZsylDialog(item, type) {
      let that = this;
      if (type == 1) {
        //证书预览
        this.$popup("证书预览", "workflow/components/zsyl", {
          height: "650px",
          width: "800px",
          formData: {
            bdcqz: item,
          },
          btnShow: false,
          cancel: () => {
            console.log("取消回调");
          },
          confirm: () => {
            console.log("取消回调");
          },
        });
      } else {
        this.$nextTick(() => {
          this.dialog = true;
          this.bdcqz = item;
          this.$refs.bdcqzPrint.getBdcqzPreview();
        })
        //证书打印
        // this.$popup("证书打印", "workflow/components/zsdy", {
        //   height: "700px",
        //   width: "800px",
        //   formData: {
        //     bsmSlsq: this.bsmSlsq,
        //     bdcqz: item,
        //   },
        //   btnShow: true,
        //   confirmText: "打印证书",
        //   cancel: () => {
        //     console.log("取消回调");
        //   },
        //   confirm: () => {
        //     that.list();
        //   },
        // });
      }
    },
    //再次打印
    openInvalidDiglog(item) {
      this.bsmSz = item.bsmSz;
      this.invalidDiglog = true;
    },
    closeInvalidDiglog() {
      this.invalidDiglog = false;
      this.bsmSz = "";
      this.zfyy = "";
    },
    //作废缮证信息
    confirmInvalid() {
      invalidCertificate({ bsmSz: this.bsmSz, zfyy: this.zfyy }).then((res) => {
        if (res.code === 200) {
          this.list();
          this.$message.success("作废成功");
          this.invalidDiglog = false;
          this.openZsylDialog(this.bdcqz);
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>
<style scoped lang='scss'>
@import "~@/styles/public.scss";

.szxx {
  box-sizing: border-box;
  padding-right: 15px;
  width: 100%;
  height: 600px;
  overflow-y: scroll;

  .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;
}

.invalid-diglog {
  padding-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: rgb(99, 99, 99);

  .invalid-title {
    display: flex;
    align-content: center;

    .invalid-icon {
      color: rgb(254, 148, 0);
      font-size: 34px;
      margin-right: 10px;
    }

    .invalid-body {
      line-height: 40px;
      margin-bottom: 10px;
    }
  }

  .invalid-reson {
    margin-bottom: 10px;
  }

  .dialog-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}

/deep/.el-card__header {
  background-color: rgb(198, 67, 83);
}

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