<template>
  <div class="meta-filtration-wrap">
    <van-overlay :show="showFiltration" :lock-scroll="false">
      <div
        class="filtration-wrapper"
        :style="'margin-top:' + wrapperTop + 'vw;'"
      >
        <div class="meta-filtration-main">
          <div class="filtration-header">
            <div class="title">筛选条件</div>
            <svg-icon
              class="close-icon"
              :icon-class="'关闭'"
              @click.stop="closeFiltration()"
            ></svg-icon>
          </div>
          <!-- 日期选择器部分 -->
          <div class="filtration-body">
            <template v-if="showOnlyDate">
              <div>
                <div class="check-date-only" @click="isShowOnlyDate = true">
                  <!-- 单独时间 -->
                  <div class="check-item-title">
                    <div class="title">{{ onlyDateData.title }}</div>
                    <div class="placeholder">{{ currentOnlyDate }}</div>
                  </div>
                  <svg-icon :icon-class="'右箭头'"></svg-icon>
                </div>
              </div>
            </template>
            <template v-if="showDatePickerTomultiple">
              <div class="title">提报日期</div>
              <div class="content">
                <!-- 日期选择器内选择近期时间按钮 -->
                <div
                  class="check-item"
                  v-for="(item, index) in checkDateList"
                  :key="index"
                  :class="checkDateActive == index ? 'check-item-active' : ''"
                  @click="getNearDate(item, index)"
                >
                  {{ item.name }}
                </div>
                <div class="check-date">
                  <!-- 开始时间 -->
                  <div
                    class="check-date-picker"
                    @click="showDatePicker('prve')"
                  >
                    {{ currentPrevDate }}
                  </div>
                  <div>-</div>
                  <!-- 结束时间 -->
                  <div
                    class="check-date-picker"
                    @click="showDatePicker('next')"
                  >
                    {{ currentNextDate }}
                  </div>
                </div>
              </div>
            </template>
            <!-- 枚举选择器 -->
            <template v-for="task in taskStatusNameList" :key="task">
              <div class="title">{{ task.name }}</div>
              <div class="content">
                <div
                  class="check-item"
                  v-for="item in taskStatusData[task.key]"
                  :key="item.value"
                  @click="checkTaskStatusFun(item, task)"
                  :class="
                    checkTaskStatusActive &&
                    checkTaskStatusActive[task.key] &&
                    checkTaskStatusActive[task.key].indexOf(item.value) > -1
                      ? 'check-item-active'
                      : ''
                  "
                >
                  {{ item.text }}
                </div>
                <template
                  v-if="
                    taskStatusData[task.key] &&
                    taskStatusData[task.key].length &&
                    taskStatusData[task.key].length % 4 > 0
                  "
                >
                  <div
                    v-for="sup in 4 - (taskStatusData[task.key].length % 4)"
                    :key="sup"
                    class="check-item check-item-supplement"
                  ></div>
                </template>
              </div>
            </template>
            <!-- 树形多选组件入口 -->
            <template v-if="checkTreeList && checkTreeList.length">
              <div class="title">{{ checkInfoTitle }}</div>
              <div>
                <ul class="check-info-list">
                  <li
                    v-for="(item, index) in checkTreeList"
                    :key="item"
                    @click="showCheckInfo(item, index)"
                    :class="checkInfoActive == index ? 'check-info-active' : ''"
                  >
                    <div class="check-info-title check-item-title">
                      <div class="title">
                        <span>{{ item.name }}</span>
                        <span v-if="checkTreeNum[item.treeKey]"
                          >（{{ checkTreeNum[item.treeKey] }}个）</span
                        >
                      </div>
                      <div class="placeholder">
                        {{ item.placeholder || "请选择" }}
                      </div>
                    </div>
                    <svg-icon :icon-class="'右箭头'"></svg-icon>
                  </li>
                </ul>
              </div>
            </template>
            <!-- 底部保存筛选条件弹出框部分 -->
            <div
              class="title"
              v-show="combinationList && combinationList.length"
            >
              保存筛选条件
            </div>
            <div v-show="combinationList && combinationList.length">
              <ul class="meta-filtration-combination">
                <li v-for="item in combinationList" :key="item.searchid">
                  <div class="item-title" @click.stop="combinationClick(item)">
                    {{ item.searchname }}
                  </div>
                  <div
                    class="item-close"
                    @click.stop="deleteCombination(item.searchid)"
                  >
                    <svg-icon :icon-class="'筛选条件'"></svg-icon>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 底部保存筛选条件 -->
          <div class="meta-filtration-footer">
            <div
              class="common-button-small common-button-small-confirm"
              @click="confirmData()"
            >
              确定
            </div>
            <div class="common-button-small" @click="initData()">重置</div>
            <div class="common-button-big" @click="showDialogBox()">
              保存筛选条件
            </div>
          </div>
          <!-- 时间选择器下拉组件(一个时间选择器的组件) - 底部弹出 -->
          <div class="date-picker">
            <van-popup
              v-model:show="isShowOnlyDate"
              position="bottom"
              :style="{ height: '40%' }"
            >
              <van-datetime-picker
                v-model="onlyDate"
                :type="onlyDateData.type"
                :title="'选择' + onlyDateData.pickerTitle"
                :min-date="getMinDateToOnly"
                :max-date="getMaxDateToOnly"
                @confirm="isShowOnlyDate = false"
                @cancel="isShowOnlyDate = false"
              />
            </van-popup>
          </div>
          <!-- 时间选择器下拉组件(两个时间选择器的组件) - 底部弹出 -->
          <div class="date-picker">
            <van-popup
              v-model:show="isShowDatePicker"
              position="bottom"
              :style="{ height: '40%' }"
            >
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="datePickerConfirm()"
                @cancel="isShowDatePicker = false"
              />
            </van-popup>
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 保存筛选条件时名称输入弹出框 -->
    <van-dialog
      v-model:show="showDialog"
      confirmButtonColor="#1D2088"
      title="保存筛选条件"
      showCancelButton
      @beforeClose="beforeClose()"
      @confirm="save()"
    >
      <input
        class="dialog-value"
        type="text"
        v-model="dialogValue"
        placeholder="请输入名称"
      />
    </van-dialog>
    <!-- 保存筛选条件删除弹出框 -->
    <van-dialog
      v-model:show="showDeleteDialog"
      confirmButtonColor="#1D2088"
      title="是否删除"
      showCancelButton
      @confirm="deleteDialog()"
    ></van-dialog>
  </div>
</template>
<script>
import { getAfterNYear, getNearDate, getEnum } from "@/common/utils/tool";
import {
  saveCombination_metaSearch,
  combinationlist_metaSearch,
  combinationDelete_metaSearch,
} from "@/service/componentsRestApi";
import { Toast } from "vant";
export default {
  name: "MetaFiltration",
  props: {
    // 遮罩显隐
    showFiltration: {
      type: Boolean,
      default: false,
    },
    // 遮罩内容距离页面顶部高度
    wrapperTop: {
      type: Number,
      default: 23.7,
    },
    // 页面id
    pictureid: {
      type: String,
      default: "",
    },
    // 显示两个时间选择器的部分
    showDatePickerTomultiple: {
      type: Boolean,
      default: true,
    },
    // 显示一个时间选择器的部分
    showOnlyDate: {
      type: Boolean,
      default: false,
    },
    // 一个时间选择器的时候，需要传入的相关数据
    onlyDateData: {
      type: Object,
      default: () => {
        return {
          title: "月份",
          pickerTitle: "年月",
          type: "year-month",
          dateType: "yyyy-MM",
          minDate: "",
          maxDate: "",
        };
      },
    },
    // 获取枚举状态列表需要的key
    taskStatusNameList: {
      type: Array,
      default: () => {
        return [
          // {
          //   name: "选项",
          //   key: "abnstatus",
          //   active: true, // 是否默认选中
          //   activeList: [value1,value2], // 需要高亮的选项对应的value值 - 枚举列表内高亮项的value
          //   multiple: false, // 是否可多选
          // },
        ];
      },
    },
    // 是否需要对枚举的状态列表进行筛选
    // 需要筛选时传入需要筛选的数据的key值
    // （taskStatusNameList中的某一项或某几项）
    isTaskStatusFilter: {
      type: Array,
      default: () => {
        return [
          {
            // {
            //   name: "选项",
            //   key: "abnstatus",
            //   active: true, // 是否默认选中
            //   activeList: [value1,value2], // 需要高亮的选项对应的value值 - 枚举列表内高亮项的value
            //   multiple: false, // 是否可多选
            // },
          },
        ];
      },
    },
    // 树形列表title
    checkInfoTitle: {
      type: String,
      default: "",
    },
    // 树形多选列表
    checkTreeList: {
      type: Array,
      default: () => {
        return [
          // {
          //   name: "员工",
          //   treeKey: "userId",
          // },
        ];
      },
    },
    // 筛选枚举列表的回调函数
    enumFilter: {
      type: Function,
      default: () => {
        return () => {};
      },
    },
    // 根据传入的session的Key存储与获取上次的选中数据和状态
    sessionKeyToCheck: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 需要抛出的数据
      metaCheckData: {
        prveDate: new Date(), // 开始时间
        onlyDate: new Date(), // 单个时间选择器时间
        nextDate: new Date(), // 结束时间
        checkTaskStatusItem: {}, // 选中的状态
        checkTreeData: {}, // 树形多选
      },
      checkTitle: "", // 树形多选标题
      checkInfoActive: -1, // 被点击高亮的树形多选标题
      checkKey: "", // 当前被选中的item的字段key
      metaShowChildList: {},
      showDialog: false,
      showDeleteDialog: false,
      dialogValue: null,
      deleteDialogId: null,
      combinationList: [],
      /**
       * 时间选择部分
       */
      checkDateList: [
        {
          name: "近一周",
          num: 7,
          type: "day",
        },
        {
          name: "近一个月",
          num: 1,
          type: "month",
        },
        {
          name: "近三个月",
          num: 3,
          type: "month",
        },
        {
          name: "近半年",
          num: 6,
          type: "month",
        },
      ],
      checkDateActive: 1,
      isShowDatePicker: false,
      isShowOnlyDate: false,
      currentDate: new Date(),
      checkDateType: "",
      prveDate: new Date(getNearDate(1).last),
      onlyDate: new Date(),
      nextDate: new Date(),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      /**
       * 状态部分
       */
      taskStatusData: {}, // 状态枚举数据
      checkTaskStatusItem: {}, // 被选中的状态
      checkTaskStatusActive: {}, // 被选中的值的value
      defaultCheckTaskStatusItem: {},
      defaultCheckTaskStatusActive: {},
      // checkboxListData: {},
      // showChildListData: {},
      checkTreeNum: {}, // 被选中的数据的个数
      checkDataListBySession: null,
    };
  },
  // provide() {
  //   return {
  //     checkboxListData: this.checkboxListData,
  //     showChildListData: this.showChildListData,
  //   };
  // },
  computed: {
    /**
     * 时间选择部分
     */
    currentPrevDate() {
      return this.prveDate.Format("yyyy-MM-dd");
    },
    currentOnlyDate() {
      return this.onlyDate.Format(this.onlyDateData.dateType);
    },
    currentNextDate() {
      return this.nextDate.Format("yyyy-MM-dd");
    },
    getMinDateToOnly() {
      if (this.onlyDateData.minDate) {
        return this.onlyDateData.minDate;
      }
      let nowDate = new Date().Format("yyyy-MM-dd");
      return new Date(getAfterNYear(nowDate, -5));
    },
    getMaxDateToOnly() {
      if (this.onlyDateData.maxDate) {
        return this.onlyDateData.maxDate;
      }
      let nowDate = new Date().Format("yyyy-MM-dd");
      return new Date(getAfterNYear(nowDate, 5));
    },
    defaultPictureId() {
      return this.pictureid || this.$getRouterInfo().name;
    },
    checkboxListData() {
      return (
        this.$store.getters.getTreeCheckedData[this.defaultPictureId] || {}
      );
    },
  },
  methods: {
    /**
     * 时间选择部分
     */
    // 时间选择器确定选择时间 - 两个的部分
    datePickerConfirm() {
      let type = this.checkDateType;
      this[type + "Date"] = this.currentDate;
      this.isShowDatePicker = false;
    },
    // 显示时间选择器
    showDatePicker(type) {
      let nowDate = new Date().Format("yyyy-MM-dd");
      if (type == "prve") {
        this.maxDate = this.nextDate;
        this.minDate = new Date(getAfterNYear(nowDate, -5));
      } else {
        this.maxDate = new Date(getAfterNYear(nowDate, 5));
        this.minDate = this.prveDate;
      }
      this.currentDate = this[type + "Date"];
      this.checkDateType = type;
      this.isShowDatePicker = true;
    },
    // 点击临近时间按钮后时间选择器回显数据
    getNearDate(item, index) {
      let nowDate = new Date().Format("yyyy-MM-dd");
      this.checkDateActive = index;
      this.maxDate = new Date(getAfterNYear(nowDate, 5));
      this.minDate = new Date(getAfterNYear(nowDate, -5));
      this.prveDate = new Date(
        getNearDate(item.num, item.type, this.nextDate).last
      );
    },
    /**
     * 枚举部分
     */
    // 获取枚举数据
    getEnum() {
      if (this.taskStatusNameList.length) {
        this.taskStatusNameList.forEach((item) => {
          this.taskStatusData[item.key] = getEnum(item.key);
          if (item.active) {
            this.setTaskStatusActive(
              item.activeList,
              this.taskStatusData[item.key],
              item.key
            );
          }
        });
        if (this.isTaskStatusFilter.length) {
          this.isTaskStatusFilter.forEach((item) => {
            this.taskStatusData[item.key] = this.enumFilter(
              this.taskStatusData[item.key]
            );
            if (item.active) {
              this.setTaskStatusActive(
                item.activeList,
                this.taskStatusData[item.key],
                item.key
              );
            }
          });
        }
      }
    },
    // 默认高亮枚举
    setTaskStatusActive(activeList, itemList, key) {
      if (activeList && activeList.length) {
        let checkTaskStatusItem = this.checkTaskStatusItem[key] || [];
        let checkTaskStatusActive = this.checkTaskStatusActive[key] || [];
        itemList.forEach((item) => {
          if (activeList.indexOf(item.value) > -1) {
            checkTaskStatusItem.push(item);
            checkTaskStatusActive.push(item.value);
          }
        });
        this.checkTaskStatusItem[key] = checkTaskStatusItem;
        this.checkTaskStatusActive[key] = checkTaskStatusActive;
        this.defaultCheckTaskStatusItem = JSON.parse(
          JSON.stringify(this.checkTaskStatusItem)
        );
        this.defaultCheckTaskStatusActive = JSON.parse(
          JSON.stringify(this.checkTaskStatusActive)
        );
      }
    },
    // 点击枚举数据item，记录当前点击的项
    checkTaskStatusFun(check, task) {
      let checkTaskStatusItem = this.checkTaskStatusItem[task.key] || [];
      let checkTaskStatusActive = this.checkTaskStatusActive[task.key] || [];
      let activeIndex = -1;

      if (checkTaskStatusItem.length) {
        checkTaskStatusItem.forEach((item, index) => {
          if (JSON.stringify(item) == JSON.stringify(check)) {
            activeIndex = index;
          }
        });
      }

      if (activeIndex > -1) {
        // 已存在
        checkTaskStatusItem.splice(activeIndex, 1);
        checkTaskStatusActive.splice(activeIndex, 1);
      } else {
        if (task.multiple) {
          // 多选
          checkTaskStatusItem.push(check);
          checkTaskStatusActive.push(check.value);
        } else {
          checkTaskStatusItem = [check];
          checkTaskStatusActive = [check.value];
        }
      }

      this.checkTaskStatusItem[task.key] = checkTaskStatusItem;
      this.checkTaskStatusActive[task.key] = checkTaskStatusActive;
    },
    /**
     * 树形结构选择组件部分
     */
    showCheckInfo(item, index) {
      this.checkInfoActive = index;
      this.checkTitle = item.name;
      this.checkKey = item.treeKey;
      // this.reappearTreeData(item.treeKey);
      this.$emit("meta-filtration-focusItem", item);
    },
    /**
     * 给需要抛出的数据赋值
     */
    requestData() {
      this.metaCheckData.prveDate = this.prveDate.Format("yyyy-MM-dd");
      this.metaCheckData.onlyDate = new Date(this.onlyDate).Format(
        this.onlyDateData.dateType
      );
      this.metaCheckData.nextDate = this.nextDate.Format("yyyy-MM-dd");
      this.metaCheckData.checkTaskStatusItem = JSON.parse(
        JSON.stringify(this.checkTaskStatusItem)
      );
      // this.getDataOfTreeChecked();
      this.metaCheckData.checkTreeData = this.checkboxListData;
    },
    // 保存筛选条件-组合按钮列表
    getCombinationList() {
      combinationlist_metaSearch({ pictureId: this.defaultPictureId }).then(
        (res) => {
          if (res != null) {
            this.combinationList = res.data;
          }
        }
      );
    },
    // 保存筛选条件按钮点击回显
    combinationClick(item) {
      this.initData();
      let metaCheckData = JSON.parse(item.content);
      for (let key in metaCheckData) {
        this[key] = metaCheckData[key];
        if (key === "prveDate" || key === "nextDate") {
          this[key] = new Date(metaCheckData[key]);
        }
      }
      let checkTreeList = this.checkTreeList;
      checkTreeList.forEach((item) => {
        let treeKey = item.treeKey,
          checkTreeData = metaCheckData.checkTreeData;
        // 将保存的筛选条件接口返回数据重新放回VUEX
        if (checkTreeData[treeKey] && checkTreeData[treeKey].length) {
          this.$store.commit("resetTreeCheckedData", {
            data: metaCheckData.checkTreeData[treeKey],
            pictureid: this.defaultPictureId,
            checkKey: treeKey,
          });
        }
      });
      this.metaCheckData = JSON.parse(item.content);
    },
    // 点击下方确定按钮，关闭整个筛选组件并抛出相关筛选数据
    confirmData() {
      // 将vuex内的选中临时数据更新至源数据
      this.$store.commit("cloneTreeData");
      // 给需要抛出的数据赋值
      this.requestData();
      // 根据传入的sessionKey存储选中数据
      this.setCheckDataBySession();
      this.$emit("meta-filtration-checkData", this.metaCheckData);
      this.$emit("update:showFiltration", false);
    },
    // 点击“保存筛选条件”按钮，显示要保存的筛选条件名称的输入弹窗
    showDialogBox() {
      this.showDialog = true;
    },
    // 关闭保存筛选条件名称输入框之前判断输入值是否合法
    beforeClose() {
      if (!this.dialogValue) {
        return false;
      }
    },
    save() {
      // 保存筛选条件-组合按钮保存
      let data = {
        searchname: this.dialogValue, // 保存筛选条件-组合名称
        pictureid: this.defaultPictureId, // 页面名称
        content: JSON.stringify(
          Object.assign({}, this.metaCheckData, {
            checkTaskStatusActive: this.checkTaskStatusActive,
            checkTaskStatusItem: this.checkTaskStatusItem,
          })
        ), // 搜索表单部分
        flgdel: "0", // 默认写0？
      };
      // 保存筛选条件接口调用
      saveCombination_metaSearch(data)
        .then(() => {
          this.getCombinationList();
          this.showDialog = false;
        })
        .catch((err) => {
          this.showDialog = false;
          Toast.fail(err.errMsg);
        });
    },
    // 点击已保存的筛选条件列表内的删除图标
    deleteCombination(id) {
      this.deleteDialogId = id;
      this.showDeleteDialog = true;
    },
    // 确定删除选中的某一项筛选条件
    deleteDialog() {
      // 保存筛选条件-组合按钮删除
      combinationDelete_metaSearch({
        qsData: { searchId: this.deleteDialogId },
      })
        .then((res) => {
          if (res != null) {
            this.getCombinationList();
            this.showDeleteDialog = false;
          }
        })
        .catch((err) => {
          this.showDeleteDialog = false;
          Toast.fail(err.errMsg);
        });
    },
    // 数据重置
    initData() {
      this.metaCheckData = {
        prveDate: new Date(getNearDate(1).last), // 开始时间
        nextDate: new Date(), // 结束时间
        checkTaskStatus: [], // 选中的状态
        checkTaskStatusItem: JSON.parse(
          JSON.stringify(this.defaultCheckTaskStatusItem)
        ),
        checkTreeData: {},
      };
      this.currentDate = new Date();
      this.onlyDate = new Date();
      this.checkDateType = "";
      this.checkKey = "";
      this.prveDate = new Date(getNearDate(1).last);
      this.nextDate = new Date();
      this.minDate = new Date(2020, 0, 1);
      this.maxDate = new Date(2025, 10, 1);
      this.checkDateActive = 1;
      this.checkInfoActive = -1;
      this.checkTreeNum = {};
      this.checkTaskStatusItem = JSON.parse(
        JSON.stringify(this.defaultCheckTaskStatusItem)
      );
      this.checkTaskStatusActive = JSON.parse(
        JSON.stringify(this.defaultCheckTaskStatusActive)
      );
      this.testDate1111 = {
        name: "李四",
      };
      // 重置树形多选组件的数据
      this.clearCheckedData();
      this.$emit("meta-filtration-initData");
    },
    // 关闭保存筛选条件组件
    closeFiltration() {
      this.$emit("update:showFiltration", false);
      setTimeout(() => {
        // vuex将数据选中源数据赋值给临时数据
        this.$store.commit("regainTreeData");
      }, 500);
      // this.initData();
    },
    // 根据传入的sessionKey获取缓存的选中数据
    getCheckDataBySession() {
      if (this.sessionKeyToCheck) {
        let checkDataListBySession =
          this.$getSessionStorage(this.sessionKeyToCheck) || null;
        if (checkDataListBySession) {
          checkDataListBySession = JSON.parse(checkDataListBySession);
          let dateList = [
            "prveDate",
            "onlyDate",
            "nextDate",
            "minDate",
            "maxDate",
          ];
          for (let key in checkDataListBySession) {
            this[key] = checkDataListBySession[key];
            if (dateList.indexOf(key) > -1) {
              this[key] = new Date(checkDataListBySession[key]);
            }
          }
        }
        this.checkDataListBySession = checkDataListBySession;
        // this.removeCheckDataBySession(); // 应该在页面中自己清楚session，为了避免进入到页面获取不到session数据
      }
    },
    // 根据传入的sessionKey存储选中数据
    setCheckDataBySession() {
      if (this.sessionKeyToCheck) {
        // this.getDataOfTreeChecked();
        this.$setSessionStorage(
          this.sessionKeyToCheck,
          JSON.stringify({
            checkKey: this.checkKey,
            checkDateActive: this.checkDateActive,
            currentDate: this.currentDate,
            checkDateType: this.checkDateTypeprveDate,
            prveDate: this.prveDate,
            onlyDate: this.onlyDate,
            nextDate: this.nextDate,
            minDate: this.minDate,
            maxDate: this.maxDate,
            checkTaskStatusItem: this.checkTaskStatusItem, // 被选中的状态
            checkTaskStatusActive: this.checkTaskStatusActive, // 被选中的值得索引
            metaCheckData: this.metaCheckData,
          })
        );
      }
    },
    // 根据传入的sessionKey移除缓存中存储的选中数据
    removeCheckDataBySession() {
      if (this.sessionKeyToCheck) {
        this.$removeSessionStorage(this.sessionKeyToCheck);
      }
    },
    // 供父组件调用来获取选中的值
    getMetaCheckDataToFeaterUse() {
      if (this.sessionKeyToCheck && this.checkDataListBySession) {
        return this.metaCheckData;
      }
      return null;
    },
    clearCheckedData() {
      // 清除vuex临时选中数据
      this.$store.commit("clearTreeDataById", this.defaultPictureId);
    },
  },
  mounted() {
    // this.defaultPictureId = this.pictureid || this.$getRouterInfo().name;
    // this.getDataOfTreeChecked();
    // 获取状态的枚举数据
    this.getEnum();
    // 获取保存筛选条件-组合按钮列表
    this.getCombinationList();
    // 根据传入的sessionKey获取缓存的选中数据
    this.getCheckDataBySession();
  },
  watch: {
    checkboxListData: {
      deep: true,
      handler() {
        let checkTreeList = this.checkTreeList,
          checkTreeNum = {};
        checkTreeList.forEach((item) => {
          checkTreeNum[item.treeKey] =
            (this.checkboxListData[item.treeKey] &&
              this.checkboxListData[item.treeKey].length) ||
            0;
        });
        this.checkTreeNum = checkTreeNum;
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.meta-filtration-wrap {
  width: 100%;
  height: 100%;
  .filtration-wrapper {
    height: 100%;
    @include bg_color;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
  }
  .meta-filtration-main {
    width: 100%;
    height: 100%;
    padding-bottom: 14vw;
    box-sizing: border-box;
  }
  .meta-filtration-combination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 2vw;
    padding-bottom: 0;
    li {
      position: relative;
      padding: 0 7.46vw 0 2.13vw;
      @include bg_color_opacity;
      margin-right: 2.13vw;
      margin-bottom: 2vw;
    }
    .item-title {
      text-align: center;
      height: 7.46vw;
      line-height: 7.46vw;
      padding: 0 1vw;
    }
    .item-close {
      position: absolute;
      top: 0;
      right: 0;
      width: 5.33vw;
      height: 5.33vw;
    }
  }
  .meta-filtration-footer {
    width: 100%;
    position: absolute;
    bottom: 9.06vw;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .filtration-header {
    position: relative;
    .title {
      width: 100%;
      height: 13.8vw;
      line-height: 13.8vw;
      text-align: center;
    }
    .close-icon {
      width: 3vw;
      height: 3vw;
      position: absolute;
      top: 5vw;
      right: 5vw;
    }
  }
  .filtration-body {
    padding: 0 2vw;
    height: calc(100% - 44vw);
    overflow-y: auto;
    .title {
      color: #333;
      margin: 2.13vw 0;
    }
    .content {
      border-radius: 1.6vw;
      background-color: #fff;
      padding: 2vw;
      padding-bottom: 0;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      .check-item {
        margin-bottom: 2vw;
        width: 21.3vw;
        height: 7.4vw;
        line-height: 7.4vw;
        text-align: center;
        background-color: rgba($color: #000000, $alpha: 0.05);
        border-radius: 1vw;
      }
      .check-item-supplement {
        background-color: transparent;
      }
      .check-item-active {
        @include bg_color_opacity_7;
        color: #fff;
      }
      .check-date-picker {
        width: 42.6vw;
        height: 7.4vw;
        line-height: 7.4vw;
        text-align: center;
        background-color: rgba($color: #000000, $alpha: 0.05);
        border-radius: 1vw;
      }
      .check-date {
        margin-bottom: 2vw;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .check-date-only {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 10.66vw;
      border-radius: 1.6vw;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 2vw;
      .check-item-title {
        width: 95%;
      }
      svg {
        width: 1.86vw;
        height: 3.2vw;
      }
    }
    .check-item-title {
      display: flex;
      align-items: center;
      justify-content: center;
      .title {
        width: 60%;
        text-align: left;
        font-weight: 600;
      }
      .placeholder {
        width: 30%;
        text-align: right;
        color: #999;
      }
    }
  }
  .check-info-list {
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 10.66vw;
      border-radius: 1.6vw;
      background-color: #fff;
      padding: 0 2vw;
      box-sizing: border-box;
      margin-bottom: 2vw;
      svg {
        width: 1.86vw;
        height: 3.2vw;
      }
    }
    .check-info-title {
      width: 95%;
      height: 10.66vw;
      line-height: 10.66vw;
      word-break: break-all;
    }
    .check-info-active {
      @include bg_border_color;
      @include font_color_theme;
    }
  }
}
.dialog-value {
  display: block;
  width: 80%;
  height: 10.66vw;
  line-height: 10.66v;
  padding-left: 2.13vw;
  margin: 2.13vw auto;
  border: 1px solid;
  border-radius: 5px;
  @include bg_border_color;
}
</style>
