<template>
  <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog"
    custom-class="dialogBox dataReporting editDialogBox sbdialog commonDialog 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 class="JsonEditor" v-if="titleName == 'xml'">
          <JsonEditor class="editXML" :resultInfo="resultInfo" />
        </div>
        <div class="xyjg" v-if="titleName == 'xyjg'">
          <Xyjg :form-data='dataReport'></Xyjg>
        </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="d-center" v-show="!$store.state.business.Edit && titleName == 'sjmx'">
        <btn nativeType="cz" @click="dialogVisible = false">取 消</btn>
        <btn nativeType="cx" @click="submitForm">保 存</btn>
      </div>
      <div class="d-center mt-15" v-show="!$store.state.business.Edit && titleName == 'xml'">
        <btn nativeType="cx" @click="handleResubmit">重新上报</btn>
      </div>
    </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) {
      if (item.bizMsgid) {
        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('/api' + 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>