<template>
  <div class="knowledge_base_container body_container">
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="16">
          <a-select
            allowClear
            :placeholder="$t('请选择功能模块')"
            v-model="pager.queryParams.F_moduleCode_eq"
            :options="moduleList"
            @change="querySearch"
          >
          </a-select>
          &nbsp;
          <a-input-search
            allowClear
            v-model="pager.queryParams.F_keywords_like"
            :placeholder="$t('标签/前后端错误信息')"
            @search="querySearch"
          />
        </a-col>
        <a-col
          :span="8"
          align="right"
        >
          <a-button
            type="primary"
            icon="search"
            @click="querySearch"
            >{{ $t('查询') }}</a-button
          >
          &nbsp;
          <a-upload
            name="file"
            :action="`${$service.portalService}/solution/importExcel`"
            :show-upload-list="false"
            :headers="{
              Authorization: `${$storage.getToken()}`,
            }"
            accept=".xlsx"
            @change="uploadFile"
          >
            <a-button
              type="primary"
              icon="cloud-upload"
              :loading="uploadLoading"
              >{{ $t('导入') }}</a-button
            >
          </a-upload>
          &nbsp;
          <a-button
            type="primary"
            icon="plus"
            @click="toEdit({})"
            >{{ $t('新增') }}</a-button
          >
        </a-col>
      </a-row>
      <div class="table_list">
        <vxe-table
          show-overflow
          show-header-overflow
          border
          resizable
          :row-config="{ isHover: true }"
          :data="dataList"
          height="auto"
        >
          <vxe-column
            type="seq"
            :title="$t('序号')"
            width="60"
            align="center"
          ></vxe-column>
          <vxe-column
            field="moduleName"
            :title="$t('功能模块')"
            width="160"
          ></vxe-column>
          <vxe-column
            field="childModuleName"
            :title="$t('子功能')"
            width="160"
          ></vxe-column>
          <vxe-column
            field="isEnable"
            :title="$t('状态')"
            width="100"
          >
            <template #default="{ row }">
              <a-switch
                :checked-children="$t('启用')"
                :un-checked-children="$t('禁用')"
                v-model="row.isEnable"
                @change="changeStatus(row)"
              />
            </template>
          </vxe-column>
          <vxe-column
            field="exceptionType"
            :title="$t('报错类型')"
            width="120"
          >
            <template #default="{ row }">
              {{ filterType(row.exceptionType) }}
            </template>
          </vxe-column>
          <vxe-column
            field="keywords"
            :title="$t('问题标签')"
            min-width="220"
          >
            <template #default="{ row }">
              <span
                class="link"
                type="link"
                @click="toEdit(row)"
                >{{ row.keywords }}</span
              >
            </template>
          </vxe-column>
          <vxe-column
            field="frontExceptionInfo"
            :title="$t('前端错误信息')"
            min-width="220"
          >
            <template #default="{ row }">{{ row.frontExceptionInfo || '--' }}</template>
          </vxe-column>
          <vxe-column
            field="backendExceptionInfo"
            :title="$t('后端错误信息')"
            min-width="220"
          >
            <template #default="{ row }">{{ row.backendExceptionInfo || '--' }}</template>
          </vxe-column>
          <vxe-column
            field="exceptionDesc"
            :title="$t('问题描述')"
            min-width="220"
          >
            <template #default="{ row }">{{ row.exceptionDesc || '--' }}</template>
          </vxe-column>
          <vxe-column
            field="exceptionSolution"
            :title="$t('解决方案')"
            min-width="220"
          >
            <template #default="{ row }">{{ row.exceptionSolution || '--' }}</template>
          </vxe-column>
          <vxe-column
            field="title"
            :title="$t('操作')"
            fixed="right"
            align="center"
            width="100"
          >
            <template #default="{ row }">
              <a-popconfirm
                :title="$t('确认要删除吗')"
                :ok-text="$t('是')"
                :cancel-text="$t('否')"
                @confirm="del(row)"
              >
                <a-button
                  type="link"
                  class="a_danger"
                  >{{ $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="getList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>
    <knowledgeInfo
      :show.sync="detailInfo.show"
      :info="detailInfo.info"
      @callback="getList"
    ></knowledgeInfo>
  </div>
</template>
<script>
  const knowledgeInfo = require('./knowledgeInfo').default;
  const $appService = require('w-vue-middle/api/appService');

  export default {
    components: {
      knowledgeInfo,
    },
    computed: {
      filterType() {
        return function (val) {
          let item = this.exceptionList.find((v) => {
            return v.value == val;
          });
          return item ? item.label : '--';
        };
      },
    },
    data() {
      return {
        loading: false,
        moduleList: [],
        exceptionList: [],
        pager: {
          pageNum: 1,
          pageSize: 15,
          queryParams: {
            F_moduleCode_eq: undefined,
            F_keywords_like: undefined,
            F_isDel_eq: 0,
          },
        },
        total: 0,
        dataList: [],
        detailInfo: {
          show: false,
          info: {},
        },
        uploadLoading: false,
      };
    },
    created() {
      this.getList();
      this.getModuleList();
      this.getExceptionList();
    },
    methods: {
      /**
       * @Author: y_zp
       * @description: 获取列表
       */
      getList() {
        this.loading = true;
        $appService
          .pagedSolutions({ ...this.pager })
          .then((req) => {
            this.total = Number(req.count);
            this.dataList = req.data.map((item) => {
              return {
                ...item,
                isEnable: item.isEnable == 0,
              };
            });
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /**
       * @Author: y_zp
       * @description: 查询
       */
      querySearch() {
        this.pager.pageNum = 1;
        this.getList();
      },
      /**
       * @Author: y_zp
       * @description: 新增/编辑
       */
      toEdit(row) {
        this.detailInfo = {
          show: true,
          info: { ...row },
        };
      },
      /**
       * @Author: y_zp
       * @description: 状态
       */
      changeStatus(row) {
        $appService
          .saveProblem({
            ...row,
            isEnable: row.isEnable ? 0 : 1,
            _X_ROW_KEY: undefined,
          })
          .then((req) => {
            this.getList();
          });
      },
      /**
       * @Author: y_zp
       * @description: 删除
       */
      del(row) {
        $appService
          .saveProblem({
            ...row,
            isEnable: row.isEnable ? 0 : 1,
            isDel: 1,
            _X_ROW_KEY: undefined,
          })
          .then((req) => {
            this.$message.success($t('删除成功'));
            this.getList();
          });
      },
      /**
       * @Author: y_zp
       * @description: 功能模块列表
       */
      getModuleList() {
        $appService
          .getSysDictData({
            pageNum: 1,
            pageSize: 1000000,
            queryParams: { F_isEnable_eq: 0, F_isDel_eq: 0, F_dictType_eq: 'micro_service' },
          })
          .then((req) => {
            this.moduleList = req.data.map((item) => {
              return {
                label: item.dictLabel,
                value: item.dictValue,
              };
            });
          });
      },
      /**
       * @Author: y_zp
       * @description: 问题类型列表
       */
      getExceptionList() {
        $appService
          .getSysDictData({
            pageNum: 1,
            pageSize: 1000000,
            queryParams: { F_isEnable_eq: 0, F_isDel_eq: 0, F_dictType_eq: 'sys_exception_type' },
          })
          .then((req) => {
            this.exceptionList = req.data.map((item) => {
              return {
                label: item.dictLabel,
                value: item.dictValue,
              };
            });
          });
      },
      /**
       * @Author: y_zp
       * @description: 问题类型导入
       */
      uploadFile(info) {
        this.uploadLoading = true;
        if (info.file.status == 'done') {
          if (info.file.response.success) {
            this.$message.success($t('导入成功'));
            this.getList();
          } else {
            this.$message.error(info.file.response.errorDetail.message);
          }
          this.uploadLoading = false;
        } else if (info.file.status == 'error') {
          this.uploadLoading = false;
          this.$message.error($t('导入失败，请重试'));
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .knowledge_base_container {
    .table_list {
      margin-top: 16px;
      height: calc(100vh - 230px);
      .link {
        color: #2d5afa;
      }
    }
  }
</style>
