<template>
  <!-- 新增编辑 -->
  <a-modal
    width="1400px"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="用户字典维护"
    :body-style="{ padding: '8px', height: '700px', overflowY: 'auto' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
    class="common-modal"
  >
    <div class="guns-layout">
      <div class="guns-layout-sidebar p-t-12 bgColor">
        <div class="sidebar-content">
          <user-dict-type @defaultSelect="defaultSelect" @treeSelect="treeSelect" :readonly="props.readonly"/>
        </div>
      </div>
      <div class="guns-layout-content">
        <div class="guns-layout">
          <div class="guns-layout-content-application">
            <div class="content-mian">
              <div class="content-mian-body">
                <div class="table-content">
                  <div class="save-btn" v-if="!props.readonly">
                    <a-button type="primary" class="border-radius" @click="saveDict">保存</a-button>
                  </div>
                  <div class="tag-list">
                    <div class="tag-item" v-for="(item, index) in userDictList" :key="index + 'tag'">
                      <div 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: 150px" :disabled="props.readonly"></a-input>
                      </div>
                      <div 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: 150px" :disabled="props.readonly"></a-input>
                      </div>
                      <div class="tag-item-input">
                        <span class="tag-item-input-label">排序：</span>
                        <a-input-number
                          v-model:value="item.dictSort"
                          placeholder="请输入排序"
                          :min="0"
                          :disabled="props.readonly"
                          style="width: 150px"
                        ></a-input-number>
                      </div>
                      <!-- 删除按钮 -->
                      <a-button type="primary" danger ghost class="color-btn" v-if="userDictList.length > 1 && !props.readonly" @click="deleteDictItem(index)">
                        <close-outlined />
                      </a-button>
                      <!-- 添加按钮 -->
                      <a-button type="primary" ghost class="color-btn" v-if="index == userDictList.length - 1 && !props.readonly" @click="addDictItem"
                        ><plus-outlined
                      /></a-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-button class="border-radius" v-if="props.readonly" @click="updateVisible(false)">取消</a-button>
      <a-button type="primary" class="border-radius" v-if="props.readonly" @click="save">确定</a-button>
    </template>
  </a-modal>
</template>

<script setup name="UserDict">
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import UserDictType from './user-dict-type/user-dict-type.vue';
import { MetaUserDictApi } from '../../api/MetaUserDictApi';

const props = defineProps({
  visible: Boolean,
  readonly: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);

const where = ref({
  dictTypeId: '',
  dictTypeName: ''
});

// 用户字典列表
const userDictList = ref([]);

onMounted(() => {});

// 获取用户字典列表
const getUserDictList = async () => {
  if (!where.value.dictTypeId) return;
  userDictList.value = await MetaUserDictApi.getDictItemList({ dictTypeId: where.value.dictTypeId });
  if (userDictList.value.length == 0) {
    addDictItem();
  }
};

// 默认选中分类
const defaultSelect = data => {
  where.value.dictTypeId = data.dictTypeId;
  where.value.dictTypeName = data.dictTypeName;
  getUserDictList();
};

// 左侧树选中
const treeSelect = (selectedKeys, metadata) => {
  where.value.dictTypeId = selectedKeys[0];
  where.value.dictTypeName = metadata.node.dictTypeName;
  getUserDictList();
};

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

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

// 保存当前字典列表
const saveDict = () => {
  if (userDictList.value.find(item => item.dictName == '' || item.dictCode == '')) {
    message.warning('字典名称或编码不能为空');
    return;
  }
  loading.value = true;
  let params = {
    dictList: userDictList.value,
    metaUserDictId: where.value.dictTypeId
  };
  MetaUserDictApi.updateDictItemList(params)
    .then(res => {
      message.success(res.message);
      getUserDictList();
    })
    .finally(() => (loading.value = false));
};

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = () => {
  emits('done', where.value);
  updateVisible(false);
};
</script>

<style lang="less" scoped>
.save-btn {
  height: 40px;
  margin-bottom: 10px;
}
.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;

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

.color-btn {
  height: 32px !important;
  line-height: 10px !important;
  padding: 8px 10px !important;

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