<template>
  <div>
    <!-- 广告主更改出价部分 -->
    <template v-if="statusControlBtn == 2">
      <!-- 出价按钮 -->
      <div style="display: inline-block; margin: 5px 0">
        <el-button size="mini" type="primary" @click="showOcmp">
          更改出价
        </el-button>
      </div>
      <!-- 出价弹框 -->
      <el-dialog
        title="出价修改"
        top="1vh"
        width="66%"
        :visible.sync="showOcmpModify"
        :before-close="closeOcmp"
      >
        <!-- tab切换框 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="统一更改" name="1"></el-tab-pane>
          <el-tab-pane label="分别更改" name="2"></el-tab-pane>
        </el-tabs>
        <!-- 统一修改框 -->
        <template v-if="activeName == 1">
          <el-input-number
            v-model="ocmpUnite"
            :precision="2"
            :step="1"
            :min="0.01"
          ></el-input-number>
        </template>
        <!-- 表格数据 -->
        <el-table
          empty-text="暂无数据"
          ref="ocmpTable"
          :data="selList"
          height="480px"
          border
          stripe
          fit
          highlight-current-row
        >
          <el-table-column prop="advertiserId" label="广告主ID" align="center">
          </el-table-column>
          <el-table-column prop="advertiserName" label="广告主" align="center">
          </el-table-column>
          <el-table-column
            label="oCMP出价"
            align="center"
            v-if="activeName == 2"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.cpaBid"
                :precision="2"
                :step="1"
                :min="0.01"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗底部按钮 -->
        <span slot="footer">
          <el-button @click="closeOcmp">取消</el-button>
          <el-button type="primary" @click="modifyOcmp">修改</el-button>
        </span>
      </el-dialog>
    </template>

    <!-- 后三个选择性开启关闭按钮控制 -->
    <div
      v-if="statusControlBtn > 2"
      style="display: inline-block; margin: 5px 0"
    >
      <el-button size="mini" type="primary" @click="changeListStatus('enable')">
        开启选择
      </el-button>
      <el-popconfirm
        confirm-button-text="确定"
        confirm-button-type="danger"
        cancel-button-text="取消"
        cancel-button-type="primary"
        icon="el-icon-circle-close"
        icon-color="red"
        title="确定批量关闭选择的状态吗？"
        @onConfirm="changeListStatus('disable')"
      >
        <el-button slot="reference" size="mini" type="danger">
          关闭选择
        </el-button>
      </el-popconfirm>
    </div>

    <!-- 广告计划更改出价和预算按钮 -->
    <div
      v-if="statusControlBtn == 4"
      style="display: inline-block; margin: 5px"
    >
      <el-button size="mini" type="primary" @click="showBudget">
        更改预算
      </el-button>
      <el-button size="mini" type="primary" @click="showCpabid">
        更改出价
      </el-button>
      <!-- 计划预算&&ocmp修改弹框 -->
      <el-dialog
        :title="planDiff.title"
        top="1vh"
        width="66%"
        :visible.sync="budgetShowModify"
        :before-close="closeBudget"
      >
        <!-- 标题设置 -->
        <div slot="title" v-if="planDiff.id == 1">
          <span style="font-size: 22px">{{ planDiff.title }}</span>
          <el-tooltip
            class="item"
            effect="dark"
            content="24小时内修改预算操作，不能超过20次，24小时是指自然天的24小时；
              单次修改预算幅度不能低于100元（增加或者减少）;
              修改后预算金额，不能低于当前已消费金额的105%，以整百单位向上取整；"
            placement="bottom-start"
          >
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
        <!-- tab切换框 -->
        <el-tabs v-model="activeBudgetName" @tab-click="handleBudgetClick">
          <el-tab-pane label="统一更改" name="1"></el-tab-pane>
          <el-tab-pane label="分别更改" name="2"></el-tab-pane>
        </el-tabs>
        <!-- 统一修改框 -->
        <template v-if="activeBudgetName == 1">
          <el-input-number
            v-model="budgetUnite"
            :precision="2"
            :step="1"
            :min="planDiff.minNum"
          ></el-input-number>
        </template>
        <!-- 表格数据 -->
        <el-table
          empty-text="暂无数据"
          ref="budgetTable"
          :data="selList"
          height="480px"
          border
          stripe
          fit
          highlight-current-row
        >
          <el-table-column prop="planId" label="广告计划ID" align="center">
          </el-table-column>
          <el-table-column
            prop="planName"
            label="广告计划"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <!-- 预算 -->
          <el-table-column
            label="预算"
            align="center"
            v-if="activeBudgetName == 2 && planDiff.id == 1"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.budget"
                :precision="2"
                :step="1"
                :min="0.01"
              ></el-input-number>
            </template>
          </el-table-column>
          <!-- 出价OCMP -->
          <el-table-column
            label="出价oCMP"
            align="center"
            v-if="activeBudgetName == 2 && planDiff.id == 2"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.cpaBid"
                :precision="2"
                :step="1"
                :min="0.01"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗底部按钮 -->
        <span slot="footer">
          <el-button @click="closeBudget">取消</el-button>
          <el-button type="primary" :loading="planLoad" @click="modifyBudget"
            >修改</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 显示数据表格 -->
    <el-table
      element-loading-text="Loading"
      empty-text="暂无数据"
      ref="table"
      :data="putList"
      border
      stripe
      fit
      highlight-current-row
      :height="tableHeight"
      @sort-change="sortChangefirst"
      @selection-change="handleSelectionChange"
    >
      <template v-for="(itm, idx) in header">
        <!-- 多选框封装不能添加key值，否则会不显示 -->
        <el-table-column
          v-if="itm.tag === 'selection'"
          :type="itm.type ? itm.type : null"
          :fixed="itm.fixed ? itm.fixed : null"
          :width="itm.width ? itm.width : null"
          :align="itm.align ? itm.align : 'center'"
          :selectable="selectInit"
        />
        <el-table-column
          v-else
          :key="idx"
          :prop="itm.prop ? itm.prop : null"
          :label="itm.label ? itm.label : null"
          :width="itm.width ? itm.width : null"
          :sortable="itm.sortable ? itm.sortable : false"
          :align="itm.align ? itm.align : 'center'"
          :fixed="itm.fixed ? itm.fixed : null"
          :show-overflow-tooltip="itm.tooltip"
        >
          <template slot-scope="scope">
            <!-- 终端数字转文字 -->
            <template v-if="itm.tag === 'mobileTerminal'">
              <template v-if="scope.row.platform == 1"> 安卓 </template>
              <template v-else-if="scope.row.platform == 2"> IOS </template>
              <template v-else-if="scope.row.platform == 3"> H5 </template>
              <template v-else>
                {{ scope.row.platform }}
              </template>
            </template>
            <!-- 归因操作按钮 -->
            <template v-else-if="itm.tag === 'attributionOperation'">
              <el-button
                v-if="JSON.stringify(scope.row).search('#ALL#') == -1"
                type="primary"
                plain
                size="small"
                @click="
                  clickAttribution();
                  distributionBtn('pkg', scope.row.pkg, 'group_platform');
                "
              >
                查看投放归因
              </el-button>
            </template>
            <!-- 平台字段 -->
            <template v-else-if="itm.tag === 'platform'">
              <el-link
                v-if="scope.row.platformType !== '#ALL#'"
                type="primary"
                @click="
                  distributionBtn(
                    'platformType',
                    scope.row.platformType,
                    'group_agent',
                    scope.row.platformName
                  )
                "
              >
                {{ scope.row.platformName }}
              </el-link>
              <template v-else> 汇总 </template>
            </template>
            <!-- 渠道的字段 -->
            <template v-else-if="itm.tag === 'channelName'">
              <el-link
                v-if="scope.row.agentId !== '#ALL#'"
                type="primary"
                @click="
                  distributionBtn(
                    'agentId',
                    scope.row.agentId,
                    'group_advertiser',
                    scope.row.agentName
                  )
                "
              >
                {{ scope.row.agentName }}
              </el-link>
              <template v-else> 汇总 </template>
            </template>
            <!-- 状态字段，在广告组，广告计划，广告素材中保留 -->
            <template v-else-if="itm.tag === 'state'">
              <!-- 依次是 广告组、广告计划、创意 -->
              <el-switch
                :value="
                  scope.row[itm.prop] === 'CAMPAIGN_STATUS_ENABLE' ||
                  scope.row[itm.prop] === 'AD_STATUS_ENABLE' ||
                  scope.row[itm.prop] === 'CREATIVE_STATUS_ENABLE'
                "
                @change="changeStatus(scope.$index, scope.row)"
                v-if="JSON.stringify(scope.row).search('#ALL#') == -1"
              >
              </el-switch>
            </template>
            <!-- 广告主的字段 -->
            <template v-else-if="itm.tag === 'account'">
              <a
                v-if="JSON.stringify(scope.row).search('#ALL#') == -1"
                type="primary"
                :class="itm.tooltip ? 'tooltip' : ''"
                @click="
                  distributionBtn(
                    'advertiserId',
                    scope.row.advertiserId,
                    'group_campaign',
                    scope.row.advertiserName === ''
                      ? scope.row.advertiserId
                      : scope.row.advertiserName
                  )
                "
              >
                {{
                  scope.row.advertiserName === ""
                    ? scope.row.advertiserId
                    : scope.row.advertiserName
                }}
              </a>
              <template v-else> 汇总 </template>
            </template>
            <!-- 广告组 没有名字，直接di显示 -->
            <template v-else-if="itm.tag === 'adGroup'">
              <el-link
                v-if="scope.row.campaignId !== '#ALL#'"
                type="primary"
                @click="
                  distributionBtn(
                    'campaignId',
                    scope.row.campaignId,
                    'group_plan',
                    scope.row.campaignId
                  )
                "
              >
                {{ scope.row.campaignId }}
              </el-link>
              <template v-else> 汇总 </template>
            </template>
            <!-- 广告计划显示 -->
            <template v-else-if="itm.tag === 'adPlan'">
              <a
                v-if="scope.row.planId !== '#ALL#'"
                type="primary"
                :class="itm.tooltip ? 'tooltip' : ''"
                @click="
                  distributionBtn(
                    'planId',
                    scope.row.planId,
                    'group_creative',
                    scope.row.planName
                  )
                "
              >
                {{ scope.row.planName }}
              </a>
              <template v-else> 汇总 </template>
            </template>
            <!-- 保留字段，一个是预算，一个是账户余额，一个是出价oCMP 后期需求可以拆分tag实现 -->
            <template v-else-if="itm.tag === 'budget'">
              ￥{{ scope.row[itm.prop] }}<i class="el-icon-edit"></i>
            </template>
            <!-- 给字符添加%符号 -->
            <template v-else-if="itm.tag === 'percentSign'">
              {{ scope.row[itm.prop] }}%
            </template>
            <!-- 正常情况，排除掉汇总行id=#ALL#，让其显示汇总 -->
            <template v-else>
              <template v-if="scope.row[itm.prop] == '#ALL#'"> 汇总 </template>
              <template v-else>
                {{ scope.row[itm.prop] }}
              </template>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import { modifyAdvertiserOcmp, planRevision } from "@/api/report";

export default {
  name: "zxTable",
  data() {
    return {
      tableHeight: null,
      //出价OCMP修改
      selList: [], //选中的数据集
      showOcmpModify: false, //出价oCMP修改弹窗控制
      activeName: "1",
      ocmpUnite: 0.01, //统一修改
      //下面是计划预算修改
      budgetShowModify: false, //预算弹窗控制
      activeBudgetName: "1",
      budgetUnite: 0.01, //预算统一修改
      //计划的预算和出价修改相似度高，做一个参数区分,初始化是预算
      planDiff: {
        id: 1, //1是预算2是出价
        title: "预算修改",
        minNum: 300, //预算最低300 出价大于0
      },
      planLoad: false, //计划修改预算和出价时防止重复点击
    };
  },
  props: {
    header: {
      type: Array,
    },
    putList: {
      type: Array,
    },
    statusControlBtn: {
      type: Number,
    },
    condition: {
      type: Object,
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      //表格高度自适应浏览器大小
      //浏览器窗口的内部高度（包括滚动条）
      let Height = window.innerHeight || document.body.clientHeight;
      //高度设置
      Height -= 290;
      this.tableHeight = Height < 300 ? 300 : Height;
      window.onresize = () => {
        let Height = window.innerHeight || document.body.clientHeight;
        Height -= 290;
        this.tableHeight = Height < 300 ? 300 : Height;
        this.$refs.table.doLayout();
      };
    });
  },
  destroyed() {
    //高度自适应事件注销
    window.onresize = null;
  },
  methods: {
    //显示出价更改弹窗前的条件判断操作
    showOcmp() {
      if (this.condition.pkg === "") {
        this.$message.warning("请选择具体的APP名称，进行改价操作！");
        return;
      }
      if (this.selList.length < 1) {
        this.$message.warning("请选择数据后再进行改价操作！");
        return;
      }
      this.showOcmpModify = true;
      //刚开始刷新弹出的表格
      this.$nextTick(() => {
        this.$refs.ocmpTable.doLayout();
      });
    },
    //显示预算前条件
    showBudget() {
      if (!this.condition.advertiserId || this.condition.advertiserId === "") {
        this.$message.warning("请先选择广告主！");
        return;
      }
      if (this.selList.length < 1) {
        this.$message.warning("请选择数据后再进行预算修改操作！");
        return;
      }
      this.planDiff = {
        id: 1, //1是预算2是出价
        title: "预算修改",
        minNum: 300, //预算最低300 出价大于0
      };
      this.budgetUnite = 300;
      this.budgetShowModify = true;
      //刚开始刷新弹出的表格
      this.$nextTick(() => {
        this.$refs.budgetTable.doLayout();
      });
    },
    //显示计划出价修改条件
    showCpabid() {
      if (!this.condition.advertiserId || this.condition.advertiserId === "") {
        this.$message.warning("请先选择广告主！");
        return;
      }
      if (this.selList.length < 1) {
        this.$message.warning("请选择数据后再进行出价修改操作！");
        return;
      }
      this.planDiff = {
        id: 2, //1是预算2是出价
        title: "出价修改",
        minNum: 0.01, //预算最低300 出价大于0
      };
      this.budgetUnite = 0.01;
      this.budgetShowModify = true;
      //刚开始刷新弹出的表格
      this.$nextTick(() => {
        this.$refs.budgetTable.doLayout();
      });
    },
    //修改出价ocmp
    modifyOcmp() {
      //构建请求参数数组
      let params = [];
      //判断是统一修改还是单个修改
      if (this.activeName == 1) {
        params = this.selList.map((itm) => {
          return {
            advertiserId: itm.advertiserId,
            advertiserName: itm.advertiserName,
            bid: this.ocmpUnite,
          };
        });
      } else {
        params = this.selList.map((itm) => {
          return {
            advertiserId: itm.advertiserId,
            advertiserName: itm.advertiserName,
            bid: itm.cpaBid,
          };
        });
      }
      // console.log({ ...params });
      // return;
      this.modifyAdvertiserOcmp(params);
    },
    //一次出价修改请求
    modifyAdvertiserOcmp(param) {
      //请求修改出价
      modifyAdvertiserOcmp(param)
        .then((res) => {
          if (res.status == 200) {
            this.$message.success(`${res.result.data}条：修改成功！`);
            //第一次成功后就可以 关闭窗口了
            if (this.showOcmpModify) {
              //退出的时候清除数据集
              this.selList.map((itm) => {
                itm.cpaBid = null;
              });
              this.selList = [];
              this.$refs.table.clearSelection();
              this.activeName = "1";
              this.ocmpUnite = 0.01;
              this.showOcmpModify = false;
            }
          } else {
            this.$message.error(`请求出错，错误代码: ${res.status}`);
            console.log(res);
          }
        })
        .catch((err) => {
          this.$message.error(`请求出错，错误：${err}`);
          console.log(err);
        });
    },
    //修改预算和出价
    modifyBudget() {
      let params = {}; //修改参数
      //统一修改是1
      if (this.activeBudgetName == 1 && this.planDiff.id == 1) {
        //统一预算
        let planIdAry = this.selList.map((itm) => {
          itm.budget = this.budgetUnite;
          return itm.planId;
        });
        planIdAry = planIdAry.join(",");
        params = {
          advertiserId: this.condition.advertiserId,
          planId: planIdAry,
          budget: this.budgetUnite,
          history: "{}",
        };
        this.planRevision(params);
      } else if (this.activeBudgetName == 2 && this.planDiff.id == 1) {
        //分别预算
        this.selList.map((itm) => {
          params = {
            advertiserId: this.condition.advertiserId,
            planId: itm.planId,
            budget: itm.budget,
            history: "{}",
          };
          this.planRevision(params);
        });
      } else if (this.activeBudgetName == 1 && this.planDiff.id == 2) {
        //统一出价
        let planIdAry = this.selList.map((itm) => {
          itm.cpaBid = this.budgetUnite;
          return itm.planId;
        });
        planIdAry = planIdAry.join(",");
        params = {
          advertiserId: this.condition.advertiserId,
          planId: planIdAry,
          bid: this.budgetUnite,
          history: "{}",
        };
        this.planRevision(params);
      } else if (this.activeBudgetName == 2 && this.planDiff.id == 2) {
        //分别出价
        this.selList.map((itm) => {
          params = {
            advertiserId: this.condition.advertiserId,
            planId: itm.planId,
            bid: itm.cpaBid,
            history: "{}",
          };
          this.planRevision(params);
        });
      }
    },
    //计划的预算和出价修改
    planRevision(param) {
      this.planLoad = true;
      planRevision(param).then((res) => {
        if (res.status == 200 && this.budgetShowModify) {
          this.budgetShowModify = false;
          if (res.msg) {
            this.$message.success(res.msg);
            console.log(res.msg);
          }
          this.selList = [];
          this.$refs.table.clearSelection();
          this.activeBudgetName = "1";
          this.budgetUnite = 0.01;
          this.budgetShowModify = false;
          this.planLoad = false;
        }
        if (res.status !== 200) {
          this.$message.error(
            `计划${param.planId},修改失败！错误${res.status}`
          );
          console.error(res);
        }
      });
    },
    //切换表格刷新
    handleClick() {
      this.$nextTick(() => {
        this.$refs.ocmpTable.doLayout();
      });
    },
    //预算表格刷新
    handleBudgetClick() {
      this.$nextTick(() => {
        this.$refs.budgetTable.doLayout();
      });
    },
    //关闭弹窗事件处理
    closeOcmp() {
      //如果没选数据直接退出，增加体验
      if (this.selList.length < 1) {
        this.showOcmpModify = false;
        return;
      }
      this.$confirm("退出后不保留数据，确定退出页面？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //退出的时候清除数据集
          this.selList.map((itm) => {
            itm.cpaBid = null;
          });
          this.selList = [];
          this.$refs.table.clearSelection();
          this.activeName = "1";
          this.ocmpUnite = 0.01;
          this.showOcmpModify = false;
        })
        .catch(() => {});
    },
    /**
     * 关闭预算修改框
     */
    closeBudget() {
      if (this.selList.length < 1) {
        this.budgetShowModify = false;
        return;
      }
      this.$confirm("退出后不保留数据，确定退出页面？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //退出的时候清除数据集
          this.selList = [];
          this.$refs.table.clearSelection();
          this.activeBudgetName = "1";
          this.budgetUnite = 0.01;
          this.budgetShowModify = false;
        })
        .catch(() => {});
    },
    //设置汇总不可勾选
    selectInit(row) {
      if (JSON.stringify(row).search("#ALL#") !== -1) {
        return false;
      }
      return true;
    },
    //监听选择，更改选择的数据
    handleSelectionChange(ary) {
      this.selList = ary;
      this.$emit("selectCheckbox", ary);
    },
    //数据不为0
    changeListStatus(status) {
      if (this.selList.length <= 0) {
        this.$message.warning("请选择数据集后，再批量开启或关闭！");
        return;
      }
      this.$emit("listAttributionStatusChange", this.selList, status);
    },
    /*
    函数作用 更改 广告组、广告计划、创意 的状态 需要批量更改
    获取参数
      广告主 advertiserId +
      广告组 campaignId||
      广告计划 planId||
      创意 creativeId+
      状态 scope.row['status']
          'CAMPAIGN_STATUS_ENABLE' ||  广告组
          'AD_STATUS_ENABLE' || 计划
          'CREATIVE_STATUS_ENABLE'  创意
    传递参数
      advertiserId （必填）广告主id
      optStatus （必填） 状态 enable disable
      以下三选一(可以是单个，多个采用数据join(','))：
        campaignId 广告组
        planId 计划
        creativeId 创意
    */
    changeStatus(idx, rowVal) {
      // { //请求接口所需参数
      //   advertiserId: null,
      //   optStatus: rowVal["status"],
      //    以下是 多数据
      //   campaignId: rowVal["campaignId"],
      //   planId: rowVal["planId"],
      //   creativeId: rowVal["creativeId"]
      // };
      let params = {};
      if (rowVal["campaignId"]) {
        console.log(1111111, rowVal);
        //广告组
        params["campaignId"] = rowVal["campaignId"];
        params["optStatus"] =
          rowVal["status"] === "CAMPAIGN_STATUS_ENABLE" ? "disable" : "enable";
        this.$emit(
          "singleAttributionStatusChange",
          idx,
          "CAMPAIGN_STATUS_ENABLE",
          params,
          rowVal
        );
      } else if (rowVal["planId"]) {
        //广告计划
        params["planId"] = rowVal["planId"];
        params["optStatus"] =
          rowVal["optStatus"] === "AD_STATUS_ENABLE" ? "disable" : "enable";
        this.$emit(
          "singleAttributionStatusChange",
          idx,
          "AD_STATUS_ENABLE",
          params,
          rowVal
        );
      } else if (rowVal["creativeId"]) {
        //创意
        params["creativeId"] = rowVal["creativeId"];
        params["optStatus"] =
          rowVal["optStatus"] === "CREATIVE_STATUS_ENABLE"
            ? "disable"
            : "enable";
        this.$emit(
          "singleAttributionStatusChange",
          idx,
          "CREATIVE_STATUS_ENABLE",
          params
        );
      } else {
        this.$message.warning("三个参数都为空，状态更改失败！");
        return;
      }
    },
    /**
     * 添加归因汇总条件及其参数
     * 参数：
     *  filter-(...) 过滤条件如代理商、平台。。。过滤对应的参数名字
     *  filterCondition-(filter) 第一个参数名绑定对应的参数值
     *  summary-(pageType)   对应汇总的参数
     */
    distributionBtn: function (filter, filterCondition, summary, name) {
      this.$emit(
        "addAttributionCondition",
        filter,
        filterCondition,
        summary,
        name
      );
    },
    //点击投放归因操作按钮，分发显示事件
    clickAttribution: function () {
      this.$emit("showFilterMode");
    },
    //自定义排序，汇总不参与排序
    sortChangefirst: function ({ column, prop, order }) {
      //1个数据或者0个不排序
      if (!this.putList || this.putList.length <= 1) return;
      //汇总头部
      let summaryHead = {};
      //判断是否是汇总字段，目前只有第一页有汇总字段
      if (JSON.stringify(this.putList[0]).search("#ALL#") !== -1) {
        summaryHead = this.putList.shift(); //删除第一个汇总字段
      }
      //除了汇总的字段进行排序，这里遇到个大坑，sortable设置为custom时候排序才能排除汇总字段
      if (order === "ascending") {
        //升序
        this.putList = this.putList.sort((a, b) => a[prop] - b[prop]);
      } else if (order === "descending") {
        //降序
        this.putList = this.putList.sort((a, b) => b[prop] - a[prop]);
      } else {
        //后端数据默认按 展示(showPv) 字段降序排序
        this.putList = this.putList.sort((a, b) => b.showPv - a.showPv);
      }
      //汇总字段添加置第一位
      if (JSON.stringify(summaryHead).search("#ALL#") !== -1) {
        this.putList.unshift(summaryHead);
      }
      //清除默认排序方法 现在已经用不到了
      // if (this.$refs.table) this.$refs.table.clearSort();
    },
  },
  watch: {
    /**
     * 高度自适应
     */
    putList() {
      this.$nextTick(() => {
        let Height = window.innerHeight || document.body.clientHeight;
        //高度设置
        Height -= 290;
        this.tableHeight = Height < 300 ? 300 : Height;
        //重绘表格
        this.$refs.table.doLayout();
      });
    },
  },
};
</script>

<style scoped>
.tooltip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #409eff;
}

.tooltip:hover {
  color: #66b1ff;
}
</style>
