<template>
  <div>
    <Table :columns="columns" :data="originalData" stripe :span-method="objectSpanMethod"></Table>

    <div class="flex-center" style="margin-top: 20px;">
      <Button style="width: 200px;" type="primary" @click="forwardStep">上一步</Button>
      <Button style="width: 200px;" type="primary" @click="nextStep">保 存</Button>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['equipments'],
  props: {
    originalData: Array
  },
  data() {
    return {
      columns: [
        // {
        //   width: 50,
        //   title: ' ',
        //   type: 'index',
        //   key: 'index'
        // },
        {
          title: '点位',
          width: 230,
          key: 'equipment_id',
          align: 'center',
          render: (h,{ row, index }) => {
            let equipment = this.equipmentList.find(i => i.id === row.equipment_id);
            let text = equipment ? equipment.name : '';
            return h('span',text)
          }
        },
        {
          title: '开启时间',
          width: 140,
          align: 'center',
          key: 'start_time',
          render: (h,{ row, index }) => {
            return h('TimePicker',{
              props: {
                value: row.start_time,
                type: 'time',
                size: 'small',
                transfer: true,
                readonly: true
              }
            })
          }
        },
        {
          title: '结束时间',
          width: 140,
          align: 'center',
          key: 'end_time',
          render: (h,{ row, index }) => {
            return h('TimePicker',{
              props: {
                value: row.end_time,
                type: 'time',
                size: 'small',
                transfer: true,
                readonly: true
              }
            })
          }
        },
        {
          title: '调令内容',
          minWidth: 200,
          key: 'content',
          align: 'center',
          render: (h,{ row }) => {
            return h('div',{
              style: {
                'text-align': 'left'
              }
            },row.content)
          }
        },
        {
          title: '调令等级',
          width: 120,
          key: 'level',
          render: (h,{ row }) => {
            let map = new Map([
              [1,'一般'],
              [2,'紧急']
            ])
            return h('span',map.get(row.level))
          }
        }
      ]
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["key"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },

    forwardStep () {
      this.$emit('forward',{
        step: 3
      })
    },
    nextStep () {
     this.$emit('next',{
       step: 3
     })
    }
  },
  computed: {
    equipmentList () {
      return this.equipments();
    }
  },
}
</script>

<style scoped lang="scss">
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
