<template>
  <div class="step2">
    <el-divider content-position="left">基础设定</el-divider>
    <el-form-item label="任务生成类型" prop="taskCreateType">
      <el-select v-model="currentRow.data.taskCreateType" value-key="" placeholder="" clearable filterable
        :disabled="currentRow.data.id ? true : false">
        <el-option label="按人流量" :value="1"> </el-option>
        <el-option label="定时定期" :value="0"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="生成任务的人流量" v-if="currentRow.data.taskCreateType == 1" prop="actionCount">
      <el-input-number v-model="currentRow.data.actionCount" placeholder="请输入生成任务的触发人数" clearable :min="1"
        :controls="false"></el-input-number>
      <span>人次</span>
    </el-form-item>
    <el-form-item label="要求执行时段" v-if="currentRow.data.taskCreateType == 0">
      <el-select v-model="currentRow.data.actionTimeType" value-key="" placeholder="" filterable>
        <el-option label="不限时间段" :value="0"> </el-option>
        <el-option label="自定义执行时间段" :value="1"> </el-option>
      </el-select>
      <div style="display: flex;" v-if="currentRow.data.actionTimeType == 1">
        <el-form-item label-width="10"  prop="executeStartTime" 
        :rules="
            currentRow.data.executeEndTime
              ? [
                  {
                    required: true,
                    message: '请选择上班时间',
                    trigger: 'blur',
                  },
                  {
                    validator: verifyOnTime,
                  },
                ]
              : [
                  {
                    required: false,
                  },
                ]
          ">
          <div class="form-item" style="width: 100px;">
            <el-time-picker v-model="currentRow.data.executeStartTime" placeholder="起始时间" format="HH:mm" value-format="HH:mm" clearable />
          </div>
          <div style="margin: 0 3px; width: 6px; height: 2px; background-color: black;"></div>
        </el-form-item>
        <el-form-item label-width="0" prop="executeEndTime" 
          :rules="
            currentRow.data.executeStartTime
              ? [
                  {
                    required: true,
                    message: '请选择下班时间',
                    trigger: 'blur',
                  },
                  {
                    validator: verifyOffTime,
                  },
                ]
              : [
                  {
                    required: false,
                  },
                ]
          ">
          <div class="form-item" style="width: 100px;">
            <el-time-picker v-model="currentRow.data.executeEndTime" placeholder="结束时间" format="HH:mm" value-format="HH:mm" clearable />
          </div>
        </el-form-item>
      </div>
    </el-form-item>

    <el-form-item label="任务过期天数" prop="expireTiming">
      <el-input-number v-model="currentRow.data.expireTiming" :min="1" clearable :controls="false"></el-input-number>
      <span>天后过期</span>
    </el-form-item>
    <el-form-item label="计划状态">
      <el-select v-model="currentRow.data.status" value-key="" placeholder="" filterable
        :disabled="currentRow.data.id ? true : false">
        <el-option label="启用" :value="0"> </el-option>
        <el-option label="关闭" :value="1"> </el-option>
        <el-option label="结束" :value="2" disabled> </el-option>
      </el-select>
    </el-form-item>

    <el-divider content-position="left">高级设定</el-divider>
    <el-form-item label="是否为打包任务">
      <el-select v-model="currentRow.data.packageStatus" value-key="" placeholder="" clearable filterable :disabled="currentRow.data.id ? true : false">
        <el-option label="否" :value="0"> </el-option>
        <el-option label="是" :value="1"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="是否允许跨域派单">
      <el-select v-model="currentRow.data.isCross" value-key="" placeholder="" clearable filterable>
        <el-option label="否" :value="0"> </el-option>
        <el-option label="是" :value="1"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="添加任务匹配是标签">
      <el-select v-model="currentRow.data.mustLabelIds" value-key="" placeholder="" clearable filterable multiple>
        <template v-for="item in lables" :key="item.id">
          <el-option :label="item.name" :value="item.id"> </el-option>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="添加任务匹配非标签">
      <el-select v-model="currentRow.data.notLabelIds" value-key="" placeholder="" clearable filterable multiple>
        <template v-for="item in lables" :key="item.id">
          <el-option :label="item.name" :value="item.id"> </el-option>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="$emits('update:step', 0)">上一步</el-button>
      <el-button type="primary" @click="save">下一步</el-button>
    </el-form-item>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, watch } from "vue";
import chooseTaskPeople from "@/Components/taskCenter/taskSet/chooseTaskPeopleCom.vue";
import { dropdownService } from "@/ApiService/dropdownService";
const props = defineProps({
  currentRow: Object,
  currentButton: Object,
  step: Number,
});
console.log(props.currentRow.data);
if(props.currentRow.data.timeArr && props.currentRow.data.timeArr.length) {
  props.currentRow.data.executeStartTime = props.currentRow.data.timeArr[0];
  props.currentRow.data.executeEndTime = props.currentRow.data.timeArr[1];
}

const $emits = defineEmits(["update:step", "save"]);
const sences = ref([]);
const choosePeopleType = [
  {
    key: 0,
    value: "不限人员",
  },
  {
    key: 1,
    value: "选择任务执行人员",
  },
];
const showTaskExecutor = ref(false);
const defaultProps = computed(() => {
  console.log(props);
  return {
    buttonId: props.currentButton.data.buttonId,
    planId: props.currentRow.data.id,
  };
});
const districtId = computed(() => {
  return props.currentRow.data.districtId;
});
const sceneRef = ref();
const options = ref([]);
const scenesProps = {
  expandTrigger: "hover",
  checkStrictly: true,
  children: "childNode",
  label: "name",
  value: "gridId",
  multiple: true,
  disabled: "disable",
};
const taskCreateDateArr = ref([
  {
    timeArr: [],
  },
]);
const lables = ref([]);
// 数据定义 end
const verifyOnTime = (rule, value, callback) => {
  if (value) {
    callback();
  } else {
    callback(new Error("请选择上班时间!"));
  }
};
const verifyOffTime = (rule, value, callback) => {
  if (value) {
    callback();
  } else {
    callback(new Error("请选择下班时间!"));
  }
};
const fetchLables = () => {
  const { districtId } = props.currentRow.data;
  dropdownService.selectLabel({ districtId }).then((res) => {
    if (res.code == 0) {
      lables.value = res.data;
    } else {
      $messsage.error(res.err);
    }
  });
};
const addTimeArr = () => {
  taskCreateDateArr.value.push({ timeArr: [] });
};
const removeTimeArr = (index) => {
  taskCreateDateArr.value.splice(index, 1);
};
const save = () => {
  props.currentRow.data.timeArr = [props.currentRow.data.executeStartTime, props.currentRow.data.executeEndTime]
  $emits("save", 2);
};

watch(
  districtId,
  (val) => {
    console.log(val);
    if (val) {
      fetchLables();
    }
  },
  {
    immediate: true,
  }
);
</script>
<script>
export default {
  name: "plan-task-form-step2",
};
</script>
<style lang="scss" scoped>
.custom-date-list {
  width: 100%;

  .date-item {
    display: flex;
    align-content: center;
    align-items: center;
  }
}
</style>
