<template>
  <div class="table">
    <!-- 高级搜索 -->
    <TableSearch @searchTable="searchTable" @heightContent="heightContent"/>
    <div class="columns-action">
      <!-- 表格大小设置 -->
      <TableSize
        class="action-size"
        @changeTableSize="changeTableSize"
        :that="this"
      />

      <!-- 表格列设置 -->
      <ActionColumns
        class="action-column"
        @columns="getcolumns"
        :columns-keys="columnsKeys"
        @getTableFixed="getTableFixed"
        @resetTableFixed="resetTableFixed"
        :columns-fixed="columnsFixed"
        :that="this"
      />
    </div>
    <a-spin :spinning="loading">
      <a-table
        class="tac-box expand-area-table"
        :columns="columns"
        :data-source="data"
        :pagination="{
          total: total,
          current: searchParams.Page,
          pageSize: pageCount,
          showTotal: total => {
            return `共 ${total} 条`;
          }
        }"
        :expandedRowKeys="expandedRowKeys"
        row-key="id"
        @expand="open"
        :size="tableSize"
        :loading="loading"
        @change="changepage"
        :scroll="{
          x: 1100,
          y: fullHeight - (heightSearch == true ? '435' : '360')
        }"
      >
        <a-table
          slot="expandedRowRender"
          row-key="id"
          :columns="innerColumns"
          :data-source="innerData"
          :size="'small'"
          :pagination="false"
        >
          <span slot="loginPort" slot-scope="loginPort">
            {{ loginPort == 1 ? "PC" : loginPort == 2 ? "Mobile" : "Other" }}
          </span>
        </a-table>
        <span slot="isSuccess" slot-scope="isSuccess">
          <a-tag :color="isSuccess == 1 ? 'green' : 'red'"
            >{{ isSuccess == 1 ? "成功" : "失败" }}
          </a-tag>
        </span>
        <span slot="loginType" slot-scope="loginType">
          {{ loginType == 1 ? "本地账号" : "域账号" }}
        </span>
      </a-table>
    </a-spin>
    <p class="pageCount">
      <span>数据条数：</span>
      <a-select v-model="pageCount" @change="changePageCount">
        <a-select-option :value="10">10条</a-select-option>
        <a-select-option :value="20">20条</a-select-option>
        <a-select-option :value="30">30条 </a-select-option>
        <a-select-option :value="50">50条</a-select-option>
      </a-select>
    </p>
  </div>
</template>
<script>
import "@/common/components/Commonality/Table/less/table.less";
import moment from "moment";
import { getLoginList } from "@/baseConfigComponents/api/record.js";
import { columns, innerColumns } from "@/baseConfigComponents/components/Record/List/column.js";
import ActionColumns from "@/common/components/Commonality/Table/components/TableSet.vue";
import TableSearch from "@/baseConfigComponents/components/Record/List/Search.vue";
import TableSize from "@/common/components/Commonality/Table/components/TableSize.vue";
import {
  resetFullHeight,
  changeTableSize,
  getcolumns,
  getTableFixed,
  resetTableFixed,
  edit,
  closePopForm,
  goDetail,
  columnsFixed,
  columnsKeys
} from "@/common/components/Commonality/Table/js/table.js";

export default {
  data() {
    return {
      columns,
      columns2: [],
      innerColumns,
      data: [], // 数据
      pagination: {},
      loading: false,
      data2: undefined,
      isShow: false,
      tableSize: "default", // 表格默认大小
      total: 0, // 总条数
      searchParams: {
        order: 2, // 排序
        Page: 1 // 页码
      }, // 高级搜索参数
      fullHeight: "", // 页面高度
      FormData: "",
      heightSearch: false,
      pageCount: 10,
      innerData: [],
      expandedRowKeys: []
    };
  },

  created() {
    // 初始化表格窗口高度
    resetFullHeight(this);
    this.columns2 = JSON.parse(JSON.stringify(this.columns));
    // //获取广告列表
    this.getList(this.searchParams);
  },
  methods: {
    moment,
    // 改变表格size  子传父
    changeTableSize,
    // 列设置 展示指定 的参数
    getcolumns,
    // 编辑跳转 表单
    edit,
    // 改变列固定方向
    getTableFixed,
    // 重置 列 固定方向
    resetTableFixed,
    // 关闭表单（编辑）
    closePopForm,
    // 跳转详情页
    goDetail,
    refresh() {
      this.getList(this.searchParams);
    },
    heightContent() {
      this.heightSearch = !this.heightSearch;
    },
    // 获取 广告列表
    getList(searchParams) {
      this.loading = true;
      getLoginList({ version: "1", ...searchParams }, this.pageCount).then(
        res => {
          this.loading = false;
          this.total = res.data.totalCount;
          this.data = res.data.data;
          this.data2 = JSON.parse(JSON.stringify(this.data));
        }
      );
    },
    // 翻页
    changepage(index, filters, sorter) {
      switch (sorter.order) {
        case "ascend":
          this.searchParams.order = 1;
          break;
        default:
          this.searchParams.order = 2;
          break;
      }
      this.searchParams.Page = index.current;
      this.getList(this.searchParams);
    },
    // 查询
    searchTable(searchParams) {
      this.searchParams = { order: 2, Page: 1, ...searchParams };
      console.log(this.searchParams);
      // this.data = JSON.parse(JSON.stringify(this.data2));
      this.getList(this.searchParams);
    },
    // 改变状态
    onChangeStatus(status, info) {
      updateStatus(info.memberId, status ? 1 : 2).then(() => {
        this.$message.success("操作成功");
      });
    },
    changePageCount(val) {
      // console.log(val);
      this.getList(this.searchParams);
    },
    open(expanded, record) {
      if (expanded) {
        this.innerData = [];
        this.innerData.push(record);
        console.log(this.innerData);
        this.expandedRowKeys = [];
        this.expandedRowKeys.push(record.id);
      } else {
        this.expandedRowKeys = [];
      }
    }
  },

  computed: {
    // 提取 标题 传递给子组件
    columnsKeys,
    // 提取 fixed 传递给子组件
    columnsFixed,

    that() {
      return this;
    }
  },
  components: {
    ActionColumns,
    TableSearch,
    TableSize
  },
  watch: {
    fullHeight(val) {
      this.fullHeight = val;
    }
  }
};
</script>

<style lang="less">
.tac-box {
  th,
  td {
    text-align: center !important;
  }
}
.expand-area-table {
  tr.ant-table-expanded-row td > .ant-table-wrapper {
    margin: 0;
  }
}
</style>
