<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="1" :limitText="(count) => `+${count}`" v-model="type"
              :options="listPatroltype" :show-count="true" placeholder="请选择巡检类型" />
            <!-- <el-select class="a3" v-model="type" placeholder="请选择">
              <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>
            <el-tree :filter-node-method="filterNode" :props="defaultProps2" default-expand-all ref="treeForm"
              :data="areaList" show-checkbox node-key="areaId" @check-change="handleCheckChange">
            </el-tree>
          </template>
          <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" placeholder="选择开始日期" @change="handleChangeStartTime"
                value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions0">
              </el-date-picker>
              -
              <el-date-picker v-model="value2" type="datetime" placeholder="选择结束日期" @change="handleChangeEndTime"
                value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions1">
              </el-date-picker>
            </div>

            <!-- <el-input-number
              v-if="intervalType == 2"
              v-model="intervalNumber"
            ></el-input-number> -->
            <div class="a2">任务执行周期 <span>*</span></div>
            <template>
              <el-select class="a3" v-model="weekormonth" 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 }}/31)
              </el-button>
              <el-button type="primary" @click="add1" v-if="weekormonth == 'week'">添加({{ timelist2.length }}/7)
              </el-button>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">日期</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">时间</div>
              </el-col>
              <el-col :span="6">
                <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="handleChangeTaskRunDay(item)" placeholder="请选择">
                    <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                    </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) }"
                      :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" placeholder="请选择">
                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-time-picker v-model="item.time" 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"
                @change="intervalNumber = 0">
              </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"></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 ref="areatree" :data="areaList1" node-key="areaId" :props="defaultProps1" check-strictly
              show-checkbox @check-change="handleObjectTreeChecked"></el-tree>
          </div>
          <div class="ac2-d2">
            <!-- selectObjectAreaIdList : {{ selectObjectAreaIdList }}  -->
            <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" :content="option.deviceName">
                    <span> {{ option.deviceName }}</span>
                  </el-tooltip>
                </template>
              </el-transfer>
            </div>

          </div>
        </div>
        <div class="ac-on2-btn">
          <el-button @click="prev">上一步</el-button>
          <el-button type="primary" @click="next">下一步</el-button>
        </div>
      </div>
      <div class="ac-on3" v-show="active == 3">
        <div class="ac-on3-box">
          <!-- @check-change="treeClick" -->
          <el-input placeholder="输入关键字进行过滤" v-model="filterText2">
          </el-input>
          <el-checkbox style="margin-top: 10px" v-model="checkPointAll" @change="handleCheckPointAllChange">全选
          </el-checkbox>
          <el-tree style="height: 400px; overflow-y: auto" :filter-node-method="filterNode2" :data="setList" ref="tree"
            show-checkbox default-expand-all node-key="dataId" :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,
} 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";
export default {
  name: "new_task",
  data () {
    return {
      checkAll: false,
      checkPointAll: false,
      priority: "1",
      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;
        },
      },
      typeOptions: [
        {
          value: "1",
          label: "例行巡视",
        },
        {
          value: "2",
          label: "特殊巡视",
        },
        {
          value: "3",
          label: "专项巡视",
        },
        {
          value: "4",
          label: "自定义巡视",
        },
        {
          value: "5",
          label: "联动巡视",
        },
        {
          value: "6",
          label: "静默类型",
        },
      ],
      dateShow: true,
      beginradio: "0",
      input3: "",
      active: 1,
      radio: "1",
      checked: true,
      zhixing: "选择",
      options3: [
        {
          value: "星期一",
          label: "周一",
        },
        {
          value: "星期二",
          label: "周二",
        },
        {
          value: "星期三",
          label: "周三",
        },
        {
          value: "星期四",
          label: "周四",
        },
        {
          value: "星期五",
          label: "周五",
        },
        {
          value: "星期六",
          label: "周六",
        },
        {
          value: "星期日",
          label: "周日",
        },
      ],
      zhixing2: "选择",
      options4: [
        {
          value: "1号",
          label: "1号",
        },
        {
          value: "2号",
          label: "2号",
        },
        {
          value: "3号",
          label: "3号",
        },
        {
          value: "4号",
          label: "4号",
        },
        {
          value: "5号",
          label: "5号",
        },
        {
          value: "6号",
          label: "6号",
        },
        {
          value: "7号",
          label: "7号",
        },
        {
          value: "8号",
          label: "8号",
        },
        {
          value: "9号",
          label: "9号",
        },
        {
          value: "10号",
          label: "10号",
        },
        {
          value: "11号",
          label: "11号",
        },
        {
          value: "12号",
          label: "12号",
        },
        {
          value: "13号",
          label: "13号",
        },
        {
          value: "14号",
          label: "14号",
        },
        {
          value: "15号",
          label: "15号",
        },
        {
          value: "16号",
          label: "16号",
        },
        {
          value: "17号",
          label: "17号",
        },
        {
          value: "18号",
          label: "18号",
        },
        {
          value: "19号",
          label: "19号",
        },
        {
          value: "20号",
          label: "20号",
        },
        {
          value: "21号",
          label: "21号",
        },
        {
          value: "22号",
          label: "22号",
        },
        {
          value: "23号",
          label: "23号",
        },
        {
          value: "24号",
          label: "24号",
        },
        {
          value: "25号",
          label: "25号",
        },
        {
          value: "26号",
          label: "26号",
        },
        {
          value: "27号",
          label: "27号",
        },
        {
          value: "28号",
          label: "28号",
        },
        {
          value: "29号",
          label: "29号",
        },
        {
          value: "30号",
          label: "30号",
        },
        {
          value: "31号",
          label: "31号",
        },
      ],
      value: "第一间隔单元",
      value1: "",
      value2: "",
      value11: "",
      options1: [
        {
          value: "week",
          label: "按周选择",
        },
        {
          value: "month",
          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: "",
      type: null,
      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);
    },
  },
  components: { TreeSelect },
  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();
    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: {
    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: "起始时间要小于截止时间"
            });
          })
        }
      }
    },
    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: "截止时间要大于起始时间"
            });
          })
        }
      }
    },
    handleCheckAllChange (val) {
      if (this.checkAll) {
        this.$refs.treeForm.setCheckedNodes(this.areaList);
      } else {
        this.$refs.treeForm.setCheckedKeys([]);
      }
    },
    handleCheckPointAllChange (val) {
      console.log(this.setList, this.checkPointAll);
      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;
    },
    // filterNode2(value, data) {
    //   console.log(data);
    //   if (!value) return true;
    //   return data.label.indexOf(value) !== -1;
    // },
    typeClick () {
      console.log(322, this.type);
    },
    linkUrl: function () {
      this.$emit("hideDialog");
    },
    treeClick () {
      let res = this.$refs.tree.getCheckedNodes(true);
      console.log(res);
      let arr = [];
      res.forEach((item) => {
        if (item.eqpbookId != null) {
          if (!arr.find((e) => e.eqpbookId == item.eqpbookId)) {
            arr.push(item);
          }
        }
      });
      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 () {
      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;
      var obj = { ...this.queryParams };
      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 () {
      if (this.weekormonth == "week") {
        this.taskCycle = 1;
      } else if (this.weekormonth == "month") {
        this.taskCycle = 0;
      }
      let arr = [];
      let timeArr = [];
      this.timelist2.forEach((item) => {
        if (item.zhixing) {
          arr.push(item.zhixing);
          timeArr.push(item.time);
        }
      });
      let arr1 = [];
      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(),
      ];
      console.log("this.selectAreaIdList", this.selectAreaIdList);
      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;
        }

        if (
          24 - new Date(this.intervalExecuteTime).getHours() <
          this.intervalNumber
        ) {
          this.$modal.msgError("间隔数量过大");
          return false;
        }
      }

      if (this.active++ > 2) this.active = 0;
      this.value5 = [];
      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(this.queryParams).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]);
      }
      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">
::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;
    border-color: #0e66f1;

    &:hover {
      // background-color: #070a38;
      border-color: #0e66f1 !important;
    }
  }

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

  .vue-treeselect__menu {
    // color: #ffffff;
    // background-color: #070a38;
  }

  .vue-treeselect__menu div {
    // color: #ffffff;
    // background-color: #070a38;

    &:hover {
      color: #ffffff;
      background-color: #0e66f1;
    }
  }

  .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: 100%;
  display: flex;
  flex-direction: column;

  .ac-on1 {
    width: 100%;
    margin: 20px auto 0;
    padding-top: 20px;
    padding-bottom: 50px;

    .ac-on1-box {
      width: 90%;
      margin: 0 auto;

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

      .mb {
        margin-bottom: 20px;
      }

      .a1 {
        // color: #ffffff;
        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: #ffffff;
        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%;
    // background: #070a38;
    padding: 30px;
    margin-top: 30px;
    min-height: 500px;

    .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: 50px;
    }
  }

  .ac-on3 {
    width: 100%;
    padding: 30px;
    margin-top: 30px;
    min-height: 500px;
    // background: #070a38;
    box-sizing: border-box;

    .ac-on3-box {
      // background: #070a38;
    }

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

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

      span {
        color: #fa3239;
      }
    }
  }
}

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