<template>
  <div class="app-container reportSet">
    <!-- <el-form
      :model="queryParams"
      ref="queryParams"
      size="mini"
      :inline="true"
      :rules="queryRules"
      v-show="showSearch"
      label-width="78px">
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery('queryParams')"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <div class="tips">
          <div>注意：1、点击对应日期设置是否允许填写汇报！</div>
          <div style="padding-left: 50px">2、今天和过去日期禁止修改。</div>
          <div style="padding-left: 50px">
            3、<span class="red colorLump"></span>红色为不允许填写，<span
              class="green colorLump"></span
            >蓝色为允许填写。
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->
    <el-row :gutter="10" class="mb8" v-loading="rowLoaing">
      <el-calendar class="myCalendar" v-model="calendarValue" style="width: 60%; margin-left: 20%">
        <div
          slot="dateCell"
          slot-scope="{ data }"
          class="dateCell"
          @click="calendarClick(data)"
          :class="initSetDayClass(data)">
          <div class="calendarDay">
            {{ data.day.split('-').slice(2).join('-') }}
          </div>
          <!-- <div class="calendarNum">({{ visitCountFn(data.day) }})</div> -->
        </div>
      </el-calendar>
    </el-row>
    <!-- <el-table v-loading="loading" :data="visitPlanList">
      <el-table-column label="计划拜访日期" align="center" prop="genDate" width="120" />
      <el-table-column label="门店名称" align="center" prop="storeName" />
      <el-table-column label="门店编号" align="center" prop="storeCode" width="100" />
      <el-table-column label="门店地址" align="center" prop="addressLine" />
      <el-table-column label="拜访顺序" align="center" prop="sort" width="90" />
      <el-table-column label="联系人" align="center" prop="contactName" width="90" />
      <el-table-column label="电话" align="center" prop="telephone" width="120" />
    </el-table> -->

    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="visitPlanListData" /> -->
  </div>
</template>

<script>
import tree from '@/views/components/sfa/treeselectParent';
import user from '@/views/components/sfa/user';
import { getReportSetList, addReportSet } from '@/api/system/reportSet';

export default {
  name: 'VisitPlan',
  components: { tree, user },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 线路表格数据
      visitPlanList: [],
      // 弹出层标题
      title: '',

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryRules: {},
      personNameOptions: [],
      personLoading: false,
      personList: [],
      // 表单参数
      form: {},
      // 菜单树选项
      menuOptions: [],

      calendarValue: '',
      calendarData: [],
      validTree: true,
      isSelectedFlag: true,
      selectedDates: [], // 用于存储选中的日期
      firstDayMonth: '',
      rowLoaing: true,
    };
  },
  watch: {
    'queryParams.orgIds': {
      handler: function (newValue, oldValue) {
        // if(newValue.length > 0){
        //     // this.getSelectUserRouteListData();、
        // }
        // this.userIdFocus();
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(1)'
      );
      prevBtn.addEventListener('click', (e) => {
        this.getList();
      });

      //     //点击下一个月
      let nextBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(3)'
      );
      nextBtn.addEventListener('click', () => {
        this.setFirstDayMonth(2);
        this.getList();
      });

      //点击今天
      let todayBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(2)'
      );
      todayBtn.addEventListener('click', () => {
        this.setFirstDayMonth(1);
        this.getList();
      });
    });
  },
  mounted() {
    this.setFirstDayMonth(1);
    this.getList();
  },
  methods: {
    setFirstDayMonth() {
      console.log(document.querySelector('.el-calendar__title').innerText);
      //   获取当前月第一天
      this.firstDayMonth =
        document
          .querySelector('.el-calendar__title')
          .innerText.replace(new RegExp(/( )/g), '')
          .replace(/[年月]/g, '-') + '01';
    },
    getList() {
      this.rowLoaing = true;
      this.selectedDates = [];
      getReportSetList({
        reportSetTime: this.firstDayMonth,
      }).then((response) => {
        if (response.data) {
          response.data.forEach((val, ind) => {
            this.selectedDates.push({
              day: val.reportSetTime, //汇报设置的时间
              isFlag: val.reportSetType ? 'is-red' : 'is-green', //汇报设置类型：0-不生成 1-生成
            });
          });
        }
        this.rowLoaing = false;
      });
    },
    visitCountFn(day) {
      let visitCount = 0;
      if (
        this.calendarData !== undefined &&
        this.calendarData !== null &&
        this.calendarData.length > 0
      ) {
        this.calendarData.forEach((item, index) => {
          if (item.genDate == day) {
            visitCount = item.visitCount;
          }
        });
      } else {
        visitCount = 0;
      }
      return visitCount;
    },
    visitPlanListData() {
      this.loading = true;
      this.visitPlanList = [];
      let obj = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };
      getSelectRouteDetailStoreList(obj).then((response) => {
        console.log(response);
        this.visitPlanList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].validate((valid) => {});
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryParams');
      this.handleQuery();
    },
    // 根据拜访规则生成人员门店拜访详细记录
    createRouteDetailsFn() {
      const loading = this.$loading({
        lock: true,
        body: true,
        text: 'Loading正在生成中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      let obj = {
        userId: this.queryParams.userId,
      };
      createRouteDetails(obj).then((response) => {
        loading.close();
        this.$modal.msgSuccess('生成成功');
        this.getList();
      });
    },
    resetQueryData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.createRouteDetailsFn();
        }
      });
    },
    calendarClick(data) {
      console.log(data);
      if (data.disabled) return;
      this.rowLoaing = true;
      let index = -1;
      this.selectedDates.forEach((val, ind) => {
        if (val.day == data.day) {
          index = ind;
        }
      });
      if (index == -1) {
        // 如果日期未被选中，并且是红色未选中状态，则添加到选中数组
        this.selectedDates.push(data);
      } else {
        // 如果日期已被选中，则移除
        this.selectedDates.splice(index, 1);
      }
      this.addReportSetFun(data);
    },
    clickSetDayClass() {},
    // 设置日历多选颜色
    initSetDayClass(data) {
      let isWeekend = new Date(data.day).getDay();
      let classData = {};
      // 初始化需要
      // 日期是周末的默认红色
      if (isWeekend == 6 || isWeekend == 0) {
        classData['is-red'] = true;
        this.$set(data, 'isFlag', 'is-red');
      } else {
        classData['is-green'] = true;
        this.$set(data, 'isFlag', 'is-green');
      }
      let index = -1;
      let activeData = null;
      this.selectedDates.forEach((val, ind) => {
        if (val.day == data.day) {
          index = ind;
          activeData = val;
        }
      });
      if (index != -1) {
        classData = {};
        if (activeData.isFlag == 'is-red') {
          classData['is-green'] = true;
          this.$set(data, 'isFlag', 'is-green');
        } else {
          classData['is-red'] = true;
          this.$set(data, 'isFlag', 'is-red');
        }
      }
      //   小于等于当前日期的不允许修改
      let dataTime = new Date().getTime();
      if (new Date(data.day).getTime() <= dataTime) {
        this.$set(data, 'disabled', true);
        classData['isDisabled'] = true;
      }
      return classData;
    },
    // 新增汇报时间设置接口
    addReportSetFun(data) {
      this.rowLoaing = true;
      addReportSet({
        reportSetTime: data.day, //Date	汇报设置时间:yyyy-MM-dd格式，取当前选中的时间日期，如：2024-11-13
        reportSetType: data.isFlag == 'is-red' ? 1 : 0, //Long	汇报设置类型：0-不生成 1-生成
      }).then((res) => {
        this.rowLoaing = false;
        this.$modal.msgSuccess('设置成功');
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.calendarNum {
  position: absolute;
  top: 6px;
  right: 6px;
}
.calendarDay {
  font-size: 16px;
  /*color: #0072C6;*/
  font-weight: bold;
  position: absolute;
  left: 8px;
  bottom: 8px;
}
.tips {
  color: #666;
  .colorLump {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: -1px;
    margin-right: 3px;
  }
  .red {
    background: red;
  }
  .green {
    background: #409eff;
  }
}
</style>
<style lang="scss">
.reportSet {
  .dateCell {
    height: 50px;
    padding: 8px;
    box-sizing: border-box;
  }
  .current {
    .is-green {
      background: rgb(64 158 255);
      color: #fff;
    }
    .is-red {
      background: #ff4040;
      color: #fff;
    }
    .isDisabled {
      cursor: no-drop;
      &::before {
        content: '';
        background: rgba(139, 137, 137, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
  .el-calendar-table td.is-today {
    /*color: #FFF;*/
  }
  .el-calendar-table .el-calendar-day {
    padding: 0;
  }
  .el-calendar-table .el-calendar-day:hover {
    cursor: pointer;
    background-color: rgb(64 158 255);
    color: #fff;
  }
  .el-calendar-table:not(.is-range) td.next {
    display: none;
  }

  .el-calendar-table:not(.is-range) td.prev {
    visibility: hidden;
  }
  .el-button-group {
    .el-button:first-child {
      display: none;
    }
  }
}
</style>
