<template>
  <div class="table">
    <!-- 高级搜索 -->
    <TableSearch @searchTable="searchTable" @refresh="refresh" />
    <PopForm
      v-if="isShow"
      @closePopForm="closePopForm"
      :data="FormData"
      :that="this"
      @refresh="refresh"
    />
    <AccountForm
      v-if="isShowAccount"
      @closePopForm="closeAccountForm"
      :data="AccountData"
      :that="this"
      @refresh="refresh"
    />
    <ResetPassword
      v-if="isShowResetPassword"
      @closePopForm="closeResetPasswordForm"
      :data="ResetPasswordData"
      :that="this"
      @refresh="refresh"
    />
    <div class="columns-action">
      <a-popconfirm title="确认导出?" @confirm="() => exoprtList()" v-action:Export>
        <div class="add" :style="{ marginRight: '15px' }">
          <a-tooltip title="导出">
            <a-icon class="action" type="download" />
          </a-tooltip>
        </div>
      </a-popconfirm>
      <div
        class="add"
        v-action:Add
        :style="{ marginRight: '15px' }"
        @click="edit('', that)"
      >
        <a-tooltip :title="$t('新增')">
          <a-icon class="action" type="file-add" />
        </a-tooltip>
      </div>

      <!-- 表格大小设置 -->
      <TableSize
        class="action-size"
        @changeTableSize="changeTableSize"
        @refresh="refresh"
        :that="this"
      />

      <!-- 表格列设置 -->
      <ActionColumns
        class="action-column"
        @columns="getcolumns"
        :columns-keys="columnsKeys"
        @getTableFixed="getTableFixed"
        @resetTableFixed="resetTableFixed"
        :columns-fixed="columnsFixed"
        :that="this"
      />
    </div>
    <a-table
      v-if="data"
      :columns="columns"
      :data-source="data"
      :scroll="{ x: 1820, y: fullHeight - 380 }"
      :size="tableSize"
      row-key="memberId"
      :pagination="{
        total: total,
        pageSize: pageCount,
        current: pageIndex,
        showTotal: (total) => {
          return `共 ${total} 条`;
        },
      }"
      @change="changepage"
    >
      <template slot="birthday" slot-scope="birthday">
        <span>{{ birthday ? moment(birthday).format("YYYY-MM-DD") : "" }}</span>
      </template>
      <!-- 状态 -->
      <template slot="state" slot-scope="x, y">
        <a-switch
          v-if="$auth('menu_member.UpdateStatus')"
          :checked-children="$t('member.table.content.正常')"
          :un-checked-children="$t('member.table.content.禁用')"
          :default-checked="x === 1"
          @change="onChangeStatus($event, y)"
        />
        <a-tag v-else :color="x === 1 ? 'green' : 'red'">
          {{
            x === 1 ? $t("member.table.content.正常") : $t("member.table.content.禁用")
          }}
        </a-tag>
      </template>

      <template slot="isCreatedAccount" slot-scope="x, y">
        <a-tag
          :color="x === 1 ? 'green' : 'red'"
          v-if="!$auth('menu_member.ManagerAccount')"
        >
          {{ x === 1 ? "已创建" : "未创建" }}
        </a-tag>
        <a-button
          type="primary"
          v-if="$auth('menu_member.ManagerAccount') && x === 0"
          @click="addAccountInfo(y)"
        >
          {{ $t("member.table.content.开通账号") }}
        </a-button>
        <a-dropdown v-if="$auth('menu_member.ManagerAccount') && x === 1">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="editAccountInfo(y)">
              {{ $t("member.table.content.编辑") }}
            </a-menu-item>
            <a-menu-item
              key="2"
              @click="resetPassword(y)"
              v-if="$auth('menu_member.RestPassword') && x === 1"
            >
              {{ $t("member.table.content.重置密码") }}
            </a-menu-item>
          </a-menu>
          <a-button>
            {{ $t("member.table.content.账号管理") }} <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </template>

      <template slot="operation" slot-scope="x, y">
        <a-button
          type="primary"
          @click="edit(y.memberId, that)"
          :style="{ marginRight: '5px' }"
          v-action:Modify
        >
          {{ $t("编辑") }}
        </a-button>
        <a-popconfirm
          :title="$t('member.table.content.确认删除')"
          @confirm="() => deletedInfo(y.memberId)"
        >
          <a-button type="danger" :style="{ background: '#FD572B' }" v-action:Delete>
            {{ $t("删除") }}
          </a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <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 { exportExcel } from "@/common/components/Commonality/Form/js/form";

import {
  getServiceList,
  updateStatus,
  getAccountInfo,
  deleteInfo,
  memberExport,
} from "@/baseConfigComponents/api/member.js";
import { columns } from "@/baseConfigComponents/components/Member/List/column.js";
import ActionColumns from "@/common/components/Commonality/Table/components/TableSet.vue";
import PopForm from "@/baseConfigComponents/components/Member/Modify/ModifyForm.vue";
import AccountForm from "@/baseConfigComponents/components/Member/Modify/AccountForm.vue";
import ResetPassword from "@/baseConfigComponents/components/Member/Modify/ResetPassword.vue";
import TableSearch from "@/baseConfigComponents/components/Member/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: [],
      data: [], // 数据
      data2: undefined,
      isShow: false,
      isShowAccount: false,
      isShowResetPassword: false,
      AccountData: "",
      ResetPasswordData: "",
      tableSize: "default", // 表格默认大小
      total: 0, // 分页参数
      searchParams: {}, // 高级搜索参数
      fullHeight: "", // 页面高度
      FormData: "",
      pageIndex: 1,
      pageCount: 10,
    };
  },

  created() {
    // 初始化表格窗口高度
    resetFullHeight(this);
    this.columns2 = JSON.parse(JSON.stringify(this.columns));

    // //获取广告列表
    this.getList(this.searchParams, this.pageCount);
  },
  methods: {
    // $auth(code) {
    //   try {
    //     return this.$auth(code);
    //   } catch (error) {
    //     return false;
    //   }
    // },

    moment,
    // 改变表格size  子传父
    changeTableSize,
    // 列设置 展示指定 的参数
    getcolumns,
    // 编辑跳转 表单
    edit,
    // 改变列固定方向
    getTableFixed,
    // 重置 列 固定方向
    resetTableFixed,
    // 关闭表单（编辑）
    closePopForm,
    // 跳转详情页
    goDetail,
    refresh() {
      this.pageIndex = 1;
      this.searchParams = {};
      this.getList({ ...this.searchParams }, this.pageCount);
    },
    // 获取 广告列表
    getList(searchParams) {
      getServiceList(searchParams, this.pageCount).then((res) => {
        this.total = res.data.totalCount;
        this.data = res.data.data;
        this.data2 = JSON.parse(JSON.stringify(this.data));
      });
    },
    // 翻页
    changepage(index) {
      this.pageIndex = index.current;

      this.getList({ Page: index.current, ...this.searchParams });
    },
    // 查询
    searchTable(searchParams) {
      this.pageIndex = 1;

      this.searchParams = searchParams;
      this.data = JSON.parse(JSON.stringify(this.data2));
      // this.pageIndex =1;
      this.getList(this.searchParams);
    },
    // 改变状态
    onChangeStatus(status, info) {
      updateStatus(info.memberId, status ? 1 : 2).then(() => {
        this.$message.success("操作成功");
      });
    },
    // 删除
    deletedInfo(id) {
      deleteInfo(id).then(() => {
        this.$message.success("删除成功");
        this.getList({}, this.pageCount);
      });
    },
    closeAccountForm() {
      this.isShowAccount = false;
    },
    addAccountInfo(info) {
      this.AccountData = { memberId: info.memberId, isModify: false };
      this.isShowAccount = true;
    },
    editAccountInfo(info) {
      this.AccountData = { memberId: info.memberId, isModify: true };
      this.isShowAccount = true;
    },
    closeResetPasswordForm() {
      this.isShowResetPassword = false;
    },
    resetPassword(info) {
      this.ResetPasswordData = { memberId: info.memberId, isModify: true };
      this.isShowResetPassword = true;
    },
    changePageCount(val) {
      // console.log(val);
      this.getList(this.searchParams, val);
    },
    // 导出
    exoprtList() {
      memberExport()
        .then((res) => {
          exportExcel(res, "成员");
          this.$message.success("导出成功");
          // exportExcel(res, "角色");
          // this.$message.success("导出成功");
          // console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

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

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