<template>
    <div class="container">
      <el-row>
        <el-col :span="5" style="width: 180px">
          <el-select
            v-model="parmValue.level"
            style="width: 100%"
            :size="searchSize"
            clearable
            @change="
              parmValue.page = 1;
              pageInfo.curr = 1;
              searchList();
            "
            placeholder="优先级"
          >
            <el-option
              v-for="item in levelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5" style="width: 140px; padding: 0 0 0 10px">
          <el-select
            v-model="parmValue.type"
            style="width: 100%"
            :size="searchSize"
            clearable
            @change="
              parmValue.page = 1;
              pageInfo.curr = 1;
              searchList();
            "
            placeholder="工单类型"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              clearable
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" style="width: 420px; padding: 0 0 0 10px">
          <period-date-picker
            :start="parmValue.start"
            :end="parmValue.end"
            :width="'188px'"
            :size="searchSize"
            @timeReturned="handleTime"
          />
        </el-col>

          <el-col :span="6" style="width: 130px; float: right">
           <div style="display:flex">
            <el-button
              type="primary"
              :size="searchSize"
              @click="searchList"
            >
              刷新
            </el-button>
              <el-button
               :size="searchSize"
               type="success"
                @click="showModel = true"
             >
                添加
             </el-button>
            </div>
          </el-col>
        </el-row>

        <el-row style="padding: 12px 0 0 0">
        <el-col :span="5" style="width: 180px">
          <el-select
            v-model="parmValue.status"
            style="width: 100%"
            clearable
            @change="
              parmValue.page = 1;
              pageInfo.curr = 1;
              searchList();
            "
            :size="searchSize"
            placeholder="状态筛选"
          >
            <el-option
              v-for="item in level === '1' ? seachStatus : statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5" style="width: 140px; padding: 0 0 0 10px">
          <el-select
            v-model="parmValue.company_type"
            style="width: 100%"
            :size="searchSize"
            clearable
            @change="
              parmValue.page = 1;
              pageInfo.curr = 1;
              searchList();
            "
            placeholder="系统类型"
          >
            <el-option
              v-for="item in company_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              clearable
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="10" style="width: 410px; padding: 0 0 0 10px">
          <el-input
            placeholder="关键字"
            v-model="input"
            :size="searchSize"
            class="input-with-select"
          >
            <el-select
              v-model="select"
              slot="prepend"
              style="width: 100px"
              placeholder="筛选类型"
            >
              <el-option label="工单编号" value="1" />
              <el-option label="业务编号" value="0" />
              <el-option label="工单标题" value="2" />
              <el-option label="申请人" value="3" />
              <el-option label="处理人" value="4" v-if="level == '1'" />
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="
                parmValue.page = 1;
                pageInfo.curr = 1;
                searchList();
              "
            ></el-button>
          </el-input>
        </el-col>

        <el-col
          :span="3"
          style="width: 75px; float: right"
          v-if="powers.some((item) => item == '001')"
        >
          <div style="margin-right:10px">
            <SwitchMode :mode.sync="currentMode" />
          </div>
        </el-col>
      </el-row>

      <template v-if="currentMode === ListMode.Table">
        <TableMode ref="Table" @getTotal="total => pageInfo.total = total" />
      </template>

      <template v-if="currentMode === ListMode.DashBoard">
        <DashboardMode ref="DashBoard" @getTotal="total => pageInfo.total = total" />
      </template>


      <div style="width:100%;display:flex;justify-content:flex-end;margin-top:10px">
         <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="pageInfo.curr"
          :page-sizes="[15, 50, 100]"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
        </el-pagination>
      </div>

      <add-edit
       :show-model="showModel"
       :type="type"
       @refresh="searchList"
       @cancel="showModel = false"
      />
    </div>
</template>
<script>
import asyncRequest from "@/apis/service/purchaseAndSale/adjust";
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import addEdit from "@/components/addEdit";
import { mapGetters } from "vuex";

import SwitchMode from "./components/SwitchMode.vue"
import TableMode from "./components/TableMode.vue"
import DashboardMode from "./components/DashboardMode.vue"

import CryptoJS from "crypto-js";
import config from "@/config/index";
import {
  company_type,
  seachStatus,
  statusOptions,
  levelOptions,
  typeOptions,
  columns,
  Pcolumns,
  parmValue,
  ListMode
} from "@/views/pucColumns";

export default {
  name: "adjust",
  mixins: [mixinPage, resToken],
  components: {
    addEdit,
    SwitchMode,
    TableMode,
    DashboardMode
  },
  computed: {
    //组件SIZE设置
    ...mapGetters(["tablebtnSize", "searchSize", "size", "level"]),
    powers() {
      return this.$store.getters.btnList;
    },
  },
  data() {
    return {
      ListMode,
      currentMode: ListMode.Table,
      select: "1",
      input: "",
      type: 1,
      company_type,
      seachStatus,
      statusOptions,
      levelOptions,
      typeOptions,
      // 表格 - 列参数
      columns, //超管
      Pcolumns, //普通角色
      showModel1: false,
      loading: true,
      showModel: false,
      isDetail: false,
      modelId: 0,
      parmValue: {},

      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
    };
  },
  watch:{
    currentMode(){
      this.$nextTick(() => this.searchList());
    }
  },
  async mounted() {
    this.restSearch(1);

    const { back } = this.$route.query;
    if (back) {
      this.parmValue = JSON.parse(back);
      const { page, size, select, input } = this.parmValue;
      this.select = select || "";
      this.input = input || "";
      delete this.parmValue["select"];
      delete this.parmValue["input"];
      this.pageInfo = {
        size: size,
        curr: page,
        total: 0,
      };
    }
    if (this.$route.query.t) {
      await this.analysisToken();
      await this.setcode()
    }
    this.searchList();
  },
  methods: {
    async handlePageChange(val) {
      this.parmValue.page = val
      this.pageInfo.curr = val
      await this.searchList()
    },
    async handleSizeChange(val) {
      this.parmValue.page = 1
      this.pageInfo.curr = 1
      this.pageInfo.size = val
      this.parmValue.size = val
      await this.searchList()
    },
    openModal(id, isDetail) {
      this.showModel = true;
      this.modelId = id;
      this.isDetail = isDetail;
    },
    async analysisToken() {
      // 解密token
      const decData = CryptoJS.enc.Base64.parse(this.$route.query.t).toString(
        CryptoJS.enc.Utf8
      );
      const decJson = CryptoJS.AES.decrypt(decData, config.secretKey).toString(
        CryptoJS.enc.Utf8
      );
      const { token } = JSON.parse(decJson);
      console.log(token)
      // 根据 token 获取用户信息...
      await this.$store.dispatch("user/loginByToken", token);
      await this.$store.dispatch("user/UserInfor", {})
    },
    getRouter(toRouter, queryId) {
      if (toRouter && queryId) {
        let model = {
          type: "view",
          id: queryId,
        };
        let item = JSON.parse(JSON.stringify(this.parmValue));
        item.select = this.select;
        item.input = this.input;

        let routerModel = {
          options: item,
          router: this.$route.path,
        };
        model.preModel = JSON.stringify(routerModel);
        this.routeGoto(toRouter, model);
      } else {
        this.$message.warning("暂未找到相关流程！");
      }
    },
    restSearch(type) {
      // 表格 - 分页
      this.pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      this.parmValue = {
        ...parmValue,
      };
      if (type !== 1) {
        this.searchList();
      }
    },
    async handleTime(e) {
      if (e.startTime !== "") {
        this.parmValue.start = e.startTime;
      } else {
        this.parmValue.start = "";
      }
      if (e.endTime !== "") {
        this.parmValue.end = e.endTime;
      } else {
        this.parmValue.end = "";
      }
      if (this.parmValue.start !== "" && this.parmValue.end !== "") {
        this.parmValue.page = 1;
        this.pageInfo.curr = 1;
        await this.searchList();
      }
    },
    async searchList() {
      if (
        (this.parmValue.start !== "" && this.parmValue.end === "") ||
        (this.parmValue.start === "" && this.parmValue.end !== "")
      ) {
        this.$message.warning("时间区间不完整！");
        return;
      }
      this.parmValue.noteNo = this.select === "0" ? this.input : "";
      this.parmValue.bugNo = this.select === "1" ? this.input : "";
      this.parmValue.title = this.select === "2" ? this.input : "";
      this.parmValue.apply_name = this.select === "3" ? this.input : "";
      this.parmValue.deal_name = this.select === "4" ? this.input : "";
      this.parmValue.is_created = this.level + "" === "1" ? "0" : "1";
      this.$refs[this.currentMode] && this.$refs[this.currentMode].searchList(this.parmValue)
    },
  },
};
</script>

<style lang="scss" scoped>
.container{
  padding: 10px;
}
</style>
