<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <div class="filter-container">
      <!-- 系统选择框 -->
      <el-select
        v-model="listQuery.sysOrigin"
        :placeholder="$t('pages.teamPolicy.filter.system')"
        style="width: 150px"
        class="filter-item"
        @change="changeSysOrigin()"
      >
        <el-option
          v-for="(item, index) in permissionsSysOriginPlatforms"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
          <span style="float: left;">
            <sys-origin-icon :icon="item.value" :desc="item.value"
          /></span>
          <span style="float: left;margin-left:10px">{{ item.label }}</span>
        </el-option>
      </el-select>

      <!-- 区域选择框 -->
      <div class="filter-item">
        <select-system-region
          ref="regionSelectPolicy"
          v-model="listQuery.region"
          :sys-origin="listQuery.sysOrigin"
          clearable
          :placeholder="$t('pages.teamPolicy.filter.selectRegion')"
          @change="selectSystemRegion"
        />
      </div>

      <!-- 国家 -->
      <el-select
        v-model="listQuery.countryCode"
        v-loading="loadingCountry"
        :placeholder="$t('pages.teamPolicy.filter.country')"
        style="width: 200px"
        class="filter-item"
        clearable
        collapse-tags
        @change="changeCountry"
      >
        <el-option
          v-for="item in countryList"
          :key="item.id"
          :label="item.country.aliasName || item.country.enName"
          :value="item.country.alphaTwo"
        >
          <span style="float: left;">
            <img :src="item.country.nationalFlag" width="30"
          /></span>
          <span style="float: left;margin-left:10px">{{
            item.country.aliasName || item.country.enName
          }}</span>
        </el-option>
      </el-select>

      <!-- 搜索按钮 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        :disabled="searchDisabled"
        @click="handleSearch"
      >
        {{ $t('pages.teamPolicy.filter.search') }}
      </el-button>

      <!-- 政策创建按钮 -->
      <el-dropdown>
        <el-button
          class="filter-item"
          type="primary"
          :disabled="!listQuery.region"
        >
          {{ $t('pages.teamPolicy.filter.policy') }}<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="handleCreate(false)"
            >{{ $t('pages.teamPolicy.action.historyPolicy') }}</el-dropdown-item
          >
          <el-dropdown-item @click.native="handleCreate(true)"
            >{{ $t('pages.teamPolicy.action.createPolicy') }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- 表单  v-loading="listLoading"-->
    <div v-if="!isEditing">
      <!-- 标题 -->
      <div v-if="data.title" style="margin-bottom: 30px;">
        {{ $t('pages.teamPolicy.label.title') }}: {{ data.title }}
      </div>

      <!-- 政策类型 -->
      <div v-if="data.policyType" style="margin-bottom: 30px;color: #d42724;">
        <div>{{ $t('pages.teamPolicy.label.policyType') }}: {{ getPolicyTypeText(data.policyType) }}</div>
      </div>

      <!-- 表单表格 -->
      <el-table
        v-loading="listLoading"
        :data="policys"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <!-- Lv -->
        <el-table-column
          label="Lv"
          prop="level"
          min-width="50"
          align="center"
        />

        <!-- 在线(Hour) -->
        <el-table-column
          :label="$t('pages.teamPolicy.table.onlineHour')"
          prop="onlineTime"
          min-width="80"
          align="center"
        />

        <!-- 有效天数 -->
        <el-table-column
          :label="$t('pages.teamPolicy.table.effectiveDay')"
          prop="effectiveDay"
          min-width="80"
          align="center"
        />

        <!-- 目标 -->
        <el-table-column
          :label="$t('pages.teamPolicy.table.target')"
          prop="target"
          min-width="80"
          align="center"
        />

        <!-- 主播工资 -->
        <el-table-column
          :label="$t('pages.teamPolicy.table.memberSalary')"
          prop="memberSalary"
          min-width="80"
          align="center"
        />

        <!-- 代理工资 -->
        <el-table-column
          :label="$t('pages.teamPolicy.table.ownSalary')"
          prop="ownSalary"
          min-width="80"
          align="center"
        />

        <!-- 总工资 -->
        <el-table-column :label="$t('pages.teamPolicy.table.totalSalary')" min-width="80" align="center">
          <template scope="scope">
            {{ getTotalSalary(scope.row) }}
          </template>
        </el-table-column>

        <!-- 道具 -->
        <el-table-column :label="$t('pages.teamPolicy.table.props')" min-width="200" align="center">
          <template scope="scope">
            <div
              v-if="scope.row.propsRewards && scope.row.propsRewards.length > 0"
            >
              <props-row :list="scope.row.propsRewards" />
            </div>
          </template>
        </el-table-column>

        <!-- 操作列表 -->
        <el-table-column :label="$t('pages.teamPolicy.table.actions')" min-width="80" align="center">
          <template scope="scope">
            <!-- 道具明细 按钮 -->
            <el-button
              type="text"
              :disabled="
                !(scope.row.propsRewards && scope.row.propsRewards.length > 0)
              "
              @click="handleCreatePropsGroup(scope.row, false, index)"
              >{{ $t('pages.teamPolicy.action.propsDetail') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑框 -->
    <div v-if="isEditing">
      <div style="margin-bottom: 30px;">
        <el-tag type="danger">{{ $t('pages.teamPolicy.label.title') }}</el-tag>
        <el-input
          v-model.trim="formData.title"
          style="width: 200px"
          class="filter-item"
          :placeholder="$t('pages.teamPolicy.placeholder.inputTitle')"
          size="small"
        />
      </div>

      <!-- 编辑表单 -->
      <el-table
        v-loading="listLoading"
        :data="policys"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <!-- 等级 -->
        <el-table-column :label="$t('pages.teamPolicy.form.level')" min-width="50" align="center">
          <template scope="scope">
            <el-input
              v-model.number="scope.row.level"
              size="small"
              :placeholder="$t('pages.teamPolicy.form.level')"
            />
          </template>
        </el-table-column>

        <!-- 时间 -->
        <el-table-column :label="$t('pages.teamPolicy.form.onlineHour')" min-width="80" align="center">
          <template scope="scope">
            <el-input
              v-model.number="scope.row.onlineTime"
              size="small"
              :placeholder="$t('pages.teamPolicy.form.time')"
            />
          </template>
        </el-table-column>

        <!-- 有效天 -->
        <el-table-column
          :label="$t('pages.teamPolicy.table.effectiveDay')"
          min-width="80"
          align="center"
        >
          <template scope="scope">
            <el-input
              v-model.number="scope.row.effectiveDay"
              size="small"
              :placeholder="$t('pages.teamPolicy.form.effectiveDay')"
            />
          </template>
        </el-table-column>

        <!-- 目标 -->
        <el-table-column :label="$t('pages.teamPolicy.table.target')" min-width="80" align="center">
          <template scope="scope">
            <el-input
              v-model.number="scope.row.target"
              size="small"
              :placeholder="$t('pages.teamPolicy.form.target')"
            />
          </template>
        </el-table-column>

        <!-- 主播工资 -->
        <el-table-column :label="$t('pages.teamPolicy.table.memberSalary')" min-width="80" align="center">
          <template scope="scope">
            <el-input
              v-model="scope.row.memberSalary"
              type="number"
              size="small"
              :placeholder="$t('pages.teamPolicy.form.memberSalary')"
            />
          </template>
        </el-table-column>

        <!-- 代理工资 -->
        <el-table-column :label="$t('pages.teamPolicy.table.ownSalary')" min-width="80" align="center">
          <template scope="scope">
            <el-input
              v-model="scope.row.ownSalary"
              type="number"
              size="small"
              :placeholder="$t('pages.teamPolicy.form.ownSalary')"
            />
          </template>
        </el-table-column>

        <!-- 总工资 -->
        <el-table-column :label="$t('pages.teamPolicy.table.totalSalary')" min-width="80" align="center">
          <template scope="scope">
            {{ getTotalSalary(scope.row) }}
          </template>
        </el-table-column>

        <!-- 道具 -->
        <el-table-column :label="$t('pages.teamPolicy.table.props')" min-width="80" align="center">
          <template scope="scope">
            <props-row
              v-if="scope.row.propsRewards && scope.row.propsRewards.length > 0"
              :list="scope.row.propsRewards"
            />
            <el-button
              type="text"
              @click="handleCreatePropsGroup(scope.row, true, scope.$index)"
              >{{ $t('pages.teamPolicy.action.editProps') }}</el-button
            >
          </template>
        </el-table-column>

        <!-- 操作按钮列表 -->
        <el-table-column :label="$t('pages.teamPolicy.table.actions')" min-width="100" align="center">
          <template scope="scope">
            <el-button type="text" @click="clickUp(scope.$index)"
              >{{ $t('pages.teamPolicy.action.moveUp') }}</el-button
            >
            <el-button type="text" @click="clickDown(scope.$index)"
              >{{ $t('pages.teamPolicy.action.moveDown') }}</el-button
            >
            <el-button
              v-if="policys.length > 1"
              type="text"
              @click="removeRow(scope.$index)"
              >{{ $t('pages.teamPolicy.action.delete') }}</el-button
            >
            <el-button
              type="text"
              @click="handleShowAddRowBoxAndIndex(scope.$index)"
              >{{ $t('pages.teamPolicy.action.addRow') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div v-if="formData.release" style="text-align: center; margin: 0.5rem;">
        <el-button type="success" @click="save(true)">{{ $t('pages.teamPolicy.action.saveAndPublish') }}</el-button>
        <el-button type="info" @click="handleNewpolicyClose">{{ $t('pages.teamPolicy.action.back') }}</el-button>
      </div>
      <div v-if="!formData.release" style="text-align: center; margin: 0.5rem;">
        <el-button type="primary" @click="save(false)">{{ $t('pages.teamPolicy.action.save') }}</el-button>
        <el-button type="success" @click="save(true)">{{ $t('pages.teamPolicy.action.saveAndPublish') }}</el-button>
        <el-button type="info" @click="handleNewpolicyClose">{{ $t('pages.teamPolicy.action.back') }}</el-button>
      </div>
    </div>

    <!-- 新增空白行 -->
    <el-dialog
      :title="$t('pages.teamPolicy.dialog.addEmptyRow')"
      :visible.sync="addRowsBoxVisible"
      :modal-append-to-body="true"
      :append-to-body="true"
      :before-close="handleAddRowClose"
    >
      <el-input
        v-model.number="addRowsNumber"
        maxlength="2"
        max="2"
        min="1"
        minlength="1"
        :placeholder="$t('pages.teamPolicy.placeholder.inputAddRows')"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAddRowClose()">{{ $t('pages.teamPolicy.action.cancel') }}</el-button>
        <el-button type="primary" @click="addRows()">{{ $t('pages.teamPolicy.action.confirm') }}</el-button>
      </span>
    </el-dialog>

    <!-- 历史策略 -->
    <el-drawer
      :title="$t('pages.teamPolicy.dialog.historyPolicy')"
      :visible.sync="historyReleasesBoxVisible"
      size="45%"
      :before-close="handleHistoryReleasesClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >
      <div v-loading="historyReleasesLoading">
        <el-row v-for="(item, index) in historyReleases" :key="index">
          <el-card style="margin: 10px;">
            <div class="ops">
              <el-tag
                v-if="item.historyRelease"
                size="mini"
                :type="item.historyRelease ? 'success' : 'info'"
                >{{ $t('pages.teamPolicy.label.historyReleased') }}: {{ item.historyRelease ? $t('pages.teamPolicy.word.yes') : $t('pages.teamPolicy.word.no') }}</el-tag
              >
              <el-tag
                v-if="item.release"
                size="mini"
                :type="item.release ? 'success' : 'info'"
                >{{ $t('pages.teamPolicy.label.inUse') }}: {{ item.release ? $t('pages.teamPolicy.word.yes') : $t('pages.teamPolicy.word.no') }}</el-tag
              >
            </div>
            <div class="bottom clearfix">
              {{ item.title }}
            </div>
            <div class="bottom clearfix">
              <div class="time">{{ $t('pages.teamPolicy.label.createdBy') }}: {{ item.createUserNickname }}</div>
            </div>
            <div class="bottom clearfix">
              <div class="time">{{ $t('pages.teamPolicy.label.createdAt') }}:{{ item.createTime }}</div>
            </div>
            <div class="clearfix">
              <el-button type="text" @click.native="handleUpdate(item)"
                >{{ $t('pages.teamPolicy.action.edit') }}</el-button
              >
              <el-button
                v-if="!item.historyRelease"
                type="text"
                @click.native="handleDelete(item.id)"
                >{{ $t('pages.teamPolicy.action.delete') }}</el-button
              >
            </div>
          </el-card>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleHistoryReleasesClose()">{{ $t('pages.teamPolicy.action.cancel') }}</el-button>
      </span>
    </el-drawer>

    <!-- 道具资源 -->
    <props-form-edit
      v-if="propsFormEditVisable"
      :row="thisPropsRow"
      :allow-edit="isAllowEdit"
      :sys-origin="listQuery.sysOrigin"
      @success="handlePropsSuccess"
      @close="propsFormEditVisable = false"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import {
  teamPolicyReleases,
  teamPolicyHistoryReleases,
  teamPolicyAdd,
  deleteTeamPolicy
} from "@/api/team";
import { listPayOpenCountry } from "@/api/sys-pay";

import PropsFormEdit from "./props-form-edit";
import PropsRow from "@/components/data/PropsRow";

function getFormData() {
  return {
    id: "",
    sysOrigin: "",
    region: "",
    countryCode: "",
    release: false,
    title: "",
    policy: [],
    policyType: "MONEY"
  };
}
export default {
  name: "TeamPolicyManager",
  components: { PropsFormEdit, PropsRow },
  data() {
    return {
      isClickNewPolicyButton: false,
      isAllowEdit: false,
      thisPolicysIndex: -1,
      thisPropsRow: {},
      propsFormEditVisable: false,
      addVisible: false,
      historyReleasesBoxVisible: false,
      addRowsBoxVisible: false,
      addRowsNumber: 1,
      currentAddRowIndex: -1,
      searchDisabled: false,
      data: [],
      dtailsDrawerVisible: false,
      thatRow: {},
      policys: [],
      historyReleases: [],
      formData: getFormData(),
      isEditing: false,
      listQuery: {
        sysOrigin: "HALAR",
        region: "",
        type: "WEEK",
        policyType: "",
        countryCode: ""
      },
      sysOrigins: [],
      listLoading: false,
      historyReleasesLoading: false,

      selectedCountry: {}, // 存储完整的国家对象
      countryList: [],
      loadingCountry: false
    };
  },
  computed: {
    ...mapGetters(["permissionsSysOriginPlatforms"])
  },
  created() {
    const that = this;
    const querySystem = this.permissionsSysOriginPlatforms[0];
    if (!querySystem) {
      return;
    }
    that.listQuery.sysOrigin = querySystem.value;

    this.loadOpenCountry(); // 获取国家列表
  },
  methods: {
    getPolicyTypeText(policyType) {
      const policyTypeNameMap = {
        MONEY: "moneyPolicy",
        SALARY_DIAMOND: "salaryDiamondPolicy"
      };
      return this.$t(
        `pages.teamPolicy.policyType.${policyTypeNameMap[policyType] || "moneyPolicy"}`
      );
    },
    // 获得已发布政策
    renderData() {
      const that = this;
      that.listLoading = true;
      that.formData.countryCode = that.listQuery.countryCode;
      console.log("that.formData", that.formData);

      teamPolicyReleases(that.listQuery)
        .then(res => {
          that.listLoading = false;
          const { body } = res;
          that.data = body || {};
          that.policys = [];
          if (that.data) {
            that.policys = that.data.policy || [];
          }
        })
        .catch(er => {
          that.listLoading = false;
        });
    },

    // 选择国家
    changeCountry(val) {
      const that = this;
      console.log("val", val);

      if (!val) {
        // 如果没有选择国家，清空相关字段
        that.listQuery.countryCode = "";
        that.selectedCountry = {};
      } else {
        // 选择了一个国家
        that.selectedCountry =
          this.countryList.find(item => item.country.alphaTwo === val) || {};

        // 使用传统的方式访问嵌套属性
        that.listQuery.countryCode = that.selectedCountry.country
          ? that.selectedCountry.country.alphaTwo
          : "";
      }
      that.renderData();
    },

    // 获取国家列表
    loadOpenCountry() {
      const that = this;

      that.loadingCountry = true;
      listPayOpenCountry()
        .then(res => {
          that.loadingCountry = false;
          that.countryList = res.body || [];
          that.listQuery.countryCode = "";
          that.selectedCountry = {};
          // that.renderData();
        })
        .catch(er => {
          that.loadingCountry = false;
          console.error(er);
        });
    },

    // 上移
    clickUp(index) {
      const arr = this.policys;
      arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
    },

    // 下移
    clickDown(index) {
      const arr = this.policys;
      arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
    },

    // 创建资源组
    handleCreatePropsGroup(row, _isAllowEdit, _index) {
      const that = this;
      that.isAllowEdit = _isAllowEdit;
      that.thisPolicysIndex = _index;
      if (!row.propsRewards) {
        that.thisPropsRow = {};
        that.propsFormEditVisable = true;
        return;
      }
      that.thisPropsRow = row;
      that.propsFormEditVisable = true;
    },

    // 搜索
    handleSearch() {
      this.formData = getFormData();
      this.isEditing = false;
      this.renderData();
      console.log("this.formData", this.formData);
    },

    // 系统修改重新获得值
    changeSysOrigin() {
      this.$refs.regionSelectPolicy.clearValue();
    },

    // 加载历史
    loadHistoryReleases() {
      const that = this;
      that.historyReleasesLoading = true;
      teamPolicyHistoryReleases(that.listQuery)
        .then(res => {
          that.historyReleasesLoading = false;
          const { body } = res;
          that.historyReleases = body || [];
        })
        .catch(er => {
          that.historyReleasesLoading = false;
        });
    },

    // 创建政策/展示历史政策
    handleCreate(isNew) {
      const that = this;
      if (!isNew) {
        that.historyReleases = [];
        that.loadHistoryReleases();
        that.historyReleasesBoxVisible = true;
        return;
      }
      that.formData.id = "";
      that.formData.region = "";
      that.formData.title = "";
      that.formData.release = false;
      that.policys = [];
      that.addRowsNumber = 1;
      that.addRowsBoxVisible = true;
      that.isClickNewPolicyButton = true;
    },

    // 处理显示添加行弹窗
    handleShowAddRowBoxAndIndex(_index) {
      const that = this;
      that.addRowsNumber = 1;
      that.addRowsBoxVisible = true;
      that.currentAddRowIndex = _index;
      that.isClickNewPolicyButton = false;
    },

    // 添加行,并追加至指定index下方
    addRows() {
      const that = this;
      that.isEditing = true;
      for (var i = 0; i < that.addRowsNumber; i++) {
        var policy = {
          level: 0,
          onlineTime: 0,
          effectiveDay: 0,
          target: 0,
          memberSalary: 0,
          ownSalary: 0,
          totalSalary: 0,
          propsRewards: []
        };
        that.policys.splice(that.currentAddRowIndex + 1, 0, policy); // 添加到表单中
        console.log("that.policys", that.policys);
      }
      that.currentAddRowIndex = -1;
      that.addRowsBoxVisible = false;
    },

    // 移除行
    removeRow(_index) {
      const that = this;
      that.policys.splice(_index, 1);
    },

    // 点击修改
    handleUpdate(row) {
      const that = this;
      that.policys = row.policy;
      that.formData.id = row.id;
      that.formData.region = row.region;
      that.formData.title = row.title;
      that.formData.release = row.release;
      that.currentAddRowIndex = -1;
      that.historyReleasesBoxVisible = false;
      that.isEditing = true;
    },

    // 保存政策
    save(_release) {
      const that = this;
      that.formData.sysOrigin = that.listQuery.sysOrigin;
      that.formData.policy = that.policys;
      that.formData.region = that.listQuery.region;

      if (!that.formData.region) {
        that.$opsMessage.warn(this.$t("pages.teamPolicy.validation.selectRegion"));
        return;
      }

      if (!that.formData.title) {
        that.$opsMessage.warn(this.$t("pages.teamPolicy.validation.inputPolicyTitle"));
        return;
      }

      if (!_release) {
        that.listLoading = true;
        that.formData.release = _release;
        teamPolicyAdd(that.formData)
          .then(res => {
            that.listLoading = false;
            // that.isEditing = false
            // that.renderData()
            that.$opsMessage.success();
          })
          .catch(er => {
            that.listLoading = false;
            that.$opsMessage.fail();
          });
        return;
      }

      that
        .$confirm(this.$t("pages.teamPolicy.confirm.publishMessage"), this.$t("pages.teamPolicy.confirm.title"), {
          type: "warning"
        })
        .then(() => {
          that.listLoading = true;
          that.formData.release = _release;
          teamPolicyAdd(that.formData)
            .then(res => {
              that.listLoading = false;
              // that.isEditing = false
              // that.renderData()
              that.$opsMessage.success();
            })
            .catch(er => {
              that.listLoading = false;
              that.$opsMessage.fail();
            });
        })
        .catch(() => {});
    },

    // 删除政策
    handleDelete(id) {
      const that = this;
      that
        .$confirm(this.$t("pages.teamPolicy.confirm.deleteMessage"), this.$t("pages.teamPolicy.confirm.title"), {
          type: "warning"
        })
        .then(() => {
          that.listLoading = true;
          deleteTeamPolicy(id)
            .then(res => {
              that.$opsMessage.success();
              // 过滤
              that.historyReleases = that.historyReleases.filter(function(
                history
              ) {
                return history.id !== id;
              });
              that.listLoading = false;
            })
            .catch(er => {
              that.$opsMessage.fail();
              that.listLoading = false;
            });
        })
        .catch(() => {});
    },

    // 关闭弹窗
    handleClose() {
      this.$emit("close");
    },

    // 返回道具数据
    handlePropsSuccess(propsRewards) {
      this.policys[this.thisPolicysIndex].propsRewards = propsRewards;
      this.propsFormEditVisable = false;
    },

    // 计算合计
    getTotalSalary(item) {
      item.totalSalary = (
        Number(item.memberSalary) + Number(item.ownSalary)
      ).toFixed(2);
      return item.totalSalary;
    },

    // 取消新增或修改政策
    handleNewpolicyClose() {
      this.isEditing = false;
      this.renderData();
    },

    // 取消新增行
    handleAddRowClose() {
      this.addRowsBoxVisible = false;
      if (!this.isClickNewPolicyButton) {
        return;
      }
      this.isEditing = false;
    },

    // 关闭历史政策列表
    handleHistoryReleasesClose() {
      this.historyReleasesBoxVisible = false;
    },

    // 选择区域
    selectSystemRegion() {
      this.isEditing = false;
      if (!this.listQuery.region) {
        this.policys = [];
        this.data = [];
        this.formData = getFormData();
        return;
      }
      this.renderData();
    }
  }
};
</script>
<style scoped lang="scss">
.app-container {
  .filter-container {
    .el-dropdown {
      vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
      margin-left: 15px;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
  .form_ {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    text-align: center;
  }
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 30%;
  margin-top: 10px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
