<template>
  <!-- 查看会员修改历史记录之弹窗 -->
  <div>
    <!-- <button @click="sendData"></button> -->
    <!-- <button @click="simpleDlgVisible = true"></button> -->
    <!-- <el-dialog :visible.sync="simpleDlgVisible">
    </el-dialog> -->
    <!-- 也可以展示记录只展示主卡,然后操作里查看副卡,通过筛选count值与主卡一致的数据 memberUpdateLogList.filter(item => item.parentId === 0) -->
    <el-table
      :data="memberUpdateLogList"
      border
      stripe
      v-loading="loading">
      <el-table-column type="index"></el-table-column>
      <!-- <el-table-column
        prop="oldValue"
        label="原始值"></el-table-column>
      <el-table-column
        prop="newValue"
        label="修改后的值"></el-table-column> -->
      <el-table-column
        prop="count"
        label="次数">
        <template slot-scope="prop">
          {{ '第' + prop.row.count + '次修改' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="newValue"
        label="姓名">
        <template slot-scope="prop">
          {{ JSON.parse(prop.row.newValue).name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="parentId"
        label="主/子卡">
        <template slot-scope="prop">
          {{ prop.row.parentId === 0 ? '主卡' : '子卡' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="updatePersonName"
        label="修改人"></el-table-column>
      <el-table-column
        prop="updateTime"
        label="修改时间">
        <template slot-scope="prop">
          {{ prop.row.updateTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="sendRow(scope.row)">
            查看明细
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="dialog-btn-wrap">
      <el-button
        @click="handleClose"
        type="primary">
        关闭
      </el-button>
    </div>
    <!-- <ElDialog
      title="会员详情"
      width="900px"
      v-model="fatherVisible">
      <FatherDlg ref="faDlg"></FatherDlg>
    </ElDialog> -->
    <!-- <FatherDlg ref="faDlg"></FatherDlg> -->
    <!-- <ElDialog
      title="会员详情"
      width="900px"
      v-model="fatherVisible">

    </ElDialog> -->

    <!-- 会员基础信息展示 -->
    <!-- <div>
      <el-form
        :model="memberInfo"
        label-width="120px"
        class="dialog-info"
        inline
        v-if="memberInfo">
        <p class="block-title">
          基本信息
        </p>
        <el-form-item label="姓名">
          {{ memberInfo.name }}
        </el-form-item>
        <el-form-item label="证件类型">
          {{ memberInfo.papersType }}
        </el-form-item>
        <el-form-item label="证件号码">
          {{ memberInfo.papersId }}
        </el-form-item>
        <el-form-item label="手机">
          {{ memberInfo.phone }}
        </el-form-item>
        <el-form-item label="住址">
          {{ memberInfo.address }}
        </el-form-item>
        <el-form-item label="备注">
          {{ memberInfo.remark }}
        </el-form-item>
      </el-form>
    </div> -->

    <!-- 修改记录展示 -->
    <!-- {{ memberUpdateLogList }} -->
    <!-- 有主副卡信息，按member.count显示第几次修改记录 -->
    <!-- <div
      v-for="(member,index) in memberUpdateLogList"
      :key="index">
      <p class="block-title">
        第{{ member.count }}次修改记录
      </p>
      <el-form
        class="dialog-info"
        label-width="120px"
        inline>
        <el-form-item label="修改人">
          {{ member.updatePersonName }}
        </el-form-item>
        <el-form-item label="修改时间">
          {{ member.updateTime | formatTime }}
        </el-form-item>
      </el-form>
      <div>
        <p class="btn-wrap-center">
          第{{ member.count }}次修改前 {{ member.parentId === 0 ? '（主卡）':'（副卡）' }}
        </p>
        <MemberInfoVal :member-info-value="member.oldValue"></MemberInfoVal>
        <p class="btn-wrap-center">
          第{{ member.count }}次修改后 {{ member.parentId === 0 ? '（主卡）':'（副卡）' }}
        </p>
        <MemberInfoVal :member-info-value="member.newValue"></MemberInfoVal>
      </div>
    </div> -->
  </div>
</template>

<script>
// import MemberInfoVal from './MemberInfoVal.vue'
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    memberUpdateLogList: {
      type: Array,
      default: () => []
    }
  },

  data () {
    return {
      memberInfo: null,
      fatherInfo: {},
      fatherVisible: false,
      simpleDlgVisible: false
    }
  },

  methods: {
    hello () {
      console.log('hello')
    },
    test (row) {
      console.log(row)
      return row
    },
    sendRow (data) {
      this.$emit('send-data', data)
    },
    sendData () {
      this.$emit('send-data', '传递给父组件的数据')
    },
    handleClose () {
      this.$emit('close-member-update-log-dlg')
    },
    // 根据 memberUpdateLogList 中的最新一条记录展示会员基础信息
    showMemberInfo () {
      if (this.memberUpdateLogList.length > 0) {
        const lastLog = this.memberUpdateLogList[this.memberUpdateLogList.length - 1]
        const { newValue } = lastLog
        this.memberInfo = JSON.parse(newValue)
        /* 不能打印,这个含有图片,打印出来得有几MB console.log(this.memberInfo) */
      }
    }
  },

  mounted () {
    // 在组件挂载时展示会员基础信息
    this.showMemberInfo()
  },

  components: {
    // MemberInfoVal,
  },

  watch: {
    // 监听 memberUpdateLogList 变化，以便及时展示最新的会员基础信息
    memberUpdateLogList () {
      this.showMemberInfo()
    }
  }
  // 副卡测试数据 "newValue": "{"name":"钱雨喧","Face":{"validStartTime":1661875200000,"validEndTime":1693411200000,"faceImg":"testdafsdasd","name":"钱雨喧","id":35260},"parentId":5959}",

}
/**
 * 测试数据
  [
    {
      "id": 38,
      "memberId": 5960,
      "parentId": 0,
      "oldValue": "{\"papersId\":\"\",\"address\":\"\",\"phone\":\"\",\"name\":\"111\",\"IdCard\":{\"idcardNo\":\"640101198001010858\",\"id\":33169,\"validStartDate\":1683820800000,\"validEndDate\":1952524799000,\"memberId\":5960},\"remark\":\"\",\"papersType\":\"\",\"parentId\":0}",
      "newValue": "{\"papersId\":\"\",\"address\":\"\",\"phone\":\"\",\"name\":\"111\",\"IdCard\":{\"idcardNo\":\"640101198001010858\",\"id\":33169,\"validStartDate\":1683820800000,\"validEndDate\":1952524799000,\"memberId\":5960},\"remark\":\"\",\"papersType\":\"\",\"parentId\":0}",
      "updateTime": "2023-05-16T08:46:33.000+0000",
      "updatePerson": 239,
      "updatePersonName": "panhongwen",
      "count": 1
    },
    {
      "id": 39,
      "memberId": 5960,
      "parentId": 0,
      "oldValue": "{\"papersId\":\"\",\"address\":\"\",\"phone\":\"\",\"name\":\"111\",\"IdCard\":{\"idcardNo\":\"640101198001010858\",\"id\":33169,\"validStartDate\":1683820800000,\"validEndDate\":1952524799000,\"memberId\":5960},\"remark\":\"\",\"papersType\":\"\",\"parentId\":0}",
      "newValue": "{\"papersId\":\"342623199604135933\",\"address\":\"浙江省杭州市西湖区\",\"phone\":\"18225534714\",\"name\":\"潘宏稳\",\"IdCard\":{\"idcardNo\":\"640101198001010858\",\"id\":33169,\"validStartDate\":1683820800000,\"validEndDate\":1952524799000,\"memberId\":5960},\"remark\":\"\",\"papersType\":\"ID_CARD\",\"parentId\":0}",
      "updateTime": "2023-05-16T08:47:39.000+0000",
      "updatePerson": 239,
      "updatePersonName": "panhongwen",
      "count": 2
    }
  ]
 */
</script>
