<template>
  <el-dialog
    :modal="modal"
    title="设置客户类型价"
    :visible="isShow"
    width="60%"
    @close="cancel"
  >
    <div>
      <div class="clearfix view-head">
        <div class="float_left">
          <span class="label">客户类型价</span>
          <span class="desc">（不同客户类型不同价格）</span>
        </div>
        <div class="float_right">
          <el-button type="primary" @click="customer_type_show = true">
            选择客户类型
          </el-button>
        </div>
      </div>
      <el-table
        ref="goodstabel"
        :data="type_data"
        @selection-change="selectionChange"
      >
        <el-table-column
          v-if="flag"
          fixed="left"
          type="selection"
          align="center"
          width="55"
        ></el-table-column>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column
          prop="name"
          label="客户类型"
          min-width="140"
        ></el-table-column>
        <el-table-column label="销售价" min-width="200">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.adjPricetag"
              :disabled="!!scope.row.priceId"
              style="width: 60px; display: inline-block"
              size="small"
              placeholder="请选择"
            >
              <el-option
                v-for="(tag, tagi) in adjPricetag_list"
                :key="tagi"
                :label="tag.label"
                :value="tag.value"
              ></el-option>
            </el-select>
            <el-input-number
              v-model="scope.row.price"
              :disabled="!!scope.row.priceId"
              style="width: calc(100% - 80px); margin-left: 5px"
              :controls="false"
              :min="0"
              size="small"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          v-if="enabledLadder === 1"
          label="阶梯价"
          min-width="300"
        >
          <template slot-scope="scope">
            <ul>
              <li
                v-for="(price, pi) in scope.row.ladderPrice"
                :key="pi"
                class="ladder-li"
              >
                <span class="price-span">{{ price.from }}</span>
                <span style="font-size: 12px; margin: 0 4px">至</span>
                <span class="price-span">
                  {{ pi === scope.row.ladderPrice.length - 1 ? "∞" : price.to }}
                </span>
                =
                <span style="margin-right: 5px" class="price-span">
                  <span v-if="parseInt(price.adjPricetag) === 1">
                    {{ $NP.minus(price.price, price.adjPrice) }}
                  </span>
                  <span v-else-if="parseInt(price.adjPricetag) === 2">
                    {{ $NP.plus(price.price, price.adjPrice) }}
                  </span>
                  <span v-else-if="parseInt(price.adjPricetag) === 3">
                    {{ $NP.times(price.price, price.adjPrice) }}
                  </span>
                  <span v-else>
                    {{ price.price }}
                  </span>
                </span>
                <el-select
                  v-model="price.adjPricetag"
                  :disabled="!!scope.row.priceId"
                  style="width: 60px; display: inline-block"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(tag, tagi) in adjPricetag_list"
                    :key="tagi"
                    :label="tag.label"
                    :value="tag.value"
                  ></el-option>
                </el-select>
                <!-- 如果做减法，最大值只能为当前的价格-->
                <el-input-number
                  v-model="price.adjPrice"
                  style="width: 80px"
                  :controls="false"
                  :disabled="!!scope.row.priceId"
                  :min="0"
                  :max="
                    parseInt(price.adjPricetag) === 1
                      ? price.price
                      : 99999999999
                  "
                  size="small"
                ></el-input-number>
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.priceId"
              type="text"
              @click="delData(scope.$index)"
            >
              删除
            </el-button>
            <el-button type="text" @click="batchSet(scope.row)">同步</el-button>
            <el-button
              v-if="scope.row.priceId"
              type="text"
              @click="delCustomerTypePrice(scope.row.priceId, scope.$index)"
            >
              作废
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <FooterPage
        v-if="!customerTypePrice.length"
        style="float: left"
        :page-size="pageSize"
        :total-page.sync="total"
        :current-page.sync="page"
        @pageChange="pageChange"
        @sizeChange="sizeChange"
      ></FooterPage>
    </div>
    <div slot="footer">
      <div
        v-if="flag"
        slot="btn-div"
        class="float_left"
        style="margin-left: 20px"
      >
        <span class="batch-checkbox">
          <el-checkbox
            v-model="checkedAll"
            @change="checkAllChange"
          ></el-checkbox>
        </span>
        <el-button size="mini" @click="batchDelCustomerTypePrice">
          批量作废
        </el-button>
      </div>
      <el-button size="small" type="primary" @click="confirm">确定</el-button>
      <el-button size="small" @click="cancel">取消</el-button>
    </div>
    <!--  客户选择-->
    <CustomerTypeModel
      v-if="customer_type_show"
      :modal="false"
      :is-show="customer_type_show"
      @confirm="customerTypeConfirm"
      @cancel="customer_type_show = false"
    ></CustomerTypeModel>
  </el-dialog>
</template>

<script>
  import { getAllCustomerSource } from "@/api/System";
  import { delCustomerTypePrice } from "@/api/Price";
  import CustomerTypeModel from "@/component/customer/CustomerTypeModel";
  export default {
    name: "CustomerPrice",
    components: {
      CustomerTypeModel,
    },
    props: {
      isShow: {
        type: Boolean,
        default: false,
      },
      // 是否需要遮罩层
      modal: {
        type: Boolean,
        default: true,
      },
      customerTypePrice: {
        type: Array,
        default: () => {
          return [];
        },
      },
      customerTypePriceOpen: {
        type: Boolean,
        default: false,
      },
      enabledLadder: {
        type: [String, Number],
        default: 0,
      },
      ladderPrice: {
        type: Array,
        default: () => {
          return [];
        },
      },
      skuId: {
        type: [String, Number],
        default: 0,
      },
    },
    data() {
      return {
        batch_price: "",
        customer_type_show: false,
        switch_value: true,
        type_data: [],
        adjPricetag: "2",
        adjPricetag_list: [
          {
            label: "+",
            value: "2",
          },
          {
            label: "-",
            value: "1",
          },
          {
            label: "*",
            value: "3",
          },
        ],
        pageSize: 10,
        page: 1,
        total: 0,
        checkedAll: false,
        choose_data: [],
        flag: false,
      };
    },
    mounted() {
      if (this.customerTypePrice.length) {
        this.type_data = this.customerTypePrice;
        this.flag = !!this.type_data[0].priceId;
      } else {
        this.getAllCustomerSource();
      }
    },
    methods: {
      // 获取客户类型
      async getAllCustomerSource() {
        const data = await getAllCustomerSource({
          page: this.page,
          pageSize: this.pageSize,
        });
        this.total = data.pageTotal;
        this.customerTypeConfirm(data.data);
      },
      delData(index) {
        this.type_data.splice(index, 1);
      },
      confirm() {
        if (!this.type_data) {
          this.$message.warning("至少设置一条指定价数据");
          return;
        }
        const isPrice = this.type_data.some(
          (item) => !item.price || item.price <= 0
        );
        if (isPrice) {
          this.$message.warning("请输入正确的销售价");
          return;
        }
        this.$emit("confirm", this.switch_value, this.type_data);
        this.cancel();
      },
      // 关闭弹窗
      cancel() {
        this.$emit("cancel", this.switch_value, this.type_data);
      },
      switchChange() {},
      // 批量填充
      batchSet(row) {
        this.type_data = this.type_data.map((item) => {
          return {
            ...item,
            price: row.price,
            adjPricetag: row.adjPricetag,
            ladderPrice: item.ladderPrice.map((ladder, lai) => {
              return {
                ...ladder,
                adjPricetag: row.ladderPrice[lai].adjPricetag,
                adjPrice: row.ladderPrice[lai].adjPrice,
              };
            }),
          };
        });
      },
      customerTypeConfirm(arr) {
        const arrData = arr.map((item) => {
          return {
            id: item.id,
            name: item.name,
            price: "",
            adjPricetag: "2",
            ladderPrice: this.$_common
              .deepClone(this.ladderPrice)
              .map((price) => {
                return {
                  ...price,
                  adjPricetag: "2",
                  adjPrice: 0,
                };
              }),
          };
        });
        this.type_data = this.$_common.unique(this.type_data.concat(arrData), [
          "id",
        ]);
      },
      delCustomerTypePrice(id, index) {
        this.$confirm("确认要作废该调价单吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await delCustomerTypePrice({
            skuId: this.skuId,
            id: [id],
          });
          this.$message({
            type: "success",
            message: "作废成功!",
          });
          this.type_data.splice(index, 1);
        });
      },
      // 批量删除
      batchDelCustomerTypePrice() {
        this.$confirm("确认要批量作废该调价单吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          if (!this.choose_data.length) {
            this.$message.warning("请选择要操作的商品");
            return;
          }
          const idData = this.choose_data.map((item) => {
            return item.priceId;
          });
          const data = await delCustomerTypePrice({
            skuId: this.skuId,
            id: idData,
          });
          this.$message({
            type: "success",
            message: "作废成功!",
          });
          let arr = this.type_data;
          idData.forEach((item, index) => {
            this.type_data.forEach((item1, index) => {
              if (item1.priceId === item) {
                arr.splice(index, 1);
              }
            });
          });
          this.type_data = arr;
        });
      },
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      pageChange(val) {
        this.page = val;
        this.getAllCustomerSource();
      },
      selectionChange(val) {
        this.checkedAll = val.length === this.type_data.length;
        this.choose_data = val;
      },
      checkAllChange() {
        this.$refs.goodstabel.toggleAllSelection();
      },
    },
  };
</script>
<style scoped lang="scss">
  .view-head {
    padding: 10px 0;
    .label {
      margin-left: 10px;
    }
    .desc {
      color: #999999;
    }
  }
  .ladder-li {
    margin-top: 5px;
    .price-span {
      width: 40px;
      text-align: center;
      line-height: 30px;
      display: inline-block;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      background-color: #ffffff;
    }
  }
</style>
