<template>
  <!-- 编辑 -->
  <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog"
    custom-class="dialogBox editDialogBox mainCenter" :visible.sync="dialogVisible" width="85%">
    <div slot="title" class="dialog_title" ref="dialogTitle">
      {{ title || '标题' }}
    </div>
    <div class="editDialogBox-box">
      <el-tabs v-model="titleName" type="card" @tab-click="handleTitleTab">
        <el-tab-pane label="数据模型" name="sjmx"></el-tab-pane>
        <el-tab-pane v-if="visiableXml" label="xml报文" name="xml"></el-tab-pane>
        <el-tab-pane v-if="visiableXml" label="响应结果" name="xyjg"></el-tab-pane>
      </el-tabs>
      <div class="dialog-from" v-if="titleName == 'sjmx'">
        <el-row>
          <el-col :span="5">
            <span>业务报文ID：</span>
            <p>{{ dataReport.BizMsgId }}</p>
          </el-col>
          <el-col :span="6">
            <span>接入报文ID：</span>
            <p>{{ dataReport.ASID }}</p>
          </el-col>
          <el-col :span="6">
            <span>行政区划编码：</span>
            <p>{{ dataReport.AreaCode }}</p>
          </el-col>
          <el-col :span="7">
            <span>上次不动产单元号：</span>
            <p>{{ dataReport.PreEstateNum }}</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <span>业务编码：</span>
            <p>{{ dataReport.RecType }}</p>
          </el-col>
          <el-col :span="6">
            <span>权利类型：</span>
            <p>{{ this.dicStatus(dataReport.RightType, 'A8') }}</p>
          </el-col>
          <el-col :span="6">
            <span>登记类型：</span>
            <p>{{ this.dicStatus(dataReport.RegType, 'A21') }}</p>
          </el-col>
          <el-col :span="7">
            <span>不动产权证书数量：</span>
            <p>{{ dataReport.CertCount }}</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <span>创建时间：</span>
            <p>{{ dataReport.createDate }}</p>
          </el-col>
          <el-col :span="6">
            <span>业务流水号：</span>
            <p>{{ dataReport.RecFlowID }}</p>
          </el-col>
          <el-col :span="6">
            <span>宗地/宗海代码：</span>
            <p>{{ dataReport.ParcelID }}</p>
          </el-col>
          <el-col :span="7">
            <span>证明数量：</span>
            <p>{{ dataReport.ProofCount }}</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span>不动产单元号：</span>
            <p>{{ dataReport.EstateNum }}</p>
          </el-col>
          <el-col :span="8">
            <span>登记机构：</span>
            <p>{{ dataReport.RegOrgID }}</p>
          </el-col>
          <el-col :span="11">
            <span>上次不动产权证号/不动产登记证明：</span>
            <p>{{ dataReport.PreCertID }}</p>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="editDialogBox-box">
      <div v-if="titleName == 'sjmx'" class="sjmx">
        <el-tabs v-model="activeName" ref="elTabs" type="card" @tab-click="changeList">
          <el-tab-pane :name="item.soleurl" v-for="item in headerList" :key="item.soleurl">
            <div slot="label" class="tab-pane-item">
              <p class="name">{{ item.chinesetable }}</p>
              <p class="soleurl" :data-name="item.soleurl">({{ item.datatable }})</p>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="edit-content">
          <component :is="editItem" ref="editItem" :class="{ 'editForm': $store.state.business.Edit }"
            :bsmYwsjb="bsmYwsjb" :bsmSjsb="dataReport.bsmReport || dataReport.bsmSjsb" />
        </div>
      </div>
      <div v-if="titleName == 'xyjg'">
        <Xyjg :form-data='dataReport'></Xyjg>
      </div>
      <JsonEditor :resultInfo="resultInfo" class="JsonEditor" v-if="titleName == 'xml'" />
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import JsonEditor from "@/components/JsonEditor.vue";
import Xyjg from "./Result";
import { getTabsDetail, getXml, getReportDetail } from "@/api/dataReport.js";
import { MessageBox } from "element-ui";
export default {
  components: { JsonEditor, Xyjg },
  props: {
    title: {
      type: String,
      default: ''
    },
    tabsActiveName: {
      type: String,
      default: ''
    },
    visiableXml: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    ...mapGetters(["dicData"]),
  },
  data () {
    return {

      resultInfo: '',

      titleName: 'sjmx',

      dataReport: {},
      index: 0,
      bsmYwsjb: "",
      ruleFormList: {
        bizMsgID: "",
        asid: "",
        areaCode: "",
        preestateNum: "",
        recType: "",
        rightType: "",
        regType: "",
        certCount: "",
        createDate: "",
        recFlowID: "",
        regOrgID: "",
        prllfCount: "",
        parcelID: "",
        estateNum: "",
        preCertID: "",
        digitalSign: "",
      },
      images: require("./images/success.gif"),
      saveloding: false,
      dialogVisible: false,
      activeName: undefined,
      editItem: "",
      headerList: [],
      dataTable: "",
    };
  },
  methods: {
    dicStatus (val, code) {
      let data = this.dicData[code],
        name = ''
      if (data) {
        data.map((item) => {
          if (item.DCODE == val) {
            name = item.DNAME
          }
        })
        return name
      }
    },
    handleTitleTab (val) {
      console.log(val);
    },
    isShow (item) {
      this.dataReport = item;
      this.titleName = 'sjmx';
      this.dialogVisible = true;
      //获取表头列表
      getTabsDetail({ bsmReport: this.dataReport.bsmReport || this.dataReport.bsmSjsb }).then((res) => {
        if (res.code == 200) {
          this.headerList = res.result;
          this.activeName = this.tabsActiveName == '' ? res.result[0].soleurl : this.tabsActiveName
          this.bsmYwsjb = this.headerList[0].bsmYwsjb;
          this.editItem = this.loadView(this.activeName);
        }
      });
      //不动产数据查询上报详情
      getReportDetail({ bsmReport: item.bsmSjsb || item.bsmReport }).then((res) => {
        if (res.code == 200) {
          this.dataReport = res.result;
        }
      })
      // 获取xml
      if (this.visiableXml) {
        getXml(item.bizMsgid).then((res) => {
          this.resultInfo = res.message
        })
      }
    },
    changeList (val) {
      let _index = val.index;
      if (_index > this.index) {
      }
      this.index = _index;
      this.bsmYwsjb = this.headerList[val.index].bsmYwsjb;
      this.editItem = this.loadView(this.activeName);
      // this.diaData.list.forEach((item) => {
      //   if (item.soleurl == this.activeName) {
      //     this.dataTable = item.dataTable;
      //   }
      // });
    },
    loadView (view) {
      return (r) =>
        require.ensure([], () => r(require(`@/components/Business/${view}.vue`)));
    },
    closeDialog () {
      this.dialogVisible = false;
      //关闭弹框时将tabs项置空
      this.editItem = "";
      this.headerList = [];
    },
    submitForm () {
      let _this = this;
      this.$store.dispatch(
        "business/setRules",
        this.$store.state.business.subRules
      );
      this.$nextTick(() => {
        this.$refs["editItem"] &&
          this.$refs["editItem"].verificationForm().then((res) => {
            if (!res) {
              _this.$message({
                message: "请检查表单必填项是否完整",
                type: "warning",
              });
              return false;
            } else {
              _this.saveloding = true;
              _this.$refs["editItem"]
                .handleUpdateForm()
                .then((res) => {
                  if (res == 200) {
                    _this.$alert(
                      '<p><img class="success-images" src="' +
                      this.images +
                      '"/>编辑成功！</p>',
                      "提示",
                      {
                        showConfirmButton: false,
                        dangerouslyUseHTMLString: true,
                      }
                    );
                    setTimeout(() => {
                      MessageBox.close(false);
                    }, 1500);
                  }
                })
                .catch(function (error) {
                  _this.$alert(error, "提示", {
                    confirmButtonText: "确定",
                    type: "error",
                  });
                });
              _this.saveloding = false;
            }
          });
      });
    }
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBox.scss";

.editForm {
  /deep/.el-textarea__inner {
    border: 1px solid #224C7C !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    color: #dadde3 !important;
    background: transparent !important;
  }

  /deep/.el-input__inner {
    border: 1px solid #224C7C !important;
    margin: 0 !important;
    width: 100% !important;
    color: #dadde3 !important;
    background: transparent !important;
  }
}

/deep/.el-dialog__body {
  display: flex;
  flex-direction: column;
}

/deep/ .el-tabs {
  color: #CEF8FF;
}

.sjmx {
  /deep/.el-tabs__item {
    height: 50px;
    padding-top: 6px;
  }
}

/deep/.el-tabs__item {
  color: #CEF8FF !important;

  display: flex;
  flex-direction: row;
  justify-content: center;
  background: url("~@/image/tabitem.png") no-repeat;
  background-size: 100% 100%;
  border: none !important;
}

.obligee-item-name {
  background: #05275B;
  color: #FFFFFF;
  background: url("~@/image/itembg.png") no-repeat;
  background-size: 100% 100%;
}

/deep/.el-tabs__nav-scroll {
  background: none;
}

/deep/.el-tabs__nav {
  display: flex;
  border: none !important;
}

/deep/.el-tabs__item.is-top {
  border: 1px solid #dfe4ed;
  border-top: 1px solid #dfe4ed;
  border-bottom: 1px solid transparent;
}

/deep/.el-tabs__header {
  border: none;
  margin-bottom: 0;
}

/deep/.el-tabs__item.is-top:not(:last-child) {
  margin-right: 5px;
}

/deep/.el-tabs__item.is-top {
  background-color: none !important;
}

/deep/.el-tabs__item.is-active {
  background: url("~@/image/tabitemse.png") no-repeat;
  background-size: 100% 100%;
}

.success-images {
  width: 30px;
  height: 30px;
  position: relative;
  top: 10px;
  right: 3px;
}

.tab-pane-item {
  line-height: 20px;
  color: #02D9FD;

  p {
    text-align: center;
  }
}

.edit-content {
  height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1px;
  margin-bottom: 10px;
  border-top: none;
}

/deep/.editDialogBox {
  border-radius: 8px;
  overflow: hidden;
  min-width: 1228px;
  height: 825px !important;

  .dialog-from {
    padding: 13px;
    border-radius: 2px;
    box-sizing: border-box;

    .el-row {
      display: flex;
      flex-wrap: nowrap;
    }

    .el-col {
      line-height: 18px;
      display: flex;
      align-items: center;
      margin-bottom: 3px;
      color: #B5D6DC;
      border-radius: 2px;
      border: 1px solid #224C7C;
      margin: 5px;

      span {
        display: inline-block;
        padding: 3px;
        border-radius: 3px;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
        color: #02D9FD;
      }

      p {
        flex: 1;
        width: 100%;
        padding-left: 5px;
        line-height: 20px;
        color: #c0c4cc;
        cursor: not-allowed;
        white-space: nowrap;
        margin-right: 5px;
        text-align: right;
      }
    }
  }

  .dialog_title {
    display: flex;
    position: relative;
    font-size: 24px;
    top: -11px;
    width: 38%;
    height: 40px;
    margin-left: 28px;
    justify-content: center;
  }

  .el-dialog__header {
    display: flex;
    margin-bottom: 15px;
  }

  .dialog_footer {
    flex-direction: column;

    .dialog_button {
      margin-top: 8px;
    }
  }

  .divider {
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
}

.el-dialog__wrapper {
  overflow: hidden;
}
</style>