<template>
  <div id="">
    <el-row>
      <el-col :span="24">
        <el-form-item label="设置商品及佣金" prop="goodsList">
          <p>
            <el-button type="primary" @click="activeGoods">新增</el-button>
          </p>
          <el-table :data="ruleForm.goodsList" border style="width: 100%">
            <el-table-column
              align="center"
              v-for="(item, index) in goodsSet"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-input-number
                  v-if="item.scope === 'price'"
                  style="width: 100px"
                  v-model="scope.row[item.prop]"
                  :precision="scope.row['profitType'] === 1 ? 0 : 2"
                  :min="0"
                  :controls="false"
                ></el-input-number>
                <el-input-number
                  v-else-if="item.scope === 'goodsPrice'"
                  style="width: 100px"
                  v-model="scope.row[item.prop]"
                  :precision="2"
                  :min="0"
                  :controls="false"
                  @change="
                    {
                      (scope.row['profitMax'] = ''),
                        (scope.row['profitOne'] = ''),
                        (scope.row['profitTwo'] = ''),
                        (scope.row['profitThree'] = '');
                    }
                  "
                ></el-input-number>
                <el-input-number
                  v-else-if="item.scope === 'priceChan'"
                  style="width: 100px"
                  v-model="scope.row[item.prop]"
                  :precision="scope.row['profitType'] === 1 ? 0 : 2"
                  :min="0"
                  :max="
                    scope.row['profitType'] === 1
                      ? 100
                      : scope.row['profitType'] === 2
                      ? scope.row['goodsPrice']
                      : ''
                  "
                  :controls="false"
                ></el-input-number>
                <el-select
                  v-else-if="item.scope === 'select'"
                  v-model="scope.row[item.prop]"
                  placeholder="请选择分佣方式"
                  @change="
                    {
                      (scope.row['profitMax'] = ''),
                        (scope.row['profitOne'] = ''),
                        (scope.row['profitTwo'] = ''),
                        (scope.row['profitThree'] = '');
                    }
                  "
                >
                  <el-option
                    v-for="item in profitTypeList"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="ruleForm.goodsList.splice(scope.$index, 1)"
                  >删除</el-button
                >
              </template>
            </el-table-column></el-table
          >
        </el-form-item>
        <p
          style="
            color: rgba(134, 144, 156, 1);
            font-size: 16px;
            margin-left: 120px;
          "
        >
          分佣方式设置为百分比时，数值不能超过100%，3个等级的佣金总和不能超过100%；<br />分佣方式设置为固定金额时，数值不能超过该固定金额，3个等级的佣金总和不能超过该数值。
        </p>
        <el-form-item label="佣金冻结期" prop="freezingPeriod">
          <el-input-number
            style="width: 70px"
            v-model="ruleForm.freezingPeriod"
            :precision="0"
            :max="9999"
            :min="0"
            :controls="false"
          ></el-input-number>
          <span style="margin-left: 8px; font-weight: bold">天</span>
        </el-form-item>
        <p
          style="
            color: rgba(134, 144, 156, 1);
            font-size: 16px;
            margin-left: 120px;
          "
        >
          冻结期的设置要考虑到退款的可能并设置安全合理的天数，建议最少为3天；
        </p>
      </el-col>
    </el-row>
    <goodsList ref="goodsList" v-on="$listeners"></goodsList>
  </div>
</template>

<script>
import goodsList from "@/components/goodsList";
export default {
  components: { goodsList },
  props: {
    ruleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      goodsSet: [
        {
          label: "商品名称",
          prop: "goodsName",
        },
        {
          label: "价格",
          prop: "goodsPrice",
          scope: "goodsPrice",
          width: "130",
        },
        {
          label: "分佣方式",
          prop: "profitType",
          scope: "select",
          width: "170",
        },
        {
          label: "数值",
          prop: "profitMax",
          scope: "priceChan",
          width: "130",
        },
        {
          label: "一级佣金",
          prop: "profitOne",
          scope: "price",
          width: "130",
        },
        {
          label: "二级佣金",
          prop: "profitTwo",
          scope: "price",
          width: "130",
        },
        {
          label: "三级佣金",
          prop: "profitThree",
          scope: "price",
          width: "130",
        },
      ],
      profitTypeList: [
        {
          label: "百分比（%）",
          value: 1,
        },
        {
          label: "固定金额（元）",
          value: 2,
        },
      ],
    };
  },
  methods: {
    activeGoods() {
      const array = this.ruleForm.goodsList.map((item) => item.goodsId);
      this.$refs.goodsList.showBox(array);
    },
  },
};
</script>

<style lang="scss" scoped></style>
