<template>
  <div>
    <el-form ref="form" >
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="tableList"
        :needPage="false"
        :minHeight="100"
        tool-class="ele-toolbar-form"

        :summary-method="getSummaries"
        show-summary
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            v-if="dialogType !== 'view'"
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="handleAddInfo"
          >
            新增
          </el-button>
        </template>

        <template v-slot:action="{ row, $index }" v-if="dialogType !== 'view'">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此信息吗？"
            @confirm="handleDelInfo($index)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
        <template v-slot:dataTime="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'tableList.' + $index + '.dataTime'">
            <el-date-picker
              v-model="row.dataTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:cost="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.cost'">
            <el-input type="number" v-model="row.cost"></el-input>
          </el-form-item>
        </template>
        <template v-slot:personal="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.personal'">
            <el-input type="number" v-model="row.personal"></el-input>
          </el-form-item>
        </template>
        <template v-slot:place="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.place'">
            <el-input  v-model="row.place"></el-input>
          </el-form-item>
        </template>
        <template v-slot:placeType="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.placeType'">
            <el-input  v-model="row.placeType"></el-input>
          </el-form-item>
        </template>
        <template v-slot:placeNum="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.placeNum'">
            <el-input type="number"   v-model="row.placeNum"></el-input>
          </el-form-item>
        </template>
        <template v-slot:remark="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'datasource.' + $index + '.remark'">
            <el-input type="textarea" v-model="row.remark"></el-input>
          </el-form-item>
        </template>
        <template v-slot:start="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'tableList.' + $index + '.start'">
            <el-date-picker
              v-model="row.start"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择"
            >
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:end="{ row, $index }" v-if="dialogType !== 'view'">
          <el-form-item :prop="'tableList.' + $index + '.end'">
            <el-date-picker
              v-model="row.end"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择"
            >
            </el-date-picker>
          </el-form-item>
        </template>
     
      </ele-pro-table>
    </el-form>
  </div>
</template>
  
  
  <script>
import { getSummaries } from '@/utils/util.js';

export default {
  name: 'relatedInfoTable',

  props: {
    dialogType: ''
  },
  data() {
    return {
      tableList:[]
    };
  },
  computed: {
    columns() {
      return [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'dataTime',
          label: '日期',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150,
          slot: 'dataTime'
        },
        {
          prop: 'personal',
          label: '人数',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 80,
          slot: 'personal'
        },
        {
          prop: 'place',
          label: '酒店名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 240,
          slot: 'place'
        },
        {
          prop: 'placeNum',
          label: '房间数量',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          slot: 'placeNum'
        },
        {
          prop: 'placeType',
          label: '房型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'placeType'
        },
        {
          prop: 'start',
          label: '入住时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150,
          slot: 'start'
        },

        {
          prop: 'end',
          label: '退房时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150,
          slot: 'end'
        },
        {
          prop: 'cost',
          label: '预计费用',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'cost'
        },
        {
          prop: 'remark',
          label: '备注',
          minWidth: 200,
          align: 'center',
          showOverflowTooltip: true,
          slot: 'remark'
        },
        {
          columnKey: 'action',
          slot: 'action',
          label: '操作',
          resizable: false,
          width: 80,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ];
    }
  },
  mounted() {},
  methods: {
    getSummaries(param) {
      return getSummaries(param, 'cost');
    },
    //删除任务信息数据
    handleDelInfo(index) {
      this.tableList.splice(index, 1);
    },
    //修改回显
    putTableValue(data) {
      this.tableList = data || [];
    },
    getTableValue() {
      return this.tableList;
    },
    
    handleAddInfo() {
      this.tableList.push({
        dataTime: '',
        personal: '',
        place: '',
        materialName: '',

        remark: '',
        cost: '',
        placeType: '',
        placeNum: '',
        start: '',
        end: ''
      });
    }
  }
};
</script>
  
  
  <style scoped lang="scss">
:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>
  