<template>
  <div class="installment-setting-dialog">
    <el-dialog :visible.sync="showInstallmentSettingDialog" title="分账设置" @close="closeInstallmentSettingDialog">
      <el-form>
        <el-form-item label="分账设置" label-width="120px" v-if="false">
          <el-radio-group v-model="isDefault" class="ml20">
            <el-radio label="默认设置" :value="1"></el-radio>
            <el-radio label="自定义设置" :value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 商户售卖分账设置 -->
        <el-form-item label="售卖平台服务费" class="lang" :rules="{ required: true }">
          <div style="display: flex;flex-direction: column;">
            <div style="display: flex;flex-direction: row;" class="ml20">
              <el-input v-model="dataForm.sellFee" style="width: 228px;">
                <template slot="append">
                  <el-select style="width: 60px;" v-model="dataForm.sellFeeType">
                    <el-option label="%" :value="0">%</el-option>
                    <el-option label="元" :value="1">元</el-option>
                  </el-select>
                </template>
              </el-input>
            </div>
            <div class="ml20">注：每笔订单实际支付金额收取的服务费用。填0表示不收取服务费</div>
          </div>
        </el-form-item>
        <el-form-item label="售卖分账优先级" class="lang">
          <div style="display: flex;flex-direction: column;">
            <div class="ml20">
              <el-radio-group v-model="dataForm.sellFeePriority" style="margin-left: 30rpx;">
                <el-radio label="平台" :value="0"></el-radio>
                <el-radio label="商户" :value="1"></el-radio>
              </el-radio-group>
            </div>
            <div class="ml20">注：运费金额默认分给商户，且不参与分账。</div>
          </div>
        </el-form-item>
        <!-- 商户租赁分账设置 -->
        <el-form-item label="租赁平台服务费" class="lang" :rules="{ required: true }" v-if="false">
          <div style="display: flex;flex-direction: column;">
            <div style="display: flex;flex-direction: row;" class="ml20">
              <el-input v-model="dataForm.leaseFee" style="width: 228px;">
                <template slot="append">
                  <el-select style="width: 60px;" v-model="dataForm.leaseFeeType">
                    <el-option label="%" :value="0"></el-option>
                    <el-option label="元" :value="1"></el-option>
                  </el-select>
                </template>
              </el-input>
            </div>
            <div class="ml20">注：每笔订单实际支付金额收取的服务费用。填0表示不收取服务费</div>
          </div>
        </el-form-item>
        <el-form-item label="租赁分账优先级" class="lang" v-if="false">
          <div style="display: flex;flex-direction: column;">
            <div class="ml20">
              <el-radio-group v-model="dataForm.leaseFeePriority">
                <el-radio label="平台" :value="0"></el-radio>
                <el-radio label="商户" :value="1"></el-radio>
              </el-radio-group>
            </div>
            <div class="ml20">注：运费金额默认分给商户，且不参与分账。</div>
          </div>
        </el-form-item>
        <!-- 分期分账设置 -->
        <el-form-item label="分期平台服务费" class="lang" :rules="{ required: true }" v-if="false">
          <div style="display: flex;flex-direction: column;">
            <div style="display: flex;flex-direction: row;" class="ml20">
              <span style="margin-right: 10px;">3期</span>
              <el-input v-model="dataForm.period3Fee" style="width: 228px;">
                <template slot="append">
                  <el-select style="width: 60px;" v-model="dataForm.instalmentFeeType">
                    <el-option label="%" :value="0"></el-option>
                    <el-option label="元" :value="1"></el-option>
                  </el-select>
                </template>
              </el-input>
            </div>
            <div style="display: flex;flex-direction: row;margin-top: 10px;" class="ml20">
              <span style="margin-right: 10px;">6期</span>
              <el-input v-model="dataForm.period6Fee" style="width: 228px;">
                <template slot="append">
                  <el-select style="width: 60px;" v-model="dataForm.instalmentFeeType">
                    <el-option label="%" :value="0"></el-option>
                    <el-option label="元" :value="1"></el-option>
                  </el-select>
                </template>
              </el-input>
            </div>
            <div style="display: flex;flex-direction: row;margin-top: 10px;" class="ml20">
              <span style="margin-right: 10px;">9期</span>
              <el-input v-model="dataForm.period9Fee" style="width: 228px;">
                <template slot="append">
                  <el-select style="width: 60px;" v-model="dataForm.instalmentFeeType">
                    <el-option label="%" :value="0"></el-option>
                    <el-option label="元" :value="1"></el-option>
                  </el-select>
                </template>
              </el-input>
            </div>
            <div style="display: flex;flex-direction: row;margin-top: 10px;" class="ml20">
              <span style="margin-right: 10px;">12期</span>
              <el-input v-model="dataForm.period12Fee" style="width: 228px;">
                <template slot="append">
                  <el-select style="width: 60px;" v-model="dataForm.instalmentFeeType">
                    <el-option label="%" :value="0"></el-option>
                    <el-option label="元" :value="1"></el-option>
                  </el-select>
                </template>
              </el-input>
            </div>
          </div>
      </el-form-item>
      <el-form-item label="分期分账优先级" class="lang" v-if="false">
        <div style="display: flex;flex-direction: column;">
          <div class="ml20">
            <el-radio-group v-model="dataForm.instalmentFeePriority">
              <el-radio label="平台" :value="0"></el-radio>
              <el-radio label="商户" :value="1"></el-radio>
            </el-radio-group>
          </div>
          <div class="ml20">注：运费金额默认分给商户，且不参与分账。</div>
        </div>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeInstallmentSettingDialog">取 消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createFeeConfiApi
} from '@/api/finance';

export default {
  props: ['showInstallmentSettingDialog', 'goodsId', 'merId', 'feeConfig'],

  watch: {
    showInstallmentSettingDialog(newVal) {
      if (newVal) {
        if (this.feeConfig && this.feeConfig.id) {
          this.dataForm = { ...this.dataForm, ...this.feeConfig };
          this.dataForm.sellFeePriority === 0 ? this.dataForm.sellFeePriority = '平台' : this.dataForm.sellFeePriority = '商户';
        }
      } else {
        this.dataForm = {
          sellFee: '',
          sellFeePriority: null,
          sellFeeType: 0,
        };
      }
    }
  },

  data() {
    return {
      dataForm: {
        sellFee: '',
        sellFeePriority: null,
        sellFeeType: 0,
        // leaseFee: '',
        // leaseFeePriority: null,
        // leaseFeeType: 0,
        // period3Fee: '',
        // period6Fee: '',
        // period9Fee: '',
        // period12Fee: '',
        // instalmentFeePriority: null,
        // instalmentFeeType: 0
      },
      isDefault: null
    };
  },

  methods: {
    closeInstallmentSettingDialog() {
      this.$emit('closeInstallmentSettingDialog')
    },

    onSave() {
      let params = {};
      this.isDefault === '默认设置' ? (params.merId = this.merId, params.productId = this.goodsId) : params.productId = this.goodsId;
      this.dataForm.sellFeePriority === '平台' ? params.sellFeePriority = 0 : params.sellFeePriority = 1;
      params.sellFee = this.dataForm.sellFeeType === 0 ? parseFloat(this.dataForm.sellFee) / 100 : this.dataForm.sellFee;
      params.sellFeeType = this.dataForm.sellFeeType;

      if (!this.dataForm.sellFee) {
        this.$message({
          message: '请填写售卖平台服务费',
          type: 'warning',
          showClose: true
        });
        return;
      }

      createFeeConfiApi(params).then(res => {
        this.$message({
          message: '保存配置成功',
          type: 'success',
          showClose: true
        });
        this.$emit('update')
        this.closeInstallmentSettingDialog();
        console.info('save', res);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.lang {
  width: 93.5%;
  ::v-deep.el-form-item__content {
    width: 79%;
  }
}

.ml20 {
  margin-left: 20px;
}
</style>