<template>
  <div class="routerWapper enquiryList">
        <div class="portalDetailTitle">
            <span class="title">
                日志详情
            </span>
        <div class="detailOperations">
            <a-button @click="$router.back()"> 返回 </a-button> 
        </div>
    </div>
    <!-- 小区 -->
    <div v-if="$route.name == 'rizhiInfo'" class="layoutMargin layoutPadding"> 
        <div style="font-size:16px;margin-bottom:20px">
            <P> 操作人：{{content.creator}}</P>
            <P> 操作说明：{{content.pointName}}</P>
            <P>操作时间：{{this.$moment(content.createTime).format('YYYY-MM-DD')}}</P>
        </div>
      <div class="cardBox"> 
        <a-card title="操作前信息" style="width: 49%;margin-right:1%;margin-bottom:1%;justify-content:flex-end;"> 
          <div class="card-centent">
            <div style="margin-bottom:8px;">
                <a-form class="protalForm" :form="form">
                    <a-form-item v-for="(ele,k) in extList.tbl_community" :key="k" :label="ele.keyName" :label-col="{ span: 9 }" :wrapper-col="{ span: 12 }">
                        <a-input :value="ele.keyVal" disabled="disabled"/>
                    </a-form-item>
                </a-form>
            </div>
          </div>
        </a-card>
        <a-card title="操作后信息" style="width: 49%;margin-right:1%;margin-bottom:1%;"> 
          <div class="card-centent">
            <div style="margin-bottom:8px;">
                <a-form class="protalForm">
                    <a-form-item v-for="(item,k) in extList.tbl_community" :key="k" :label="item.keyName" :label-col="{ span: 9 }" :wrapper-col="{ span: 12 }">
                        <a-input :value="item.keyValue" :key="key" disabled="disabled"/>
                    </a-form-item>
                </a-form>
            </div>
          </div>
        </a-card>
      </div>
    </div>
    
    <RouterWapper v-else></RouterWapper>
  </div>
</template>

<script>
export default {
  name: 'rizhiInfo',
  
  data() {
    return { 
      form: this.$form.createForm(this), //表单验证   
      extList: {
        tbl_community: [],
        tbl_community_amst_office: [],
        tbl_prop_company: [],
        tbl_community_manager: [],
        tbl_industry_council: [],
        tbl_residents_committees: [],
      }, // ext所有列表
      keyCode: [],
      key: '',
      text: '',
      content: {}
    }
  },
  mounted(){  
    if(this.$route.name == 'rizhiInfo'){ 
      this.getList() 
    }
  },
  methods: { 
    getList(params){  
      this.$ajax.get({
        url: this.$api.GET_RIZHI_INFO.replace('{id}', this.$route.query.id), 
      }).then(res => { 
        this.content = this.$com.confirm(res, 'data.content', [])
        const data = this.content.dataAfterObj
        this.data = this.content.dataAfterObj?JSON.parse(this.content.dataAfterObj.extJson):null
        const dataCode = this.content.dataBeforeObj
        this.dataCode = this.content.dataBeforeObj?JSON.parse(this.content.dataBeforeObj.extJson):null
        if (res.code == '200') {
          this.$ajax.get({
            url: this.$api.GET_SAFE_EXT.replace('{table}', 'tbl_community').replace('{id}', this.$route.query.id),
          }).then(res => {
            if (res.code == 200) {
              this.extList.tbl_community = this.$com.confirm(res, 'data.content', [])
              if(this.data !=null){
                for (let init in this.data) {
                  this.extList.tbl_community.forEach((item, index) => {
                    if(item.keyCode == init){
                      this.extList.tbl_community[index].keyValue = this.data[init]
                    }
                  })
                }
              }
              if(this.dataCode != null){
                for (let ini in this.dataCode) {
                  this.extList.tbl_community.forEach((ele, index) => {
                    if(ele.keyCode == ini){
                      this.extList.tbl_community[index].keyVal = this.dataCode[ini]
                    }
                  })
                }
              }
            }
          })  
        } else {
          this.$message.info(res.msg, 10)
        }
      })
    },
  },
}
</script>

<style>
.enquiryList .ant-card-head{
  border-bottom: 1px dashed #e8e8e8;
  padding: 0 12px;
}
.enquiryList .ant-card-body{
  padding: 0px;
} 
.enquiryList .card-bottom{
  padding: 8px 0px;
  text-align: center;
  color: #1890ff;
  border-top: 1px solid #e8e8e8;
  cursor: pointer;
}
.enquiryList .card-centent{
  padding: 12px;
}
.enquiryList .cardBox{
  display:flex;
  flex-wrap: wrap;
} 
</style>
