<!--
 * @Author: Jason Liu
 * @Date: 2022-10-10 15:21:52
 * @Desc: 
-->
<template>
  <div class="app_system_container body_container">
    <a-row :gutter="[12, 12]">
      <a-col :span="10">
        <a-input-search
          allowClear
          :placeholder="$t('请输入应用名称')"
          v-model="pager.queryParams.F_appName_like"
          @search="getApps"
        />
      </a-col>
      <a-col :span="14" align="right">
        <a-button type="primary" icon="search" @click="getApps">{{
          $t("查询")
        }}</a-button>
        &nbsp;
        <a-button
          type="primary"
          icon="plus"
          v-w-auth-code="'add'"
          @click="
            editApp({
              appId: undefined,
              appKey: undefined,
              appName: undefined,
              appUuid: undefined,
              createBy: undefined,
              createTime: undefined,
              icon: undefined,
              isDel: 0,
              isEnable: 0,
              orderNum: 1,
              parentId: undefined,
              remark: undefined,
              updateBy: undefined,
              updateTime: undefined,
            })
          "
          >{{ $t("新增") }}</a-button
        >
      </a-col>
    </a-row>
    <div class="app_list">
      <vxe-table
        show-overflow
        show-header-overflow
        border
        resizable
        :loading="loading"
        :row-config="{ isHover: true }"
        :data="appList"
        :tree-config="{
          expandAll: true,
          transform: true,
          rowField: 'appId',
          parentField: 'parentId',
          trigger: 'cell',
        }"
        :key="tabKey"
        height="auto"
      >
        <vxe-column type="seq" :title="$t('序号')" width="50" align="center">
        </vxe-column>
        <vxe-column field="appName" :title="$t('应用名称')" tree-node></vxe-column>
        <vxe-column field="appKey" :title="$t('应用编码')"> </vxe-column>
        <vxe-column field="orderNum" :title="$t('顺序')" width="60" align="center">
        </vxe-column>
        <vxe-column field="isEnable" :title="$t('状态')" width="100" align="center">
          <template #default="{ row }">
            <a-tag v-if="row.isEnable != 0">{{ $t("关闭") }}</a-tag>
            <a-tag color="#2d5afa" v-else>{{ $t("启动") }}</a-tag>
          </template>
        </vxe-column>
        <vxe-column field="remark" :title="$t('应用描述')"> </vxe-column>
        <vxe-column :title="$t('操作')" width="300" align="center">
          <template #default="{ row }">
            <div class="operate">
              <a-button type="link" @click="editApp(row)" v-w-auth-code="'edit'">{{
                $t("编辑")
              }}</a-button>
              <a-button
                type="link"
                @click="addSubApp(row)"
                v-if="!row.parentId"
                v-w-auth-code="'add'"
                >{{ $t("添加子应用") }}</a-button
              >
              <a-button
                type="link"
                @click="designApp(row)"
                v-if="row.children.length == 0"
                v-w-auth-code="'design'"
                >{{ $t("设计菜单") }}</a-button
              >
              <a-popconfirm
                :title="$t('确定要删除吗')"
                :ok-text="$t('是')"
                :cancel-text="$t('否')"
                placement="left"
                @confirm="deleteApp(row)"
                v-w-auth-code="'delete'"
              >
                <a-button class="a_danger" type="link">{{ $t("删除") }}</a-button>
              </a-popconfirm>
            </div>
          </template>
        </vxe-column>
        <template #empty>
          <a-empty
            :image-style="{
              height: '80px',
            }"
          >
            <span slot="description">{{ $t("暂无数据") }}</span>
          </a-empty>
        </template>
      </vxe-table>

      <a-modal
        v-model="isedit"
        :title="$t('设计应用')"
        @ok="submit"
        :ok-text="$t('保存')"
        :confirmLoading="confirmLoading"
        :cancel-text="$t('取消')"
      >
        <a-form-model
          ref="form"
          :model="info"
          :rules="rules"
          :label-col="layout.labelCol"
          :wrapper-col="layout.wrapperCol"
        >
          <a-form-model-item :label="$t('应用编码')" prop="appKey">
            <a-input v-model="info.appKey" :placeholder="$t('请输入应用编码')" />
          </a-form-model-item>
          <a-form-model-item :label="$t('应用名称')" prop="appName">
            <a-input v-model="info.appName" :placeholder="$t('请输入应用名称')" />
          </a-form-model-item>
          <a-form-model-item :label="$t('顺序')" prop="orderNum">
            <a-input-number v-model="info.orderNum" :placeholder="$t('顺序')" />
          </a-form-model-item>
          <a-form-model-item :label="$t('状态')" prop="isEnable">
            <a-switch
              :checked-children="$t('启动')"
              :un-checked-children="$t('关闭')"
              v-model="info.isEnable"
              default-checked
            />
          </a-form-model-item>
          <a-form-model-item :label="$t('打开方式')" prop="isMenuNavigation">
            <a-radio-group v-model="info.isMenuNavigation" button-style="solid">
              <a-radio-button :value="0">{{ $t("站内打开") }}</a-radio-button>
              <a-radio-button :value="1">{{ $t("新窗口打开") }}</a-radio-button>
            </a-radio-group>
          </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>

      <menus :app-id="design.appid" :app-name="design.appname" v-model="design.show" />
    </div>
  </div>
</template>
<script>
const menus = require("./menus").default;
const $apps = require("w-vue-middle/api/apps");
export default {
  components: { menus },
  data() {
    return {
      loading: false,
      design: {
        appid: undefined,
        appname: undefined,
        show: false,
      },
      pager: {
        pageNum: 1,
        pageSize: 10000,
        queryParams: {
          F_appName_like: undefined,
          F_isDel_eq: 0,
          ORDER_orderNum_asc: 0,
        },
      },
      appList: [],
      isedit: false, //是否编辑
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      },
      info: {
        appName: undefined,
        order: undefined,
        remark: undefined,
      }, //编辑内容信息
      rules: {
        appKey: [{ required: true, message: $t("请输入应用编码"), trigger: "blur" }],

        appName: [{ required: true, message: $t("请输入应用名称"), trigger: "blur" }],
      },
      confirmLoading: false,
      tabKey: 0,
    };
  },
  created() {
    this.getApps();
  },
  methods: {
    /**
     * @Author: Jason Liu
     * @description: 设计应用菜单
     */
    designApp(row) {
      this.design = {
        show: true,
        appname: row.appName,
        appid: row.appId,
      };
    },
    /**
     * @Author: Jason Liu
     * @description: 获取应用列表
     */
    getApps() {
      this.loading = true;
      $apps
        .getAppList(this.pager)
        .then((req) => {
          this.appList = req.data;
          this.tabKey++;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * @Author: Jason Liu
     * @description: 添加应用
     */
    addSubApp(row) {
      this.editApp({
        appId: undefined,
        appKey: undefined,
        appName: undefined,
        appUuid: undefined,
        createBy: undefined,
        createTime: undefined,
        isMenuNavigation: 0,
        icon: undefined,
        orderNum: 1,
        isDel: 0,
        isEnable: 0,
        parentId: row.appId,
        remark: undefined,
        updateBy: undefined,
        updateTime: undefined,
      });
    },
    /**
     * @Author: Jason Liu
     * @description: 删除应用
     */
    deleteApp(row) {
      this.loading = true;
      $apps
        .deleteAppById(row.appId)
        .then((req) => {
          this.$message.success($t("应用删除成功"));
        })
        .finally(() => {
          this.getApps();
        });
    },
    /**
     * @Author: Jason Liu
     * @description: 编辑应用
     */
    editApp(row) {
      if (this.$refs["form"]) {
        this.$refs["form"].resetFields();
      }
      this.isedit = true;
      this.info = JSON.parse(JSON.stringify(row));
      if (this.info.isEnable == 0) {
        this.info.isEnable = true;
      } else {
        this.info.isEnable = false;
      }

      if (!this.info.isMenuNavigation) {
        this.info.isMenuNavigation = 0;
      }

      this.info._X_ROW_KEY = undefined;
    },
    /**
     * @Author: Jason Liu
     * @description: 保存应用
     */
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.info.children = undefined;
          this.info._X_ROW_CHILD = undefined;
          let param = JSON.parse(JSON.stringify(this.info));
          this.confirmLoading = true;
          if (this.info.isEnable) {
            param.isEnable = 0;
          } else {
            param.isEnable = 1;
          }
          $apps
            .saveApp(param)
            .then((req) => {
              this.$message.success($t("应用保存成功"));
              this.isedit = false;
              this.getApps();
            })
            .finally(() => {
              this.confirmLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="less">
.app_system_container {
  .app_list {
    width: 100%;
    height: calc(100vh - 180px);
    margin-top: 12px;
    .ant-btn {
      padding: 0 6px;
    }
    .ant-tag {
      height: 24px;
      line-height: 22px;
    }
  }
}
</style>
