<template>
  <div id="edit">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="日期范围" :required="true">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="dateOptions"
        >
        </el-date-picker>
        <span style="padding-left: 10px; color: red">(范围选择,点击第一下选择开始时间;点击第二下选择结束时间)</span>
      </el-form-item>
      <el-row>
        <el-col :span="24" style="padding: 10px; text-align: right">
          <el-button @click="toAddLine()" size="mini" type="primary">添加时间段</el-button>
        </el-col>
        <el-col :span="24">
          <el-table :data="form.arrange">
            <el-table-column align="center" label="时间" width="400px">
              <template #default="{ row }">
                <el-time-picker
                  is-range
                  v-model="row.time"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  value-format="HH:mm"
                  size="mini"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="预约人数">
              <template #default="{ row }">
                <el-input-number v-model="row.number" :min="0" size="mini"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template #default="{ $index }">
                <el-link @click="toDeleteLine($index)" icon="el-icon-delete" type="danger" :underline="false"></el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-form-item style="margin: 10px">
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-button type="primary" @click="toSubmit">提交</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'add',
  props: {
    dept: { type: Object, default: () => {} }, // 部门信息
  },
  components: {},
  data: () => {
    return {
      dateRange: [],
      dateOptions: {
        disabledDate: (date) => moment().isSameOrAfter(date),
      },
      item: { time: ['08:00', '11:00'], number: 0 },
      form: { arrange: [] },
    };
  },
  created() {},
  methods: {
    toSubmit() {
      this.$confirm(`确定要对 <i style="color:red">${this.dept.name}</i> 添加安排吗?`, '添加提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
      }).then(() => {
        const object = _.cloneDeep(this.form);
        const arrange = object.arrange;
        if (arrange.length <= 0) {
          this.$message.error('请填写安排');
          return false;
        }
        let arr = [];
        const s = _.head(this.dateRange);
        const e = _.last(this.dateRange);
        const days = moment(e).diff(s, 'days');
        for (let i = 0; i <= days; i++) {
          const collect_date = moment(s).add(i, 'd').format('YYYY-MM-DD');
          for (const a of arrange) {
            const object = { collect_date };
            const { time, number } = a;
            object.collect_time_start = _.head(time);
            object.collect_time_end = _.last(time);
            object.number = number;
            arr.push(object);
          }
        }
        this.$emit('save', arr);
      });
    },
    toAddLine() {
      let dup = _.cloneDeep(this.item);
      try {
        if (_.isArray(this.form.arrange) && this.form.arrange.length > 0) {
          const head = _.head(this.form.arrange);
          const { number } = head;
          if (number) dup.number = number;
        }
      } catch (error) {
        console.warning('复制数据失败,不影响继续操作');
      }
      this.form.arrange.push(dup);
    },
    toDeleteLine(index) {
      this.form.arrange.splice(index, 1);
    },
    toDelete() {
      this.$confirm('确定要删除这天的安排吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$emit('delete', _.cloneDeep(this.form));
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
