<template>
  <div class="task">
    <el-steps :active="active">
      <el-step title="设置计划对象"></el-step>
      <el-step title="选择巡检对象"></el-step>
      <el-step title="预置位设置"></el-step>
    </el-steps>
    <div style="flex: 1; height: 0; overflow-y: auto">
      <div class="ac-on1" v-show="active == 1">
        <div class="ac-on1-box">
          <div class="a2">名称 <span>*</span></div>
          <el-input class="a3" v-model="input3" placeholder="请输入"></el-input>
          <!-- <div class="a2">优先级 <span>*</span></div>
          <el-select class="a3" v-model="priority" placeholder="请选择">
            <el-option label="优先级1" value="1"> </el-option>
            <el-option label="优先级2" value="2"> </el-option>
            <el-option label="优先级3" value="3"> </el-option>
            <el-option label="优先级4" value="4"> </el-option>
          </el-select> -->
          <div class="a2">任务类型 <span>*</span></div>
          <template>
            <TreeSelect
              :defaultExpandLevel="2"
              :limit="0"
              :limitText="(count) => `+${count}`"
              v-model="type"
              :options="listPatroltype"
              :show-count="true"
              placeholder="请选择巡检类型"
            />
            <!-- <el-select
              class="a3"
              v-model="type"
              placeholder="请选择"
              @change="typeClick"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->
          </template>
          <!-- <div class="a2">任务执行方式 <span>*</span></div>
          <el-checkbox class="a3" v-model="checked">现场巡检</el-checkbox> -->
          <div class="a2">巡检区域 <span>*</span></div>
          <template>
            <el-input placeholder="输入关键字进行过滤" v-model="filterText">
            </el-input>
            <el-checkbox
              style="margin-top: 10px"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <!-- :default-checked-keys="selectAreaIdList" -->
            <el-tree
              :filter-node-method="filterNode"
              :props="defaultProps2"
              ref="treeForm"
              :data="areaList"
              default-expand-all
              show-checkbox
              node-key="areaId"
              :default-checked-keys="selectAreaIdList"
              @check-change="handleCheckChange"
            >
            </el-tree>
          </template>
        </div>
        <div class="ac-on1-box ac-one1-right">
          <div class="choose">
            <el-radio-group v-model="radio">
              <el-radio class="radio" v-model="radio" label="1"
                >定时执行</el-radio
              >
              <el-radio class="radio" v-model="radio" label="2"
                >周期执行</el-radio
              >
              <el-radio class="radio" v-model="radio" label="3"
                >间隔执行</el-radio
              >
            </el-radio-group>
          </div>
          <div v-if="radio == 1" class="mb">
            <el-date-picker
              v-model="value11"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions0"
            >
            </el-date-picker>
          </div>
          <div v-if="radio == 2">
            <div class="a1">时间设置</div>
            <div class="a2">计划有效期 <span>*</span></div>
            <div class="block">
              <el-date-picker
                v-model="value1"
                type="datetime"
                @change="handleChangeStartTime"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions0"
              >
              </el-date-picker>
              -
              <el-date-picker
                v-model="value2"
                type="datetime"
                @change="handleChangeEndTime"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions1"
              >
              </el-date-picker>
            </div>

            <div class="a2">任务执行周期 <span>*</span></div>
            <template>
              <el-select
                class="a3"
                v-model="weekormonth"
                @change="onChangeWeekOrMonth"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
            <div class="a2">
              任务执行时间 <span>*</span>
              <el-button
                type="primary"
                @click="add1"
                v-if="weekormonth == 'month'"
                >添加({{ timelist1.length }})
              </el-button>
              <el-button
                type="primary"
                @click="add1"
                v-if="weekormonth == 'week'"
                >添加({{ timelist2.length }})
              </el-button>
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="grid-content bg-purple">日期</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">时间</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">操作</div>
              </el-col>
            </el-row>
            <div v-if="weekormonth == 'month'">
              <el-row
                :gutter="20"
                class="line mb"
                v-for="(item, index) in timelist1"
                :key="index"
                :index="index"
              >
                <el-col :span="6">
                  <el-select
                    v-model="item.zhixing"
                    @change="handleChangeTaskRunDayWithMonth(item)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in dayList"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-time-picker
                      v-model="item.time"
                      @change="
                        (t) => {
                          handleChangeTaskRunTimeWithMonth(t, item);
                        }
                      "
                      :picker-options="{ selectableRange: '' }"
                      placeholder="选择时间"
                      value-format="HH:mm:ss"
                    >
                    </el-time-picker>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <i
                      class="el-icon-delete fs"
                      title="删除"
                      @click="delete1(index)"
                    ></i>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div v-if="weekormonth == 'week'">
              <el-row
                :gutter="20"
                class="line mb"
                v-for="(item, index) in timelist2"
                :key="index"
                :index="index"
              >
                <el-col :span="6">
                  <el-select
                    v-model="item.zhixing"
                    @change="handleChangeTaskRunDay(item)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in weekendList"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-time-picker
                      v-model="item.time"
                      @change="
                        (t) => {
                          handleChangeTaskRunTime(t, item);
                        }
                      "
                      value-format="HH:mm:ss"
                      :picker-options="{ selectableRange: '' }"
                      placeholder="选择时间"
                    >
                    </el-time-picker>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <i
                      class="el-icon-delete fs"
                      title="删除"
                      @click="delete1(index)"
                    ></i>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div v-if="radio == 3">
            <div class="a2">间隔<span>*</span></div>
            <div class="block">
              <el-date-picker
                v-model="intervalStartTime"
                @change="handleChangeIntervalStartTime"
                type="datetime"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions0"
              >
              </el-date-picker>
              -
              <el-date-picker
                v-model="intervalEndTime"
                @change="handleChangeIntervalEndTime"
                type="datetime"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions1"
              >
              </el-date-picker>
            </div>

            <div class="a2">执行时间 <span>*</span></div>
            <div class="block">
              <el-time-picker
                v-model="intervalExecuteTime"
                placeholder="间隔内开始时间"
                value-format="HH:mm:ss"
              >
              </el-time-picker>

              <!-- <el-date-picker
                v-model="value1"
                type="date"
                placeholder="间隔执行时间"
                value-format="yyyy-MM-dd"
                :picker-options="intervalExecuteTime"
              >
              </el-date-picker> -->
            </div>
            <div class="a2">间隔类型 <span>*</span></div>
            <template>
              <el-select class="a3" v-model="intervalType" placeholder="请选择">
                <el-option label="小时" value="1"></el-option>
                <!-- <el-option label="天" value="2"></el-option> -->
              </el-select>
            </template>
            <div class="a2">间隔执行次数 <span>*</span></div>
            <el-input-number
              style="margin-bottom: 20px"
              v-if="intervalType == 1"
              v-model="intervalNumber"
              :min="1"
              :max="maxintervalNumber"
              :precision="0"
            ></el-input-number>
          </div>
          <el-button @click="linkUrl">取消</el-button>
          <el-button type="primary" @click="next1">下一步</el-button>
        </div>
      </div>
      <div class="ac-on2" v-show="active == 2">
        <div class="ac-on2-box">
          <div class="ac2-d1">
            <div class="ac2-d1-e1">巡检对象筛选</div>
            <div class="search">
              <el-input
                placeholder="搜索区域名称"
                icon="el-icon-search"
                v-model="searchName"
              ></el-input>
              <el-button
                class="button"
                type="primary"
                icon="el-icon-search"
                @click="searchClick"
              ></el-button>
            </div>
            <el-tree
              :data="areaList1"
              :props="defaultProps1"
              show-checkbox
              @check-change="handleObjectTreeChecked"
              :default-expand-all="true"
            ></el-tree>
          </div>
          <div class="ac2-d2">
            <div style="text-align: center">
              <el-transfer
                style="text-align: left; display: inline-block"
                v-model="value5"
                filterable
                :filter-method="transferFilterMethod"
                :props="{ key: 'deviceId', label: 'deviceName' }"
                :titles="['待添加', '已添加']"
                :format="{
                  noChecked: '${total}',
                  hasChecked: '${checked}/${total}',
                }"
                @change="handleChange"
                :data="treeList"
              >
                <template slot-scope="{ option }">
                  <el-tooltip
                    placement="top"
                    effect="light"
                    :content="option.deviceName"
                  >
                    <span> {{ option.deviceName }}</span>
                  </el-tooltip>
                </template>
              </el-transfer>
              <div class="ac-on2-btn">
                <el-button @click="prev">上一步</el-button>
                <el-button type="primary" @click="next">下一步</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ac-on3" v-show="active == 3">
        <!-- @check-change="treeClick" -->
        <el-input placeholder="输入关键字进行过滤" v-model="filterText2">
        </el-input>
        <div class="ac-on3-box">
          <el-checkbox
            style="margin-top: 10px"
            v-model="checkPointAll"
            @change="handleCheckPointAllChange"
            >全选
          </el-checkbox>
          <el-tree
            :filter-node-method="filterNode2"
            style="height: 400px; overflow-y: auto"
            :data="setList"
            ref="tree"
            show-checkbox
            node-key="dataId"
            default-expand-all
            :default-checked-keys="setCheck"
            :props="defaultProps"
          >
          </el-tree>
        </div>
        <div class="a2">是否开启 <span>*</span></div>
        <template>
          <el-radio v-model="beginradio" label="0">是</el-radio>
          <el-radio v-model="beginradio" label="1">否</el-radio>
        </template>
        <div class="ac-on2-btn">
          <el-button type="primary" @click="prev">上一步</el-button>
          <el-button @click="saveClick">完成</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listArea,
  equipmentree,
  equSelect,
  addPatrol,
  changeStatus,
} from "@/api/basedata/area/area";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import linq from "linq";
import { listPatroltype } from "@/api/basedata/patrolpointmnt/patroltype";
import { getWeekdaysInRange, getDaysInRange } from "@/utils/index.js";
export default {
  name: "new_task",
  components: { TreeSelect },
  data() {
    return {
      checkAll: false,
      checkPointAll: false,
      listPatroltype: [],
      intervalStartTime: "",
      intervalEndTime: "",
      intervalExecuteTime: "",
      intervalType: "1",
      intervalNumber: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      dateShow: true,
      beginradio: "0",
      input3: "",
      active: 1,
      radio: "1",
      checked: true,
      zhixing: "选择",
      weekendList: [],
      zhixing2: "选择",
      dayList: [],
      value: "第一间隔单元",
      value1: "",
      value2: "",
      value11: "",
      options1: [
        {
          value: "week",
          label: "按周选择",
        },
        {
          value: "month",
          label: "按月选择",
        },
      ],
      typeOptions: [
        {
          value: "1",
          label: "例行巡视",
        },
        {
          value: "2",
          label: "特殊巡视",
        },
        {
          value: "3",
          label: "专项巡视",
        },
        {
          value: "4",
          label: "自定义巡视",
        },
        {
          value: "5",
          label: "联动巡视",
        },
        {
          value: "6",
          label: "静默类型",
        },
      ],
      weekormonth: "week",
      time: "",
      week1: "",
      value5: [],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
      setList: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      timelist1: [{ zhixing: "", zhixing2: "", time: "" }],
      timelist2: [{ zhixing: "", zhixing2: "", time: "" }],
      defaultProps1: {
        children: "children",
        label: "areaName",
      },
      defaultProps2: {
        children: "children",
        label: "areaName",
      },
      areaList: [],
      queryParams: {
        areaName: undefined,
        areaId: undefined,
        deviceIdAll: {},
      },
      // 设置计划对象选择Id数组
      selectAreaIdList: [],

      // 选择巡检对象选择Id数组
      selectObjectAreaIdList: [],
      checkedId: "",
      treeList: [],
      areaList1: [],
      time3: "",
      taskCycle: "",
      executionStatus: 0,
      searchName: "",
      addList: [],
      cycleWeek: "",
      cycleMonth: "",
      deviceList: "",
      devNo: "",
      setCheck: [],
      type: null,
      priority: "1",
      filterText: "",
      filterText2: "",
      transferFilterMethod: (query, item) => {
        if (
          this.selectObjectAreaIdList &&
          this.selectObjectAreaIdList.length > 0
        ) {
          // 如果areaid不在选择范围内，则返回false
          if (this.selectObjectAreaIdList.indexOf(item.areaId) < 0) {
            return false;
          }
        }

        if (query) {
          return (
            item.deviceName.toLowerCase().indexOf(query.toLowerCase()) > -1
          );
        }
        return true;
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.treeForm.filter(val);
    },
    filterText2(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    listPatroltype().then((res) => {
      const list = [];
      let childs = [];
      let ptype = {};
      linq
        .from(res.rows)
        .where((x) => x.parentId === 0)
        .toArray()
        .forEach((node) => {
          childs = linq
            .from(res.rows)
            .where((c) => c.parentId === node.patrolTypeId)
            .select((q) => {
              return {
                id: q.patrolTypeCode,
                label: q.patrolTypeName,
              };
            })
            .toArray();
          ptype = {
            id: node.patrolTypeCode,
            isOpen: true,
            label: node.patrolTypeName,
            // isDisabled: false,
          };
          if (childs.length > 0) {
            ptype.children = childs;
            // ptype.isDisabled = true;
          }
          list.push(ptype);
        });

      this.listPatroltype = list;
      this.type = this.listPatroltype[0].id;
    });
    this.getList();
    // this.getInfo();
    if (this.weekormonth == "week") {
      this.taskCycle = 1;
    } else if (this.weekormonth == "month") {
      this.taskCycle = 0;
    }
  },
  computed: {
    maxintervalNumber() {
      try {
        var date = 24 - new Date(this.intervalExecuteTime).getHours();
        return date;
      } catch (error) {
        return 0;
      }
    },
  },
  methods: {
    onChangeWeekOrMonth() {
      this.changeDateList();
    },
    changeDateList() {
      if (!this.value1 || !this.value2) {
        return;
      }
      if (this.weekormonth == "month") {
        this.dayList = getDaysInRange(this.value1, this.value2);
      } else if (this.weekormonth == "week") {
        this.weekendList = getWeekdaysInRange(this.value1, this.value2);
      }
    },
    handleChangeTaskRunTimeWithMonth(t, item) {
      const sameArray = linq
        .from(this.timelist1)
        .where((x) => {
          return (
            x != item &&
            x.zhixing == item.zhixing &&
            new Date("2020-01-01 " + x.time).valueOf() ==
              new Date("2020-01-01 " + item.time).valueOf()
          );
        })
        .toArray();
      if (sameArray.length > 0) {
        this.$message({
          type: "warning",
          message: `${item.zhixing} ${item.time} 时间重复，已帮您重置。`,
        });
        item.time = null;
      }
    },
    handleChangeTaskRunDayWithMonth(item) {
      const sameArray = linq
        .from(this.timelist1)
        .where((x) => {
          return (
            x != item &&
            x.zhixing == item.zhixing &&
            new Date("2020-01-01 " + x.time).valueOf() ==
              new Date("2020-01-01 " + item.time).valueOf()
          );
        })
        .toArray();
      if (sameArray.length > 0) {
        this.$message({
          type: "warning",
          message: `${item.zhixing} ${item.time} 时间重复，已帮您重置。`,
        });
        item.zhixing = "";
      }
    },
    handleChangeTaskRunTime(t, item) {
      const sameArray = linq
        .from(this.timelist2)
        .where((x) => {
          return (
            x != item &&
            x.zhixing == item.zhixing &&
            new Date("2020-01-01 " + x.time).valueOf() ==
              new Date("2020-01-01 " + item.time).valueOf()
          );
        })
        .toArray();
      if (sameArray.length > 0) {
        this.$message({
          type: "warning",
          message: `${item.zhixing} ${item.time} 时间重复，已帮您重置。`,
        });
        item.time = null;
      }
    },

    handleChangeTaskRunDay(item) {
      const sameArray = linq
        .from(this.timelist2)
        .where((x) => {
          return (
            x != item &&
            x.zhixing == item.zhixing &&
            new Date("2020-01-01 " + x.time).valueOf() ==
              new Date("2020-01-01 " + item.time).valueOf()
          );
        })
        .toArray();
      if (sameArray.length > 0) {
        this.$message({
          type: "warning",
          message: `${item.zhixing} ${item.time} 时间重复，已帮您重置。`,
        });
        item.zhixing = "";
      }
    },

    handleChangeIntervalStartTime(t) {
      if (t == null || t == "") {
        return;
      }
      if (this.intervalEndTime != "" && this.intervalEndTime != null) {
        if (new Date(t).valueOf() >= new Date(this.intervalEndTime).valueOf()) {
          this.$nextTick(() => {
            this.intervalStartTime = "";
            this.$message({
              type: "warning",
              message: "起始时间要小于截止时间",
            });
          });
        }
      }
    },
    handleChangeIntervalEndTime(t) {
      if (t == null || t == "") {
        return;
      }
      if (this.intervalStartTime != "" && this.intervalStartTime != null) {
        if (
          new Date(t).valueOf() <= new Date(this.intervalStartTime).valueOf()
        ) {
          this.$nextTick(() => {
            this.intervalEndTime = "";
            this.$message({
              type: "warning",
              message: "截止时间要大于起始时间",
            });
          });
        }
      }
    },
    handleChangeStartTime(t) {
      if (t == null || t == "") {
        return;
      }
      if (this.value2 != "" && this.value2 != null) {
        if (new Date(t).valueOf() >= new Date(this.value2).valueOf()) {
          this.$nextTick(() => {
            this.value1 = "";
            this.$message({
              type: "warning",
              message: "起始时间要小于截止时间",
            });
          });
        }
      }

      this.changeDateList();
      // 日期改变，需要重新选择
      if (this.weekormonth == "month") {
        this.timelist1 = [{ zhixing: "", zhixing2: "", time: "" }];
      } else if (this.weekormonth == "week") {
        this.timelist2 = [{ zhixing: "", zhixing2: "", time: "" }];
      }
    },
    handleChangeEndTime(t) {
      if (t == null || t == "") {
        return;
      }
      if (this.value1 != "" && this.value1 != null) {
        if (new Date(t).valueOf() <= new Date(this.value1).valueOf()) {
          this.$nextTick(() => {
            this.value2 = "";
            this.$message({
              type: "warning",
              message: "截止时间要大于起始时间",
            });
          });
        }
      }

      this.changeDateList();
      // 日期改变，需要重新选择
      if (this.weekormonth == "month") {
        this.timelist1 = [{ zhixing: "", zhixing2: "", time: "" }];
      } else if (this.weekormonth == "week") {
        this.timelist2 = [{ zhixing: "", zhixing2: "", time: "" }];
      }
    },

    handleCheckAllChange(val) {
      if (this.checkAll) {
        this.$refs.treeForm.setCheckedNodes(this.areaList);
      } else {
        this.$refs.treeForm.setCheckedNodes([]);
      }
    },
    handleCheckPointAllChange(val) {
      if (this.checkPointAll) {
        this.$refs.tree.setCheckedNodes(this.setList);
      } else {
        this.$refs.tree.setCheckedNodes([]);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.areaName.indexOf(value) !== -1;
    },
    filterNode2(value, data, node) {
      if (!value) return true;
      let one = data.label.indexOf(value) !== -1;
      let two =
        node.parent &&
        node.parent.data &&
        node.parent.data.label &&
        node.parent.data.label.indexOf(value) !== -1;
      let three =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.data &&
        node.parent.parent.data.label &&
        node.parent.parent.data.label.indexOf(value) !== -1;
      let four =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.parent &&
        node.parent.parent.parent.data &&
        node.parent.parent.parent.data.label &&
        node.parent.parent.parent.data.label.indexOf(value) !== -1;

      let result_one = false;
      let result_two = false;
      let result_three = false;
      let result_four = false;
      if (node.level === 1) {
        result_one = one;
      } else if (node.level === 2) {
        result_two = one || two;
      } else if (node.level === 3) {
        result_three = one || two || three;
      } else if (node.level === 4) {
        result_four = one || two || three || four;
      }
      return result_one || result_two || result_three || result_four;
    },
    typeClick() {
      console.log(322, this.type);
    },
    linkUrl: function () {
      this.$emit("hideDialog");
    },
    treeClick() {
      let res = this.$refs.tree.getCheckedNodes();
      let arr = [];
      res.forEach((item) => {
        if (item.eqpbookId != null) {
          if (!arr.find((e) => e.eqpbookId == item.eqpbookId)) {
            arr.push(item);
          }
        }
      });

      // res.forEach((item) => {
      //   if (item.children) {
      //     item.children.forEach((items) => {
      //       arr.push(items);
      //     });
      //   }
      // });
      this.addList = arr;
    },
    saveClick: function () {
      let data = {};
      let res = this.$refs.tree.getCheckedNodes(true);
      this.addList = res;
      if (this.addList.length == 0) {
        this.$modal.msgError("请选择巡视设备");
      } else {
        var bool = this.addList.every((child) => {
          return child.eqpbookId;
        });
        if (!bool) {
          this.$modal.msgError("请选择巡视设备");
          return;
        }
        // let li = [];
        // this.addList.map((d) => {
        //   if (d.eqpbookId != null) {
        //     li.push(d);
        //   }
        // });
        if (this.radio == 1) {
          this.executionStatus = 2;
        } else if (this.radio == 2) {
          this.executionStatus = 1;
        } else if (this.radio == 3) {
          // this.executionStatus = 0;
          this.executionStatus = 4;
        }
        data = {
          priority: this.priority,
          deviceList: this.value5.join(","),
          taskName: this.input3,
          executionMode: 0,
          cycleEndTime: this.value2,
          cycleStartTime: this.value1,
          cycleExecuteTime: this.time3,
          fixedStartTime: this.value11,
          taskCycle: this.taskCycle,
          executionStatus: this.executionStatus,
          prevPoints: this.addList,
          areaId: this.queryParams.areaId,
          areaIdS: this.selectAreaIdList.join(","),
          areaName: this.queryParams.areaName,
          cycleWeek: this.cycleWeek,
          cycleMonth: this.cycleMonth,
          isenable: this.beginradio,
          type: this.type,
          intervalStartTime: this.intervalStartTime,
          intervalEndTime: this.intervalEndTime,
          intervalExecuteTime: this.intervalExecuteTime,
          intervalType: this.intervalType,
          intervalNumber: this.intervalNumber,
        };

        addPatrol(data)
          .then((res) => {
            this.$modal.msgSuccess("添加成功");
            this.$emit("addSuccess");
          })
          .catch((res) => {});
      }
    },
    getList: function () {
      listArea(this.queryParams).then((response) => {
        this.areaList = this.handleTree(response.data, "areaId");
      });
    },
    getList1: function () {
      // listArea(this.queryParams).then((response) => {
      //   this.areaList1 = this.handleTree(response.data, "areaId");
      // });

      const areaIdS = this.selectAreaIdList.join(",");
      listArea({ areaIdS }).then((response) => {
        this.areaList1 = this.handleTree(response.data, "areaId");
        if (this.areaList1.length > 0) {
          // this.$refs.areatree.setCurrentKey(this.areaList1[0].areaId);
          // this.handleNodeClick1(this.areaList1[0]);
          this.tree();
        }
      });
    },
    tree(areaId = "") {
      let areaIdS = areaId;
      if (!areaIdS) {
        areaIdS = this.selectAreaIdList.join(",");
      }
      equipmentree({ areaIdS }).then((response) => {
        this.treeList = response.data;
      });
    },
    searchClick: function () {
      // this.queryParams.areaName = this.searchName;
      const areaIdS = this.selectAreaIdList.join(",");
      var obj = { ...this.queryParams, areaIdS };
      obj.areaName = this.searchName;
      this.selectObjectAreaIdList = [];
      listArea(obj).then((response) => {
        this.areaList1 = this.handleTree(response.data, "areaId");
      });
    },

    handleObjectTreeChecked(data, checked, node) {
      // this.queryParams.areaId = data.areaId;
      // this.queryParams.areaName = data.areaName;
      // this.tree();

      const idx = this.selectObjectAreaIdList.indexOf(data.areaId);
      if (idx >= 0) {
        this.selectObjectAreaIdList.splice(idx, 1);
      } else {
        this.selectObjectAreaIdList.push(data.areaId);
      }
    },
    next1() {
      let arr = [];
      let timeArr = [];
      let arr1 = [];

      if (this.weekormonth == "week") {
        this.taskCycle = 1;
        this.timelist2.forEach((item) => {
          if (item.zhixing) {
            arr.push(item.zhixing);
            timeArr.push(item.time);
          }
        });
      } else if (this.weekormonth == "month") {
        this.taskCycle = 0;
        this.timelist1.forEach((item) => {
          if (item.zhixing) {
            arr1.push(item.zhixing);
            timeArr.push(item.time);
          }
        });
      }

      this.cycleMonth = arr1.toString();
      this.cycleWeek = arr.toString();
      this.time3 = timeArr.join(",");
      if (this.input3 == "") {
        this.$modal.msgError("请填写名称");
        return false;
      }
      if (!this.type) {
        this.$modal.msgError("请选择任务类型");
        return false;
      }
      if (this.checked == false) {
        this.$modal.msgError("请选择任务执行方式");
        return false;
      }
      this.selectAreaIdList = [
        ...this.$refs.treeForm.getCheckedKeys(),
        // ...this.$refs.treeForm.getHalfCheckedKeys(),
      ];
      if (this.selectAreaIdList.length <= 0) {
        this.$modal.msgError("请选择巡检区域");
        return false;
      }
      if (this.radio == 1) {
        if (!this.value11) {
          this.$modal.msgError("请选择执行时间");
          return false;
        }
      }
      if (this.radio == 2) {
        if (this.value1 == "" || this.value2 == "") {
          this.$modal.msgError("请选择计划有效期");
          return false;
        }
        if (new Date(this.value1) >= new Date(this.value2)) {
          this.$modal.msgError("计划有效期开始时间不能大于等于结束时间");
          return false;
        }

        if (this.weekormonth == "week") {
          for (let index = 0; index < this.timelist2.length; index++) {
            const element = this.timelist2[index];
            if (!element.zhixing) {
              this.$modal.msgError("请选择日期");
              return;
            }
            if (!element.time) {
              this.$modal.msgError("请选择时间");
              return;
            }
          }
        }
        if (this.weekormonth == "month") {
          for (let index = 0; index < this.timelist1.length; index++) {
            const element = this.timelist1[index];
            if (!element.zhixing) {
              this.$modal.msgError("请选择日期");
              return;
            }
            if (!element.time) {
              this.$modal.msgError("请选择时间");
              return;
            }
          }
        }

        if (!this.time3) {
          this.$modal.msgError("请选择时间");
          return;
        }
      }
      if (this.radio == 3) {
        if (this.intervalStartTime == "" || this.intervalEndTime == "") {
          this.$modal.msgError("请选择间隔");
          return false;
        }

        // if (new Date(this.value1) > new Date(this.value2)) {
        //   this.$modal.msgError("计划有效期开始时间不能大于结束时间");
        //   return false;
        // }
        if (
          new Date(this.intervalStartTime) >= new Date(this.intervalEndTime)
        ) {
          this.$modal.msgError("间隔开始时间不能大于结束时间");
          return false;
        }

        if (new Date(this.intervalStartTime) < new Date(this.value1)) {
          this.$modal.msgError("计划开始时间不能小于间隔开始时间");
          return false;
        }

        // if (new Date(this.intervalEndTime) > new Date(this.value2)) {
        //   this.$modal.msgError("间隔结束时间不能大于计划结束时间");
        //   return false;
        // }

        if (!this.intervalExecuteTime) {
          this.$modal.msgError("请选择执行时间");
          return false;
        }

        // 提取时间
        const startTime = this.intervalStartTime.split(" ")[1];
        if (startTime > this.intervalExecuteTime) {
          this.$modal.msgError("执行时间需大于间隔开始时间");
          return false;
        }

        if (
          24 - new Date(this.intervalExecuteTime).getHours() <
          this.intervalNumber
        ) {
          this.$modal.msgError("间隔数量过大");
          return false;
        }
      }
      if (this.active++ > 2) this.active = 0;
      this.getList1();
    },
    next() {
      if (this.value5.length == 0) {
        this.$modal.msgError("请选择巡检对象");
        return;
      }
      if (this.type == "6") {
        if (this.value5.length > 1) {
          this.$modal.msgError("为静默状态只允许添加一条");
          return false;
        }
      }
      if (this.active++ > 2) this.active = 0;
      if (this.active == 3) {
        equSelect({
          deviceIdAll: this.value5.join(","),
          eqbookCode: this.devNo,
        }).then((response) => {
          this.setList = response.data;
          this.checkPointAll = false;
        });
      }
    },
    prev() {
      this.active--;
    },
    handleChange(value, direction, movedKeys) {
      let rightArr = [];
      for (let i = 0; i < this.value5.length; i++) {
        rightArr.push(this.value5[i]);
      }
      rightArr.splice(0, 1);
      this.queryParams.deviceIdAll = rightArr.toString();
    },
    add1() {
      if (this.weekormonth == "month") {
        // if (this.timelist1.length < 31) {
          this.timelist1.push({ zhixing: "", time: "" });
        // }
      } 
      // else if (this.weekormonth == "week") {
      //   if (this.timelist2.length < 7) {
          this.timelist2.push({ zhixing: "", time: "" });
      //   }
      // }
    },
    delete1(idx) {
      if (this.weekormonth == "month") {
        if (this.timelist1.length > 1) {
          this.timelist1.splice(idx, 1);
        }
      } else if (this.weekormonth == "week") {
        if (this.timelist2.length > 1) {
          this.timelist2.splice(idx, 1);
        }
      }
    },
    handleCheckChange(data, checked, node) {
      // console.log('handleCheckChange', data);
      // const idx = this.selectAreaIdList.indexOf(data.areaId)
      // if (idx >= 0) {
      //   this.selectAreaIdList.splice(idx, 1)
      // }
      // else {
      //   this.selectAreaIdList.push(data.areaId)
      // }
    },
  },
};
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  display: none;
}
// 树的高度
.el-tree {
  height: 300px;
  overflow: scroll;
  // border: 1px solid red;
}
::v-deep {
  .el-checkbox__label {
    font-size: 16px;
  }

  .el-tree-node__label {
    font-size: 16px;
  }

  .el-tree-node__content {
    margin: 10px 0;
  }

  .el-radio__label {
    font-size: 16px;
  }

  .el-step__title.is-process {
    // color: #ffffff; 
  }

  .vue-treeselect__control {
    // background-color: #070a38;

    &:hover {
      // background-color: #070a38;
    }
  }

  .vue-treeselect__single-value {
    // color: #ffffff;
  }

  .vue-treeselect__menu {
    color: #ffffff;
    background-color: #202f3e;
    border: 1px solid #40486a;
  }

  .vue-treeselect__menu div {
    color: #ffffff;
    background-color: #202f3e;

    &:hover {
      color: #ffffff;
      background-color: RGBA(23, 37, 51, 1);
    }
  }

  .el-transfer-panel {
    // background-color: #070a38;
    // border-color: #0e66f1;
  }

  .el-transfer-panel .el-transfer-panel__header {
    // background-color: #001946;
    // border-color: #0e66f1;
    // color: #ffffff;
  }

  .el-checkbox__label {
    // color: #ffffff !important;
  }
}

.task {
  width: 90%;
  margin: 0 auto;
  height: 896px;
  display: flex;
  flex-direction: column;

  .ac-on1 {
    width: 100%;
    margin: 20px auto 0;
    padding-top: 20px;
    padding-bottom: 50px;
    .ac-one1-right {
      float: right !important;
    }
    .ac-on1-box {
      width: 45%;
      float: left;
      // margin: 0 auto;

      .choose {
        margin-bottom: 20px;
        margin-top: 20px;
      }

      .mb {
        margin-bottom: 20px;
      }

      .a1 {
        // color: #1a1a1a;
        font-size: 20px;
        margin-bottom: 20px;
        text-align: left;
        font-weight: bold;
      }

      .a2 {
        text-align: left;
        margin-bottom: 20px;
        display: block;
        font-size: 14px;
        // color: #fff;
        line-height: 40px;
        box-sizing: border-box;

        span {
          color: #fa3239;
        }

        button {
          margin-left: 20px;
        }
      }

      .a3 {
        width: 100%;
        display: block;
        margin-bottom: 30px;
      }

      .block {
        width: 100%;
        margin-bottom: 20px;

        .el-date-editor {
          width: 40%;
        }
      }

      .grid-content {
        font-size: 16px;
      }

      .line {
        margin-top: 20px;

        .el-date-editor.el-input {
          width: 100%;
        }

        .fs {
          font-size: 18px;
          margin-top: 8px;
          margin-left: 20px;
          cursor: pointer;
        }
      }
    }
  }

  .ac-on2 {
    width: 100%;
    padding: 30px;
    margin-top: 30px;
    min-height: 500px;
    border: 1px solid #40486a;

    .ac-on2-box {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .ac2-d1 {
        width: 320px;

        .ac2-d1-e1 {
          font-size: 16px;
          margin-bottom: 10px;
        }

        .search {
          width: 100%;
          position: relative;
          margin-bottom: 20px;

          input {
            width: 78%;
          }

          .button {
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }
      }

      .ac2-d2 {
        flex: 1;
      }
    }

    .ac-on2-btn {
      display: flex;
      justify-content: flex-end;
      margin-top: 60px;
    }
  }

  .ac-on3 {
    width: 100%;
    padding: 50px 100px;
    margin-top: 30px;
    min-height: 500px;
    border: 1px solid #40486a;

    .ac-on2-btn {
      margin-top: 50px;
    }

    .a2 {
      text-align: left;
      margin-bottom: 20px;
      display: block;
      font-size: 14px;
      // color: #fff;
      line-height: 40px;
      box-sizing: border-box;

      span {
        color: #fa3239;
      }
    }
  }
}

.treeitem >>> .el-tree-node__label {
  font-size: 16px;
}
</style>

<style scoped>
.vue-treeselect__control {
  background-color: rgb(0, 1, 1, 0) !important;
  border: 1px solid #40486a !important;
}

.el-tree-node__content:hover {
  background: RGBA(23, 37, 51, 1) !important;
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: RGBA(23, 37, 51, 1) !important;
}

.el-picker-panel {
  background: #202f3e !important;
  border: 1px solid #40486a !important;
}

.el-picker-panel__footer {
  background: #202f3e !important;
}

.el-date-picker__time-header {
  border-bottom: 1px solid #40486a !important;
}

.el-date-table th {
  border-bottom: 1px solid #40486a !important;
}

.el-picker-panel__footer {
  border-top: 1px solid #40486a !important;
}

.el-popper[x-placement^="top"] .popper__arrow::after {
  border-top-color: #40486a !important;
}

.el-time-panel__footer {
  border-top: 1px solid #40486a !important;
}

.el-button--medium,
.el-button.is-plain {
  /* background-color: #247382 !important; */
  border: 1px solid #247382 !important;
}

.el-time-panel {
  background-color: #202f3e !important;
  border: 1px solid #40486a !important;
}

.el-date-table td.disabled div {
  background: RGBA(23, 37, 51, 1) !important;
}

.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #40486a !important;
}

.el-input-number--medium .el-input-number__increase {
  background-color: rgb(1, 1, 1, 0) !important;
}

.el-transfer-panel {
  /* background-color: #202f3e !important; */
  border-color: #40486a !important;
  /* border: 1px solid red; */
  width: 230px !important;
}

.el-transfer-panel__header {
  background-color: #202f3e !important;
  border-color: #40486a !important;
}

.el-step__head.is-finish {
  color: #37cbd6 !important;
  border-color: #37cbd6 !important;
}

.el-message-box {
  background-color: #202f3e !important;
  border: 1px solid #40486a !important;
}

.el-button--small {
  /* background-color: #247382 !important; */
  border: none !important;
}

.el-step__title.is-finish {
  color: #37cbd6 !important;
}

.el-input__inner {
  border-color: #40486a !important;
}

.el-select-dropdown {
  background-color: #202f3e !important;
  border: 1px solid #40486a !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: RGBA(23, 37, 51, 1) !important;
}
</style>
