<template>
  <app-dialog v-model="visible" :loading="dialogLoading" append-to-body class="detail-dialog" title="选择需求方"
              width="60%" @confirm="onConfirm"
  >
    <div class="page-view h-100">
      <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" label-width="100px"
                  @query="onQuery" @reset="onReset"
      >
        <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="10" el-type="input" label="第三方调用者名称">
          <el-input v-model="filters.name" clearable placeholder="请输入"
                    @keyup.enter.native="$refs['app-filter'].query"
          />
        </app-filter-item>
      </app-filter>

      <!-- 列表组件 -->
      <div class="pa-11 bg-white h-100 flex-col mt-11 border-radius-5">
        <app-table
          :column="columns"
          :index="false"
          :pagination="pagination"
          :table-data="tableData"
          :table-loading="tableLoading"
          :total="total"
          checkbox
          @select-change="selectChange"
          @pagination-change="onPaginationChange"
        />
      </div>
    </div>
  </app-dialog>
</template>

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

export default {
  name: 'ResourceList',
  mixins: [dialogMixin, tableMixin],
  props: {
    xqfType: {
      type: String,
      default: '',
    },
    tableId: {
      type: String,
      default: '',
    },
    resourceId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dialogLoading: false,
      columns: [
        { label: '第三方调用者名称', prop: 'name' },
        { label: '第三方调用者系统名称', prop: 'appName' },
        { label: '第三方调用者编码', prop: 'code', width: '200px' },
        { label: '联系人', prop: 'contactPerson', width: '150px' },
        { label: '联系方式', prop: 'contactPhone', width: '200px' },
      ],
      muilteList: [],
    };
  },
  computed: {
    dataMethod() {
      if (this.xqfType === '1') {
        return API.databaseBefore;
      } else if (this.xqfType === '2') {
        return API.fileBefore;
      } else {
        return API.apiBefore;
      }
    },
  },
  methods: {
    initData(data) {
      console.log(this.type, 'typetypetype');
    },
    async onConfirm() {
      if (this.muilteList.length > 0) {
        try {
          let param = [];
          if (this.xqfType === '1') {
            param = this.muilteList.map((item) => {
              return {
                memberId: item.id,
                resourceType: '1',
                tableId: this.tableId,
              };
            });
          } else {
            param = this.muilteList.map((item) => {
              return {
                memberId: item.id,
                resourceType: this.xqfType === '2' ? '2' : '3',
                resourceId: this.resourceId,
                tableId: this.tableId,
              };
            });
          }
          const { state } = await API.authorizationConfirm(param);
          if (state) {
            this.visible = false;
            this.$emit('confirm');
            this.$message.success('授权成功！');
          }
        } catch (err) {
          this.$message.warning(err || '授权失败！');
        }
      } else {
        this.$message.warning('请选择需求方');
      }
    },
    selectChange(data) {
      this.muilteList = data;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
