<!--
 * @Author: 鲁国华
 * @Date: 2021-07-13 11:02:12
 * @LastEditors: 鲁国华
 * @LastEditTime: 2021-07-14 15:27:15
 * @Description: file content
 * @FilePath: \dap-frontend-pc-ui-gitlab\src\components\jiangxing_characteristic\index.vue
-->
<template>
  <div class="table_box">
    <div class="right-header">
      <el-row class="top_search_nav">
        <div style="float: left">
          <el-radio-group v-model="informantType">
            <el-radio-button v-for="item in options"
                             :key="item.value"
                             :value="item.value"
                             :label="item.value">{{ item.label }}</el-radio-button>
          </el-radio-group>
        </div>
        <div style="float: right">
          <el-select class="tabbar_role"
                     @change="roleChange"
                     v-model="role"
                     placeholder="请选择">
            <el-option v-for="item in getRoler"
                       :key="item.roleId"
                       :label="item.description"
                       :value="item.roleId"></el-option>
          </el-select>
        </div>
      </el-row>
    </div>
    <div class="right-main">
      <components :is="getCompent(roleName, informantType)"
                  :active-role="getActiveRole(roleName, informantType)"
                  @currentItemClick="currentItemClick"></components>
    </div>
  </div>
</template>
<script>
import rolePage from "./components/numberPage/rolePage";
import limitsPage from "./components/numberPage/limitsPage";
import memberPage from "./components/numberPage/memberPage";
import customerPage from "./components/numberPage/customerPage";
import transportPage from "./components/numberPage/transportPage";
import newsPage from "./components/numberPage/newsPage";
import pricePage from "./components/numberPage/pricePage";
import equipmentPage from "./components/numberPage/equipmentPage";
import orderPage from "./components/numberPage/orderPage";
import sortPage from "./components/numberPage/sortPage";
import dataPage from "./components/numberPage/dataPage";
import transaction from "./components/transaction/pade.vue";

import putstorage from "./components/transaction/putstorage.vue";
import inventory from "./components/transaction/inventory.vue";

import lossManagement from "./components/transaction/lossManagement.vue";
import warehouseManagement from "./components/transaction/warehouseManagement.vue";
import warehousing from "./components/transaction/warehousing.vue";
import inventoryManagement from "./components/transaction/inventoryManagement.vue";

import agriculture from "./components/numberPage/agriculture";
import financial from "./components/numberPage/financial";

import asparagus_big_screen from "../daping/bigScreenManage.vue"
import { login, roleList } from "../../apis/modules/asparagus.js";

export default {
  name: "asparagus",
  props: ["data"],
  data () {
    return {
      role: "",
      getRoler: [],
      informantType: "1",
      roleName: "PC-管理端",
      options: [],
      roleId: "",
      map: new Map()
    };
  },
  watch: {
    options (val) {
      if (val.length > 0) {
        this.informantType = val[0].value;
      }
    }
  },
  components: {
    rolePage,
    limitsPage,
    memberPage,
    customerPage,
    transportPage,
    newsPage,
    pricePage,
    equipmentPage,
    orderPage,
    sortPage,
    dataPage,
    transaction,
    putstorage,
    warehousing,
    agriculture,
    lossManagement,
    warehouseManagement,
    inventoryManagement,
    inventory,
    financial,
    asparagus_big_screen
  },

  created () {
    this.getList();
    this.role = sessionStorage.getItem("role") || "管理人员";
    this.roleId = sessionStorage.getItem("roleId") || "1";
    this.roleName = sessionStorage.getItem("roleName") || "PC-管理端";
    const pcMap = new Map();
    pcMap.set("1", { component: "rolePage", value: "" });
    pcMap.set("2", { component: "limitsPage", value: "" });
    pcMap.set("3", { component: "memberPage", value: "" });
    pcMap.set("4", { component: "customerPage", value: "" });
    pcMap.set("5", { component: "transportPage", value: "" });
    pcMap.set("6", { component: "newsPage", value: "" });
    pcMap.set("7", { component: "pricePage", value: "" });
    pcMap.set("8", { component: "equipmentPage", value: "" });
    pcMap.set("9", { component: "orderPage", value: "" });
    pcMap.set("11", { component: "dataPage", value: "" });
    pcMap.set("80", { component: "asparagus_big_screen", value: "" });
    this.map.set("PC-管理端", pcMap);
    const jMap = new Map();

    jMap.set("25", { component: "putstorage", value: "" });
    jMap.set("1012", { component: "inventory", value: "" });
    jMap.set("1013", { component: "lossManagement", value: "" });
    jMap.set("1005", { component: "warehouseManagement", value: "" });
    jMap.set("1014", { component: "warehousing", value: "" });
    jMap.set("1015", { component: "inventoryManagement", value: "" });
    jMap.set("1016", { component: "pricePage", value: "" });
    jMap.set("1017", { component: "asparagus_big_screen", value: "" });

    this.map.set("PC-交易端", jMap);
    const nMap = new Map();
    nMap.set("37", { component: "agriculture", value: "inbound" });
    nMap.set("41", { component: "agriculture", value: "stock" });
    nMap.set("43", { component: "agriculture", value: "mall" });
    nMap.set("45", { component: "agriculture", value: "deliver" });
    nMap.set("10", { component: "agriculture", value: "sortPage" });
    this.map.set("PC-农资端", nMap);
    const cMap = new Map();
    cMap.set("56", { component: "financial", value: "daily" });
    cMap.set("57", { component: "financial", value: "monthly" });
    cMap.set("58", { component: "financial", value: "yearly" });
    cMap.set("100", { component: "dataPage", value: "" });
    cMap.set("60", { component: "financial", value: "billManage" });
    this.map.set("PC-财务端", cMap);
  },
  mounted () {
    // this.getList();
  },
  methods: {
    getList () {
      login({
        username: localStorage.getItem("userId"),
        // username: "61b30bcbf3654cc1936eba16b584da8e",
        password: "",
        Terminal: "PC"
      }).then(res => {
        const { status, data } = res;
        if (status === 0) {
          localStorage.setItem("token", data.token);
          this.getRoler = data.roles;
          this.getListItem(
            sessionStorage.getItem("roleId") || data.roles[0].roleId
          );
        }
      });
    },
    getListItem (value) {
      const parms = { roleId: value };
      roleList(parms).then(res => {
        const { status, data } = res;
        if (status === 0) {
          this.roleName = data[0].title;
          sessionStorage.setItem("roleName", data[0].title);
          let childe = data[0].children;
          const arr = childe.map(item => {
            return {
              value: item.id,
              label: item.title
            };
          });
          this.options = arr;
        }
      });
    },
    getCompent (roleName, informantType) {
      if (typeof this.map.get(roleName) === "string") {
        return this.map.get(roleName);
      }
      return this.map.get(roleName).get(informantType)?.component || "";
    },
    getActiveRole (roleName, informantType) {
      if (typeof this.map.get(roleName) === "string") {
        return "";
      }
      return this.map.get(roleName).get(informantType)?.value || "";
    },
    roleChange (value) {
      this.getListItem(value);
      sessionStorage.setItem("roleId", value);
      const obj = this.getRoler.find(item => item.roleId === value);
      sessionStorage.setItem("role", obj.description);
    },
    currentItemClick (val) {
      this.$emit("currentItemClick", val);
    }
  }
};
</script>
<style scoped lang="scss">
.table_box {
  .right-header {
    overflow: hidden;
  }
}
</style>
