<template>
  <dialogBox
    title="不动产权证书"
    width="60%"
    v-model="myValue"
    @closeDialog="closeDialog"
    @submitForm="handleSubmit">
    <div>
      <div>
        <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>
      </div>
      <img :src="previewImage">

    </div>
  </dialogBox>
</template>

<script>
  import { datas } from "../javascript/zsyl.js";
  import { readYsxlh, certificate, bdcqzPreview } from "@/api/bdcqz.js";
  export default {
    components: {},
    props: {
      value: { type: Boolean, default: false },
      bdcqz: { type: Object, default: () => { } },
    },
    data () {
      return {
        myValue: this.value,
        //印刷序列号集合
        ysxlh: [],
        //证书预览图片
        previewImage: '',
        //列名称对象
        columns: [],
        ruleForm: {
          bsmBdcqz: "",
          szmc: "不动产权证书",
          bdcqzlx: "",
          szzh: "",
          ysxlh: "",
        },
        rules: {
          ysxlh: [
            { required: true, message: "请选择印刷序列号", trigger: "change" },
          ],
        },
      };
    },
    watch: {
      value (val) {
        this.myValue = val;
        if (val) {
          this.columns = datas.columns();
          this.ysxlhList();
        }
      },
    },
    methods: {
      //获取印刷序列号列表
      ysxlhList () {
        readYsxlh({ zslx: this.bdcqz.bdcqzlx }).then((res) => {
          if (res.code === 200) {
            this.ysxlh = res.result;
          }
        });
      },
      closeDialog () {
        this.$emit("input", false);
      },
      handleSubmit () {
        this.savePrintRecord();
      },
      //获取证书内容
      getRowValue (code) {
        var value = this.bdcqz[code];
        return value;
      },
      getBdcqzPreview () {
        this.$startLoading()
        bdcqzPreview(this.bdcqz).then(res => {
          this.$endLoading()
          let blob = new Blob([res]);
          let url = window.URL.createObjectURL(blob);
          this.previewImage = url;
        })
      },
      //保存打印记录
      savePrintRecord () {
        this.ruleForm.bsmBdcqz = this.bdcqz.bsmBdcqz;
        this.ruleForm.bdcqzlx = this.bdcqz.bdcqzlx;
        this.ruleForm.szzh = this.bdcqz.bdcqzh;
        certificate(this.ruleForm).then((res) => {
          if (res.code === 200) {
            this.$emit("input", false);
            this.$message.success("提交成功");
            //刷新列表
            this.$parent.list();
          } else {
            this.$message.error(res.message);
          }
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";

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