<template>
  <el-dialog :visible.sync="showSetGoodsLeaseDialog" title="租赁默认设置" width="670px" @close="closeSetGoodsLeaseDialog">
    <div class="lease-count">
      <div class="tip">租赁时间/数量设置</div>
      <div class="day">
        <span>最低</span>
        <el-input class="input-block" />
        <span>天起租，最多可租</span>
        <el-input class="input-block" />
        <span>天</span>
      </div>
      <div class="count">
        <span>最低起租数量</span>
        <el-input class="input-block" />
        <span>，最多可租数量</span>
      </div>
    </div>
    <div class="lease-area">
      <div class="tip">租赁区域及对应价格库存</div>
      <el-button type="primary" class="area-btn">关联区域</el-button>
      <div class="area-table">
        <el-table>
          <el-table-column label="租赁区域"></el-table-column>
          <el-table-column label="租赁价格">
            <template slot-scope="scope">
              <el-input></el-input>
            </template>
          </el-table-column>
          <el-table-column label="租赁库存">
            <template slot-scope="scope">
              <el-input></el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeSetGoodsLeaseDialog">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['showSetGoodsLeaseDialog'],

  data() {
    return {
      minLeaseDay: 1,
      maxLeaseDay: null,
      minLeaseQuantity: 1,
      maxLeaseQuantity: null,
    };
  },

  methods: {
    closeSetGoodsLeaseDialog() {
      this.$emit('closeSetGoodsLeaseDialog')
    }
  }
};
</script>

<style lang="scss" scoped>
.lease-count {
  display: flex;
  flex-direction: column;

  .tip {
    font-weight: bold;
  }

  .day,
  .count {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 20px;

    .input-block {
      width: 200px;
      margin: 0px 10px;
    }
  }
}

.lease-area {
  display: flex;
  flex-direction: column;
  margin-top: 30px;

  .tip {
    font-weight: bold;
  }

  .area-btn {
    width: 120px;
    margin-top: 20px;
  }

  .area-table {
    margin-top: 20px;
  }
}
</style>
