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

    <div class="columns-action">
      <!-- <div class="add" :style="{ marginRight: '15px' }" @click="edit('', that)">
        <a-tooltip title="新增">
          <a-icon class="action" type="plus" />
        </a-tooltip>
      </div> -->

      <a-popconfirm
        title="确认导出?"
        @confirm="() => exoprtList()"
        v-if="type == 1"
        v-action:Export
      >
        <div class="add" :style="{ marginRight: '15px' }">
          <a-tooltip title="导出">
            <a-icon class="action" type="download" />
          </a-tooltip>
        </div>
      </a-popconfirm>
      <!-- 表格大小设置 -->
      <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="{ x: !isPC ? 1800 : '', y: fullHeight - 360 }"
        :size="tableSize"
        :pagination="{
          total: total,
          pageSize: pageCount,
          current: pageIndex,
          showTotal: (total) => {
            return `共 ${total} 条`;
          },
        }"
        row-key="id"
        @change="changepage"
      >
        <!-- 名称 -->
        <!-- <template slot="type" slot-scope="type">
          {{type ==1 ? '账号创建':type==2?'账号修改申请':type==3?'角色申请':type==4?'角色授权申请':type==5?'角色授权执行':''}}
        </template> -->

        <!--登录方式  -->
        <span slot="loginType" slot-scope="loginType">
          <a-tag :color="loginType == '1' ? 'green' : 'cyan'">{{
            loginType == 1 ? "本地账号" : loginType == 2 ? "域账号" : ""
          }}</a-tag>
        </span>
        <!-- 状态  -->
        <span slot="state" slot-scope="state">
          <a-tag
            :color="
              state == 1
                ? 'orange'
                : state == 2
                ? 'green'
                : state == 3
                ? 'red'
                : state == 4
                ? '#cecece'
                : state == 5
                ? '#cdcdcd'
                : state == 6
                ? '#16D46B'
                : ''
            "
            >{{
              state == 1
                ? "待审核"
                : state == 2
                ? "审核通过"
                : state == 3
                ? "审核不通过"
                : state == 4
                ? "已撤回"
                : state == 5
                ? "拒绝执行"
                : state == 6
                ? "执行成功"
                : ""
            }}</a-tag
          >
        </span>
        <!-- 成员状态  -->
        <span slot="memberState" slot-scope="memberState">
          <a-tag :color="memberState == 1 ? 'green' : memberState == 2 ? '#ccc' : ''">{{
            memberState == 1 ? "正常" : memberState == 2 ? "禁用" : ""
          }}</a-tag>
        </span>

        <!-- id  -->
        <span slot="id" slot-scope="id">
          <div v-if="id">
            <a-tag v-for="(item, key) in id" :key="key" :color="'orange'">
              {{ item }}
            </a-tag>
          </div>
        </span>

        <!-- 操作 -->
        <template slot="operation" slot-scope="x, y">
          <div :style="{ display: isPC ? 'flex' : 'block' }">
            <a-button
              v-if="y.isCanOperate"
              type="primary"
              :style="{
                marginRight: '5px',
              }"
              @click="
                operateMenu(5);
                edit(y, that);
              "
              v-action:Operate
            >
              执行
            </a-button>
            <a-button
              v-if="y.isCanCheck"
              type="primary"
              @click="edit(y, that)"
              :style="{
                marginRight: '5px',
                background: !y.isCanCheck ? '#16D46B' : '',
                border: !y.isCanCheck ? 'none' : '',
              }"
              v-action:Check
            >
              {{ "审核" }}
            </a-button>
            <a-button
              v-else
              type="primary"
              @click="edit(y, that, true)"
              :style="{
                marginRight: '5px',
                background: !y.isCanCheck ? '#16D46B' : '',
                border: !y.isCanCheck ? 'none' : '',
              }"
              v-action:Detail
            >
              {{ "查看详情" }}
            </a-button>
            <a-popconfirm
              v-action:Cancel
              v-if="y.isCancel"
              title="确认撤销?"
              @confirm="() => cancelApply(y.id)"
              :style="{ display: !isPC ? 'block' : '' }"
            >
              <a-button type="primary" :style="{ background: '#FD572B', border: 'none' }">
                {{ "撤回申请" }}
              </a-button>
            </a-popconfirm>
            <!-- <a-popconfirm title="删除该广告?" @confirm="() => deletedADInfo(y.id)">
              <a-button
                type="danger"
                :style="{ background: '#FD572B', marginRight: '5px' }"
              >
                删除
              </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 "@/common/components/Commonality/Table/less/table.less";
import { exportExcel } from "@/common/components/Commonality/Form/js/form";

import ActionColumns from "@/common/components/Commonality/Table/components/TableSet.vue";
import PopForm from "@/baseConfigComponents/components/Approval/Modify/components/Check.vue";
import TableSearch from "@/baseConfigComponents/components/Approval/List/components/TableSearch.vue";
import TableSize from "@/common/components/Commonality/Table/components/TableSize.vue";
import {
  resetFullHeight,
  changeTableSize,
  getcolumns,
  getTableFixed,
  resetTableFixed,
  edit,
  closePopForm,
  goDetail,
  columnsFixed,
  columnsKeys,
} from "@/baseConfigComponents/components/Approval/Modify/js/table.js";
import { getApplyTypeOfRouter } from "@/baseConfigComponents/components/Approval/List/js/utils";
import {
  accountCreateList,
  accountModifyList,
  roleCreateList,
  menuApplyList,
  accountCreateCancel,
  accountModifyCancel,
  roleCreateCancel,
  menuApplyCancel,
  approvalExport,
} from "@/baseConfigComponents/api/approval";
import {
  columns1,
  columns2,
  columns3,
  columns4,
} from "@/baseConfigComponents/components/Approval/List/js/columns.js";
export default {
  data() {
    this.type = getApplyTypeOfRouter(window.location.hash);
    this.listHttpType = {
      1: accountCreateList,
      2: accountModifyList,
      3: roleCreateList,
      4: menuApplyList,
    };
    this.listCancelHttpType = {
      1: accountCreateCancel,
      2: accountModifyCancel,
      3: roleCreateCancel,
      4: menuApplyCancel,
    };
    return {
      nowColums: [columns1, columns2, columns3, columns4],
      columns: columns1,
      columnsCopy: [],
      data: [], // 数据
      data2: undefined,
      isShow: false,
      isDetail: false,
      tableSize: "default", // 表格默认大小
      total: 0, // 分页参数
      searchParams: {}, // 高级搜索参数
      fullHeight: "", // 页面高度
      FormData: "",
      isSpinning: false,
      tableData: [
        { type: 1, id: 1 },
        { type: 2, id: 2 },
        { type: 3, id: 3 },
      ],
      pageIndex: 1,

      pageCount: 10,
      operate: false,
      isPC: false,
    };
  },

  created() {
    this.IsPC();
    // this.columns= columns2
    //console.log(this.type);
    switch (this.type) {
      case "1":
        this.columns = columns1;
        break;
      case "2":
        this.columns = columns2;
        break;
      case "3":
        this.columns = columns3;
        break;
      case "4":
        this.columns = columns4;
        break;
    }

    this.columns[this.columns.length - 1].fixed = undefined;
    // 初始化表格窗口高度
    resetFullHeight(this);
    this.columnsCopy = JSON.parse(JSON.stringify(this.columns));

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

      // setTimeout(() => {
      // this.data = this.tableData;

      this.listHttpType[this.type](searchParams, this.pageCount).then((res) => {
        // //console.log(res.data);
        this.data = res.data.data;
        this.data2 = JSON.parse(JSON.stringify(this.data));
        this.total = res.data.totalCount;
        setTimeout(() => {
          !this.isPC ? (this.columns[this.columns.length - 1].fixed = "right") : "";
        }, 200);
        this.isSpinning = false;
      });
      // }, 200);
      //   getADList(searchParams).then((res) => {
      //     this.data = res.data;
      //     this.data2 = JSON.parse(JSON.stringify(this.data));
      //     //console.log(res.data);
      //     this.isSpinning = false;
      //   });
    },
    // 翻页
    changepage(index, filters, sorter) {
      this.pageIndex = index.current;

      //console.log(sorter);
      this.getList({ Page: index.current, ...this.searchParams });
    },
    // 查询
    searchTable(searchParams) {
      this.pageIndex = 1;
      this.searchParams = searchParams;
      //console.log(searchParams);
      // this.columns = this.nowColums[searchParams.type - 1];
      // this.data = JSON.parse(JSON.stringify(this.data2));

      this.getList(this.searchParams);
    },

    // 撤销申请
    cancelApply(id) {
      //console.log(id);
      //console.log(this.type - 1);
      this.listCancelHttpType[this.type](id).then((res) => {
        this.$message.success("撤销成功！");
        this.getList(this.searchParams);
        //console.log(res.data);
      });
      // 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);
    },
    operateMenu(type) {
      // //console.log(type);
      this.operate = true;
    },
    IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      this.isPC = flag;
      return flag;
    },
    // 导出
    exoprtList() {
      approvalExport().then((res) => {
        exportExcel(res, "审批申请");
        this.$message.success("导出成功");
      });
    },
  },

  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>
