<template>
  <div class="container">
    <save-form
      inline
      :model="search"
      @submit="FetchList"
      @reset="reset"
      saveKey="/main/main/reminders"
    >
      <el-form-item prop="organIds">
        <el-select
          clearable
          filterable
          placeholder="请选择分部"
          v-model="search.organId"
        >
          <el-option
            v-for="(item, index) in selects.branchs"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button native-type="submit" type="primary">搜索</el-button>
      <el-button native-type="reset" type="danger">重置</el-button>
    </save-form>
    <empty desc="暂无需要处理异常" v-if="!list.length" />
    <div v-else class="buttonWrap">
      <el-button
        @click="handle(item)"
        style="width: 100%; color: #303133"
        v-for="(item, index) in list"
        :key="index"
        :disabled="item.num ? false : true"
        type="text"
      >
        <title-item
          type="warning"
          :data="[
            {
              name: item.desc,
              num: item.num,
              errorType: item.errorType,
              num2: item.num2,
            },
          ]"
        >
          <span
            style="color: var(--color-primary)"
            v-if="
              !errorType[item.errorType] ||
              (errorType[item.errorType] &&
                permission(errorType[item.errorType].permission))
            "
            >立即处理<i class="el-icon-d-arrow-right"
          /></span>
        </title-item>
      </el-button>
    </div>
  </div>
</template>
<script>
import { Searchs } from "@/helpers";
import { getRemindMatterData } from "@/views/main/api";
import title from "../abnormal/title";
import { errorType } from "@/views/main/constant";
import { permission } from "@/utils/directivePage";
const initSearch = {
  organId: null,
};
export default {
  components: {
    "title-item": title,
  },
  data() {
    return {
      search: {
        ...initSearch,
      },
      list: [],
      errorType: errorType,
      listByType: {},
    };
  },
  async mounted() {
    await this.$store.dispatch("setBranchs");
    // this.$set(this.search, "organId", this.selects.branchs[0].id);
    this.FetchList();
  },
  methods: {
    permission,
    handle(item) {
      // 添加判断权限
      if (
        errorType[item.errorType] &&
        !this.permission(errorType[item.errorType]?.permission)
      ) {
        return;
      }
      new Searchs().removeByKey(item.url);
      this.$router.push({
        path: item.url,
        query: {
          ...item.query,
          filter_type: item.errorType,
          organId: this.search.organId || undefined,
          [item.resultKey]: item.resultKey
            ? (item.result || []).join(",")
            : undefined,
        },
      });

      // this.$router.push({
      //   path: "/teamList",
      //   query: {
      //     filter_type: item.errorType,
      //     searchType: "WAIT_CREATE_PAYMENT_CALENDER",
      //     organId: this.search.organId || undefined,
      //     form: "reminders",
      //   },
      // });
    },
    async FetchList() {
      try {
        const res = await getRemindMatterData({
          ...this.search,
        });
        this.list = this.formatData(res.data || []);
      } catch (error) {
        console.log(error);
      }
    },
    reset() {
      this.search = { ...initSearch };
      this.FetchList();
    },
    formatData(data) {
      let list = data.map((item) => {
        return {
          ...item,
          ...(errorType[item.errorType] || {}),
        };
      });

      return list;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  /deep/ .is-disabled {
    .title {
      > span {
        color: #c0c4cc !important;
      }
    }
  }
  .buttonWrap {
    .el-button + .el-button {
      margin-left: 0;
    }
  }
}
</style>
