<template>
  <div class="table">
    <!-- 高级搜索 -->
    <TableSearch @searchTable="searchTable" @refresh="refresh" />
    <PopForm
      v-if="isShow"
      @closePopForm="closePopForm"
      :data="FormData"
      :that="this"
      @refresh="refresh"
    />

    <div class="columns-action">
      <div
        class="add"
        v-action:Delete
        :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" :that="this" />

      <!-- 表格列设置 -->
      <ActionColumns
        class="action-column"
        @columns="getcolumns"
        :columns-keys="columnsKeys"
        @getTableFixed="getTableFixed"
        @resetTableFixed="resetTableFixed"
        :columns-fixed="columnsFixed"
        :that="this"
      />
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      :scroll="{ x: 1820, y: fullHeight - 310 }"
      :size="tableSize"
      row-key="id"
      :pagination="{
        total: total,
        pageSize: pageCount,
        current: pageIndex,
        showTotal: (total) => {
          return `共 ${total} 条`;
        },
      }"
      @change="changepage"
    >
      <span slot="name" slot-scope="name">
        {{ $t(`${name}`) }}
      </span>
      <!-- 图片 -->
      <span slot="logo" slot-scope="logo" :style="{ textAlign: 'center' }">
        <div
          class="img"
          :style="{ width: '100px', textAlign: 'center', display: 'inline-block' }"
        >
          <img
            :src="
              logo.indexOf('https://file.yallaludo.com/') == -1
                ? 'https://file.yallaludo.com/' + logo
                : logo
            "
            alt=""
            srcset=""
            :style="{ width: '100%', textAlign: 'center' }"
            v-if="logo"
            @load="handleLoad"
          />
        </div>
      </span>

      <!-- 状态 -->
      <template slot="isEnabled" slot-scope="x, y">
        <a-switch
          v-if="y.isSystem == 0 && $auth('menu_site.UpdateStatus')"
          checked-children="启用"
          un-checked-children="禁用"
          :default-checked="x === 1"
          @change="changeStatus($event, y)"
        />
        <a-tag
          :color="x === 1 ? 'green' : 'red'"
          v-if="y.isSystem == 1 || !$auth('menu_site.UpdateStatus')"
        >
          {{ x === 1 ? $t("site.table.content.正常") : $t("site.table.content.禁用") }}
        </a-tag>
      </template>

      <!-- 权限校验 -->
      <template slot="isNeedCheckRole" slot-scope="x, y">
        <a-switch
          v-if="y.isSystem == 0 && $auth('menu_site.UpdateNeedAuthority')"
          :checked-children="$t('site.table.content.需要')"
          :un-checked-children="$t('site.table.content.不需要')"
          :default-checked="x === 1"
          @change="changeCheckRole($event, y)"
        />
        <a-tag
          :color="x === 1 ? 'green' : 'blue'"
          v-if="y.isSystem == 1 || !$auth('menu_site.UpdateNeedAuthority')"
        >
          {{ x === 1 ? $t("site.table.content.需要") : $t("site.table.content.不需要") }}
        </a-tag>
      </template>

      <!-- 是否为系统站点  -->
      <span slot="isSystem" slot-scope="x">
        <a-tag :color="x === 1 ? 'green' : 'blue'">
          {{
            x === 1
              ? $t("site.table.content.系统站点")
              : $t("site.table.content.业务站点")
          }}
        </a-tag>
      </span>

      <!-- 操作 -->
      <template slot="operation" slot-scope="x, y">
        <div>
          <a-button
            type="primary"
            @click="edit(y.id, that)"
            :style="{ marginRight: '5px' }"
            v-action:Modify
          >
            {{ $t("编辑") }}
          </a-button>

          <a-popconfirm
            :title="$t('site.table.content.确定删除')"
            @confirm="() => deletedInfo(y.id)"
          >
            <a-button
              type="danger"
              :style="{ background: '#FD572B', marginRight: '5px' }"
              v-action:Delete
            >
              {{ $t("删除") }}
            </a-button>
          </a-popconfirm>
          <a-popconfirm
            :title="$t('site.table.content.确定初始化')"
            @confirm="() => installInfo(y.id)"
          >
            <a-button
              type="default"
              :style="{ background: '#fff', marginRight: '5px', marginTop: '5px' }"
              v-action:Install
            >
              {{ $t("初始化") }}
            </a-button>
          </a-popconfirm>
          <a-popconfirm
            :title="$t('确认同步菜单?')"
            @confirm="() =>syncMenu(y.id)"
          >
            <a-button
              type="danger"

              :style="{ border:'none',background: 'rgb(22 212 107)', marginRight: '5px', marginTop: '5px' }"
            >
              {{ $t("同步菜单") }}
            </a-button>
          </a-popconfirm>
        </div>
      </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/MyTable/table/table.less";
import {
  getServerList,
  deleteInfo,
  installSite,
  modifyStatus,
  modifyCheckRole,
} from "@/baseConfigComponents/api/site.js";
import {
  syncMenu
} from "@/baseConfigComponents/api/menu.js";
import PopForm from "@/baseConfigComponents/components/Site/Modify/ModifyForm.vue";
import TableSearch from "@/baseConfigComponents/components/Site/List/Search.vue";
import { columns } from "@/baseConfigComponents/components/Site/List/column.js";
import TableSize from "@/common/components/MyTable/table/TableSize.vue";
import ActionColumns from "@/common/components/MyTable/table/TableSet.vue";
import {
  resetFullHeight,
  changeTableSize,
  getcolumns,
  getTableFixed,
  resetTableFixed,
  edit,
  closePopForm,
  goDetail,
  columnsFixed,
  columnsKeys,
} from "@/common/components/MyTable/table/utils/table.js";
export default {
  data() {
    return {
      columns,
      columns2: [],
      data: [], // 数据
      data2: undefined,
      isShow: false,
      tableSize: "default", // 表格默认大小
      total: 0, // 分页参数
      searchParams: {}, // 高级搜索参数
      fullHeight: "", // 页面高度
      FormData: "",
      pageIndex: 1,

      pageCount: 10,
      timer: null,
    };
  },

  created() {
    this.columns[this.columns.length - 1].fixed = undefined;
    // 初始化表格窗口高度
    resetFullHeight(this);
    // //获取列表
    this.getList(this.searchParams, this, this.pageCount);
    this.columns2 = JSON.parse(JSON.stringify(this.columns));
  },
  methods: {
    syncMenu(id){
      // var nowDate =this.$options.filters.moment(nowDate) 
      syncMenu(id,null).then(res=>{
        console.log(res);
        this.$message.success('同步成功！')
      })
      
    },
    handleLoad() {
      clearInterval(this.timer);
      this.timer = setTimeout(() => {
        this.columns[this.columns.length - 1].fixed = "right";
      }, 100);
      this.timer = null;
    },
    //  $auth(code) {
    //   try {
    //     return this.$auth(code);
    //   } catch (error) {
    //     return false;
    //   }
    // },
    // 改变表格size  子传父
    changeTableSize,
    // 列设置 展示指定 的参数
    getcolumns,
    // 编辑跳转 表单
    edit,
    // 改变列固定方向
    getTableFixed,
    // 重置 列 固定方向
    resetTableFixed,
    // 关闭表单（编辑）
    closePopForm,
    // 跳转详情页
    goDetail,
    refresh() {
      this.pageIndex = 1;
      this.searchParams = {};
      this.getList(this.searchParams, this);
    },
    // 获取 广告列表
    getList(searchParams, obj) {
      getServerList(searchParams, this.pageCount).then((res) => {
        obj.total = res.data.totalCount;
        obj.data = res.data.data;
        obj.data2 = JSON.parse(JSON.stringify(this.data));
      });
    },
    // 翻页
    changepage(index) {
      this.pageIndex = index.current;

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

      this.searchParams = searchParams;
      this.data = JSON.parse(JSON.stringify(this.data2));
      this.getList(this.searchParams, this);
    },
    // 改变状态
    changeStatus(status, info) {
      modifyStatus(info.id, status ? 1 : 0).then(() => {
        this.$message.success("操作成功");
        this.getList("", this);
      });
    },
    changeCheckRole(status, info) {
      modifyCheckRole(info.id, status ? 1 : 0).then(() => {
        this.$message.success("操作成功");
        this.getList("", this);
      });
    },
    // 删除广告信息
    deletedInfo(id) {
      deleteInfo(id).then(() => {
        this.$message.success("删除成功");
        this.getList({}, this);
      });
    },
    // 初始化站点
    installInfo(id) {
      console.log(id);
      installSite(id).then(() => {
        this.$message.success("初始化成功");
        this.getList({}, this);
      });
    },
    changePageCount(val) {
      console.log(val);
      this.getList(this.searchParams, this);
    },
  },

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

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