<template>
  <div class="page-view">
    <app-title-bar class="mb-10">
      提供方列表
      <template slot="right-area">
        <!-- 弹层搜索 -->
        <app-filter-popup :model="filters" @query="onQuery" @reset="onReset">
          <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="12" el-type="input" label="资源名称" prop="pointName">
            <el-input v-model="filters.pointName" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
          </app-filter-item>
          <app-filter-item :span="12" label="资源类型" prop="pointCode">
            <el-input v-model="filters.pointCode" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
          </app-filter-item>
        </app-filter-popup>

        <!-- 功能按钮 -->
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addCompany"> 新增 </el-button>
      </template>
    </app-title-bar>

    <!-- 列表组件 -->
    <div class="pa-10 bg-white h-100 flex-col">
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        @pagination-change="onPaginationChange"
        @row-dblclick="editCompany"
      >
        <!-- 插槽 -->
        <div slot="publishSlot" slot-scope="scope">
          <el-tag>{{ scope.row.is_publish ? '是' : '否' }}</el-tag>
        </div>
      </app-table>
    </div>

    <!-- dialog组件 -->
    <detail-dialog v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="onCompanyConfirm" />
  </div>
</template>

<script>
// 引入请求api
import API from '@/api/business/changeDataSource';
// 引入table 相关 mixins
import tableMixin from '@/mixins/table.js'; // 列表mixins
// dialog组件
import DetailDialog from './DetailDialog';

export default {
  components: { DetailDialog },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      // 列表表头
      columns: [
        { label: '资源名称', prop: 'name' },
        {
          label: '资源类型',
          prop: 'is_active',
          formatData: (item) => {
            const str = item == true ? '数据库' : '上传';
            return str;
          },
        },
        {
          label: '来源格式',
          prop: 'type',
        },
        {
          label: '是否发布',
          prop: 'is_publish',
          dataType: 'slot', // 使用插槽
          slot: 'publishSlot', // 插槽名，搭配 dataType: 'slot' 使用
        },
        {
          label: '创建时间',
          prop: 'createdTime',
        },
        {
          dataType: 'option',
          label: '操作',
          width: '150px',
          operation: [
            {
              name: '数据资源',
              icon: 'el-icon-s-grid',
              // showHide: (row) => {},
              clickFun: (row) => {
                this.$emit('onTableClick', row, 'dataSource');
              },
            },
            {
              name: '删除',
              color: 'red',
              // showHide: (row) => {},
              icon: 'el-icon-delete',
              clickFun: this.delCompany,
            },
          ],
        },
      ],
    };
    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
    };
    return {
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
    };
  },
  computed: {
    // 配置列表接口方法：只有配置了该计算属性 才会执行 table mixins中的getData方法
    dataMethod() {
      return API.getListJson;
    },
    // 是否默认执行列表接口查询 默认已在table mixins中配置为true
    // initRefresh() {
    //   return false;
    // },
  },
  mounted() {},
  methods: {
    /*
     *   配置了计算属性 dataMethod的返回值后 可以不需要这里写getData方法 table.js  Mixins已经有了， 此处只为静态页面开发使用
     * */
    getData() {
      this.tableLoading = true;
      setTimeout(() => {
        this.tableData = [
          {
            id: 1,
            name: '测试资源1',
            is_active: true,
            is_publish: false,
            createdTime: '2024-11-22 08:54:33',
            type: '格式1',
          },
          {
            id: 2,
            name: '测试资源2',
            is_active: false,
            is_publish: true,
            createdTime: '2024-11-22 08:54:33',
            type: '格式2',
          },
        ];
        this.tableLoading = false;
      }, 1000);
    },
    addCompany() {
      this.dialogTitle = '新增';
      this.currentRow = null;
      this.dialogVisible = true;
    },
    editCompany(row) {
      this.dialogTitle = `编辑 - ${row.name}`;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    delCompany(row) {
      this.$confirm(`此操作将永久删除该汇聚方（${row.name}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const ind = this.tableData.findIndex((o) => o.id == row.id);
        ind >= 0 && this.tableData.splice(ind, 1);
      });
    },
    onCompanyConfirm(data) {
      const id = this.tableData.length++;
      if (data?.id) {
        const ind = this.tableData.findIndex((o) => o.id == data.id);
        ind >= 0 && this.tableData.splice(ind, 1, data);
      } else {
        this.tableData.push({ ...data, id });
      }
      this.dialogVisible = false;
    },
  },
};
</script>

<style></style>
