<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="90px">
      <el-row>
        <el-col :span="8">

          <el-form-item label="航班日期从" prop="fltDateStart">
            <el-date-picker value-format="yyyy-MM-dd" v-model="queryParams.fltDateStart" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="到" prop="fltDateEnd">
            <el-date-picker value-format="yyyy-MM-dd" v-model="queryParams.fltDateEnd" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="航班号" prop="fltNo">
            <el-input v-model="queryParams.fltNo" placeholder="请输入航班号" clearable size="small" />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="航班类型" prop="typeId">
            <el-select v-model="queryParams.typeId" placeholder="请选择航班类型" clearable size="small">
              <el-option v-for="dict in flightTypelist" :key="dict.id" :label="dict.chineseName" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="航班状态" prop="statusId">
            <el-select v-model="queryParams.statusId" placeholder="请选择航班状态" clearable size="small">
              <el-option v-for="dict in flightStatuslist" :key="dict.id" :label="dict.chineseName" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="航班种类" prop="flightKindId">
            <el-select v-model="queryParams.flightKindId" placeholder="请选择航班种类" clearable size="small">
              <el-option v-for="dict in flightKindlist" :key="dict.id" :label="dict.chineseName" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>

      <br />
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple">删除
        </el-button>
      </el-col>
    </el-row> -->
    <el-table max-height="500" highlight-current-row border stripe v-loading="loading" :data="findAllFltDatList"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="航班日期" align="center" prop="fltDate" width="120" />
      <el-table-column label="航班起飞时间" align="center" prop="takeOffTime" width="120" />
      <el-table-column label="航班号" align="center" prop="fltNo" />
      <el-table-column label="航班路线" align="center" prop="route" />
      <el-table-column label="航班类型" align="center" prop="typeName" width="100" />
      <el-table-column label="航班种类" align="center" prop="flightKindName" width="130" />
      <el-table-column label="航班状态" align="center" prop="statusName" />
      <el-table-column label="总重量" align="center" prop="totalWeight" width="130" />
      <el-table-column label="原始重量（KG）" align="center" prop="originalWeight" width="130" />
      <el-table-column label="总体积(cm³)" align="center" prop="totalVolume" width="130" />
      <el-table-column label="是否限制一票一件" align="center" prop="ticketToPiece" width="150"
        :formatter="ticketToPieceFormat" />
      <el-table-column label="是否需要预审" align="center" prop="needRequired" width="150" :formatter="needRequiredFormat" />
      <el-table-column label="额外增重百分比" align="center" prop="extraWeightPercent" width="150" />
      <el-table-column label="高价百分比" align="center" prop="highPriceWeightPercent" width="150" />
      <el-table-column label="低价百分比" align="center" prop="lowPriceWeightPercent" width="150" />
      <el-table-column label="是否开启高地价" align="center" prop="highLowPriceFlg" width="150"
        :formatter="highLowPriceFlgFormat" />
      <el-table-column label="已配重量" align="center" prop="alloctedWeight" width="150" />
      <el-table-column label="已配体积(cm³)" align="center" prop="alloctedVolume" width="150" />
      <el-table-column label="航班优先级" align="center" prop="priorityName" width="150" />
      <el-table-column label="配舱优先级" align="center" prop="priorityRuleName" width="150" />
      <el-table-column label="创建人" align="center" prop="createUserName" width="120" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="155" />

      <!-- <el-table-column label="创建时间" align="center" prop="createTime" width="155">
        <template slot-scope="scope">
          <span>{{ renderTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="最后修改人" align="center" prop="lastModifyUserName" width="155" />
      <!-- <el-table-column label="最后修改时间" align="center" prop="lastModifyTime" width="155">
        <template slot-scope="scope">
          <span>{{ renderTime(scope.row.lastModifyTime) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="最后修改时间" align="center" prop="lastModifyTime" width="120" />

      <el-table-column v-if="findAllFltDatList.length>0" label="操作" align="center"
        class-name="small-padding fixed-width" width="130" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteorPlayorpause(scope.row,0,'删除')">
            删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" layout=" prev, pager, next, jumper, sizes,total"
      :page.sync="queryParams.pageNum" :limit.sync="queryParams.limitSize" @pagination="findAllFltData" />




    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" :close-on-click-modal="false" :append-to-body="true">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="航班号" prop="fltNo">
              <el-input @blur="blurfltNo" :disabled="formdisabled.fltNo" style="width:93%;" v-model="form.fltNo"
                placeholder="请输入航班号" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="1"> &#12288;</el-col> -->
          <el-col :span="12">
            <el-form-item label="航班日期" prop="fltDate">

              <el-date-picker :disabled="formdisabled.fltDate" clearable size="small" v-model="form.fltDate" type="date"
                value-format="yyyy-MM-dd" placeholder="选择航班日期">
              </el-date-picker>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="航班路线" prop="route">
              <el-input style="width:93%" v-model="form.route" placeholder="请输入航班路线" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="航班种类" prop="kindId">
              <el-select v-model="form.kindId" placeholder="请选择航班种类">
                <el-option v-for="item in flightKindlist" :key="item.id" :label="item.chineseName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="航班类型" prop="typeId">
              <el-select v-model="form.typeId" placeholder="请选择航班类型">
                <el-option v-for="item in flightTypelist" :key="item.id" :label="item.chineseName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="航班状态" prop="statusId">
              <el-select :disabled="true" v-model="form.statusId" placeholder="请选择航班状态">
                <el-option v-for="item in flightStatuslist" :key="item.id" :label="item.chineseName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原始重量（KG）" prop="originalWeight">
              <el-input-number @change="LowHighAvailable" placeholder="请输入原始重量（KG）" style="width:93%"
                v-model="form.originalWeight" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="额外增重百分比" prop="extraWeightPercent">
              <el-input-number @change="LowHighAvailable" placeholder="请输入额外增重百分比" style="width:93%"
                v-model="form.extraWeightPercent" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否开启高低价" prop="highLowPriceFlg">
              <el-switch @change='LowHighAvailable' v-model="form.highLowPriceFlg" active-color="#13ce66">
              </el-switch>
            </el-form-item>
          </el-col>

          <!-- 是否需要预审，1：预审，0：取消预审 -->
          <el-col :span="12">
            <el-form-item label="是否预审" prop="isNeedRequired">
              <el-switch :disabled="true" v-model="form.isNeedRequired" active-color="#13ce66">
              </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="高价百分比" prop="highPriceWeightPercent">
              <el-input-number @change="LowHighAvailable" placeholder="请输入高价百分比" style="width:93%"
                v-model="form.highPriceWeightPercent" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="低价百分比" prop="lowPriceWeightPercent">
              <el-input-number @change="LowHighAvailable" placeholder="请输入低价百分比" style="width:93%"
                v-model="form.lowPriceWeightPercent" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="高价可配重量" prop="HighAvailableWeight">

              <el-input-number :disabled="true" placeholder="请输入高价可配重量" style="width:93%"
                v-model="form.HighAvailableWeight" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="低价可配重量" prop="LowAvailableWeight">
              <el-input-number :disabled="true" placeholder="请输入低价可配重量" style="width:93%"
                v-model="form.LowAvailableWeight" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>

          
          <el-col :span="12">
            <el-form-item label="高价已配重量" prop="HighAllocatedWeight">
              <el-input-number :disabled="true" placeholder="请输入高价已配重量" style="width:93%"
                v-model="form.HighAllocatedWeight" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="低价已配重量" prop="LowAllocatedWeight">
              <el-input-number :disabled="true" placeholder="请输入低价已配重量" style="width:93%"
                v-model="form.LowAllocatedWeight" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已配总重量" prop="alloctedWeight">
          
              <el-input-number :disabled="true" placeholder="请输入已配总重量" style="width:93%" v-model="form.alloctedWeight"
                :precision="2"></el-input-number>
          
            </el-form-item>
          </el-col>


        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    findFltConditionDataApi,
    findAllFltDataApi,
    findFltById,
    saveOrUpdate,
    findFltCommonConf,
    updateStatusBatch

  } from "@/api/findAllFltData";
  export default {
    name: "findAllFltData",
    data() {
      return {
        //form属性禁用状态
        formdisabled: {
          //航班号
          fltNo: false,
          //航班日期
          fltDate: false,
          //航班路线
          route: false,
          //航班种类
          kindId: false,
          //航班类型
          typeId: false,
          //原始重量
          originalWeight: false
        },

        //航班种类
        flightKindlist: [],
        //航班状态
        flightStatuslist: [],
        //航班类型
        flightTypelist: [],
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,

        // 遮罩层
        loading: false,
        // 遮罩层
        loadingFlightDate: false,
        // 弹出层标题
        title: "",
        // 总条数
        total: 0,
        // 原航班规则数据
        findAllFltDatList: [],
        //目的航班数据
        sourceFlightAndFlightDate: [],
        statusList: [{
          'id': 1,
          'name': '有效'
        }, {
          'id': 3,
          'name': '停用'
        }],
        // 新增修改查看规则弹出层
        open: false,
        // 是否显示查看目的航班弹出层
        openFlightDate: false,
        // 查询参数
        queryParams: {
          limitStart: 0, //当前条数【代表第几条数据 +1开始】
          pageNum: 1,
          limitSize: 20, //一页显示多少条数据
          fltDateStart: undefined, //航班日期开始
          fltDateEnd: undefined, //航班日期结束
          typeId: undefined, //航班类型
          statusId: undefined, //航班状态
          flightKindId: undefined, //航班种类
          fltNo: undefined //航班号，要大写
        },

        // 表单参数
        form: {


        },
        // 表单校验
        rules: {
          fltNo: [{
            required: true,
            message: "原航班号不能为空",
            trigger: "blur"
          }],
          fltDate: [{
            required: true,
            message: "航班日期不能为空",
            trigger: "blur"
          }],
          kindId: [{
            required: true,
            message: "航班种类不能为空",
            trigger: "change"
          }],
          originalWeight: [{
            required: true,
            message: "原始重量（KG）不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      //查询条件数据源
      this.findFltConditionData();
      this.findAllFltData();
    },
    methods: {
      //输入航班号后
      blurfltNo() {
        if (this.form.fltNo != null && this.form.fltNo != undefined && this.form.fltNo != "") {
          this.form.fltNo = this.form.fltNo.toUpperCase();
          findFltCommonConf(this.form).then(response => {
            if (response.code == 200) {
              //额外增重百分比：根据已存在的相同航班号对应的最新值进行设置，如果无相同航班号，按照默认设置为0，不可编辑
              if (response.data.extraWeightPercent != null && response.data.extraWeightPercent != undefined) {
                this.$set(this.form, "extraWeightPercent", response.data.extraWeightPercent);
                // this.form.extraWeightPercent=response.data.extraWeightPercent;
              } else {
                this.$set(this.form, "extraWeightPercent", 0);
                //this.form.extraWeightPercent=response.data.extraWeightPercent=0;
              }
              //是否开启高低价：根据已存在的相同航班号对应的最新值进行设置，如果无相同航班号，按照默认设置‘是否开启高低价’ 为是，不可编辑
              if (response.data.highLowPriceFlg != null && response.data.highLowPriceFlg != undefined) {
                this.form.highLowPriceFlg = response.data.highLowPriceFlg === 1 ? true : false;
              } else {
                this.form.highLowPriceFlg = true;
              }
              //是否预审：根据已存在的相同航班号对应的最新值进行设置，如果无相同航班号，按照默认设置‘是否预审’ 为否，不可编辑；
              if (response.data.isNeedRequired != null && response.data.isNeedRequired != undefined) {
                this.form.isNeedRequired = response.data.isNeedRequired === 1 ? true : false;
              } else {
                this.form.isNeedRequired = false;
              }
              //高/低价百分比：根据已存在的相同航班号对应的最新值进行设置，如果无相同航班号，按照默认设置‘高价百分比’60%，‘低价百分比’40%，不可编辑
              if (response.data.highPriceWeightPercent != null && response.data.highPriceWeightPercent !=
                undefined) {
                this.form.highPriceWeightPercent = response.data.highPriceWeightPercent;
              } else {
                this.form.highPriceWeightPercent = response.data.highPriceWeightPercent = 60;
              }
              if (response.data.lowPriceWeightPercent != null && response.data.lowPriceWeightPercent != undefined) {
                this.form.lowPriceWeightPercent = response.data.lowPriceWeightPercent;
              } else {
                this.form.lowPriceWeightPercent = response.data.lowPriceWeightPercent = 40;
              }
              this.LowHighAvailable();
            } else {
              this.msgError(response.msg);
            }

          });

        }


      },
      // 是否一票一件
      ticketToPieceFormat(row) {
        if (row.ticketToPiece === 1) {
          return '是'
        } else {
          return '否'
        }
        return row.ticketToPiece;
      },
      // 是否需要预审 1 预审 0 取消预审
      needRequiredFormat(row) {
        if (row.needRequired === 1) {
          return '是'
        } else {
          return '否'
        }
        return row.ticketToPiece;
      },
      //是否开启高低价
      highLowPriceFlgFormat(row) {
        if (row.highLowPriceFlg === 1) {
          return '开启'
        } else {
          return '未开启'
        }
        return row.ticketToPiece;
      },
      //时间格式化
      renderTime(date) {
        var dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      },
      //查询条件数据源
      findFltConditionData() {
        findFltConditionDataApi().then(response => {
          if (response.code == 200) {
            // debugger
            //航班种类
            this.flightKindlist = response.data.flightKind;
            //航班类型
            this.flightTypelist = response.data.flightType;
            //航班状态
           // debugger
            this.flightStatuslist = response.data.flightStatus;

          } else {
            this.msgError(response.msg);
          }

        });
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },

      /** 航班信息维护查询*/
      findAllFltData() {
        this.loading = true;
        if (this.queryParams.pageNum > 1) {
          this.queryParams.limitStart = (this.queryParams.pageNum - 1) * this.queryParams.limitSize
        } else {
          this.queryParams.limitStart = 0;
        }
        if (this.queryParams.fltNo != null && this.queryParams.fltNo != undefined && this.queryParams.fltNo != '') {
          this.queryParams.fltNo = this.queryParams.fltNo.toUpperCase();
        }

        findAllFltDataApi(this.queryParams).then(response => {
          if (response.code == 200) {

            this.findAllFltDatList = response.data.list;
            this.total = response.data.totalCount;
            this.loading = false;
          } else {
            this.msgError(response.msg);
          }

        });

      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加航班信息";
        this.form.id = null;
        this.form.statusId = this.flightStatuslist[0].id;
        this.form.alloctedWeight = 0; //已配重量
        this.form.LowAllocatedWeight = 0; //低价已配重量
        this.form.HighAllocatedWeight = 0; //高价已配重量

        //航班号
        this.formdisabled.fltNo = false;
        //航班日期
        this.formdisabled.fltDate = false;
        //航班路线
        this.formdisabled.route = false;
        //航班种类
        this.formdisabled.kindId = false;
        //航班类型
        this.formdisabled.typeId = false;
        //原始重量
        this.formdisabled.originalWeight = false;
      },
      //计算高地价可配
      LowHighAvailable() {

        //判断是否开启高地价
        if (this.form.highLowPriceFlg) {
          let Weight = 0;
          //计算实际重量
          if (this.form.highPriceWeightPercent > 0 || this.form.lowPriceWeightPercent > 0) {
            Weight = this.Weightall();
          }
          //高价可配
          if (this.form.highPriceWeightPercent > 0) {
            this.$set(this.form, "HighAvailableWeight", (Weight - this.form.alloctedWeight) * (this.form
              .highPriceWeightPercent / 100));
            // this.form.HighAvailableWeight = Weightall * (this.form.highPriceWeightPercent / 100)
          } else {
            this.$set(this.form, "HighAvailableWeight", 0);
            // this.form.HighAvailableWeight = 0;
          }
          //低价可配
          if (this.form.lowPriceWeightPercent > 0) {

            this.$set(this.form, "LowAvailableWeight", (Weight - this.form.alloctedWeight) - this.form
              .HighAvailableWeight);
            //this.form.LowAvailableWeight = Weightall - this.form.HighAvailableWeight;
          } else {
            this.$set(this.form, "LowAvailableWeight", 0);
            // this.form.LowAvailableWeight = 0;
          }

        }

      },
      //计算实际重量
      Weightall() {
        let Weight = 0;
        if (this.form.extraWeightPercent > 0) {
          Weight = this.form.originalWeight + this.form.originalWeight * (this.form.extraWeightPercent / 100)
        } else {
          Weight = this.form.originalWeight;
        }
        return Weight;
      },

      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.open = true;
        this.title = "修改航班信息";
        //航班号
        this.formdisabled.fltNo = true;
        //航班日期
        this.formdisabled.fltDate = true;
        //根据ID查item
        findFltById(row).then(response => {
          if (response.code == 200) {
            this.form = response.data;
            //是否开启高地价
            this.form.highLowPriceFlg = this.form.highLowPriceFlg === 1 ? true : false;
            //是否预审
            this.form.isNeedRequired = this.form.isNeedRequired === 1 ? true : false;
            // 计算高地价可配
            this.LowHighAvailable();

          } else {
            this.msgError(response.msg);
          }

        });
      },
      /** 删除 启用 停用按钮操作 */
      handleDeleteorPlayorpause(row, status, statusText) {

        //删除前需要停用
        if (status === 0 && row.status != '3') {
          this.$message({
            message: '请停用后删除',
            type: 'warning'
          });
          return;
        }

        this.$confirm('是否确认' + statusText + '此数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {

          let disable = {
            id: row.id,
            status: status
          };

          return delOrEnableORDisableApi(disable);
        }).then(response => {
          if (response.code == 200) {
            this.findAllFltData();
            this.msgSuccess(statusText + "成功");
          } else {
            this.msgError(response.msg);
          }

        }).catch(function() {});
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            //debugger
            let formdata = JSON.parse(JSON.stringify(this.form));

            //高价百分比和低价百分比和不可以大于100
            if (this.form.highLowPriceFlg && formdata.highPriceWeightPercent + formdata.lowPriceWeightPercent !=
              100) {
              this.$message.warning("请正确填写高低价百分比");
              return;
            }
            //已删除的无法修改
            //拿到已删除的id
            let statusId=0;
            this.flightStatuslist.map((item) => {
              //  this.unitList 是你 select option遍历的集合 e 是选中的id
              if (item.chineseName === "已删除") {
                statusId=item.id;
               return;
              }
            })
            if (statusId === formdata.statusId) {
              this.$message.warning("已删除的航班无法修改");
              return;
            }
            //是否开启高地价
            formdata.highLowPriceFlg = formdata.highLowPriceFlg ? 1 : 0;
            //是否预审
            formdata.isNeedRequired = formdata.isNeedRequired ? 1 : 0;
            //处理数据
            saveOrUpdate(formdata).then(response => {
              if (response.code === 200) {
                this.msgSuccess("保存成功");
                this.open = false;
                this.findAllFltData();
              } else {
                this.msgError(response.msg);
              }
            });

          }
        });
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.queryParams.start = 0;
        this.findAllFltData();
      },
    }
  };
</script>
<style>
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
  .el-table__body tr.current-row>td {
    background-color: #a0cfff;
  }

  .el-table--striped .el-table__body tr.hover-row.el-table__row--striped>td,
  .el-table__body tr.hover-row>td {
    background-color: #d9ecff !important;
  }
</style>