<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="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="openRecordPop(item)">缮证记录</el-button>
        </div>
        <div class="text" v-else>
          <el-button class="operation_button" type="text" @click="openZsylDialog(item, 2)">证书打印1（{{ item.szcs
          }}）</el-button>
          <el-button class="operation_button" type="text" @click="openRecordPop(item)">缮证记录</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="text-center pt-10">
          <el-button @click="closeInvalidDiglog">取 消</el-button>
          <el-button type="primary" @click="confirmInvalid">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { getSlsqBdcqzList, invalidCertificate } from "@/api/bdcqz.js";
  export default {
    props: {},
    data () {
      return {
        dialog: false,
        tableData: [],
        bdcqzlx: 1,
        bdcqz: {},
        zfyy: "",
        invalidDiglog: false,
        bsmSz: "",
        bsmBdcqz: ""
      };
    },
    computed: {
      ...mapGetters(['isRefresh'])
    },
    watch: {
      isRefresh: {
        handler (newVal, oldVal) {
          if (newVal) this.list()
        }
      }
    },
    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) {
        if (type == 1) {
          //证书预览
          this.$popupDialog("证书预览", "workflow/components/dialog/zsyl", { bdcqz: item }, "70%", true);
        } else {
          this.$popupDialog("不动产权证书", "workflow/components/dialog/zsdy", { bdcqz: item }, "70%", true);
        }
      },
      //再次打印
      openInvalidDiglog (item) {
        this.bsmSz = item.bsmSz;
        this.invalidDiglog = true;
        this.bsmBdcqz = item.bsmBdcqz
      },
      closeInvalidDiglog () {
        this.invalidDiglog = false;
        this.bsmSz = "";
        this.zfyy = "";
      },
      //作废缮证信息
      confirmInvalid () {
        invalidCertificate({ bsmBdcqz: this.bsmBdcqz, zfyy: this.zfyy }).then((res) => {
          if (res.code === 200) {
            this.list();
            this.$message.success("作废成功");
            this.invalidDiglog = false;
            this.zfyy = ''
            this.openZsylDialog(this.bdcqz);
          } else {
            this.$message.error(res.message);
          }
        });
      },
      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: 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>