<template>
  <div class="jtfccx-edit">
    <div class="jtfccx-edit-con">
      <b class="title">申请信息</b>
      <el-form :model="form" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="查询用途" label-width="90px">
              <el-input v-model="form.djSqcxDO.cxyt" class="width200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="与产权人的关系">
              <el-radio-group v-model="form.djSqcxDO.ycqrgx">
                <el-radio label="1">房屋权利人</el-radio>
                <el-radio label="2">产权利害关系人</el-radio>
                <el-radio label="3">委托人</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 申请人 -->
      <lb-table :column="sqrColumns" :data="form.sqrList" heightNumSetting
        :pagination="false">
      </lb-table>
      <!-- 权利人 -->
      <b class="title">权利人</b>
      <el-table
        :data="form.qlrList"
        height="160"
        border
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{textAlign: 'center'}"
        style="width: 100%">
        <el-table-column width="60">
          <template slot="header">
            <i class="el-icon-plus pointer" @click="handleAddqlr"></i>
          </template>
          <template slot-scope="scope">
            <i class="el-icon-minus pointer" @click="remove(scope.$index, scope.row, 'qlr')"></i>
          </template>
        </el-table-column>
        <el-table-column
          label="身份证读卡器"
          width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit-outline"
              @click="handleRead(scope.row, 'qlr')">
              读取
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名/名称"
          width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sqrxm"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="证件种类">
          <template slot-scope="scope">
            <el-select v-model="scope.row.sqrzjlxbm" class="width100">
              <el-option
                v-for="item in zjzlData"
                :key="item.dcode"
                :label="item.dname"
                :value="item.dcode">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="证件号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sqrzjhm"></el-input>
          </template>
        </el-table-column>

        <el-table-column
          label="联系电话">
          <template slot-scope="scope">
            <el-input type="tel" v-model="scope.row.lxdh"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="isSearch">
        <b class="title">查询结果</b>
        <p>查询编号：{{ form.djSqcxDO.cxbh }}</p>
        <lb-table :column="cxjgColumns" :data="form.cxjgList" :maxHeight="230" heightNumSetting :pagination="false">
        </lb-table>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="submit-button">
      <el-button v-show="isSearch == false" @click="resetClick">重置</el-button>
      <el-button type="primary" v-show="isSearch == false" @click="queryChick">查询</el-button>
      <el-button type="primary" v-show="isSearch && form.cxjgList.length > 0" @click="printResult">
        房产结果打印（{{ form.djSqcxDO.dycs }}）
      </el-button>
      <el-button type="primary" v-show="isSearch && form.cxjgList.length == 0" @click="printResult">
        无房证明打印（{{ form.djSqcxDO.dycs }}）
      </el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </div>
    <!-- 打印模板需要此模块 -->
    <!-- <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" v-show="false">
      <embed id="LODOP_EM" type="application/x-print-lodop" width=700 height=500 pluginspage="install_lodop32.exe" />
    </object> -->
    <printView ref="printContent" :form="form" v-show="false" />
  </div>
</template>
<script>
  import store from '@/store/index.js'
  import { datas } from "./addjtfcdata";
  import { getLodop } from "@/utils/LodopFuncs"
  import printView from "./printView.vue";
  import { getIdCardInfo } from '@/utils/operation.js'
  import { getPrintTemplateByCode } from "@/api/print";
  import { addJtfcCxjgXx, getJtfcInfo, printJtcfInfo } from "@/api/jtfc.js";
  export default {
    components: {
      printView
    },
    props: {
      formData: {
        type: Object,
        default: () => { }
      }
    },
    data () {
      return {
        key: 0,
        zjzlData: store.getters.dictData['A30'],
        //是否查询
        isSearch: false,
        //查询结果列表字段
        cxjgColumns: datas.columns(),
        //申请人列表字段
        sqrColumns: [{
          width: "60",
          renderHeader: (h, scope) => {
            return (
              <i
                class="el-icon-plus pointer"
                onClick={() => {
                  this.handleAddsqr("sqr");
                }}
                style="color:#409EFF"
              ></i>
            );
          },
          render: (h, scope) => {
            return (
              <i
                class="el-icon-minus pointer"
                onClick={() => {
                  this.remove(scope.$index, scope.row, "sqr");
                }}
              ></i>
            );
          },
        },
        {
          width: "150",
          label: "身份证读卡器",
          render: (h, scope) => {
            return (
              <div>
                <el-button
                  type="text"
                  icon="el-icon-edit-outline"
                  onClick={() => {
                    this.handleRead(scope.row, 'sqr');
                  }}
                >
                  读取
                </el-button>
              </div>
            );
          },
        },
        {
          width: "150",
          prop: "sqrxm",
          label: "姓名/名称",
          render: (h, scope) => {
            return (
              <el-input
                placeholder="姓名/名称"
                value={scope.row[scope.column.property]}
                onInput={(val) => {
                  scope.row[scope.column.property] = val;
                }}
              ></el-input>
            );
          },
        },
        {
          prop: "sqrzjlxbm",
          label: "证件种类",
          render: (h, scope) => {
            return (
              <el-select
                class="width100"
                clearable
                value={scope.row[scope.column.property]}
                onChange={(val) => {
                  scope.row[scope.column.property] = val;
                }}
              >
                {this.getDictData('A30').map((option) => {
                  return (
                    <el-option
                      label={option.dname}
                      value={option.dcode}
                    ></el-option>
                  );
                })}
              </el-select>
            );
          },
        },
        {
          prop: "sqrzjhm",
          label: "证件号",
          render: (h, scope) => {
            return (
              <el-input
                placeholder="证件号"
                value={scope.row[scope.column.property]}
                onInput={(val) => {
                  scope.row[scope.column.property] = val;
                }}
                maxlength="21"
              ></el-input>
            );
          },
        },
        {
          prop: "lxdh",
          label: "联系电话",
          render: (h, scope) => {
            return (
              <div class="typePhone">
                <el-input
                  placeholder="联系电话"
                  value={scope.row[scope.column.property]}
                  onInput={(val) => {
                    scope.row[scope.column.property] = val;
                  }}
                  onBlur={(val) => {
                    vm.teltest(scope.row);
                  }}
                  type="tel"
                  maxlength="11"
                ></el-input>
                <span
                  v-show={scope.row.inputErr}
                  style={{
                    fontSize: "12px",
                    color: "red",
                    position: "absolute",
                    bottom: "-2px",
                    left: "0",
                  }}
                >
                  请输入正确手机号
                </span>
              </div>
            );
          },
        }],
        newData: {
          sqrxm: "",
          sqrzjlxbm: "",
          sqrzjhm: "",
          lxdh: "",
          inputErr: false,
        },
        form: {
          djSqcxDO: { ycqrgx: "1", cxyt: "" },
          sqrList: [],
          qlrList: [],
          cxjgList: [],
          dyjlList: [],
        },
      };
    },
    mounted () {
      this.form.sqrList = []
      this.form.qlrList = []
      this.isSearch = false
      if (this.formData.sqcxBsm == "") {
        this.add("sqr");
        this.add("qlr");
      } else {
        this.loadData();
      }
    },
    watch: {
      "form.djSqcxDO.ycqrgx": {
        handler: function (val) {
          if (val == "1") {
            this.form.qlrList = _.cloneDeep(this.form.sqrList);
          } else {
            this.form.qlrList = [];
            this.add("qlr");
          }
        },
        immediate: true
      },
      "form.sqrList": {
        handler: function (val) {
          if (this.form.djSqcxDO.ycqrgx == '1') {
            this.form.qlrList = _.cloneDeep(val)
          }
        },
        deep: true
      }
    },
    methods: {
      // 字典
      /**
       * @description: 字典
       * @param {*} val
       * @author: renchao
       */
      getDictData (val) {
        return store.getters.dictData[val]
      },
      /**
       * @description: closeDialog
       * @author: renchao
       */
      closeDialog () {
        this.$popupCacel()
        this.form = {
          djSqcxDO: { ycqrgx: "1", cxyt: "" },
          sqrList: [],
          qlrList: [],
          cxjgList: [],
          dyjlList: [],
        }
      },
      //加载详细信息
      /**
       * @description: 加载详细信息
       * @author: renchao
       */
      loadData () {
        this.$startLoading();
        getJtfcInfo({ sqcxBsm: this.formData.sqcxBsm }).then((res) => {
          this.$endLoading();
          if (res.code == 200) {
            this.form = res.result;
            console.log(this.form, 'form');
            this.isSearch = true;
          }
        });
      },
      //查询结果
      /**
       * @description: 查询结果
       * @author: renchao
       */
      queryChick () {
        this.$startLoading();
        addJtfcCxjgXx(this.form).then((res) => {
          this.$endLoading();
          if (res.code == 200) {
            this.form = res.result;
            this.isSearch = true;
            this.$parent.queryClick();
          }
        });
      },
      //重置
      /**
       * @description: 重置
       * @author: renchao
       */
      resetClick () {
        this.form.djSqcxDO = { ycqrgx: "1", cxyt: "" };
        this.form.sqrList = _.cloneDeep([this.newData]);
        this.form.qlrList = _.cloneDeep([this.newData]);
        this.form.cxjgList = [];
        this.form.dyjlList = [];
        this.isSearch = false;
      },
      /**
       * @description: handleRead
       * @param {*} row
       * @param {*} type
       * @author: renchao
       */
      handleRead (row, type) {
        getIdCardInfo().then(res => {
          if (res.data.code == 0) {
            let data = res.data.IDCardInfo
            row.sqrxm = data.name
            row.sqrzjlxbm = '1'
            row.sqrzjhm = data.cardID
            this.$message({
              message: '读取成功！',
              type: 'success'
            })
            if (type == 'sqr') {
              this.form.qlrList = _.cloneDeep(this.form.sqrList)
            }
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        })
      },
      //添加申请人
      /**
       * @description: 添加申请人
       * @author: renchao
       */
      handleAddsqr () {
        this.form.sqrList.push(_.cloneDeep(this.newData));
      },
      /**
       * @description: handleAddqlr
       * @author: renchao
       */
      handleAddqlr () {
        this.form.qlrList.push(_.cloneDeep(this.newData));
      },
      //移除申请人或权利人
      /**
       * @description: 移除申请人或权利人
       * @param {*} index
       * @param {*} row
       * @param {*} type
       * @author: renchao
       */
      remove (index, row, type) {
        console.log(type, 'type');
        if (type == "sqr") {
          this.form.sqrList.splice(index, 1);
        } else {
          this.form.qlrList.splice(index, 1);
        }
      },
      //电话号码校验
      /**
       * @description: 电话号码校验
       * @param {*} row
       * @author: renchao
       */
      teltest (row) {
        const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
        if (row.lxdh == "" || row.lxdh.length <= 10 || !reg.test(row.lxdh)) {
          row.inputErr = true;
          return false;
        } else {
          row.inputErr = false;
          return true;
        }
      },
      //打印
      /**
       * @description: 打印
       * @author: renchao
       */
      printResult () {
        this.openPrintPrew();
        var formdata = new FormData();
        formdata.append("sqcxBsm", this.form.djSqcxDO.bsmSqcx);
        formdata.append("dylx", '1');
        printJtcfInfo(formdata).then(res => {
          if (res.code == 200) {
            this.form.djSqcxDO.dycs = this.form.djSqcxDO.dycs + 1
          }
        });
      },
      //打开打印预览
      /**
       * @description: 打开打印预览
       * @author: renchao
       */
      openPrintPrew () {
        let lodop = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
        // 获取页面的HTML内容
        const pageHtml = this.$refs.printContent.$el.innerHTML;
        lodop.ADD_PRINT_HTM(20, 20, "100%", "100%", pageHtml);
        lodop.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW", true); // 打印页面宽度自适应
        lodop.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "100%"); // 打印页面缩放比例
        lodop.PREVIEW();
      }
    }
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "~@/styles/public.scss";

  .title {
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: block;
    border-bottom: 1px solid $borderColor;
  }

  .jtfccx-edit {
    @include flex;
    flex-direction: column;
    overflow-y: hidden;
    max-height: 85vh;
    padding: 0 2px;

    .submit-button {
      text-align: center;
      height: 52px;
      padding-top: 10px;
      background-color: #fff;
    }
  }
</style>