<template>
  <div id="edit">
    <el-row>
      <el-col :span="24" class="col__date">正在编辑: {{ editDate }}</el-col>
    </el-row>
    <el-table :data="form">
      <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 #header>
          <el-link @click="toAddLine()" type="primary" :underline="false">添加</el-link>
        </template>
        <template #default="{ $index }">
          <el-link @click="toDeleteLine($index)" type="danger" :underline="false">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="space-around" style="text-align: center; margin-top: 20px">
      <el-col :span="4">
        <el-button type="danger" @click="toDelete">全部删除</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="toSubmit">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'edit',
  props: {
    form: { type: Array, required: true }, // 点击操作的那天的所有数据
    editDate: { type: String }, // 点击操作的那天
    dept: { type: Object, default: () => {} }, // 部门信息
  },
  model: {
    prop: 'form',
    event: 'change',
  },
  components: {},
  data: function () {
    return {
      item: { time: ['08:00', '11:00'], number: 0 },
    };
  },
  created() {},
  methods: {
    toSubmit() {
      const dup = _.cloneDeep(this.form);
      this.$emit('save', dup);
    },
    toDelete() {
      let dup = _.cloneDeep(this.form);
      dup = dup.filter((f) => f.id);
      const ids = dup.map((i) => i.id);
      this.$confirm(`确定要删除 <i style="color:red">${this.dept.name}</i> 这天的安排吗?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
      }).then(() => {
        this.$emit('delete', ids);
      });
    },
    toAddLine() {
      let dup = _.cloneDeep(this.item);
      try {
        if (_.isArray(this.form) && this.form.length > 0) {
          const head = _.head(this.form);
          const { number } = head;
          if (number) dup.number = number;
          if (this.editDate) dup.collect_date = this.editDate;
        }
      } catch (error) {
        console.warning('复制数据失败,不影响继续操作');
      }
      this.form.push(dup);
    },
    toDeleteLine(index) {
      const r = this.form[index];
      if (!r || !_.get(r, 'id')) {
        this.$message.error('未找到该安排的信息');
        return;
      }
      this.$confirm(
        `确定要删除 <i style="color:red">${this.dept.name} ${r.collect_date} ${r.collect_time_start} - ${r.collect_time_end}</i> 这个时间的安排吗?`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true,
        }
      ).then(() => {
        this.$emit('delete', r, true);
        this.form.splice(index, 1);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.col__date {
  text-align: center;
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 700;
}
</style>
