<template>
  <div v-if="step === '0'" class="select_asset">
    <p>选择待验收资产类型</p>
    <ul>
      <li>
        <img src="./commonAsset.gif" />
        <a><span>新增同类型资产</span></a>
      </li>
      <li @click="addNewAssets">
        <img src="./newAsset.gif" />
        <a><span>新增资产</span></a>
      </li>
    </ul>
  </div>
  <div v-if="step === '1'">
    <a-layout>
      <a-layout-header :style="headerStyle">
        <div class="tab_select">
          <a-radio-group v-model:value="nowSelect">
            <a-radio-button value="commonUse">
              <StarTwoTone /> 常用资产分类
            </a-radio-button>
            <a-radio-button value="detail">
              <WalletTwoTone /> 明细资产分类
            </a-radio-button>
          </a-radio-group>
          <div style="display: flex; align-items: center">
            <a-input />
            <span style="margin-left: 8px; width: 100px">类目搜索</span>
          </div>
        </div>
      </a-layout-header>
      <a-layout style="height: 430px">
        <a-layout-sider width="180px">
          <div style="width: 180px">
            <a-menu
              v-if="nowSelect === 'commonUse'"
              v-model:selectedKeys="selectedKeys"
              mode="inline"
              class="menu_style"
              :items="assetItems"
              @click="(record) => changeAssets(record.key)"
            />

            <a-menu
              v-else
              v-model:openKeys="openKeys"
              v-model:selectedKeys="selectedKeys1"
              mode="inline"
              class="menu_style"
              @click="(record) => changeDetailAsset(record.key)"
            >
              <SubMenu :menu-info="menuList" />
            </a-menu>
          </div>
        </a-layout-sider>
        <a-layout-content :style="contentStyle">
          <div v-if="nowSelect === 'commonUse'" class="item-list">
            <ul class="ul_list">
              <template v-if="secondMenu && secondMenu.length > 0">
                <li
                  v-for="(item, index) in secondMenu"
                  :key="index"
                  class="list-item"
                >
                  <div class="left fl">
                    {{ item.parent }}
                    <span class="jt_icon"> > </span>
                  </div>
                  <div class="right fl">
                    <ul>
                      <template v-if="item.children">
                        <li
                          v-for="(asset, index1) in item.children"
                          :key="index1"
                          @click="selectAsset(asset)"
                        >
                          {{ asset }}
                        </li>
                      </template>
                      <template v-else>
                        <li />
                      </template>
                    </ul>
                  </div>
                </li>
              </template>
            </ul>
          </div>
          <div v-else>
            <AssetList :tree-data="list" @get-asset-name="getAssetName" />
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';
import Common from '../../common/Common';
import { StarTwoTone, WalletTwoTone } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import SubMenu from './SubMenu.vue';
import AssetList from './AssetList.vue';

const list = ref([]);

const openKeys = ref([]);
const selectedKeys1 = ref([]);
const menuList = ref([]);

const emit = defineEmits(['getStepInfo', 'getAllName']);
const props = defineProps({
  step: {
    type: String,
    default: '0',
  },
});
// 当前操作的步骤是选择还是添加
const step = ref('0');

// 是常用还是明细切换标识
const nowSelect = ref('commonUse');

// 展示的菜单
const selectedKeys = ref([]);

// 菜单一级目录
const assetItems = ref([]);

// 所有资产分类数据
const assetCategorys = ref([]);

const secondMenu = ref([]);

// 所选资产分类名
const assetName = ref('');
const allName = ref('');

// 传递当前进行到选择类别的步骤
const addNewAssets = () => {
  step.value = '1';
  emit('getStepInfo', '1');
  getAssetCategorys();
};

// 当通用资产切换类别时获取对应的子分类
const changeAssets = key => {
  const thirdMenu = [];
  secondMenu.value = [];
  assetCategorys.value.forEach(item => {
    if (item.id === key) {
      if (item.children && item.children.length > 0) {
        item.children.forEach((child, index) => {
          if (child.children && child.children.length > 0) {
            child.children.forEach(child1 => {
              thirdMenu.push(child1.text);
            });
            secondMenu.value.push({ parent: child.text });
            secondMenu.value[index].children = thirdMenu;
          } else {
            secondMenu.value.push({ parent: child.text });
          }
        });
      }
    }
  });
};

// 处理明细资产分类数据
const getDetailData = datas => {
  openKeys.value = [];
  selectedKeys1.value = [];
  const assetDatas = JSON.parse(JSON.stringify(datas));
  assetDatas.forEach((item, index) => {
    menuList.value[index] = {};
    menuList.value[index].key = item.id;
    menuList.value[index].name = item.text;
    menuList.value[index].children = item.children;
    if (item.children && item.children.length > 0) {
      item.children.forEach(child => {
        child.key = child.id;
        child.name = child.text;
        delete child.children;
      });
    }
  });
  //  默认展开选择第一个
  openKeys.value.push(datas[0].id);
  selectedKeys1.value.push(menuList.value[0].children[0].id);
  changeDetailAsset(menuList.value[0].children[0].id);
};

// 当明细资产切换类别时获取对应的子分类
const changeDetailAsset = key => {
  let listMenu = [];
  assetName.value = '';
  allName.value = '';
  assetCategorys.value.forEach(item => {
    if (item.children && item.children.length) {
      item.children.forEach(child => {
        if (child.id === key) {
          assetName.value = child.text;
          allName.value = child.text;
          if (child.children && child.children.length) {
            listMenu.push(child.children);
          }
        }
      });
    }
  });
  list.value = listMenu.flat();
  emit('getStepInfo', step.value, allName.value);
};

// 获取明细所选资产
const getAssetName = name => {
  if (name) {
    allName.value = '';
    allName.value = assetName.value + '->' + name;
  }
  emit('getStepInfo', step.value, allName.value);
};

// 获取当前所选资产
const selectAsset = asset => {
  emit('getStepInfo', step.value, asset);
};

// 获取资分类数据
const getAssetCategorys = () => {
  $.ajax({
    url: Common.getApiURL('AssetCategoryResource/listRootSubAssetCategorys'),
    type: 'get',

    dataType: 'json',
    beforeSend: function (request) {
      Common.addTokenToRequest(request);
    },
    success: function (data) {
      if (data.errorCode === 0 && data.datas.length > 0) {
        assetItems.value = [];
        selectedKeys.value = [];
        data.datas.forEach((item, index) => {
          assetItems.value[index] = {};
          assetItems.value[index].key = item.id;
          assetItems.value[index].label = item.text;
          assetItems.value[index].title = item.text;
        });
        selectedKeys.value.push(data.datas[0].id);
        assetCategorys.value = data.datas;
        changeAssets(data.datas[0].id);
        getDetailData(data.datas);
      } else {
        message.warning(data.errorMessage);
      }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      Common.processException(XMLHttpRequest, textStatus, errorThrown);
    },
  });
};

const headerStyle = {
  backgroundColor: '#f0f0f0',
};
const contentStyle = {
  color: '#fff',
  backgroundColor: '#fafafa',
};

watch(
  () => props.step,
  newValue => {
    step.value = newValue;
    if (newValue === '0') {
      nowSelect.value = 'commonUse';
    }
  },
  { deep: true, immediate: true },
);
</script>

<style scoped>
.select_asset {
  position: relative;
  overflow: auto;
  height: 294px;
}
.select_asset > p {
  position: relative;
  height: 38px;
  line-height: 38px;
  text-align: center;
  margin: 16px 0 36px;
  font-size: 20px;
}
.select_asset > ul {
  overflow: hidden;
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: -38px !important;
}
.select_asset > li {
  height: 165px;
  padding-left: 65px;
  float: left;
}
.select_asset li img {
  margin: 0 auto;
  cursor: pointer;
}
.select_asset li a {
  display: block;
  text-align: center;
  position: relative;
  margin: 0;
  bottom: 36px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  text-align: center;
}
.select_asset a span {
  cursor: pointer;
  padding: 0 6px;
  line-height: 32px;
  background: #277fd0;
  color: #fff;
  display: inline-block;
  text-align: center;
}
.select_asset a span:hover {
  background: #3e9aef;
}

:deep(
    :where(.css-dev-only-do-not-override-16pw25h).ant-layout .ant-layout-header
  ) {
  height: 40px;
  line-height: 0;
  padding-inline: 0px;
}
.tab_select {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-list {
  width: 610px;
  height: 437px;
  overflow-y: auto;
  float: left;
  color: #333;
}

.ul_list {
  list-style-type: none;
  padding: 0;
}
.ul_list.active {
  display: block;
}
.ul_list > li {
  height: 40px;
  line-height: 40px;
}
.ul_list li .left {
  width: 130px;
  padding: 0 10px 0 16px;
  color: #777;
}
.ul_list li .right {
  width: 440px;
  display: inline-block;
  margin-left: -36px;
}
.ul_list li .right ul {
  list-style: none;
}
.ul_list li .right li {
  float: left;
  margin-right: 15px;
  cursor: pointer;
}
.fl {
  float: left;
}

.jt_icon {
  float: right;
}

.menu_style {
  background-color: #e5f2fd;
  height: 430px;
  overflow: auto;
}
</style>