<script setup lang="ts">
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
import { userinfo } from "@/store/store.ts";
import YlActionDiv from "@/components/yl-action-div.vue";
import { ref } from "vue";
import _ from "lodash";
import { formatError } from "@/utils/utils.ts";
import { ElMessage } from "element-plus";
// 空系统设置选项
let _blank: sysSettings = {
  name: "",
  value: "",
  cn_name: "",
  d_type: "string",
};
// 新增或修改系统设置弹窗信息
const modal = ref<{ visible: boolean; title: string; data: sysSettings }>({
  visible: false,
  title: "",
  data: _.cloneDeep(_blank),
});
//获取系统设置列表
const { data, run, loading } = useRequest(() =>
  myRequest(`/admin/sys`, userinfo.token),
);
//更新系统设置信息
const { runAsync: updateSys } = useRequest(
  () =>
    myRequest(
      `/admin/sys`,
      userinfo.token,
      modal.value.data,
      modal.value.title === "新增配置" ? "post" : "put",
    ),
  { manual: true },
);
// 弹窗保存方法
const onSave = () => {
  updateSys()
    .then(() => {
      modal.value.visible = false;
      run();
    })
    .catch((err) => ElMessage.error(formatError(err)));
};
</script>

<template>
  <yl-action-div>
    <el-button
      type="primary"
      @click="
        modal = { visible: true, title: '新增配置', data: _.cloneDeep(_blank) }
      "
      >新增配置</el-button
    >
  </yl-action-div>
  <el-tabs tab-position="left" v-if="Boolean(data)">
    <el-tab-pane v-for="item in data.data" :label="item.name">
      <el-table :data="item.data" v-loading="loading">
        <el-table-column label="字段名" prop="name" align="center" />
        <el-table-column label="字段值" prop="value" align="center">
          <template #default="scope">
            <el-tag
              type="info"
              v-for="item in scope.row.value ? scope.row.value.split(',') : []"
              v-if="scope.row.d_type === 'option'"
              >{{ item }}</el-tag
            >
            <span v-else>{{ scope.row.value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="中文名" prop="cn_name" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              link
              @click="
                modal = {
                  visible: true,
                  title: '编辑配置',
                  data: _.cloneDeep(scope.row),
                }
              "
              >编辑</el-button
            >
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
  <el-dialog v-model="modal.visible" destroy-on-close :title="modal.title">
    <el-form label-width="80">
      <el-form-item label="字段类型">
        <el-radio-group v-model="modal.data.d_type">
          <el-radio value="string">字符串</el-radio>
          <el-radio value="option">选项</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="字段名" required>
        <el-input v-model="modal.data.name" />
      </el-form-item>
      <el-form-item label="字段值" required>
        <el-input
          v-model="modal.data.value"
          v-if="modal.data.d_type == 'string'"
        />
        <el-input-tag
          :model-value="modal.data.value ? modal.data.value.split(',') : []"
          @change="(v: string[]) => (modal.data.value = v.join(','))"
          v-else-if="modal.data.d_type == 'option'"
        />
        <el-input v-model="modal.data.value" disabled v-else />
      </el-form-item>
      <el-form-item label="中文名">
        <el-input v-model="modal.data.cn_name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="onSave">保存</el-button>
    </template>
  </el-dialog>
</template>

<style scoped></style>
