<template>
  <div class="guns-layout">
    <guns-split-layout>
      <div class="guns-layout-sidebar width-100 p-t-12">
        <div class="sidebar-content">
          <BusinessDictType
            @treeSelect="treeSelect"
            :buinessSelectAppData="buinessSelectAppData"
            :getBusinessStatCount="props.getBusinessStatCount"
            :showAll="props.showAll"
          />
        </div>
      </div>
      <template #content>
        <div class="guns-layout-content">
          <div class="guns-layout">
            <div class="guns-layout-content-header">
              <a-space>
                <span>{{ dictTypeName }}</span>
              </a-space>
              <a-space :size="16">
                <a-button type="primary" class="border-radius" @click="save">保存</a-button>
                <a-button type="primary" ghost class="border-radius" @click="exportSql">导出SQL</a-button>
                <a-button class="border-radius" @click="generJava">生成java枚举</a-button>
              </a-space>
            </div>
            <div class="guns-layout-content-application">
              <div class="content-mian">
                <div class="content-mian-body">
                  <div class="table-content">
                    <a-spin :spinning="loading" :delay="100">
                      <div class="tag-list">
                        <a-row class="tag-item" :gutter="16" v-for="(item, index) in dictList" :key="index + 'tag'">
                          <a-col :span="7" class="tag-item-input">
                            <span class="tag-item-input-label" style="width: 80px">字典名称：</span>
                            <a-input
                              allowClear
                              v-model:value="item.dictName"
                              placeholder="请输入字典名称"
                              style="width: calc(100% - 80px)"
                            ></a-input>
                          </a-col>
                          <a-col :span="7" class="tag-item-input">
                            <span class="tag-item-input-label" style="width: 120px">字典编码（值）：</span>
                            <a-input
                              allowClear
                              v-model:value="item.dictCode"
                              placeholder="请输入字典编码"
                              style="width: calc(100% - 120px)"
                            ></a-input>
                          </a-col>
                          <a-col :span="7" class="tag-item-input">
                            <span class="tag-item-input-label" style="width: 60px">排序：</span>
                            <a-input-number
                              v-model:value="item.dictSort"
                              placeholder="请输入排序"
                              :min="0"
                              style="width: calc(100% - 60px)"
                            ></a-input-number>
                          </a-col>
                          <a-col :span="2">
                            <a-space>
                              <!-- 删除按钮 -->
                              <DeleteOutlined v-if="dictList.length > 1" @click="deleteDictItem(index)" class="color-btn" />
                              <!-- 添加按钮 -->
                              <PlusCircleOutlined v-if="index == dictList.length - 1" @click="addDictItem" class="color-btn" />
                            </a-space>
                          </a-col>
                        </a-row>
                      </div>
                    </a-spin>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </guns-split-layout>

    <!-- 导出字典sql -->
    <ExportDictSql
      v-model:visible="showExportDictSql"
      v-if="showExportDictSql"
      :businessId="buinessSelectAppData?.businessId"
      :businessCategoryId="businessCategoryId"
    />
    <GenerationJava
      v-model:visible="showJava"
      v-if="showJava"
      :businessId="buinessSelectAppData?.businessId"
      :businessCategoryId="businessCategoryId"
    />
  </div>
</template>

<script setup name="BuinessDict">
import { useGeneratorStore } from '@/store/modules/generator';
import { onMounted, computed, ref, watch, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue/es';
import { BusinessDictApi } from './api/BusinessDictApi';

const BusinessDictType = defineAsyncComponent(() => import('./components/business-dict-type.vue'));
const ExportDictSql = defineAsyncComponent(() => import('../../../form/design/components/user-dict/user-dict-type/export-dict-sql.vue'));
const GenerationJava = defineAsyncComponent(() => import('./components/gener-java.vue'));

defineOptions({
  name: 'BuinessDict'
});

const props = defineProps({
  // 是否查询全部
  showAll: {
    type: Boolean,
    default: false
  },
  getBusinessStatCount: Function
});

const router = useRouter();

const generatorStore = useGeneratorStore();

// 当前选中应用数据
const buinessSelectAppData = computed(() => (props.showAll ? {} : (generatorStore.buinessSelectAppData ?? {})));

const dictTypeName = ref('字典类型');
const businessCategoryId = ref('');

const loading = ref(false);

// 字典列表
const dictList = ref([]);

const showExportDictSql = ref(false);

const showJava = ref(false);

onMounted(() => {
  if (!props.showAll && !buinessSelectAppData.value?.businessId) {
    return goHome();
  }
});

// 返回应用列表页
const goHome = () => {
  router.push(generatorStore.appBackUrl);
};

// 获取字典列表
const getDictList = () => {
  if (!businessCategoryId.value) return;
  loading.value = true;
  BusinessDictApi.detail({ metaUserDictId: businessCategoryId.value })
    .then(res => {
      dictList.value = res.dictList ?? [];
      if (dictList.value.length == 0) {
        addDictItem();
      }
    })
    .finally(() => (loading.value = false));
};

// 树选中
const treeSelect = node => {
  dictTypeName.value = node.dictTypeName;
  businessCategoryId.value = node.dictTypeId;
  getDictList();
};

// 新增列
const addDictItem = () => {
  let obj = {
    dictCode: '',
    dictName: '',
    dictSort: 100
  };
  dictList.value.push(obj);
};

// 删除列
const deleteDictItem = index => {
  dictList.value.splice(index, 1);
};

const save = () => {
  if (dictList.value.find(item => item.dictName == '' || item.dictCode == '')) {
    message.warning('字典名称或编码不能为空');
    return;
  }
  loading.value = true;
  let params = {
    dictList: dictList.value,
    metaUserDictId: businessCategoryId.value
  };
  BusinessDictApi.updateDictItemList(params)
    .then(res => {
      message.success(res.message);
      getDictList();
    })
    .finally(() => (loading.value = false));
};

const exportSql = () => {
  showExportDictSql.value = true;
};

const generJava = () => {
  showJava.value = true;
};
</script>

<style scoped lang="less">
.tag-list {
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: auto;
}

.tag-item {
  display: flex;
  width: 100%;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 10px;
  }
}

.tag-item-input {
  display: flex;
  align-items: center;
}

.color-btn {
  font-size: 18px;
  cursor: pointer;
  color: #60666b;

  &:not(:last-child) {
    margin-right: 10px;
  }
}
</style>
