<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="name">
        <el-input v-model="filters.name" clearable placeholder="请输入"
                  @keyup.enter.native="$refs['app-filter'].query"
        />
      </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>
        <el-button :disabled="!selectedRows.length > 0" icon="el-icon-delete" size="mini" type="danger"
                   @click="delCompany"
        >删除
        </el-button>
      </div>
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        checkbox
        @pagination-change="onPaginationChange"
        @selection-change="handleSelectionChange"
        @row-dblclick="editData"
      >
        <!--        <template #isApi="scope">-->
        <!--          <el-tag :type="scope.row['isApi'] === '1' ? '' : 'danger'">{{ scope.row['isApi'] === '1' ? '是' : '否' }} </el-tag>-->
        <!--        </template>-->
      </app-table>
    </div>

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

<script>
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 = {
      tableData: [
        {
          name: '职员',
          alias: 'zy',
          grade: '级别1',
          description: '描述11',
        },
      ],
      columns: [
        { label: '职务名称', prop: 'name', width: '300px', align: 'center' },
        { label: '职务别名', prop: 'alias', minWidth: '200px', align: 'center' },
        { label: '职务级别', prop: 'grade', minWidth: '200px', align: 'center' },
        { label: '描述', prop: 'description', width: '300px', align: 'center' },
      ],
    };

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

    const DRAWER_CONFIG = {
      drawerVisible: false,
    };
    return {
      DICT,
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      ...DRAWER_CONFIG, // 抽屉相关
      selectedRows: [], // 存储选中的行
    };
  },
  computed: {
    // dataMethod() {
    //   return API.getList;
    // },
  },
  created() {
    // 本地存储实例
    // const storedData = localStorage.getItem('tableData');
    // if (storedData) {
    //   this.tableData = JSON.parse(storedData);
    // }
  },
  methods: {
    addCompany() {
      this.dialogTitle = '新增职务';
      this.currentRow = null;
      this.dialogVisible = true;
    },
    editData(row) {
      this.dialogTitle = `编辑 - ${row.companyName}`;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    handleSelectionChange(val) {
      this.selectedRows = val; // 更新变量，当选则或取消行时触发
      console.log(val);
    },
    delCompany(row) {
      // 删除实例 ，对selectedRows进行删除
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要删除的行');
        return;
      }
      this.$confirm('此操作将永久删除选中的行，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          // 从 tableData 中移除选中的行
          this.tableData = this.tableData.filter((item) => !this.selectedRows.includes(item));
          // 清空 selectedRows
          this.selectedRows = [];
          // 存储更新后的 tableData 到本地存储
          localStorage.setItem('tableData', JSON.stringify(this.tableData));
          this.$message.success('删除成功');
          this.refresh();
        })
        .catch(() => {
        });
    },
    onConfirm(data) {
      this.tableData.push(data);
      localStorage.setItem('tableData', JSON.stringify(this.tableData));
      this.dialogVisible = false;
    },
  },
};
</script>

<style></style>
