<template>
  <div class="system_parameter_container body_container">
    <a-row>
      <a-col :span="10">
        <a-input-search
          allowClear
          v-model="pager.queryParams.F_dictLabel_like"
          :placeholder="$t('请输入字典名称')"
          @search="querySearch"
        />
        &nbsp;
        <a-input-search
          allowClear
          v-model="pager.queryParams.F_dictType_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="dictLabel" :title="$t('字典名称')"></vxe-column>
          <vxe-column field="dictType" :title="$t('字典类型')"></vxe-column>
          <vxe-column field="dictValue" :title="$t('字典键值')"></vxe-column>
          <vxe-column field="dictSort" :title="$t('字典排序')"></vxe-column>
          <vxe-column field="isEnable" :title="$t('状态')">
            <template #default="{ row }">
              <a-switch
                v-model="row.isEnable"
                :checked-children="$t('启用')"
                :un-checked-children="$t('禁用')"
                @change="changeEnable(row)"
              />
            </template>
          </vxe-column>
          <vxe-column field="isDefault" :title="$t('是否默认')" align="center">
            <template #default="{ row }">
              <a-tag class="tag_or" v-if="row.isDefault == 'Y'">{{ $t("是") }}</a-tag>
              <a-tag class="tag_entry" v-else>{{ $t("否") }}</a-tag>
            </template>
          </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'"
              >
                <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="dLoading"
      :destroy-on-close="true"
      @ok="saveDictionary"
      @cancel="cancel"
      :ok-text="$t('保存')"
      :cancel-text="$t('取消')"
    >
      <a-form-model
        ref="dictForm"
        :model="info"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-model-item :label="$t('字典名称')" prop="dictLabel">
          <a-input v-model="info.dictLabel" :placeholder="$t('请输入字典名称')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('字典类型')" prop="dictType">
          <a-input v-model="info.dictType" :placeholder="$t('请输入字典类型')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('字典键值')" prop="dictValue">
          <a-input v-model="info.dictValue" :placeholder="$t('请输入字典键值')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('字典排序')" prop="dictSort">
          <a-input-number v-model="info.dictSort" :min="0" />
        </a-form-model-item>
        <a-form-model-item :label="$t('状态')" prop="isEnable">
          <a-switch
            v-model="info.isEnable"
            :checked-children="$t('启用')"
            :un-checked-children="$t('禁用')"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('是否默认')" prop="isDefault">
          <a-switch v-model="info.isDefault" />
        </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_dictLabel_like: undefined,
          F_dictType_like: undefined,
          ORDER_createTime_asc: "0",
        },
      },
      show: false,
      dLoading: false,
      info: {},
      rules: {
        dictLabel: [{ required: true, message: $t("请输入字典名称"), trigger: "blur" }],

        dictType: [{ required: true, message: $t("请输入字典类型"), trigger: "blur" }],

        dictValue: [{ required: true, message: $t("请输入字典键值"), trigger: "blur" }],

        dictSort: [{ required: true, message: $t("请输入字典排序"), trigger: "blur" }],
      },
    };
  },
  created() {
    this.getFlowList();
  },
  methods: {
    /**
     * @Author: y_zp
     * @description: 获取列表
     */
    getFlowList() {
      this.loading = true;
      $appService
        .getSysDictData({ ...this.pager })
        .then((req) => {
          this.total = Number(req.count);
          this.lists = req.data.map((item) => {
            return {
              ...item,
              isEnable: item.isEnable == 1 ? false : true,
            };
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * @Author: y_zp
     * @description: 列表启用/禁用
     */
    changeEnable(row) {
      row._X_ROW_KEY = undefined;
      $appService
        .sysDictDataSave({ ...row, isEnable: row.isEnable ? 0 : 1 })
        .then((req) => {
          this.getFlowList();
        });
    },
    /**
     * @Author: y_zp
     * @description: 编辑/新增
     */
    editFlow(row) {
      this.show = true;
      if (row.dictCode) {
        this.info = {
          ...row,
          isDefault: row.isDefault == "Y" ? true : false,
        };
      } else {
        this.info = {
          dictLabel: undefined,
          dictType: undefined,
          dictValue: undefined,
          dictSort: undefined,
          isEnable: true,
          isDefault: false,
          remark: undefined,
        };
      }
    },
    /**
     * @Author: y_zp
     * @description: 保存
     */
    saveDictionary() {
      this.$refs.dictForm.validate((valid) => {
        if (valid) {
          this.dLoading = true;
          this.info._X_ROW_KEY = undefined;
          $appService
            .sysDictDataSave({
              ...this.info,
              isEnable: this.info.isEnable ? 0 : 1,
              isDefault: this.info.isDefault ? "Y" : "N",
            })
            .then((req) => {
              this.$message.success($t("字典设置保存成功"));
              this.show = false;
              this.getFlowList();
            })
            .finally(() => {
              this.dLoading = false;
            });
        }
      });
    },
    /**
     * @Author: y_zp
     * @description: 取消
     */
    cancel() {
      this.show = false;
      this.$refs.dictForm.resetFields();
    },
    /**
     * @Author: y_zp
     * @description: 查询
     */
    querySearch() {
      this.pager.pageNum = 1;
      this.getFlowList();
    },
    /**
     * @Author: y_zp
     * @description: 删除
     */
    deleteFlow(row) {
      $appService.sysDictDataDel(row.dictCode).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>
