<template>
  <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" custom-class="dialogBox dataReporting 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 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>
    </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('/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>
<style scoped lang="scss">
  /deep/.editDialogBox {
    .el-dialog__header {
      display: flex;
      margin-bottom: 10px;
    }
  }
</style>