<template>
  <el-dialog
    :modal="modal"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="设置阶梯价"
    :visible="isShow"
    width="50%"
    @close="cancel"
  >
    <div>
      <div class="clearfix view-head">
        <div class="float_left">
          <el-switch
            v-model="switch_value"
            :inactive-value="0"
            :active-value="1"
            active-color="#36B365"
            inactive-color="#ff4949"
            active-text="开"
            :disabled="disabled"
            inactive-text="关"
            @change="switchChange"
          ></el-switch>
          <span class="label">阶梯价</span>
          <span class="desc">（购买数量越多价格越低）</span>
        </div>
        <div v-if="!disabled" class="float_right">
          <el-button
            :disabled="switch_value === 0"
            type="primary"
            @click="addLadderPrice"
          >
            新增
          </el-button>
        </div>
      </div>
      <el-table :data="price_data">
        <el-table-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>
        <el-table-column prop="from" label="开始数量"></el-table-column>
        <el-table-column prop="to" label="结束数量">
          <template slot-scope="scope">
            <div v-if="scope.$index === price_data.length - 1">∞</div>
            <div v-else>
              <el-input-number
                v-model="scope.row.to"
                :disabled="switch_value === 0"
                style="width: 100%"
                :controls="false"
                placeholder="销售价"
                size="small"
                :min="scope.row.from"
                @blur="ladderPriceBlur(scope.row.to, scope.$index)"
              ></el-input-number>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.price"
              :disabled="switch_value === 0"
              style="width: 100%"
              :controls="false"
              placeholder="销售价/元"
              size="small"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column v-if="!disabled" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              :disabled="switch_value === 0 || price_data.length <= 2"
              type="text"
              @click="delData(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="!disabled" slot="footer">
      <el-button size="small" type="primary" @click="confirm">确定</el-button>
      <el-button size="small" @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "LadderPrice",
    props: {
      isShow: {
        type: Boolean,
        default: false,
      },
      // 是否需要遮罩层
      modal: {
        type: Boolean,
        default: true,
      },
      ladderPrice: {
        type: Array,
        default: () => {
          return [];
        },
      },
      enabledLadder: {
        type: Number,
        default: 0,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        switch_value: 0,
        price_data: [
          {
            from: 1,
            price: 0,
            to: 2,
          },
          {
            from: 3,
            price: 0,
            to: 4,
          },
          {
            from: 5,
            price: 0,
            to: 999999999,
          },
        ],
      };
    },
    mounted() {
      this.switch_value = this.enabledLadder;
      if (this.ladderPrice.length) {
        this.price_data = this.ladderPrice;
      }
    },
    methods: {
      delData(index) {
        const target = this.$_common.deepClone(this.price_data);
        target.splice(index, 1);
        target[0].from = 1;
        target[target.length - 1].from = target[0].to + 1;
        this.price_data = target;
      },
      confirm() {
        const isPrice = this.price_data.some((item) => item.price <= 0);
        if (isPrice) {
          this.$message.warning("价格需大于0");
          return;
        }
        this.$emit("confirm", this.switch_value, this.price_data);
        this.cancel();
      },
      // 关闭弹窗
      cancel() {
        this.$emit("cancel");
      },
      switchChange() {},
      addLadderPrice() {
        const target = this.$_common.deepClone(this.price_data);
        if (!target.length) {
          target.push({
            from: 1,
            price: "",
            to: 2,
          });
        } else {
          const upL = target[0];
          target.splice(1, "", {
            from: upL.to + 1,
            price: "",
            to: upL.to + 2,
          });
          if (target.length === 3) {
            target[target.length - 1].from = upL.to + 3;
          }
        }
        this.price_data = target;
      },
      ladderPriceBlur(val, index) {
        const target = this.$_common.deepClone(this.price_data);
        target[index + 1].from = val + 1;
        if (index === 0) {
          target[index + 1].to = val + 2;
          if (target[index + 2]) {
            target[index + 2].from = val + 3;
          }
        }
        this.price_data = target;
      },
    },
  };
</script>

<style scoped lang="scss">
  .view-head {
    padding: 10px 0;
    .label {
      margin-left: 10px;
    }
    .desc {
      color: #999999;
    }
  }
</style>
