<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:40:09
-->
<template>
  <div>
    <div class="zsdy-content loadingtext">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px">
        <el-form-item label="印刷序列号：" prop="ysxlh">
          <el-select v-model="ruleForm.ysxlh" placeholder="请选择">
            <el-option
              v-for="item in ysxlh"
              :key="item.ysxlh"
              :label="item.ysxlh"
              :value="item.ysxlh">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <img :src="previewImage" style="width: 100%">
    </div>
    <div class="text-center pt-10">
      <el-button @click="$popupCacel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
  import store from '@/store/index.js'
  import { datas } from "../../javascript/zsyl.js";
  import { readYsxlh, certificate, bdcqzPreview } from "@/api/bdcqz.js";
  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        //印刷序列号集合
        ysxlh: [],
        //证书预览图片
        previewImage: '',
        //列名称对象
        columns: [],
        ruleForm: {
          bsmBdcqz: "",
          szmc: "不动产权证书",
          bdcqzlx: "",
          szzh: "",
          ysxlh: ""
        },
        rules: {
          ysxlh: [
            { required: true, message: "请选择印刷序列号", trigger: "change" }
          ]
        }
      }
    },
    created () {
      store.dispatch('user/refreshPage', false)
      this.columns = datas.columns()
      this.ysxlhList()
      this.getBdcqzPreview()
    },
    methods: {
      //获取印刷序列号列表
      ysxlhList () {
        readYsxlh({ zslx: this.formData.bdcqz.bdcqzlx }).then((res) => {
          if (res.code === 200) {
            this.ysxlh = res.result;
          }
        })
      },
      handleSubmit () {
        this.savePrintRecord()
      },
      //获取证书内容
      getRowValue (code) {
        var value = this.bdcqz[code];
        return value;
      },
      getBdcqzPreview () {
        this.$startLoading()
        bdcqzPreview(this.formData.bdcqz).then(res => {
          this.$endLoading()
          let blob = new Blob([res]);
          let url = window.URL.createObjectURL(blob);
          this.previewImage = url;
        })
      },
      //保存打印记录
      savePrintRecord () {
        this.ruleForm.bsmBdcqz = this.formData.bdcqz.bsmBdcqz;
        this.ruleForm.bdcqzlx = this.formData.bdcqz.bdcqzlx;
        this.ruleForm.szzh = this.formData.bdcqz.bdcqzh;
        certificate(this.ruleForm).then((res) => {
          if (res.code === 200) {
            this.$popupCacel()
            this.$message.success("提交成功")
            //刷新列表
            store.dispatch('user/refreshPage', true);
          } else {
            this.$message.error(res.message)
          }
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  .zsdy-content {
    height: 80vh;
    overflow-y: scroll;
  }
  .aaaa {
    width: 1024px;
    height: 739px;
    font-family: KaiTi;
    font-weight: 700;
  }
  .bdcdjzm {
    width: 1123px;
    height: 794px;
    font-family: KaiTi;
    font-weight: 700;
  }
  .zmyl-box {
    //position: relative;
    position: absolute;
    height: 600px;
    width: 280px;
    margin-left: 775px;
    font-size: 16px;
    justify-content: space-between;
  }
  .bdcqzh {
    height: 70px;
    left: 0;
    bottom: 0;
    font-size: 18px;
  }
  .zsyl-box {
    display: flex;
    justify-content: space-between;
    // padding: 20px;
    font-size: 16px;
    height: 100%;
    $left: 131px;

    .zsyl-left {
      width: 460px;
      position: relative;
      .qlr {
        position: absolute;
        top: 40px;
        left: $left;
      }
      .gyqk {
        position: absolute;
        top: 80px;
        left: $left;
      }
      .zl {
        position: absolute;
        top: 120px;
        left: $left;
      }
      .bdcdyh {
        position: absolute;
        top: 160px;
        left: $left;
      }
      .qllx {
        position: absolute;
        top: 205px;
        left: $left;
      }
      .qlxz {
        position: absolute;
        top: 250px;
        left: $left;
      }
      .yt {
        position: absolute;
        top: 290px;
        left: $left;
      }
      .mj {
        position: absolute;
        top: 330px;
        left: $left;
      }
      .syqx {
        position: absolute;
        top: 370px;
        left: $left;
      }
      .qt {
        position: absolute;
        top: 420px;
        left: $left;
      }
    }
    .zsyl-right {
      flex: 1;
      text-align: left;
      position: relative;
      .fj {
        position: absolute;
        left: 115px;
        top: 5px;
      }
    }
    .zsyl-title {
      margin-bottom: 12px;
    }
    /deep/.el-table__row {
      background: #fafbe5 !important;
    }
  }
  .middle_padding {
    padding-bottom: 10px;
  }
  .zsyl-button {
    text-align: center;
    margin-top: 20px;
    .operation_button {
      width: 100px;
      border: 1px solid rgb(0, 121, 254);
    }
    .dy-button {
      color: white;
      background-color: rgb(0, 121, 254);
    }
  }
</style>