<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="detail-dialog" width="70%"
              @cancel="onCancel" @confirm="onConfirm"
  >
    <div class="page-view border-radius-5 h-100">
      <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" @query="onQuery"
                  @reset="onReset"
      >
        <app-filter-item :filter-config="{ operation: 'EQUAL' }" el-type="input" 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 mt-11 pa-11 border-radius-5">
        <app-table
          ref="appTable"
          :checkbox="true"
          :column="columns"
          :pagination="pagination"
          :table-data="tableData"
          :table-loading="tableLoading"
          :total="total"
          highlight-current-row
          @pagination-change="onPaginationChange"
          @selection-change="handleSelectionChange"
        >
          <template #deployed="scope">
            <el-tag :type="scope.row['deployed'] === 1 ? '' : 'danger'">
              {{ scope.row['deployed'] === 1 ? '已发布' : '未发布' }}
            </el-tag>
          </template>
        </app-table>
      </div>
    </div>
  </app-dialog>
</template>

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

export default {
  name: 'SourceSelector',
  mixins: [dialogMixin, tableMixin],
  props: {
    catalogId: {
      type: String,
      default: '',
    },
  },
  data() {
    const TABLE_CONFIG = {
      tableData: [
        {
          name: '职员',
          alias: 'zy',
        },
        {
          name: '部长',
          alias: 'bz',
        },
      ],
      columns: [
        { label: '职务名称', prop: 'name', minWidth: '150', align: 'center' },
        { label: '职务编码', prop: 'alias', minWidth: '150', align: 'center' },
      ],
    };

    return {
      ...TABLE_CONFIG,
      loading: false,
      selections: [],
    };
  },
  computed: {
    // dataMethod() {
    //   return API.getCompanySourceList;
    // },
  },
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      this.getData();
    },
    onCancel() {
      this.visible = false;
    },
    onConfirm() {
      if (this.selections.length <= 0) return;
      const data = this.selections.map((item) => {
        return {
          catalogId: this.catalogId,
          tableId: item.id,
        };
      });
      API.bulkIImport(data, false)
        .then((res) => {
          if (res.state) {
            this.visible = false;
            this.$message.success('导入成功');
            this.$emit('confirm');
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    handleSelectionChange(selections) {
      this.selections = selections;
    },
  },
};
</script>

<style lang="scss" scoped></style>
