<template>
  <app-dialog v-model="visible" :loading="dialogLoading" :title="title" append-to-body class="detail-dialog"
              width="60%"
              @confirm="onConfirm"
  >
    <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="columns"
        :index="false"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        checkbox
        @select-change="selectChange"
        @pagination-change="onPaginationChange"
      />
    </div>
    <!-- 资源列表 -->
    <resource-list v-if="resourcePopup" v-model="resourcePopup" :resource-id="resourceId" :table-id="tableId"
                   :xqf-type="xqfType" @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: '已授权需求方',
    },
    xqfType: {
      type: String,
      default: '',
    },
    tableId: {
      type: String,
      default: '',
    },
    resourceId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dialogLoading: false,
      columns: [
        { label: '第三方调用者名称', prop: 'consumerName', align: 'center' },
        // { label: '第三方调用者系统名称', prop: 'appName' },
        { label: '第三方调用者编码', prop: 'consumerCode', align: 'center' },
        // { label: '联系人', prop: 'contactPerson', width: '150px' },
        // { label: '联系方式', prop: 'contactPhone', width: '200px' },
      ],
      selectDataList: [],
      resourcePopup: false,
      ids: [],
    };
  },
  computed: {
    dataMethod() {
      if (this.xqfType === '1') {
        return API.resourceInventoryDatabase;
      } else if (this.xqfType === '2') {
        return API.resourceInventoryFile;
      } else {
        return API.resourceInventoryApi;
      }
    },
  },
  methods: {
    initData(data) {
    },
    onConfirm() {
      this.$emit('confirm');
    },
    onCompanyConfirm() {
      this.tableData = [];
      this.refresh();
    },
    authorizeChange() {
      this.resourcePopup = true;
    },
    selectChange(data) {
      this.selectDataList = data;
      this.selectDataList = [];
      data.forEach((item) => {
        this.selectDataList.push(item.authId);
      });
    },
    deleteChange() {
      if (Array.isArray(this.selectDataList) && this.selectDataList.length) {
        this.$confirm('是否删除选中数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          const delId = JSON.parse(JSON.stringify(this.selectDataList)).join(',');
          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 .el-tabs .el-tabs__header.is-top {
  padding: 0 !important;
}
</style>
