<template>
  <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox editDialogBox mainCenter"
    :visible.sync="dialogVisible" width="88%">
    <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>
    <div class="d-center" v-if="!$store.state.business.Edit && titleName == 'sjmx'">
      <btn nativeType="cz" @click="dialogVisible = false">取 消</btn>
      <btn nativeType="cx" @click="submitForm">确 定</btn>
    </div>
    <div class="d-center" v-if="!$store.state.business.Edit && titleName == 'xml'">
      <btn nativeType="cx" @click="handleResubmit">重新上报</btn>
    </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"),
      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 () {
      // this.$store.dispatch(
      //   "business/setRules",
      //   this.$store.state.business.subRules
      // );
      this.$refs["editItem"].handleUpdateForm()
        .then((res) => {
          if (res == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        })
        .catch(function (error) {
          this.$alert(error, "提示", {
            confirmButtonText: "确定",
            type: "error"
          })
        })
    },
    // 重新上报
    handleResubmit () { }
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBox.scss";

/deep/.el-dialog__body {
  display: flex;
  flex-direction: column;
  padding-bottom: 25px;
}

/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: 45vh;
  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;

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