<template>
  <el-dialog :close-on-click-modal="false" :title="title+'项目'" :visible.sync="dialogFormVisible" width="800px" v-dialogDrag :before-close="handleClose">
    <div class="max-height-60">
      <el-form :model="form" ref="form" inline label-width="100px" :rules="rules">
        <el-form-item label="项目类别：" prop="projectTypeName">
          <el-select class="form-width" :disabled="title=='明细'" filterable default-first-option filterable default-first-option v-model="form.projectTypeName" clearable placeholder="请选择">
            <el-option v-for="item in projecttypenames" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目编码：" prop="projectNum">
          <el-input class="form-width" ref="projectNum" :disabled="title=='明细'" oninput="this.value=this.value.replace(/[^\w_]/g,'');" placeholder='请输入项目编码' v-model="form.projectNum" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="项目名称：" prop="projectName">
          <el-input class="form-width" :disabled="title=='明细'" v-model="form.projectName" autocomplete="on" placeholder='请输入项目名称'></el-input>
        </el-form-item>
        <el-form-item label="销售次数：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D/g,'')" placeholder='请输入单次最少销售次数' pattern="[0-9]*" v-model="form.minumumTimes" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="直接消费：" prop="directConsumption">
          <div class="form-width">
            <el-radio :disabled="title=='明细'" v-model="form.directConsumption" :label="1">是</el-radio>
            <el-radio :disabled="title=='明细'" v-model="form.directConsumption" :label="0">否</el-radio>
          </div>
        </el-form-item>
        <el-form-item label="是否卡付：" prop="isCardPay" v-if="form.directConsumption==1">
          <div class="form-width">
            <el-radio :disabled="title=='明细'" v-model="form.isCardPay" :label="0">是</el-radio>
            <el-radio :disabled="title=='明细'" v-model="form.isCardPay" :label="1">否</el-radio>
          </div>
        </el-form-item>
        <el-form-item label="卡付打折：" v-if="form.directConsumption==1&&form.isCardPay==0" prop="noDiscount">
          <div class="form-width">
            <el-radio :disabled="title=='明细'" v-model="form.noDiscount" :label="0">是</el-radio>
            <el-radio :disabled="title=='明细'" v-model="form.noDiscount" :label="1">否</el-radio>
          </div>
        </el-form-item>
        <el-form-item label="有效期限：" prop="validTime" v-if="
                      sessionStorageData.allowValid == 1 && !form.directConsumption==1
                    ">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D/g,'')" placeholder='请输入有效期限(月)' pattern="[0-9]*" v-model="form.validTime" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="散客标价：" v-if="form.directConsumption==1" prop="price">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder='请输入散客价(¥/次)' pattern="[0-9]*\.?[0-9]{0,2}" v-model="form.price" autocomplete="on">
          </el-input>
        </el-form-item>
        <el-form-item label="散客最高价：" v-if="form.directConsumption==1" prop="topPrice">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder='请输入散客最高价(¥/次)' pattern="[0-9]*\.?[0-9]{0,2}" v-model="form.topPrice" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="散客最低价：" v-if="form.directConsumption==1" prop="minumumPrice">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder='请输入散客最低价(¥/次)' pattern="[0-9]*\.?[0-9]{0,2}" v-model="form.minumumPrice" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="会员标价：" prop="priceMember">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder='请输入会员价(¥/次)' pattern="[0-9]*\.?[0-9]{0,2}" v-model="form.priceMember" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="会员最高价：" prop="topPriceMember">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder='请输入会员最高价(¥/次)' pattern="[0-9]*\.?[0-9]{0,2}" v-model="form.topPriceMember" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="会员最低价：" prop="minumumPriceMember">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder='请输入会员最低价(¥/次)' pattern="[0-9]*\.?[0-9]{0,2}" v-model="form.minumumPriceMember" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="服务时间：" prop="servicingTime">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D/g,'')" placeholder='请输入服务时间(分钟)' pattern="[0-9]*" v-model="form.servicingTime" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="点钟现付提成：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3')" pattern="[0-9]*\.?[0-9]1{0,2}" placeholder='请输入点钟现付提成' v-model="form.clockComm" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="点钟卡付提成：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3')" pattern="[0-9]*\.?[0-9]1{0,2}" placeholder='请输入点钟卡付提成' v-model="form.cardClockComm" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="轮钟现付提成：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3')" pattern="[0-9]*\.?[0-9]1{0,2}" placeholder='请输入轮钟现付提成' v-model="form.roundClockComm" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="轮钟卡付提成：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3')" pattern="[0-9]*\.?[0-9]1{0,2}" placeholder='请输入轮钟卡付提成' v-model="form.cardRoundClockComm" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="推销现付提成：" prop="marketComm">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3')" pattern="[0-9]*\.?[0-9]1{0,2}" placeholder='请输入推销现付提成' v-model="form.marketComm" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="推销卡付提成：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3')" pattern="[0-9]*\.?[0-9]1{0,2}" placeholder='请输入推销卡付提成' v-model="form.cardMarketComm" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="长发：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D/g,'')" placeholder='请输入操作时长(分钟)' pattern="[0-9]*" v-model="form.longOperationTime" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="中发：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D/g,'')" placeholder='请输入操作时长(分钟)' pattern="[0-9]*" v-model="form.moderateOperationTime" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="短发：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D/g,'')" placeholder='请输入操作时长(分钟)' pattern="[0-9]*" v-model="form.shortOperationTime" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="间隔期：">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/\D/g,'')" placeholder='请输入黄金间隔期(分钟)' pattern="[0-9]*" v-model="form.goldInterval" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="合作项目：" prop="isCooperation">
          <div class="form-width">
            <el-radio :disabled="title=='明细'" v-model="form.isCooperation" :label="1">是</el-radio>
            <el-radio :disabled="title=='明细'" v-model="form.isCooperation" :label="0">否</el-radio>
          </div>
        </el-form-item>
        <el-form-item label="抽佣方式：" prop="smokeCommissionWay" v-if="form.isCooperation == 1">
          <div class="form-width">
            <el-radio-group v-model="form.smokeCommissionWay">
              <el-radio :disabled="title=='明细'" :label="0">固定金额</el-radio>
              <el-radio :disabled="title=='明细'" :label="1">比例</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item :label="'抽佣'+(form.smokeCommissionWay==0?'金额':'比例')" prop="brokerage" v-if="form.isCooperation==1">
          <el-input class="form-width" :disabled="title=='明细'" oninput="this.value=this.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" :placeholder="'请输入抽佣'+(form.smokeCommissionWay==0?'金额':'比例(%)')" pattern="[0-9]*\.?[0-9]{0,2}" v-model="form.brokerage" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="截止日期：" prop="salesDeadline">
          <div class="block" style="min-width:50px">
            <el-date-picker :disabled="title=='明细'" style="min-width:50px" v-model="form.salesDeadline" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择销售截止日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="到期日期：" prop="unifiedDue">
          <div class="block" style="min-width:50px">
            <el-date-picker :disabled="title=='明细'" style="min-width:50px" v-model="form.unifiedDue" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择疗程帐户到期日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="项目标签：">
          <el-input class="form-width" :disabled="title=='明细'" style="max-width: 200px" maxlength="200" type="textarea" :autosize="{ minRows: 3, maxRows: 12 }" show-word-limit v-model="form.label" autocomplete="on"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="mini" v-if="title=='明细'" type="primary" @click="handleClose">关闭</el-button>
      <el-button size="mini" v-else type="primary" @click="handleClose">取 消</el-button>
      <el-button size="mini" v-if="title=='明细'" v-role="4005003" type="primary" @click="title='修改'">修改</el-button>
      <el-button size="mini" v-else type="primary" @click="confirm()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addpro, editpro, proTypeList } from "@/api/storeManage.js";
export default {
  data() {
    return {
      formLabelwidth: "100px",
      dialogFormVisible: false, //弹窗开关
      title: "", //弹窗标题
      form: {
        smokeCommissionWay: null,
      }, //主对象
      projectType: [],
      projecttypenames: [],
      sessionStorageData: JSON.parse(
        sessionStorage.getItem("sessionStorageData")
      ),
      format: "YYYY-MM-DD hh:mm:ss",
      rules: {
        projectTypeName: {
          required: true,
          message: "请选择项目类别",
          trigger: ["blur", "change"],
        },
        projectNum: {
          required: true,
          message: "请输入项目编码",
          trigger: ["blur", "change"],
        },
        isCooperation: {
          required: true,
          message: "请选择是否合作项目",
          trigger: ["blur", "change"],
        },
        projectName: {
          required: true,
          message: "请输入项目名称",
          trigger: ["blur", "change"],
        },
        directConsumption: {
          required: true,
          message: "请选择是否直接消费",
          trigger: ["blur", "change"],
        },
        isCardPay: {
          required: true,
          message: "是否可以卡付",
          trigger: ["blur", "change"],
        },
        noDiscount: {
          required: true,
          message: "卡付是否打折",
          trigger: ["blur", "change"],
        },
        validTime: {
          required: true,
          message: "请输入有效月",
          trigger: ["blur", "change"],
        },
        topPriceMember: {
          required: true,
          message: "请输入会员最高价",
          trigger: ["blur", "change"],
        },
        minumumPriceMember: {
          required: true,
          message: "请输入会员最低价",
          trigger: ["blur", "change"],
        },
        priceMember: {
          required: true,
          message: "请输入会员价",
          trigger: ["blur", "change"],
        },
        price: {
          required: true,
          message: "请输入散客价",
          trigger: ["blur", "change"],
        },
        topPrice: {
          required: true,
          message: "请输入散客最高价",
          trigger: ["blur", "change"],
        },
        minumumPrice: {
          required: true,
          message: "请输入散客最低价",
          trigger: ["blur", "change"],
        },
        smokeCommissionWay: {
          required: true,
          message: "抽佣方式",
          trigger: ["blur", "change"],
        },
        brokerage: {
          required: true,
          message: "抽佣比例",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  methods: {
    //组件传值
    show(row, title) {
      if (row == "添加") {
        this.title = row;
        this.form = {
          isCooperation: 0,
          clockComm: 0,
          cardClockComm: 0,
          roundClock: 0,
          cardrRoundClock: 0,
          marketComm: 0,
          cardMarketComm: 0,
          servicingTime: 0,
          validTime: this.sessionStorageData.allowMonth,
        };
      } else {
        if (title == "明细") {
          this.title = title;
        } else {
          this.title = "修改";
        }
        this.form = { ...row };
        this.rowForm = { ...row };
      }
      this.dialogFormVisible = true;
      setTimeout(() => {
        this.$refs.projectNum.focus();
        this.$refs.projectNum.select();
        this.$refs.form.clearValidate();
      }, 300);
      this.getData();
    },
    //关闭弹窗前的回调方法
    handleClose() {
      this.form = {};
      this.dialogFormVisible = false;
      this.$refs.form.clearValidate();
    },
    //获取数据
    async getData() {
      proTypeList().then((res) => {
        var projecttypenames = [];
        this.projectType = res.rows;
        res.rows.forEach((item) => {
          var item = {
            value: item.projectTypeNum + " - " + item.projectTypeName,
          };
          projecttypenames.push(item);
        });
        this.projecttypenames = projecttypenames;
      });
    },

    //确定返回方法
    confirm() {
      this.form.projectNature = 0;
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.form.minumumTimes) {
            this.form.minumumTimes = 1;
          }
          if (this.title == "添加") {
            if (
              this.sessionStorageData.allowValid == 1 &&
              this.form.directConsumption == 0 &&
              this.form.validTime == null
            ) {
              this.$alert("请设置项目有效期限", "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: (action) => {},
              });
            } else {
              if (this.form.directConsumption == 1) {
                this.form.validTime == 0;
              }
              for (let i in this.projectType) {
                if (
                  this.form.projectTypeName ==
                  this.projectType[i].projectTypeNum +
                    " - " +
                    this.projectType[i].projectTypeName
                ) {
                  this.form.projectTypeId = this.projectType[i].id;
                  this.form.projectTypeNum = this.projectType[i].projectTypeNum;
                }
              }

              addpro(this.form).then((res) => {
                if (res.code == "000000") {
                  this.dialogFormVisible = false;
                  this.$emit("editData");
                  this.$alert(
                    "添加项目成功! 请前往业绩提成页面设置项目提成",
                    "提示",
                    {
                      confirmButtonText: "确定",
                      confirmButtonClass: "confirmbtnFalses",
                      type: "success",
                      center: true,
                      callback: (action) => {},
                    }
                  );
                } else {
                  this.$alert(res.message, "提示", {
                    confirmButtonText: "确定",
                    confirmButtonClass: "confirmbtnFalses",
                    type: "warning",
                    center: true,
                    callback: (action) => {},
                  });
                }
              });
            }
          } else {
            let falg = false;
            if (this.form.directConsumption == true) {
              if (this.form.price != null && this.form.minumumPrice != null) {
              } else {
                falg = true;
              }
            }
            if (falg == false) {
              if (
                this.sessionStorageData.allowValid == 1 &&
                this.form.directConsumption == 0 &&
                this.form.validTime == null
              ) {
                this.$alert("请设置项目有效期", "提示", {
                  confirmButtonText: "确定",
                  confirmButtonClass: "confirmbtnFalses",
                  type: "warning",
                  center: true,
                  callback: (action) => {},
                });
              } else {
                if (this.form.directConsumption == 1) {
                  this.form.validTime = 0;
                }
                for (let i in this.projectType) {
                  if (
                    this.form.projectTypeName ==
                    this.projectType[i].projectTypeNum +
                      " - " +
                      this.projectType[i].projectTypeName
                  ) {
                    this.form.projectTypeId = this.projectType[i].id;
                    this.form.projectTypeNum =
                      this.projectType[i].projectTypeNum;
                  }
                }
                editpro(this.form).then((res) => {
                  if (res.code == "000000") {
                    this.dialogFormVisible = false;
                    this.$emit("editData");
                    
                    this.$message.success({
                      message: res.message,
                    });
                    this.dialogFormVisible = false;
                  } else {
                    this.$alert(res.message, "提示", {
                      confirmButtonText: "确定",
                      confirmButtonClass: "confirmbtnFalses",
                      type: "warning",
                      center: true,
                      callback: (action) => {},
                    });
                  }
                });
              }
            } else {
              this.$alert("直接消费项目需要设置散客价格 / 散客最低价", "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: (action) => {},
              });
            }
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.el-col {
  width: 450px;
}
.wage {
  position: relative;
}

.table input {
  width: 55px;
  height: 30px;
  border: none;
  color: #5a5b5c;
  border-color: #99a9bf;
}

.table .demo-table-expand {
  font-size: 0;
}

.table .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.table .el-col {
  border: 1px solid #99a9bf;
  height: 500px;
  width: 300px;
  overflow: hidden;
}

.table .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 20%;
}

.table .el-table {
  display: none;
}

.table {
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  background: white;
  width: 95%;
  height: 300px;
  margin: 5px auto;
  text-align: center;
  box-shadow: 5px 5px 5px #e7e7e7;
}

.table td,
.table tr,
.table th {
  border-left: 1px solid #e7e7e7;
  border-top: 1px solid #e7e7e7;
}

.table .tr th {
  background: #e7e7e7;
  border-right: 1px solid white;
}

.table td {
  overflow: hidden !important;
  width: 100px;
  height: 60px;
}

.but2 {
  position: absolute;
  bottom: 20px;
  left: 40px;
  width: 58px;
  height: 32px;
}

.el-table th {
  padding: 5px 0;
}
</style>
