<template>
  <div>
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col v-if="queryOption.disable === false" :span="20" :xs="24">
        <el-form
          :model="params"
          ref="queryForm"
          :inline="queryOption.inline"
          :label-width="queryOption.labelWidth ? queryOption.labelWidth : '100px'"
        >
          <el-form-item v-for="item in queryOption.queryChilds" :key="item.key" :label="item.label">
            <el-input
              v-if="!item.type || item.type === 'input'"
              v-model="params[item.key]"
              :placeholder="item.placeholder || ''"
              :clearable="item.clearable"
              :size="item.size || 'small'"
              :style="item.style || ''"
              @keyup.enter.native="handleQuery"
            />

            <el-select
              v-if="item.type === 'select'"
              v-model="params[item.key]"
              :clearable="item.clearable"
              :placeholder="item.placeholder"
              :size="item.size || 'small'"
              :style="item.style || ''"
            >
              <el-option
                v-for="items in item.options"
                :key="items[item.optionKey.key]"
                :label="items[item.optionKey.label]"
                :value="items[item.optionKey.value]"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
          </el-form-item>
        </el-form>
      </el-col>

      <el-table
        ref="selectTabel"
        v-loading="tableOption.loading"
        :data="dataList"
        class="select-table"
        :height="tableOption.maxHeight"
        :highlight-pageNum-row="true"
        default-expand-all
        highlight-current-row
        :tree-props="tableOption.treeProps"
        :row-key="tableOption.rowKey"
        @row-click="row_clicks"
        @row-dblclick="rowDblclick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"></el-table-column>

        <el-table-column
          v-if="tableOption.selection === true"
          type="selection"
          width="50"
          align="center"
        />

        <el-table-column
          v-for="(item, index) in tableOption.childs"
          :key="index"
          :type="item.type"
          :width="item.width"
          :align="item.align"
          :label="item.label"
          :prop="item.prop"
        >
          <template slot-scope="scope" v-if="item.tempType !== '' ">
            <el-switch
              v-if="item.tempType === 'switch'"
              v-model="scope.row[item.prop]"
              :active-value="item.option['active-value']"
              :inactive-value="item.option['inactive-value']"
              :disable="item.option.disable"
            ></el-switch>

            <span v-else-if="item.tempType === 'span'">{{scope.row[item.prop]}}</span>

            <svg-icon v-else-if="item.tempType === 'icon'" :icon-class="scope.row[item.prop]" />

            <span
              v-else-if="item.tempType === 'time'"
            >{{ parseTime(new Date(scope.row[item.prop])) }}</span>

            <span
              v-else-if="item.tempType === 'text1'"
              v-html="scope.row[item.prop] === '0' ? '正常':'禁用'"
            ></span>

          </template>

        </el-table-column>
      </el-table>

      <pagination
        v-show="queryOption.page.total > 0"
        :total="queryOption.page.total"
        :page.sync="queryOption.page.pageNum"
        :limit.sync="queryOption.page.pageSize"
        @pagination="handleQuery2"
      />
    </el-row>
  </div>
</template>
<script>
export default {
  name: "nl_select_table",
  props: {
    otherOption: {
      type: Object,
      default: {}
    },
    queryOption: {
      type: Object,
      default: () => {
        return {
          disable: false,
          params: {},
          page: {
            pageSize: 10,
            pageNum: 1,
            total: 100
          },
          inline: true,
          queryChilds: [
            {
              style: "",
              placeholder: "请输入用户名称",
              clearable: true,
              label: "用户名称",
              type: "input",
              key: "userName",
              size: "small",
              value: ""
            }
          ]
        };
      }
    },
    tableOption: {
      type: Object,
      default: () => {
        return {
          loading: false,
          treeProps: "{ children: 'children', hasChildren: 'hasChildren'}",
          rowKey: "deptId",
          selection: true,
          maxHeight: "45vh",
          childs: [
            {
              style: "",
              label: "",
              type: "selection",
              prop: "userName",
              align: "center",
              width: "50",
              "show-overflow-tooltip": false,
              tempType: ""
            },
            {
              style: "",
              label: "用户编号",
              type: "",
              prop: "userName",
              align: "center",
              width: "50",
              "show-overflow-tooltip": true,
              tempType: "",
              option: {
                "active-value": "0",
                "inactive-value": "1",
                disable: false
              }
            }
          ],
          tableList: {
            type: Array
          }
        };
      }
    },
    tableList: {
      type: Array
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      loading: false,
      dataList: [],
      single: "",
      multiple: "",
      params: {},
      multipleSelection: [],
      optionTrue: true
    };
  },
  updated() {
    if (this.optionTrue && this.tableList.length <= 0) {
      this.handleQuery2();
      this.optionTrue = false;
    }
  },
  methods: {
    indexFormatter(val) {
      return val + 1 + ((this.queryOption.page.pageNum - 1) * this.queryOption.page.pageSize);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.$emit("returnEvent", {
        value: selection,
        type: "select",
        otherOption: this.otherOption
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // debugger
      // this.queryOption.page.pageNum = 1;
      // this.queryOption.params = this.params
      this.optionTrue = false
      this.getList(this.queryOption.page, this.queryOption.params);
    },
    handleQuery2() {
      this.getList(this.queryOption.page, this.queryOption.params);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dataList = [];
      this.resetForm("queryForm");
      this.queryOption.page.pageNum = 1;
      this.handleQuery();
    },
    getList(page, params) {
      this.tableOption.loading = true;
      this.$emit("parentGetList", {
        page: page,
        param: params,
        otherOption: this.otherOption
      });
    },
    rowDblclick(row) {
      if (this.tableOption.selection) {
        return
      }
      this.$emit("returnEvent", {
        value: row,
        type: "dblclick",
        otherOption: this.otherOption
      });
    },
    row_clicks(row) {
      if (this.tableOption.selection) {
        this.$refs.selectTabel.toggleRowSelection(row)
      } else {
         this.$emit("returnEvent", {
          value: row,
          type: "click",
          otherOption: this.otherOption
        });
      }
    }
  },
  created() {
    this.params = this.queryOption.params;
    this.handleQuery2();
  },
  watch: {
    tableList(value) {
      this.dataList = value;
      this.tableOption.loading = false;
    },
    multipleSelection(val) {
      console.log(val)
    }
  }
};
</script>
<style lang="scss">
.select-table {
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
  .el-table__body tr.current-row > td {
    background-color: #ffec8b;
  }
}
</style>
