<template>
  <div class="follow-task">
    <el-steps direction="vertical" :active="value.length + 1">
      <el-step v-for="(item, index) in value" :key="index">
        <template slot="title">
          <div style="display: flex; align-items: center">
            <span>第{{ index + 1 }}次随访任务</span>
            <span class="ml10" style="font-size: 14px; color: #cccccc">基线时间+</span>
            <div class="ml10">
              <el-input-number
                size="mini"
                v-model="item.lagNumber"
                v-bind="getTaskTimeRange(item, index)"
                :disabled="!!isPreview"
              ></el-input-number>
              <span class="ml5" style="font-size: 12px; color: #000">天</span>
              <!-- <PeriodSelector
                :hasZero="index === 0"
                size="mini"
                :value="{ quantity: item.lagNumber, unit: item.lagUnit }"
                @change="
                  item.lagNumber = $event.quantity;
                  item.lagUnit = $event.unit;
                "
              /> -->
            </div>
            <span :class="['ml20', isPreview ? 'gary-button': '']" v-if="value.length - 1 === index">
              <i
                @click="handleDelTask(index)"
                class="el-icon-remove mr5"
                style="cursor: pointer"
              ></i>
              <i
                v-if="value.length < 10 && (!item.lagNumber || item.lagNumber < maxDays)"
                @click="handleAddTask"
                class="el-icon-circle-plus"
                style="cursor: pointer"
              ></i>
            </span>
          </div>
        </template>
        <template slot="description">
          <el-table :data="item.items" border emptyText="暂无待办事项" class="mt10">
            <el-table-column align="center" property="targetType" label="待办类型">
              <template slot-scope="scope">
                {{ todoItemTypeEnum.getLabel(scope.row.targetType) }}
              </template>
            </el-table-column>
            <el-table-column align="center" property="targetName" label="名称" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="handlePrewviewItem(scope.row)">
                  查看
                </el-button>
                <el-button size="mini" type="text" @click="hanldeDelTodoItem(scope.$index, index)" v-if="!isPreview">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button
            v-if="item.items.length < 10"
            @click="handleAddTodo(index)"
            class="mb20"
            type="primary"
            style="width: 100%"
            :disabled="!!isPreview"
          >
            添加待办事项
          </el-button>
        </template>
      </el-step>
    </el-steps>
    <ArticlePreviewPopup ref="previewArticle" />
    <SurveyPreviewPopup ref="previewSurvey" />
    <RemindPreviewPopup ref="previewRemind" />
  </div>
</template>
<script>
import PeriodSelector from "../PeriodSelector";
import TodoItemSelector from "../TodoItemSelector";
import ArticlePreviewPopup from "../ArticlePreviewPopup";
import SurveyPreviewPopup from "../SurveyPreviewPopup";
import RemindPreviewPopup from "../RemindPreviewPopup";

export default {
  enums: ["todoItemTypeEnum", "periodUnitMap", "todoItemTypeMap"],
  components: {
    PeriodSelector,
    TodoItemSelector,
    ArticlePreviewPopup,
    SurveyPreviewPopup,
    RemindPreviewPopup
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    maxDays: {
      type: Number,
    },
    isPreview: { // 预览标记
      type: String,
    },
  },
  created() {
    if (this.value.length === 0) {
      // 自动插入一条
      this.handleAddTask();
    }
  },
  methods: {
    getTaskTimeRange(item, index) {
      const range = {
        min: index === 0 ? 0 : this.value[index - 1].lagNumber + 1,
        max: this.maxDays - 1,
      };
      console.log(range);
      return range;
    },
    handleAddTask() {
      if (this.isPreview === 'preview') return false;
      this.$emit("input", [
        ...this.value,
        {
          lagNumber: undefined,
          lagUnit: this.periodUnitMap.day,
          items: [],
        },
      ]);
    },
    handleDelTask(index) {
      if (this.isPreview === 'preview') return false;
      if (index === 0) {
        return this.$message.warning("至少包含一个任务");
      }
      const taskList = [...this.value];
      taskList.splice(index);
      this.$emit("input", taskList);
    },
    // 修改添加待办事项
    handleAddTodo(index) {
      this.$emit("selectTodo", index);
    },
    // 查看预览待办事项
    handlePrewviewItem(item) {
      if (item.targetType === this.todoItemTypeMap.article) {
        this.$refs.previewArticle.open(item.targetId);
      } else if (item.targetType === this.todoItemTypeMap.survey) {
        this.$refs.previewSurvey.open(item.surveyId);
      } else if (item.targetType === this.todoItemTypeMap.remind) {
        this.$refs.previewRemind.open(item.targetId)
      }
    },
    // 删除待办事项
    hanldeDelTodoItem(todoIndex, taskIndex) {
      const taskList = [...this.value];
      taskList[taskIndex].items.splice(todoIndex, 1);
      this.$emit("change", taskList);
    },
  },
};
</script>

<style lang="scss" scoped>
.follow-task {
}
</style>
