<template>
  <div>
    <Table :columns="columns" :data="mergeData" 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>
import { index } from "@/api/system/baseForm";
import { deepCopy } from "@/utils";
import { mergeTableRow } from "@/utils/mergeTableRow";
export default {
  inject: ['equipments'],
  props: {
    originalData: Array
  },
  data() {
    return {
      weather: [],
      copyOriginalData: [],
      data: [],
      columns: [
        // {
        //   width: 50,
        //   title: ' ',
        //   type: 'index',
        //   key: 'index'
        // },
        {
          title: '点位',
          width: 240,
          key: 'equipment_id',
          align: 'center',
          render: (h,{ row, index }) => {
            return h('div',{
              style: {
                display: 'flex',
                'justify-content': 'space-between'
              }
            },[
              h('Select',{
                style: {
                  width: '140px'
                },
                props: {
                  value: row.equipment_id,
                  filterable: true,
                  size: 'small',
                  transfer: true,
                  disabled: true
                },
                on: {
                  ['on-select']:e => {
                    row.equipment_id = e.value;
                  }
                }
              },this.equipments().map(i => {
                return h('Option',{
                  props: {
                    value: i.id,
                  }
                },i.name)
              })),
              h('Button',{
                props: {
                  size: 'small',
                  type: 'primary'
                },
                on: {
                  ['click']:e => {
                    this.data.splice(index,0,deepCopy(row))
                  }
                }
              },'新增')
            ])
          }
        },
        {
          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
              },
              on: {
                ['on-change']:e => this.data[index].start_time = e
              }
            })
          }
        },
        {
          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
              },
              on: {
                ['on-change']:e => this.data[index].end_time = e
              }
            })
          }
        },
        {
          title: '调令内容',
          minWidth: 200,
          key: 'content',
          align: 'center',
          render: (h,{ row, index }) => {
            return h('Input',{
              style: {
                'padding': '6px 0'
              },
              props: {
                size: 'small',
                value: row.content,
                type: 'textarea'
              },
              on: {
                ['input']:e => this.data[index].content = e
              }
            })
          }
        },
        {
          title: '调令等级',
          width: 140,
          key: 'level',
          align: 'center',
          render: (h,{ row }) => {
            return h('Select',{
              props: {
                value: row.level,
                filterable: true,
                size: 'small',
                transfer: true,
              },
              on: {
                ['on-select']:e => {
                  row.level = e.value;
                }
              }
            },[{ label: '一般',value: 1 },{ label: '紧急',value: 2 }].map(i => {
              return h('Option',{
                props: {
                  value: i.value,
                }
              },i.label)
            }))
          }
        },
        {
          title: '操作',
          width: 140,
          key: 'operate',
          render: (h,{ row, index }) => {
            return h('Poptip',{
              props: {
                title: '确认要删除吗？',
                confirm: true,
                transfer: true
              },
              on: {
                ['on-ok']:e => {
                  this.data.splice(index,1)
                }
              }
            },[
              h('Button',{
                props: {
                  type: 'primary',
                  size: 'small'
                }
              },'删除')
            ])
          }
        }
      ],
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["key"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },

    forwardStep () {
      this.$emit('forward',{
        data: this.copyOriginalData,
        step: 2
      })
    },

    nextStep () {
      let verify = true;
      this.data.forEach(item => {
        if (!item.start_time || !item.end_time || !item.level) {
          verify = false;
        }
      })
      if (!verify) {
        this.$message({
          type: 'warning',
          message: '请填写完整信息'
        })
        return
      }
      this.$emit('next',{
        data: this.data,
        step: 2
      })
    },

    async getWeather () {
      this.weather = (await index({
        table_name: 'waters',
        filter: [
          {
            key: 'date',
            op: 'eq',
            value: this.$moment().format('YYYY-MM-DD')
          }
        ]
      },false)).data
      console.log(this.weather)
    }
  },
  computed: {
    mergeData () {
      return mergeTableRow({
        data: this.data.map(i => {
          delete i['equipment_id-span'];
          return i;
        }),
        mergeColNames: ["equipment_id"], // 需要合并的列，默认合并列相同的数据
        firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
        firstMerge: 'equipment_id' // 以哪列为基础进行合并，一般为第一列
      })
    },
  },
  watch: {
    originalData: {
      handler: function (val) {
        this.copyOriginalData = deepCopy(val);
        this.data = deepCopy(val);
      },
      immediate: true
    }
  },
  mounted() {
    this.getWeather().then(res => {
      this.$Notice.info({
        title: '今日水情',
        duration: 3,
        render: h => {
          return h('div',[
            h('br'),
            h('div',this.weather.map(i => h('p',i.weather))),
            h('br'),
            h('p',{ class: 'ivu-notice-title' },'水情信息'),
            h('br'),
            h('div',this.weather.map(i => h('p',i.water)))
          ])
        }
      });
    })
  }
}
</script>

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