<template>
  <div class="page-view border-radius-5">
    <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" @query="onQuery" @reset="onReset">
      <app-filter-item label="单位名称" prop="companyName">
        <el-input v-model="filters.companyName" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>

      <app-filter-item el-type="select" label="单位类型" prop="companyType">
        <el-select v-model="filters.companyType" clearable placeholder="请选择单位类型" @keyup.enter.native="$refs['app-filter'].query">
          <el-option v-for="dict in DICT.COMPANY_TYPE" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </app-filter-item>
    </app-filter>

    <div class="flex-1 bg-white flex-col border-radius-5 pa-11 mt-11">
      <div class="mb-11">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addCompany"> 新增</el-button>
      </div>
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        @pagination-change="onPaginationChange"
        @row-dblclick="editCompany"
      >
        <!--         ['isApi', 'isDatabase', 'isFile', 'isMq']"-->
        <template #isApi="scope">
          <el-tag :type="scope.row['isApi'] === '1' ? '' : 'danger'">{{ scope.row['isApi'] === '1' ? '是' : '否' }} </el-tag>
        </template>
        <template #isDatabase="scope">
          <el-tag :type="scope.row['isDatabase'] === '1' ? '' : 'danger'">
            {{ scope.row['isDatabase'] === '1' ? '是' : '否' }}
          </el-tag>
        </template>
        <template #isFile="scope">
          <el-tag :type="scope.row['isFile'] === '1' ? '' : 'danger'">{{ scope.row['isFile'] === '1' ? '是' : '否' }} </el-tag>
        </template>
        <template #isMq="scope">
          <el-tag :type="scope.row['isMq'] === '1' ? '' : 'danger'">{{ scope.row['isMq'] === '1' ? '是' : '否' }} </el-tag>
        </template>
      </app-table>
    </div>

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

<script>
import API from '@/api/business/dataCollectCompany';
import DICT from '@/utils/dict';
import tableMixin from '@/mixins/table.js';
import DetailDialog from './DetailDialog.vue';

export default {
  components: { DetailDialog },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      columns: [
        { label: '单位名称', prop: 'companyName', width: '200' },
        {
          label: '单位类型',
          prop: 'companyType',
          align: 'center',
          width: '100',
          formatData: (value) => {
            return DICT.COMPANY_TYPE.find((item) => item.value === value)?.label;
          },
        },
        { label: '联系人', prop: 'linkUser', minWidth: '100' },
        { label: '联系方式', prop: 'linkPhone', minWidth: '100' },
        // { label: '数据提供描述', prop: 'description', width: '240' },
        // { label: '系统编码', prop: 'sysCode', minWidth: '100' },
        { label: '系统名称', prop: 'sysName', minWidth: '200' },
        { label: '表前缀', prop: 'sysTableCode', minWidth: '150' },
        {
          label: '是否数据库提供',
          prop: 'isDatabase',
          dataType: 'slot',
          slot: 'isDatabase',
          width: '130',
          align: 'center',
        },
        // { label: '是否API提供', prop: 'isApi', dataType: 'slot', slot: 'isApi', width: '140', align: 'center' },
        { label: '是否离线文件提供', prop: 'isFile', dataType: 'slot', slot: 'isFile', width: '150', align: 'center' },
        // { label: '是否中间件提供', prop: 'isMq', dataType: 'slot', slot: 'isMq', width: '150', align: 'center' },
        {
          dataType: 'option',
          label: '操作',
          width: '180px',
          fixed: 'right',
          operation: [
            {
              name: '数据表管理',
              type: 'text',
              size: 'mini',
              icon: 'el-icon-s-order',
              plain: true,
              // showHide: (row) => {},
              clickFun: (row) => {
                this.$router.push({ name: 'dataSourceItem', query: { id: row.id } });
              },
            },
            {
              name: '删除',
              type: 'text',
              size: 'mini',
              color: 'red',
              icon: 'el-icon-delete',
              // showHide: (row) => {},
              // icon: 'el-icon-delete',
              plain: true,
              clickFun: this.delCompany,
            },
          ],
        },
      ],
    };

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

    const DRAWER_CONFIG = {
      drawerVisible: false,
    };
    return {
      DICT,
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      ...DRAWER_CONFIG, // 抽屉相关
    };
  },
  computed: {
    dataMethod() {
      return API.getList;
    },
  },
  methods: {
    addCompany() {
      this.dialogTitle = '新增';
      this.currentRow = null;
      this.dialogVisible = true;
    },
    editCompany(row) {
      this.dialogTitle = `编辑 - ${row.companyName}`;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    delCompany(row) {
      this.$confirm(`此操作将永久删除汇聚方（${row.companyName}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await API.delCompany(row.id);
          this.$message.success('删除成功');
          this.refresh();
        })
        .catch(() => {});
    },
    onCompanyConfirm(data) {
      this.getData();
      this.dialogVisible = false;
    },
  },
};
</script>

<style></style>
