<template>
  <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox editDialogBox mainCenter"
    :visible.sync="dialogVisible" width="92%">
    <div slot="title" class="dialog_title" ref="dialogTitle">
      {{ title || '详情' }}
    </div>
    <div class="regularHeight">
      <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 item-content-input" v-if="titleName == 'sjmx'">
          <el-row>
            <el-col :span="5">
              <span>业务报文ID：</span>
              <el-select v-model="dataReport.BizMsgId" :disabled="$store.state.business.Edit">
                <el-option v-for="item in bwoptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>ASID：</span>
              <el-input v-model="dataReport.ASID" :disabled="$store.state.business.Edit" maxLength="5"></el-input>
            </el-col>
            <el-col :span="6">
              <span>行政区划编码：</span>
              <el-input v-model="dataReport.AreaCode" :disabled="$store.state.business.Edit"></el-input>
            </el-col>
            <el-col :span="7">
              <span>上次不动产单元号：</span>
              <el-input v-model="dataReport.PreEstateNum" :disabled="$store.state.business.Edit"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <span>业务编码：</span>
              <el-input v-model="dataReport.RecType" :disabled="$store.state.business.Edit"></el-input>
            </el-col>
            <el-col :span="6">
              <span>权利类型：</span>
              <el-select v-model="dataReport.RightType" :disabled="$store.state.business.Edit">
                <el-option v-for="item in dicData['A8']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>登记类型：</span>
              <el-select v-model="dataReport.RegType" :disabled="$store.state.business.Edit">
                <el-option v-for="item in dicData['A21']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              <span>不动产权证书数量：</span>
              <el-input v-model="dataReport.CertCount" :disabled="$store.state.business.Edit"
                oninput="if(value.length > 8) value=value.slice(0, 8)"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <span>创建时间：</span>
              <el-date-picker v-model="dataReport.createDate" clearable disabled type="date" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-col>
            <el-col :span="6">
              <span>业务流水号：</span>
              <el-input v-model="dataReport.RecFlowID" :disabled="$store.state.business.Edit"></el-input>
            </el-col>
            <el-col :span="6">
              <span>宗地/宗海代码：</span>
              <el-input v-model="dataReport.ParcelID" :disabled="$store.state.business.Edit"></el-input>
            </el-col>
            <el-col :span="7">
              <span>证明数量：</span>
              <el-input v-model="dataReport.ProofCount" :disabled="$store.state.business.Edit"
                oninput="if(value.length > 8) value=value.slice(0, 8)"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <span>不动产单元号：</span>
              <el-input v-model="dataReport.EstateNum" :disabled="$store.state.business.Edit"></el-input>
            </el-col>
            <el-col :span="7">
              <span>登记机构：</span>
              <el-input v-model="dataReport.RegOrgID" :disabled="$store.state.business.Edit"></el-input>
            </el-col>
            <el-col :span="11">
              <span>上次不动产权证号/不动产登记证明：</span>
              <el-input v-model="dataReport.PreCertID" :disabled="$store.state.business.Edit"></el-input>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="editDialogBox-box editDialogBox-con" v-if="titleName == 'sjmx'">
        <div 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>
      <div class="editDialogBox-box JsonEditor" v-if="titleName == 'xml'">
        <JsonEditor :resultInfo="resultInfo" />
      </div>
      <div class="editDialogBox-box JsonEditor" v-if="titleName == 'xyjg'">
        <Xyjg :form-data='dataReport'></Xyjg>
      </div>
    </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 axios from "axios";
import SERVER from '@/api/config'
const urlHeader = SERVER.SERVERAPI + '/rest/sjsb/DataReport/'
import { mapGetters } from "vuex";
import JsonEditor from "@/components/JsonEditor.vue";
import Xyjg from "./Result";
import { getTabsDetail, getXml, getReportDetail, restartGenerateXml, edit } from "@/api/dataReport.js";
export default {
  components: { JsonEditor, Xyjg },
  props: {
    title: {
      type: String,
      default: ''
    },
    tabsActiveName: {
      type: String,
      default: ''
    },
    visiableXml: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    ...mapGetters(["dicData"]),
  },
  data () {
    return {
      key: 0,
      resultInfo: '',

      titleName: 'sjmx',
      // 报文list
      bwoptions: [],
      dataReport: {},
      index: 0,
      bsmYwsjb: "",
      ruleFormList: {
        BizMsgId: "", // 业务报文ID
        ASID: "", // ASID
        AreaCode: "", //行政区划编码
        PreEstateNum: "", //上次不动产单元号
        RecType: "", // 业务编码
        RightType: "", // 权利类型
        RegType: "", //登记类型
        CertCount: "", //不动产权证书数量
        createDate: "", //创建时间
        RecFlowID: "", // 业务流水号
        ParcelID: "", //宗地/宗海代码
        ProofCount: "", //证明数量
        EstateNum: "", // 不动产单元号
        RegOrgID: "", // 登记机构
        PreCertID: "", //次不动产权证号/不动产登记证明
      },
      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) {
    },
    isShow (item) {
      this.$set(this.bwoptions, 0, {
        value: item.bizMsgid,
        label: item.bizMsgid,
      })
      this.$set(this.bwoptions, 1, {
        value: item.bizMsgid + 'CBXZ',
        label: item.bizMsgid + 'CBXZ',
      })
      this.$set(this.bwoptions, 2, {
        value: item.bizMsgid + 'BBXZ',
        label: item.bizMsgid + 'BBXZ',
      })
      this.titleName = 'sjmx';
      this.dialogVisible = true;
      //获取表头列表
      this._getList(item)
      //不动产数据查询上报详情
      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
        })
      }
    },
    // 获取列表接口
    _getList (data) {
      getTabsDetail({ bsmReport: data.bsmReport || data.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);
        }
      });
    },
    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 = [];
    },
    /**
     * @description: 提交
     * @author: renchao
     */
    submitForm: _.debounce(async function () {
      let _this = this
      // 上报请求头修改
      try {
        var headRes = await axios.post(urlHeader + 'edit', this.dataReport,
          {
            headers: {
              'Authorization': sessionStorage.getItem("token") || ""
            }
          })
        if (headRes.code == 200) {
          _this._getList(_this.dataReport)
        }
      } catch (error) {
        this.$message({
          message: '报文头修改出错',
          type: 'error'
        })
      }
      let listRes = await this.$refs["editItem"].handleUpdateForm()
      if (headRes.data?.code == 200 && listRes == 200) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      }
    }, 500),
    /**
     * @description: 重新上报
     * @author: renchao
     */
    handleResubmit () {
      let _this = this
      this.$confirm('重新生成报文，是否上报省厅?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        createXml()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      function createXml () {
        restartGenerateXml(_this.dataReport.bsmSjsb || _this.dataReport.bsmReport).then((res) => {
          if (res.code == 200) {
            _this.resultInfo = res.message
            _this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        })
      }
    }
  }
}
</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 {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1px;
  margin-bottom: 10px;
  border-top: none;
  height: 44vh;
}

/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;
}

.dialog-from {
  padding-top: 0;

  .el-col {
    justify-content: space-between;
  }

  .bz {
    height: 100%;
    position: relative;
    top: 3px;
  }

  /deep/.el-select {
    padding-right: 15px;
  }

  /deep/.el-icon-circle-close {
    display: none;
  }

  /deep/.el-input__suffix {
    right: -25px !important;
    top: -5px;
  }

  /deep/.el-select,
  /deep/.el-input {
    flex: 1;
    width: 100%;
  }

  /deep/.el-textarea__inner {
    border: none !important;
    margin: 0;
  }

  &_header {
    margin: 0 -5px !important;
  }

  &_title {
    font-size: 18px;
    color: #d7eaee;
    margin: 3px 0;
  }
}
</style>