<!--
 * @Author: zhp
 * @Date: 2023-04-18 09:19:02
 * @LastEditTime: 2023-07-17 14:27:21
 * @LastEditors: zhp
 * @Description: 
-->
<template>
  <el-popover placement="right" width="400" trigger="click">
    <base-table id="palletTable" :table-props="tableProps" ref="palletTable1"
      :table-data="tableData" >
    </base-table>
    <i slot="reference" class="el-icon-plus" @click="showInnerTable(injectData.id)"/>
  </el-popover>
</template>
<script>
import i18n from "@/i18n"
import { timeFormatter } from '@/filters'

const tableProps = [
  {
    prop: "stageOneName",
    label: i18n.t('researchquality.stageOneName'),
  },
  {
    prop: "stageOneDate",
    label: i18n.t('researchquality.stageOneDate'),
    filter: timeFormatter
  },
    {
      prop: "stageTwoName",
      label: i18n.t('researchquality.stageTwoName'),
  },,
  {
    prop: "stageTwoDate",
    label: i18n.t('researchquality.stageTwoDate'),
    filter: timeFormatter
  },
    {
      prop: "stageThreeName",
      label: i18n.t('researchquality.stageThreeName'),
  },
  {
    prop: "stageThreeDate",
    label: i18n.t('researchquality.stageThreeDate'),
    filter: timeFormatter
  },
    {
      prop: "stageFourName",
      label: i18n.t('researchquality.stageFourName'),
  },
  {
    prop: "stageFourDate",
    label: i18n.t('researchquality.stageFourDate'),
    filter: timeFormatter
  }
];
export default {
  name: 'InnerTable',
  props: {
    injectData: {
      type: Object,
      default: () => ({})
    },
    itemProp: {
      type: String
    }
  },
  data() {
    return {
      tableProps,
      list: this.injectData,
      tableData: []
    }
  },
  methods: {
    showInnerTable(id) {
      console.log(this.list)
      console.log(id)
      this.tableData = [
        {
          stageOneName: this.injectData.stageOneName,
          stageOneDate: this.injectData.stageOneDate,
          stageTwoName: this.injectData.stageTwoName,
          stageTwoDate: this.injectData.stageTwoDate,
          stageThreeName: this.injectData.stageThreeName,
          stageThreeDate: this.injectData.stageThreeDate,
          stageFourName: this.injectData.stageFourName,
          stageFourDate: this.injectData.stageFourDate,
        }
      ]
    }
  }
}
</script>
