<template>
  <app-dialog v-model="visible" :loading="dialogLoading" :title="title" append-to-body class="detail-dialog"
              hide-footer
              width="60%"
              @confirm="onConfirm"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <div class="h-100 flex-col border-radius-5">
          <div class="mb-15">
            <el-button icon="el-icon-s-tools" size="mini" type="primary" @click="authorizeChange">资源授权</el-button>
            <el-button :disabled="!selectDataList.length>0" icon="el-icon-delete" size="mini" type="danger"
                       @click="deleteChange"
            >删除
            </el-button>
          </div>
          <app-table
            :column="columnChange"
            :index="false"
            :pagination="pagination"
            :table-data="tableData"
            :table-loading="tableLoading"
            :total="total"
            checkbox
            @select-change="selectChange"
            @pagination-change="onPaginationChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 资源列表 -->
    <resource-list v-if="resourcePopup" :id="selectRowId" v-model="resourcePopup" :type="activeName"
                   @confirm="onCompanyConfirm"
    />
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import tableMixin from '@/mixins/table.js';
import ResourceList from './ResourceList.vue';
import API from '@/api/business/shareDataCall';

export default {
  name: 'ResourceAuthorize',
  components: { ResourceList },
  mixins: [dialogMixin, tableMixin],
  props: {
    title: {
      type: String,
      default: '已授权资源',
    },
    selectRowId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      activeName: 'sql',
      tabList: [{
        name: 'sql',
        title: '库表共享资源',
      }, {
        name: 'file',
        title: '文件共享资源',
      }, {
        name: 'api',
        title: '接口共享资源',
      }],
      dialogLoading: false,
      sqlColumns: [
        { label: '资源名称', prop: 'tableName', align: 'center' },
        { label: '数据库表名', prop: 'tableCode', align: 'center' },
        // { label: '资源更新周期', prop: 'updateRate', width: '150px', align: 'center' },
        // { label: '资源级别', prop: 'level', width: '100px', align: 'center' },
      ],
      fileColumns: [
        { label: '文件名称', prop: 'fileName', align: 'center', width: '250px' },
        { label: '文件描述', prop: 'fileContent', align: 'center' },
        { label: '文件类型', prop: 'fileType', align: 'center' },
      ],
      apiColumns: [
        { label: '接口名称', prop: 'apiName', align: 'center' },
        { label: '接口地址', prop: 'apiUrl', align: 'center' },
        { label: '请求方式', prop: 'apiMode', align: 'center' },
      ],
      resourcePopup: false,
      ids: [],
      selectDataList: [],
      isAuthorizeShow: true,
    };
  },
  computed: {
    columnChange() {
      if (this.activeName === 'sql') {
        return this.sqlColumns;
      } else if (this.activeName === 'file') {
        return this.fileColumns;
      } else {
        return this.apiColumns;
      }
    },
    dataMethod() {
      if (this.activeName === 'sql') {
        return API.authorizationDatabase;
      } else if (this.activeName === 'file') {
        return API.authorizationFile;
      } else {
        return API.authorizationApi;
      }
    },
  },
  methods: {
    handleClick(tab, event) {
      this.refresh();
      // console.log(tab, event);
    },
    initData(data) {
      console.log(data, '0000000000');
      // this.selectRowId = data.id;
    },
    onConfirm() {
      this.$emit('confirm');
    },
    authorizeChange() {
      this.resourcePopup = true;
    },
    selectChange(data) {
      this.selectDataList = data;
      this.selectDataList = [];
      data.forEach((item) => {
        this.selectDataList.push(item.authId);
      });
    },
    onCompanyConfirm() {
      this.getData();
    },
    deleteChange() {
      if (Array.isArray(this.selectDataList) && this.selectDataList.length) {
        const delId = JSON.parse(JSON.stringify(this.selectDataList)).join(',');
        this.$confirm('是否删除选中数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          try {
            const { state } = await API.authorizationDelete(delId);
            if (state) {
              this.$message.success('删除成功！');
              this.getData();
            }
          } catch (err) {
            this.$message.warning(err || '删除失败！');
          }
        });
      } else {
        this.$message({
          message: '请选择要删除的数据！',
          type: 'warning',
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__cell:first-child .cell {
  text-align: center;
}

::v-deep .gz-dialog .app-dialog-content {
  padding-top: 0 !important;
}

::v-deep .el-tabs .el-tabs__header.is-top {
  padding: 0 !important;
}
</style>
