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

    <div class="columns-action">
      <div v-action:Add class="add" :style="{ marginRight: '15px' }" @click="edit('', that)">
        <a-tooltip title="新增" >
          <a-icon class="action" type="plus" />
        </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 class="add" :style="{ marginRight: '15px' }" @click="getList">
        <a-tooltip title="刷新">
          <a-icon class="action" type="reload" />
        </a-tooltip>
      </div>
    </div>

    <a-spin :spinning="isSpinning">
      <a-table
        v-if="data"
        :columns="columns"
        :data-source="data"
        :scroll="{ y: fullHeight - 350 }"
        :size="tableSize"
        row-key="id"
        :pagination="{
          total: total,
          pageCount: pageCount,
        current: pageIndex,

          showTotal: (total) => {
            return `共 ${total} 条`;
          },
        }"
        @change="changepage"
      >
        <!-- 操作 -->
        <template slot="operation" slot-scope="x, y">
          <div>
            <a-button
              type="primary"
              @click="edit(y, that)"
              :style="{ marginRight: '5px' }"
              v-action:Modify
            >
              编辑
            </a-button>

            <a-popconfirm title="确认删除?" @confirm="() => deletedADInfo(y.id)">
              <a-button
                type="danger"
                :style="{ background: '#FD572B', marginRight: '5px' }"
                v-action:Delete
              >
                删除
              </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>
    </a-spin>
  </div>
</template>
<script>
import {getSiteOfRouter} from "@/baseConfigComponents/components/Menu/List/js/utils"
import "@/common/components/Commonality/Table/less/table.less";
import { getLangSettingList ,deleteLangInfo} from "@/baseConfigComponents/api/langSetting";
import ActionColumns from "@/common/components/Commonality/Table/components/TableSet.vue";
import PopForm from "@/baseConfigComponents/components/LangSetting/Modify/PopForm.vue";
import TableSearch from "@/baseConfigComponents/components/LangSetting/List/components/TableSearch.vue";
import TableSize from "@/common/components/Commonality/Table/components/TableSize.vue";
import {
  resetFullHeight,
  changeTableSize,
  getcolumns,
  getTableFixed,
  resetTableFixed,
  edit,
  closePopForm,
  columnsFixed,
  columnsKeys,
} from "@/baseConfigComponents/components/LangSetting/List/js/table.js";
import { columns } from "@/baseConfigComponents/components/LangSetting/List/js/columns.js";
export default {
  data() {
    return {
      columns,
      columns2: [],
      data: [], // 数据
      data2: undefined,
      isShow: false,
      tableSize: "default", // 表格默认大小
      total: 0, // 分页参数
      searchParams: {}, // 高级搜索参数
      fullHeight: "", // 页面高度
      FormData: "",
      isSpinning: false,
      tableData: [
        { key: "modules", language: "muchaofeng", value: "2021/2/2", sort: 2 },
        { key: "role", language: "muchaofeng", value: "2021/2/2", sort: 3 },
        { key: "menu", language: "muchaofeng", value: "2021/2/2", sort: 4 },
      ],
      pageIndex: 1,

      pageCount: 10,
      site:{}
    };
  },

  created() {
    this.site = getSiteOfRouter(window.location.hash)
    // this.columns[this.columns.length - 1].fixed = undefined;
    // 初始化表格窗口高度
    resetFullHeight(this);
    this.columns2 = JSON.parse(JSON.stringify(this.columns));

    // //获取广告列表
    this.getList(this.searchParams);
  },
  methods: {
    // 改变表格size  子传父
    changeTableSize,
    // 列设置 展示指定 的参数
    getcolumns,
    // 编辑跳转 表单
    edit,
    // 改变列固定方向
    getTableFixed,
    // 重置 列 固定方向
    resetTableFixed,
    // 关闭表单（编辑）
    closePopForm,
    // 获取 广告列表
    getList(searchParams) {
      this.isSpinning = true;

      getLangSettingList(this.site.siteCode, searchParams, this.pageCount).then((res) => {
        this.data = res.data.data;
           this.total = res.data.totalCount;
        this.data2 = JSON.parse(JSON.stringify(this.data));
        this.isSpinning = false;

        //     setTimeout(() => {
        //   this.columns[this.columns.length - 1].fixed = "right";
        // }, 1500);
      });
    },
    // 翻页
    changepage(index) {
      this.pageIndex = index.current;

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

      this.searchParams = searchParams;
      this.data = JSON.parse(JSON.stringify(this.data2));

     
      // this.data = this.data2.filter((item) =>( searchParams.key? item.key.indexOf(searchParams.key) != -1:1 )&&( searchParams.language? item.language==searchParams.language :1 ));

     
      this.getList({...this.searchParams,Page:1});
    },
    // 改变广告状态
    changeStatus(status, info) {
      // console.log(status, info.id);
      this.data = this.data.map((item) => {
        if (item.id == info.id) item.status = status ? 0 : 1;
        return item;
      });

      // console.log(info.id, info.status);
      info.status = info.status ? 1 : "0";
      changeADStatus(info.id, info.status).then(() => {
        // console.log(res.data);
        this.$message.success("更改成功");
      });
    },
    // 删除广告信息
    deletedADInfo(id) {
      console.log(id);
      deleteLangInfo(this.site.siteCode,id).then(()=>{
        this.$message.success('成功');
        this.getList(this.searchParams);
      })
      // delectedADInfo(id).then(() => {
      //   this.$message.success("删除成功");
      //   this.data = this.data.filter((item) => item.id != id);
      //   this.data2 = JSON.parse(JSON.stringify(this.data));
      // });
    },

    changePageCount(val) {
      // console.log(val);
      this.getList(this.searchParams, this);
    },
  },

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

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