<template>
  <div class="system_parameter_container body_container">
    <a-row>
      <a-col :span="10">
        <a-input-search
          allowClear
          v-model="pager.queryParams.F_configName_like"
          :placeholder="$t('请输入参数名称')"
          @search="querySearch"
        />
        &nbsp;
        <a-input-search
          allowClear
          v-model="pager.queryParams.F_configKey_like"
          :placeholder="$t('请输入参数键名')"
          @search="querySearch"
        />
      </a-col>
      <a-col
        :span="14"
        align="right"
      >
        <a-button
          type="primary"
          icon="search"
          @click="querySearch"
          >{{ $t('查询') }}</a-button
        >
        &nbsp;
        <a-button
          type="primary"
          icon="plus"
          @click="editFlow({})"
          v-w-auth-code="'add'"
          >{{ $t('新增') }}</a-button
        >
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <div class="table_list">
        <vxe-table
          show-overflow
          show-header-overflow
          border
          resizable
          :row-config="{ isHover: true }"
          :data="lists"
          height="auto"
        >
          <vxe-column
            type="seq"
            :title="$t('序号')"
            width="60"
            align="center"
          ></vxe-column>
          <vxe-column
            field="configName"
            :title="$t('参数名称')"
          ></vxe-column>
          <vxe-column
            field="configKey"
            :title="$t('参数键名')"
          ></vxe-column>
          <vxe-column
            field="configValue"
            :title="$t('参数键值')"
          ></vxe-column>
          <vxe-column
            field="remark"
            :title="$t('备注')"
          ></vxe-column>
          <vxe-column
            :title="$t('操作')"
            width="160"
            align="center"
          >
            <template #default="{ row }">
              <a-button
                class="btn"
                type="link"
                @click="editFlow(row)"
                v-w-auth-code="'edit'"
                >{{ $t('编辑') }}</a-button
              >
              <a-popconfirm
                :title="$t('确认删除这条内容吗')"
                :ok-text="$t('确定')"
                :cancel-text="$t('取消')"
                @confirm="deleteFlow(row)"
                v-w-auth-code="'delete'"
                v-if="false"
              >
                <a-button
                  class="btn a_danger"
                  type="link"
                  >{{ $t('删除') }}</a-button
                >
              </a-popconfirm>
            </template>
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description">{{ $t('暂无数据') }}</span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
      <vxe-pager
        background
        :current-page.sync="pager.pageNum"
        :page-size.sync="pager.pageSize"
        :total="total"
        @page-change="getFlowList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>

    <a-modal
      :title="$t('参数设置')"
      :visible="show"
      :confirm-loading="pLoading"
      :destroy-on-close="true"
      @ok="saveParameter"
      @cancel="cancel"
      :ok-text="$t('保存')"
      :cancel-text="$t('取消')"
    >
      <a-form-model
        ref="parameterForm"
        :model="info"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-model-item
          :label="$t('参数名称')"
          prop="configName"
        >
          <a-input
            v-model="info.configName"
            :placeholder="$t('请输入参数名称')"
          />
        </a-form-model-item>
        <a-form-model-item
          :label="$t('参数键名')"
          prop="configKey"
        >
          <a-input
            v-model="info.configKey"
            :placeholder="$t('请输入参数键名')"
          />
        </a-form-model-item>
        <a-form-model-item
          :label="$t('参数键值')"
          prop="configValue"
        >
          <a-input
            v-model="info.configValue"
            :placeholder="$t('请输入参数键值')"
          />
        </a-form-model-item>
        <a-form-model-item
          :label="$t('备注')"
          prop="remark"
        >
          <a-input
            v-model="info.remark"
            :placeholder="$t('请输入备注')"
            type="textarea"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
  const $appService = require('w-vue-basis/src/api/appService');
  export default {
    data() {
      return {
        loading: false,
        total: 0,
        lists: [],
        pager: {
          pageNum: 1,
          pageSize: 15,
          queryParams: {
            F_configName_like: undefined,
            F_configKey_like: undefined,
            ORDER_createTime_asc: '0',
          },
        },
        show: false,
        pLoading: false,
        info: {},
        rules: {
          configName: [{ required: true, message: $t('请输入参数名称'), trigger: 'blur' }],

          configKey: [{ required: true, message: $t('请输入参数键名'), trigger: 'blur' }],

          configValue: [{ required: true, message: $t('请输入参数键值'), trigger: 'blur' }],
        },
      };
    },
    created() {
      this.getFlowList();
    },
    methods: {
      /**
       * @Author: y_zp
       * @description: 获取列表
       */
      getFlowList() {
        this.loading = true;
        $appService
          .sysConfigList({ ...this.pager })
          .then((req) => {
            this.total = Number(req.count);
            this.lists = req.data;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /**
       * @Author: y_zp
       * @description: 编辑/新增
       */
      editFlow(row) {
        this.show = true;
        if (row.configId) {
          this.info = { ...row };
        } else {
          this.info = {
            configId: undefined,
            configName: undefined,
            configKey: undefined,
            configValue: undefined,
            remark: undefined,
          };
        }
      },
      /**
       * @Author: y_zp
       * @description: 保存
       */
      saveParameter() {
        this.$refs.parameterForm.validate((valid) => {
          if (valid) {
            this.pLoading = true;
            this.info._X_ROW_KEY = undefined;
            $appService
              .sysConfigSave({ ...this.info })
              .then((req) => {
                this.$message.success($t('参数设置保存成功'));
                this.show = false;
                this.getFlowList();
              })
              .finally(() => {
                this.pLoading = false;
              });
          }
        });
      },
      /**
       * @Author: y_zp
       * @description: 取消
       */
      cancel() {
        this.show = false;
        this.$refs.parameterForm.resetFields();
      },
      /**
       * @Author: y_zp
       * @description: 查询
       */
      querySearch() {
        this.pager.pageNum = 1;
        this.getFlowList();
      },
      /**
       * @Author: y_zp
       * @description: 删除
       */
      deleteFlow(row) {
        $appService.delSysConfig(row.configId).then((req) => {
          this.$message.success($t('参数设置删除成功'));
          this.getFlowList();
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .system_parameter_container {
    .table_list {
      width: 100%;
      height: calc(100vh - 230px);
      display: inline-block;
      margin-top: 16px;
    }
  }
</style>
