<template>
  <div class="page-view">
    <!-- 搜索 -->
    <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" @query="onQuery"
                @reset="onReset"
    >
      <app-filter-item :span="6" label="第三方调用者名称">
        <el-input v-model="filters.name" clearable placeholder="请输入"
                  @keyup.enter.native="$refs['app-filter'].query"
        />
      </app-filter-item>
    </app-filter>

    <!-- table列表 -->
    <div class="pa-15 bg-white h-100 flex-col mt-11 border-radius-5">
      <div class="mb-15">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addData">新增</el-button>
        <el-button :disabled="!multipleSelection.length > 0" icon="el-icon-delete" size="mini" type="danger"
                   @click="deleteRowChange"
        >删除
        </el-button>
      </div>
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        checkbox
        @select-change="selectChange"
        @pagination-change="onPaginationChange"
        @row-dblclick="editData"
      >
        <!-- 插槽 -->
        <!--        <template #deployed="scope">-->
        <!--          <el-tag :type="scope.row.deployed === 1 ? 'primary' : 'warning'">-->
        <!--            {{ scope.row.deployed ? '发布' : '未发布' }}-->
        <!--          </el-tag>-->
        <!--        </template>-->
      </app-table>
    </div>
    <!-- 新增修改弹层 -->
    <add-edit-dialog v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="onCompanyConfirm" />
    <!-- 资源授权 -->
    <resource-authorize v-if="resourceDialog" v-model="resourceDialog" :data="currentRow" :select-row-id="currentRow.id"
                        @confirm="onCompanyConfirm"
    />
  </div>
</template>
<script>
import tableMixin from '@/mixins/table.js';
import AddEditDialog from '@/views/dataResource/dataShare/shareDataCall/AddEditDialog.vue';
import ResourceAuthorize from '@/views/dataResource/dataShare/shareDataCall/ResourceAuthorize.vue';
import API from '@/api/business/shareDataCall';

export default {
  components: { AddEditDialog, ResourceAuthorize },
  mixins: [tableMixin],
  data() {
    return {
      columns: [
        { label: '第三方调用者名称', prop: 'name' },
        { label: '第三方调用者系统名称', prop: 'appName' },
        { label: '第三方调用者编码', prop: 'code', width: '200px' },
        { label: '联系人', prop: 'contactPerson', width: '150px' },
        { label: '联系方式', prop: 'contactPhone', width: '200px' },
        {
          dataType: 'option',
          label: '操作',
          width: '200px',
          fixed: 'right',
          operation: [
            {
              name: '资源授权',
              type: 'text',
              size: 'mini',
              icon: 'el-icon-setting',
              plain: true,
              clickFun: (row) => {
                this.resourceChange(row);
              },
            },
            {
              name: '删除',
              type: 'text',
              size: 'mini',
              icon: 'el-icon-delete',
              color: 'red',
              plain: true,
              clickFun: (row) => {
                this.delTable(row);
              },
            },
          ],
        },
      ],
      dialogVisible: false,
      resourceDialog: false,
      dialogTitle: '新增',
      multipleSelection: [],
    };
  },
  computed: {
    dataMethod() {
      return API.demandSideTable;
    },
  },
  methods: {
    // 列表
    addData() {
      this.currentRow = null;
      this.dialogVisible = true;
    },
    editData(row) {
      this.currentRow = row;
      this.dialogTitle = '编辑';
      this.dialogVisible = true;
    },
    // 资源授权
    resourceChange(row) {
      this.currentRow = row;
      this.resourceDialog = true;
    },
    selectChange(data) {
      this.multipleSelection = [];
      data.forEach((item) => {
        this.multipleSelection.push(item.id);
      });
    },
    // 批量删除
    deleteRowChange() {
      const delId = JSON.parse(JSON.stringify(this.multipleSelection)).join(',');
      this.$confirm('是否删除选中数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          const { state } = await API.deleteTableData(delId);
          if (state) {
            await this.getData();
            this.$message.success('删除成功！');
          }
        } catch (err) {
          this.$message.warning(err || '删除失败！');
        }
      });
    },
    // 个别删除
    delTable(row) {
      this.$confirm(`此操作将删除（${row.name}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            const { state, message } = await API.removeShare(row.id);
            if (state) {
              await this.getData();
              this.$message.success('删除成功！');
            } else {
              this.$message.warning(message || '删除失败！');
            }
          } catch (err) {
            this.$message.warning(err || '删除失败！');
          }
        })
        .catch(() => {
        });
    },
    onCompanyConfirm() {
      this.refresh();
    },
  },
};
</script>
<style scoped>
::v-deep .el-table__cell:first-child .cell {
  text-align: center;
}
</style>
