<template>
  <div class="page-view bg-white px-11 pb-11 border-radius-5">
    <app-filter ref="app-filter" :model="filters" @query="onQuery" @reset="onReset">
      <app-filter-item :filter-config="{ operation: 'EQUAL' }" 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 label="资源类型" prop="pointCode">
        <el-input v-model="filters.pointCode" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>
    </app-filter>
    <div class="mb-11">
      <el-button icon="el-icon-plus" size="mini" type="primary" @click="addCompany"> 新增 </el-button>
    </div>

    <div class="flex-1 bg-white flex-col border-radius-5">
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        @pagination-change="onPaginationChange"
        @row-dblclick="editCompany"
      />
    </div>

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

<script>
import tableMixin from '@/mixins/table.js';

import MainDialog from './MainDialog';

export default {
  components: { MainDialog },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      columns: [
        { label: '资源名称', prop: 'name' },
        {
          label: '资源类型',
          prop: 'is_active',
          formatData: (item) => {
            const str = item ? '数据库' : '上传';
            return str;
          },
        },
        {
          label: '来源格式',
          prop: 'type',
        },
        {
          label: '是否发布',
          prop: 'is_publish',
          formatData: (item) => {
            return item ? '是' : '否';
          },
        },
        {
          label: '创建时间',
          prop: 'createdTime',
        },
        {
          dataType: 'option',
          label: '操作',
          width: '150px',
          operation: [
            {
              name: '数据资源',
              type: 'text',
              size: 'mini',
              plain: true,
              // showHide: (row) => {},
              clickFun: (row) => {
                this.$emit('onTableClick', row, 'dataSource');
              },
            },
            {
              name: '删除',
              type: 'text',
              size: 'mini',
              color: 'red',
              // showHide: (row) => {},
              // icon: 'el-icon-delete',
              plain: true,
              clickFun: this.delCompany,
            },
          ],
        },
      ],
    };

    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
    };

    const DRAWER_CONFIG = {
      drawerVisible: false,
    };
    return {
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      ...DRAWER_CONFIG, // 抽屉相关
    };
  },
  mounted() {},
  methods: {
    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>
