<!--
 * @Descripttion: 面包屑公共组件
 * @Version: 1.0
 * @Author: wanglei-2
 * @Date: 2024-04-23 9:37:00
 * @LastEditors: wanglei-2
 * @LastEditTime: 2024-04-23 9:37:00
-->
<template>
  <div class="breadcrumb" style="display: flex; justify-content: space-between; align-items: center">
    <!--        <t-breadcrumb :maxItemWidth="'150'">-->
    <!--          <t-breadcrumbItem>页面1</t-breadcrumbItem>-->
    <!--          <t-breadcrumbItem>页面2面包屑文案超长时悬浮显示文案全部信息</t-breadcrumbItem>-->
    <!--          <t-breadcrumbItem :maxWidth="'160'" :class="'myTitle'">面包屑中文案过长时可缩略显示，鼠标hover时显示全部</t-breadcrumbItem>-->
    <!--        </t-breadcrumb>-->

    <t-breadcrumb :maxItemWidth="'300'">
      <a @click="goBack" class="backA" :class="{ noAllowed: isCanGoBack === false }">
        <span class="backIconSpan">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 22 22">
            <path
              d="M21 11H6.414l5.293-5.293-1.414-1.414L2.586 12l7.707 7.707 1.414-1.414L6.414 13H21z"
              :fill="svgColor"
            />
          </svg>
        </span>
        <span class="backSpan">返回</span></a
      >

      <t-breadcrumbItem
        v-for="(v, i) in mybreadList"
        :key="i"
        :class="i === mybreadList.length - 1 ? 'myTitle' : ''"
        @click="syOpen(i)"
        class="t-breadcrumb__item"
        >{{ v }}</t-breadcrumbItem
      >
    </t-breadcrumb>
    <div style="display: flex; width: 415px; align-items: center" v-show="isxlxShow">
      <div style="margin-right: 16px">当前企业</div>
      <div style="width: 325px; margin-right: 16px" class="xlx">
        <!-- <t-select v-model="selectedCompany" @change="companyChanged" :disabled="!disabled">
          <t-option v-for="item in companyList" :value="item.jguuid" :label="item.jgmc" :key="item.jguuid"></t-option>
        </t-select> -->
        <t-select-input
          :value="selectValue"
          :popup-visible="popupVisible"
          :popup-props="{ overlayInnerStyle: { padding: '6px', maxHeight: '500px', overflow: 'auto' } }"
          style="width: 100%"
          clearable
          allow-input
          @popup-visible-change="onPopupVisibleChange"
          @clear="onClear"
          @input-change="onInputChange"
          @focus="onFocus"
          :disabled="!disabled"
        >
          <template #panel>
            <ul class="jgxxSelect">
              <li v-for="item in queryCompanyList" :key="item.value" @click="() => onOptionClick(item)">
                {{ item.jgmc }}
              </li>
            </ul>
          </template>
          <template #suffixIcon>
            <chevron-down-icon />
          </template>
        </t-select-input>
      </div>
    </div>
  </div>
</template>

<script>
// import { fetch } from '@/core/request';
// import api from '@/pages/index/api/mhsy/mhsyRequest.js';
import { ChevronDownIcon } from 'tdesign-icons-vue';

export default {
  components: { ChevronDownIcon },
  props: {},
  data() {
    return {
      disabled: false,
      selectedCompany: '',
      companyList: [],
      goBackParams: {},
      queryCompanyList: [],
      ysCompanyList: [],
      selectValue: { label: '', value: 1 },
      popupVisible: false,
      mbxUrlList: [],
      xlxShow: false, // 控制是否置灰
      isxlxShow: true, // 控制是否展示
      mybreadList: ['首页', '111', '222'],
      mbxUrlParamsList: [],
      isCanGoBack: false,
      goBackPath: '',
      svgColor: '#333333',
      iframeGoBack: false,
    };
  },
  created() {},
  mounted() {
    // 在组件加载完成后，调用子组件方法
  },
  methods: {
    syOpen(i) {
      if (i === this.mybreadList.length - 1) {
        return;
      }
      if (i === 0) {
        window.parent.gotoHomePage();
      } else if (window.parent) {
        const menuParams = {};
        menuParams.menuPath = this.mbxUrlList[i - 1]; // 路径
        if (this.mbxUrlParamsList) {
          if (this.mbxUrlParamsList[i - 1]) {
            const keys = Object.keys(this.mbxUrlParamsList[i - 1]);
            const values = Object.values(this.mbxUrlParamsList[i - 1]);
            menuParams.menuParmasStr = `&${keys.map((element, index) => `${element}=${values[index]}`).join('&')}`;
          }
        }

        window.parent.goSelfChange(menuParams);
      }
    },
    onPopupVisibleChange(val) {
      console.log(val);
      this.popupVisible = val;
    },
    initMyBre(params) {
      this.mybreadList = params.mybreadList;
      this.companyList = params.companyList;
      this.selectedCompany = params.selectedCompany;
      this.disabled = params.xlxShow;
      this.mbxUrlList = params.mbxUrlList;
      this.goBackParams = params.goBackParams;
      this.iframeGoBack = params.iframeGoBack;
      this.isxlxShow = params.isxlxShow;
      if (this.isxlxShow === undefined) {
        this.isxlxShow = true;
      }
      // 是否有测试数据
      if (!this.companyList || this.companyList.length === 0) {
        this.queryCompanyList = JSON.parse(window.sessionStorage.getItem('companyList'));
        this.ysCompanyList = JSON.parse(window.sessionStorage.getItem('companyList'));
      }
      if (!this.selectedCompany) {
        if (window.sessionStorage.getItem('jgxxList')) {
          this.jgxxMap = JSON.parse(window.sessionStorage.getItem('jgxxList'));
          this.selectValue.label = this.ysCompanyList.find((t) => t.jguuid === this.jgxxMap.jguuid)?.jgmc;
        }
      } else {
        this.selectValue.label = this.ysCompanyList.find((t) => t.jguuid === this.selectedCompany)?.jgmc;
      }
      if (params.isCanGoBack === true || params.isCanGoBack === false) {
        this.isCanGoBack = params.isCanGoBack;
      }
      this.goBackPath = params.goBackPath;
      if (this.isCanGoBack === true) {
        // 可以后退的颜色
        this.svgColor = '#333333';
      } else {
        // 不能后退的颜色
        this.svgColor = '#E1E1E2';
      }
    },
    onInputChange(val, context) {
      // 过滤功能
      if (val) {
        this.queryCompanyList = this.ysCompanyList.filter((item) => {
          return item.jgmc.includes(val);
        });
      } else {
        this.queryCompanyList = JSON.parse(window.sessionStorage.getItem('companyList'));
      }
      console.log(val, context);
    },
    onClear() {
      this.selectValue = undefined;
    },
    goBack() {
      // 回退方法
      if (this.isCanGoBack === true) {
        // 触发回退操作
        // this.$router.push(this.goBackPath);
        // 自刷新
        if (this.iframeGoBack) {
          window.parent.gotoHomePage();
        } else if (window.parent) {
          const menuParams = {};
          menuParams.menuPath = this.goBackPath; // 路径
          if (this.goBackParams) {
            const keys = Object.keys(this.goBackParams);
            const values = Object.values(this.goBackParams);
            menuParams.menuParmasStr = `&${keys.map((element, index) => `${element}=${values[index]}`).join('&')}`;
          }
          // menuParams.menuParmasStr = `&djxh=${row.djxh}&skssqq=`+this.rqFromat(row.skssqq)+`&skssqz=`+this.rqFromat(row.skssqz)+`&nsrsbh=${row.nsrsbh}&zsxmDm=${row.zsxmDm}&xzqhszDm=${row.xzqhszDm}&sbrwuuid=${row.sbrwuuid}&jguuid=${this.jguuid}`;//参数
          window.parent.goSelfChange(menuParams);
        }
      }
    },
    onFocus(val, context) {
      console.log('focus:', val, context);
    },
    onOptionClick(item) {
      this.selectValue = item.jgmc;
      this.companyChanged(item);
      this.popupVisible = false;
    },
    async companyChanged(item) {
      const { jguuid } = item;
      let params = [];
      params = this.ysCompanyList.filter((item) => {
        return item.jguuid === jguuid;
      });
      this.$emit('jguuidOnChange', params);
    },
    setXlxShow(params) {
      this.disabled = params;
    },
  },
};
</script>

<style lang="less" scoped>
.xlx /deep/ .t-input.t-is-readonly {
  width: 340px;
}
.breadcrumb {
  background-color: #fff;
}
.t-breadcrumb {
  height: 60px;
  padding-left: 30px;
  /deep/.t-breadcrumb__item {
    font-family: PingFangSC;
    color: #4285f4;
    span {
      cursor: pointer;
    }
  }
  /deep/.myTitle.t-breadcrumb__item {
    font-family: PingFangSC;
    color: #333;
  }
  .myTitle :hover {
    color: #333;
    cursor: not-allowed;
  }
  .backA {
    height: 28px;
    line-height: 28px;
    text-decoration: none;
    cursor: pointer;
    .backIconSpan {
      width: 25px;
      height: 28px;
      font-size: 20px;
      line-height: 28px;
    }
    svg {
      position: relative;
      top: 2px;
      left: 4px;
    }
    .backSpan {
      position: relative;
      top: -1px;
      left: 0;
      width: 40px;
      height: 28px;
      margin: 0 30px 0 10px;
      font-family: PingFangSC-Medium;
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      letter-spacing: 0;
      color: #333;
    }
  }
  .backA.noAllowed {
    cursor: not-allowed;
    svg {
      color: #e1e1e2;
    }
    .backSpan {
      color: #e1e1e2;
    }
  }
}
/deep/.t-input.t-is-disabled {
  background-color: #eee !important;
  border: 1px solid #dcdcdc;
}

.jgxxSelect {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 2px;
}
.jgxxSelect > li {
  display: block;
  padding: 3px 8px;
  overflow: hidden;
  line-height: 22px;
  color: var(--td-text-color-primary);
  text-overflow: ellipsis;
  word-wrap: normal;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.2s linear;
}

.jgxxSelect > li:hover {
  background-color: var(--td-bg-color-container-hover);
}
</style>
