<template>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item of timeList" :label="item" :name="item"></el-tab-pane>
      </el-tabs>
      <TableList :columns="columns" :config="{colTopHiddenIcon: true}" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList">
        <template #tempBusinessName="{ row, column }">
          <div :style="{background: row && row['flag95'] ? '#fffe01' : 'none'}">
            <!-- 非编辑状态：显示文本 -->
            <template v-if="!row.editStatus">
              <span>{{ row.outSpeed }}</span>
              <el-button icon="el-icon-edit" type="text" @click="rowDataChange(row)"></el-button>
            </template>
            <template v-else>
              <!-- 编辑状态：显示输入框 -->
              <el-col :span="16">
                <el-input
                  v-model="row.outSpeed"
                  size="mini"
                  @keyup.enter="callback({fnCode: 'edit'}, row)"
                  @blur="callback({fnCode: 'edit'}, row)"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button size="mini" type="primary" @click="callback({fnCode: 'submit'}, row)">确定</el-button>
                <el-button size="mini" @click="callback({fnCode: 'cancel'}, row)">取消</el-button>
              </el-col>
            </template>
          </div>
        </template>
        <template #tempTotalSpeed="{ row, column }">
          <div :style="{background: row && row['flag95'] ? '#fffe01' : 'none'}">
            <!-- 非编辑状态：显示文本 -->
            <template v-if="!row.editStatus">
              <span>{{ row.maxSpeed }}</span>
              <el-button icon="el-icon-edit" type="text" @click="rowDataChange(row)"></el-button>
            </template>
            <template v-else>
              <!-- 编辑状态：显示输入框 -->
              <el-col :span="16">
                <el-input
                  v-model="row.maxSpeed"
                  size="mini"
                  @keyup.enter.native="$event.target.blur"
                  @blur="callback({fnCode: 'submit'}, row)"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button size="mini" type="primary" @click="callback({fnCode: 'submit'}, row)">确定</el-button>
                <el-button size="mini" @click="callback({fnCode: 'cancel'}, row)">取消</el-button>
              </el-col>
            </template>
          </div>
        </template>
      </TableList>
      <div style="float: right;margin-top: 20px;">
        <el-button type="primary" @click="goBack">返回</el-button>
      </div>
    </div>
</template>

<script setup name="ServerEdit">
    import TableList from "@/components/table/index.vue"
    import {updateRelate, taskRelate} from "@/api/disRevenue/earnManage";
    export default {
      name: 'busValCount_relevantData',
      components: {TableList},
      data() {
        return {
          roleList: [],
          loading: true,
          // 列显隐信息
          columns: [],
          paramsData: {},
          timeList: [],
          activeName: '',
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            total: 0,
          },
        }
      },
      created() {
        this.paramsData = this.$route.query && this.$route.query;
        this.columsList();
      },
      methods: {
        handleClick(){
          this.getList(this.activeName);
        },
        rowDataChange(row) {
          this.$set(row, 'editStatus', true);
        },
        columsList(num) {
          if (this.paramsData && this.paramsData.calculationType === '2') {
            this.timeList = this.getCurrentMonthDates();
            this.activeName = this.timeList[0];
            this.getList(this.activeName);
          } else {
            this.getList();
          }
          // 服务器
          if (this.paramsData && this.paramsData.resourceType === '1') {
            this. columns = {
              businessId: {label: `业务代码`, minWidth: '120',visible: true},
              clientId: {label: `ClientID`,minWidth: '160',visible: true},
              createTime: {label: `时间`,minWidth: '160',visible: true},
              outSpeed: {label: `总发送流量值（bit/s）`, minWidth: '150', slotName: 'tempBusinessName',visible: true},
            };
          } else {
            this. columns = {
              name: {label: `交换机接口`, minWidth: '220',visible: true},
              createTime: {label: `时间`,minWidth: '160',visible: true},
              inSpeed: {label: `总接收流量值(bit/s)`, minWidth: '150', visible: true},
              outSpeed: {label: `总发送流量值(bit/s)`, minWidth: '150', visible: true},
              maxSpeed: {label: `流量值最大值(bit/s)`, minWidth: '150', slotName: 'tempTotalSpeed',visible: true},
            };
          }
        },
        /** 查询角色列表 */
        getList(time) {
          this.loading = true;
          let params = {calculationMode: this.paramsData.calculationMode};
          if (time) {
            params['avgTime'] = time;
          }
          taskRelate(Object.assign( this.queryParams, {id: this.paramsData && this.paramsData.id}, params)).then(response => {
            this.loading = false;
            this.roleList = response && response.rows;
            this.queryParams.total = response.total;
          })
        },
        goBack() {
          this.$router.push("/earnManage/busValueCount");
        },
        callback(result, rowData, selectChange) {
          if (result && result.fnCode) {
            switch (result.fnCode) {
              case 'submit':
                if (this.loading) return;
                this.loading = true;
                let params = {
                  id: this.paramsData.id,
                  needSpeed: rowData.outSpeed,
                  needTime: rowData.createTime
                };
                if (this.paramsData && this.paramsData.resourceType === '2') {
                  params['needSpeed'] = rowData.maxSpeed;
                }
                updateRelate(params).then(res => {
                  this.$set(rowData, 'editStatus', false);
                  this.getList();
                });
                break;
              case 'cancel':
                this.$set(rowData, 'editStatus', false);
                break;
              default:

            }
          }
        },
        // 补零函数：将单个数字（1-9）转为两位数（01-09）
        padZero(num) {
          return num < 10 ? `0${num}` : num;
        },
        // 获取当前月所有日期的函数
        getCurrentMonthDates() {
          return getAvgTimeList({id: this.paramsData && this.paramsData.id}).then(res => {
            console.log(res);
            return res;
          });

        },
      }
    }
</script>

<style scoped>
</style>
