<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :append-to-body="true"
      @open="handleOpenDialog"
    >
      <avue-crud
        ref="crud"
        class="listSelect"
        v-model="crudObj"
        :data.sync="crudData"
        :option.sync="crudOption"
        :page.sync="crudPage"
        @row-dblclick="crudSave"
        @selection-change="selectionChange"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @current-row-change="currentRowChange"
      >
        <template slot="menuLeft">
          <el-button type="primary" size="small" plain @click.stop="crudSave()">{{
            btnText
          }}</el-button>
        </template>
      </avue-crud>
    </el-dialog>
  </div>
</template>
<script>
import cloneDeep from 'lodash/cloneDeep';
import { DIALOG_TABLE_MAX_HEIGHT } from '../../../lib/const';
import { ft } from '../../../lib/utils.js';

const LABELS = {
  data: ft('i18n_common_data', '数据'),
  noData: ft('i18n_common_no_data', '暂无数据'),
  pleaseSelect: ft('i18n_common_please_select', '请选择'),
  queryInterfaceNotFound: ft('i18n_common_query_interface_not_found', '未找到查询接口'),
  save: ft('i18n_common_save', '保存'),
  serialNumber: ft('i18n_common_serial_number', '序号')
};

export default {
  name: 'selectDialogTable',
  props: {
    elsAccount: { type: String, default: '' }, // elsAccount
    elsSubAccount: { type: String, default: '' }, // elsSubAccount
    btnText: { type: String, default: LABELS.save }, // 保存按钮文字
    title: { type: String, default: '' }, // dialog标题
    dialogVisible: { type: Boolean, default: false }, // dialog显隐
    multiple: { type: Boolean, default: false }, // 是否多选
    // 表格的列配置
    column: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 表格的分页配置
    page: {
      type: Object,
      default: () => {
        return { total: 0, currentPage: 1, pageSize: 10 };
      }
    }
  },
  data() {
    return {
      visible: this.dialogVisible,
      selectColumns: [],
      crudObj: {},
      crudData: [],
      crudOption: {
        highlightCurrentRow: true,
        selection: false,
        addBtn: false,
        columnBtn: false,
        refreshBtn: false,
        searchShow: false,
        menu: false,
        index: true,
        indexLabel: LABELS.serialNumber,
        border: true,
        maxHeight: DIALOG_TABLE_MAX_HEIGHT,
        emptyText: LABELS.noData,
        column: []
      },
      crudPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      crudQueryParam: {},
      crudPageParam: {
        currentPage: 1,
        pageSize: 10
      },
      crudMultiple: true,
      currentRow: null
    };
  },
  created() {
    this.crudOption.column = this.column;
    this.crudPage = this.page;
    this.crudMultiple = this.multiple;
    this.crudOption.selection = this.multiple;
    this.crudOption.highlightCurrentRow = !this.multiple;
  },
  watch: {
    page: function (newValue) {
      this.crudPage = newValue;
    },
    column: function (newValue) {
      this.crudOption.column = newValue;
    },
    visible: function (newValue) {
      this.$emit('update:dialogVisible', newValue);
    },
    dialogVisible: function (newValue) {
      this.visible = newValue;
    }
  },
  methods: {
    handleOpenDialog() {
      this.handleList();
    },

    handleList() {
      if (this.actionPath === null) {
        this.$message.error(LABELS.queryInterfaceNotFound);
        return;
      }
      const listParams = cloneDeep(this.crudQueryParam);
      Object.assign(listParams, this.crudPageParam);
      listParams.elsAccount = this.elsAccount;
      this.getCrudData(this.crudData, listParams);
    },
    getCrudData(param) {
      this.$emit('getData', param);
    },
    crudSave() {
      this.checkSelectedItem();
    },
    ok() {
      const selectItems = this.crudMultiple ? this.selectColumns : [this.currentRow];
      this.selectColumns = [];
      this.currentRow = null;
      this.$refs.crud.selectClear();
      this.$emit('ok', selectItems);
      this.visible = false;
    },
    selectionChange(list) {
      if (this.crudMultiple) {
        this.selectColumns = list;
      }
    },
    checkSelectedItem() {
      const selectedItem = this.crudMultiple ? this.selectColumns.length : this.currentRow;

      if (selectedItem) {
        this.ok();
      } else {
        this.$message(`${LABELS.pleaseSelect}${LABELS.data}`);
      }
    },
    currentRowChange(row) {
      if (!this.crudMultiple) {
        if (row) {
          this.currentRow = row;
        } else if (this.crudData && this.crudData[0]) {
          const defaultRow = this.crudData[0];

          if (this.currentRow) {
            if (
              defaultRow &&
              this.rowKey &&
              this.currentRow[this.rowKey] !== defaultRow[this.rowKey]
            ) {
              this.currentRow = defaultRow;
            }
          } else {
            this.currentRow = defaultRow;
          }
        } else {
          this.currentRow = null;
        }
      }
    },
    searchChange(params, done) {
      this.crudPageParam.currentPage = 1;
      Object.assign(this.crudQueryParam, params);
      this.handleList();
      done();
    },
    refreshChange() {
      this.crudPageParam.currentPage = 1;
      this.handleList();
    },
    currentChange(page) {
      this.crudPageParam.currentPage = page;
      this.handleList();
    },
    sizeChange(pageSize) {
      this.crudPageParam.currentPage = 1;
      this.crudPageParam.pageSize = pageSize;
      this.handleList();
    }
  }
};
</script>
<style>
.listSelect .el-collapse-item__header {
  display: none;
}
.listSelect .el-dialog__body {
  padding-top: 5px;
}
.listSelect .el-collapse {
  border-top: 0;
  border-bottom: 0;
}
</style>
