<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 == 'tuozhanxinxiguanliInfo'" 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-table bordered class="portalTable" :dataSource="taskCollectList" :columns="columns" size="small">
                </a-table> 
            </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">
                    <div style="margin-bottom:8px;">
                <a-table bordered class="portalTable" :dataSource="taskCollectList1" :columns="columns" size="small">
                </a-table> 
            </div>
                </a-form>
            </div>
          </div>
        </a-card>
      </div>
    </div>
    
    <RouterWapper v-else></RouterWapper>
  </div>
</template>

<script>
export default {
  name: 'tuozhanxinxiguanliInfo',
  data() {
    formExt: this.$form.createForm(this)
    return {    
      extList: {
        tbl_community: [],
        tbl_community_amst_office: [],
        tbl_prop_company: [],
        tbl_community_manager: [],
        tbl_industry_council: [],
        tbl_residents_committees: [],
      }, // ext所有列表
      content: {},
      taskCollectList: [],
      taskCollectList1: [],
      columns: [
        {
          title: '字段名称',
          dataIndex: 'keyName',
          key: 'keyName',
        },
        {
          title: '组件类型',
          dataIndex: 'compntType',
          key: 'compntType',
        },
        {
          title: '默认值',
          dataIndex: 'defVal',
          key: 'defVal',
        },
      ],
    }
  },  
  mounted(){  
    if(this.$route.name == 'tuozhanxinxiguanliInfo'){ 
      this.getTaskCollectList() 
    }
  },
  methods: { 
    getTaskCollectList(params){ // 获取列表里面的数据
      this.$ajax.get({
        url: this.$api.GET_RIZHI_INFO.replace('{id}', this.$route.query.id),
        params: {
          tbl: params,
        },
      }).then(res => {
        this.content = this.$com.confirm(res, 'data.content', [])
        if (res.code == '200') {
          this.taskCollectList = this.content.dataBeforeObj
          this.taskCollectList1 = this.content.dataAfterObj
        } 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>
