<template>
  <div class="app-container">
    <!-- <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>仓库费规则设施</span>
      </div>
      <el-row>
        <el-col :span="4">
          <strong>仓储费设置:</strong>
        </el-col>
        <el-col :span="16">
          <div class="set">
            <strong>货品仓库存放</strong
            ><input class="inputs" v-model="input" placeholder="10" /> ><strong
              >天内可免费受存储管理费用.</strong
            >
          </div>
          <div>
            <strong>当超过</strong
            ><input class="inputs" v-model="input" placeholder="10" />
            <strong>天后,按每立方米</strong
            ><input class="inputs" v-model="input" placeholder="10" /><strong
              >元/天计算</strong
            >
          </div>
          <h5>当商品不足1立方米时,按一立方米计算</h5>
        </el-col>
      </el-row>
      <h4 class="zhu">
        注:改规则适用所有经销商,个性化液之后,则不再按该规则执行
      </h4>
    </el-card> -->

    <!-- 筛选条件 -->
    <div>
      <el-form label-width="70px" size="small" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="条件" prop="account">
              <el-input placeholder="请输入筛选条件"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :lg="18" class="tr">
            <el-form-item label="">
              <el-button size="small" @click="resetScreenForm">清空</el-button>
              <el-button size="small" type="primary" @click="submitScreenForm"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button type="primary" size="small">新增</el-button>
        <el-button type="primary" size="small">编辑</el-button>
        <el-button type="primary" size="small">删除</el-button>
      </div>
      <div class="fr">
        <el-button type="primary" size="small">导入</el-button>
        <el-button type="primary" size="small">导出</el-button>
        <el-button type="primary" size="small">打印</el-button>
      </div>
    </div>

    <div class="mymain-container">
      <!-- 列表 -->
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column type="selection" align="center" min-width="100" />

          <el-table-column
            align="center"
            label="经销商编码"
            prop="bianma"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="经销商名称"
            prop="dealerName"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="存放免费天数"
            prop="freeDay"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="收费规则(每立方米)"
            prop="rule"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="创建人"
            prop="createMan"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="创建时间"
            prop="createDate"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="更新人"
            prop="updateMan"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="更新时间"
            prop="updateDate"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="操作"
            min-width="160"
            show-overflow-tooltip
          >
            <el-button type="text" class="textColor" @click="editFn"
              >编辑</el-button
            >
            <el-button type="text" class="textColor">删除</el-button>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      title="仓库费规则配置"
      :visible.sync="showDialog"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form :model="dialogForm" label-width="100px" label-position="right">
        <el-form-item label="经销商编码">
          <el-select
            v-model="dialogForm.bianma"
            placeholder="请选择活动区域"
            class="inputStyle"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经销商名称">
          <el-input v-model="dialogForm.name" class="inputStyle"></el-input>
        </el-form-item>
        <el-form-item label="仓库存放" class="sty">
          <el-input
            v-model="dialogForm.freeDay"
            class="inputStyle"
          />天内可免费受存储管理费用. 当超过
          <el-input
            v-model="dialogForm.day"
            class="inputStyle"
          />天后,按每立方米
          <el-input v-model="dialogForm.money" class="inputStyle" />
          元/天计算
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="showDialog = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dialogForm: {
        bianma: "",
        name: "",
        day: "",
        freeDay: "",
        money: "",
      },
      showDialog: false,
      dataList: [
        {
          num: "1",
          bianma: "1002",
          dealerName: "佛山市禅城区梁云冷气经营部",
          rule: "0.1",
          freeDay: "123",
          createMan: "张三",
          createDate: "2000/01/01",
          updateMan: "张三",
          updateDate: "2020/01/01",
        },
        {
          num: "1",
          bianma: "1002",
          dealerName: "佛山市禅城区梁云冷气经营部",
          rule: "0.1",
          freeDay: "123",
          createMan: "张三",
          createDate: "2000/01/01",
          updateMan: "张三",
          updateDate: "2020/01/01",
        },
        {
          num: "1",
          bianma: "1002",
          dealerName: "佛山市禅城区梁云冷气经营部",
          rule: "0.1",
          freeDay: "123",
          createMan: "张三",
          createDate: "2000/01/01",
          updateMan: "张三",
          updateDate: "2020/01/01",
        },
      ],
    };
  },
  methods: {
    editFn() {
      this.showDialog = true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .sty {
  width: 85%;
  .el-form-item__content .el-input {
    width: 22%;
    margin: 0px 10px 16px 0;
  }
}
.zhu {
  padding-top: 18px;
}
.set {
  margin-bottom: 30px;
}
.inputs {
  margin: 0 18px;
}
::v-deep .el-form {
  .inputStyle {
    width: 80%;
  }
}
::v-deep .dialog-footer {
  display: flex;
  justify-content: center;
}
::v-deep .el-dialog__header {
  background-color: #dddddd;
}
.inp {
  margin: 0 12px;
}

.right {
  margin-top: 12px;
  float: right;
}

.table {
  margin-top: 12px;
}
.search {
  display: flex;
  margin-top: 12px;
  ::v-deep .el-input {
    width: 50%;
    margin-right: 12px;
  }
}
.main {
  padding: 12px;
}
</style>>

