<!--
 * @Author: Liugh
 * @Date: 2021-05-17 14:53:19
 * @LastEditTime: 2021-09-07 09:23:57
 * @LastEditors: Please set LastEditors
 * @FilePath: \auth-web\src\pages\data-auth-module\auth-subject-manage\institutional-attributes.vue
 * @Description: 
-->
<template>
  <main class="institutional-attributes">
    <!-- <el-form ref="ruleForm" inline>
            <el-form-item label="最近同步时间：" style="float: right">
                <span>2021-04-08 12:00:00</span>
            </el-form-item>
        </el-form> -->

    <div class="buttonGroup">
      <dg-button type="primary" @click="handleImport" icon="el-icon-upload2">导入</dg-button>
        <dg-button
        type="primary"
        @click="handleSync(orgSyncUrl)"
        icon="el-icon-refresh"
        v-permission="'QXGL_SQGL_ZTGL_JGTB'"
        >同步</dg-button
      >
      <dg-button
        type="primary"
        @click="handleSync(orgAddSyncUrl)"
        icon="el-icon-refresh"
        v-permission="'QXGL_SQGL_ZTGL_JGZLTB'"
        >增量同步</dg-button
      >
    </div>

    <dg-row gutter="1rem">
      <dg-col :span="5">
        <dg-card shadow="never" header="机构列表">
          <tree
            :key="key"
            ref="tree"
            class="u-pm__left"
            :search="true"
            apiName="getOrgTree"
            @handleGetNode="handleGetNode"
            @submitRootNode="submitRootNode"
          />
        </dg-card>
      </dg-col>
      <dg-col :span="19">
        <dg-card shadow="never" header="机构管理">
          <el-form class="institutional-info" ref="form" :model="formInfo" label-suffix=":" label-width="120px">
            <el-row v-if="formInfo.id">
              <el-col :span="12" v-for="(item, index) in orgDetail" :key="index">
                <el-form-item :label="item.label">
                  <div v-if="item.code" v-translate="{ code: item.code }">{{ formInfo[item.value] }}</div>
                  <div v-else-if="item.enum" v-translate="{ enum: item.enum }">
                    {{ formInfo[item.value] }}
                  </div>
                  <div v-else-if="item.url" v-translate="{ url: item.url, valueName: 'CODE', labelName: 'VALUE' }">
                    {{ formInfo[item.value] }}
                  </div>
                  <span v-else>{{ formInfo[item.value] }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </dg-card>
      </dg-col>
    </dg-row>
  </main>
</template>

<script>
import Tree from '@/components/tree';
import { orgDetail } from '../DataConfig';
import { orgInfoDetail } from '@/api/data-auth';
import { sync, orgAddSyncUrl, orgSyncUrl } from '@/api/sync';
import importFile from '@/components/import';
import { orgImportUrl } from '@/api/import';
export default {
  name: 'institutional-attributes', // 组件名称
  props: {},
  data() {
    return {
      orgDetail,
      formInfo: {},
      keyword: '',
      currentId: '',
      key: 0,
      orgAddSyncUrl,
      orgSyncUrl
    };
  },
  computed: {}, // 计算属性
  watch: {}, // 侦听器（扩展的计算属性）
  components: { Tree }, // 注册局部组件
  methods: {
    /**
     * @description:导入方法
     */
    handleImport() {
      const vm = this;
      const layer = this.$dgLayer({
        title: '导入',
        content: importFile,
        props: {
          temp: 'org',
          action: orgImportUrl
        },
        on: {
          success(params) {
            vm.key++;
            layer.close(layer.dialogIndex);
          }
        },
        cancel: function (index, layero) {
          // 关闭对应弹窗的ID
          layer.close(index);
          return false;
        },
        area: ['550px', '500px']
      });
    },
    /**
     * @description:同步方法，假同步
     */
    handleSync(url) {
      sync(url).then((res) => {
        this.$message.success('同步中，若数据量大，可能会存在延迟，请稍后自行刷新！');
        // this.handleSearch();
      });
    },
    /**
     * @description:树方法
     */
    handleGetNode({ id }) {
      if (this.currentId != id) {
        this.formInfo = {};
        this.currentId = id;
        this.getDetail();
      }
    },
    /**
     * 获取机构详情
     */
    getDetail() {
      orgInfoDetail(this.currentId).then((res) => {
        this.formInfo = res.data;
      });
    },
    /**
     * @description: 默认查询跟节点
     */
    submitRootNode({ id, name }) {
      this.$nextTick(() => {
        this.handleGetNode({ id, name });
      });
    }
  },
  created() {}, // 组件创建完成后
  mounted() {} // 组件挂载完成后
};
</script>
<style lang="scss" scoped>
@import '../index.scss';
</style>
