<template>
  <el-dialog :visible="dialogShow" width="464px" custom-class="add-bid-opening-record" :show-close="false">
    <div class="add-bid-opening-record-inner">
      <slot name="dialog-main">
        <!-- 弹窗header -->
        <slot name="dialog-header">
          <div class="add-header">
            <div class="header-left-container">
              <slot name="dialog-header-icon">
                <img src="@/assets/images/economies/icon.png" alt="" class="header-icon">
              </slot>
              <slot name="dialog-header-title">
                <span class="header-title">{{title}}</span>
              </slot>
            </div>
            <div class="header-right-container">
              <slot name="dialog-header-close-icon">
                <i class="el-icon-close dialog-header-close-icon" @click="dialogClose('contentFormIns')"></i>
              </slot>
            </div>
          </div>
        </slot>
        <!-- 弹窗表单 -->
        <slot name="dialog-content">
          <div class="add-content-form">
            <el-form :model="formData" :rules="formRules" label-width="auto" class="content-form-ins" ref="contentFormIns">
              <el-form-item label="投标人 ：" prop="tenderer">
                <el-input v-model="formData.tenderer" placeholder="请输入投标人"></el-input>
              </el-form-item>
              <el-form-item label="企业性质 ：" prop="tendererNature">
                <el-input v-model="formData.tendererNature" placeholder="请输入企业性质"></el-input>
              </el-form-item>
              <el-form-item label="项目经理 ：" prop="businessManager">
                <el-input v-model="formData.businessManager" placeholder="请输入项目经理"></el-input>
              </el-form-item>
              <el-form-item label="联系方式 ：" prop="contact">
                <el-input v-model="formData.contact" placeholder="请输入联系方式"></el-input>
              </el-form-item>
              <el-form-item label="投标金额 ：" class="has-unit" prop="tenderAmount">
                <el-input v-model="formData.tenderAmount" placeholder="请输入投标金额" @input="(value) => tenderAmountInput(value,formData)"></el-input>
                <span class="content-form-item-unit">万元</span>
              </el-form-item>
            </el-form>
          </div>
        </slot>
        <!-- 底部按钮 -->
        <slot name="dialog-footer">
          <div class="add-footer">
            <div class="add-footer-btn cancel-btn" @click="dialogClose('contentFormIns')">{{cancelText}}</div>
            <div class="add-footer-btn ok-btn" @click="ok('contentFormIns')">{{okText}}</div>
          </div>
        </slot>
      </slot>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "addBidOpeningRecord",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    formRules: {
      type: Object,
      default: () => ({})
    },
    okText: {
      type: String,
      default: "确定"
    },
    cancelText: {
      type: String,
      default: "取消"
    }
  },
  watch: {
    "show": {
      handler(newValue, oldValue) {
        this.dialogShow = newValue;
      }
    }
  },
  data() {
    return {
      dialogShow: this.show
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    dialogClose(refStr) {
      Object.assign(this.$data, this.$options.data.call(this));
      this.$refs[refStr].clearValidate();
      this.$emit("dialogClose");
    },
    ok(refStr) {
      this.$refs[refStr].validate(flag => {
        console.log(flag);
        if (flag) {
          this.$emit("validatorSuccess");
        }
      });
    },
    tenderAmountInput(value, data) {
      data.tenderAmount = value.replace(/[^\d.]/g, "")
        .replace(/\.{2,}/g, ".")
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".")
        .replace(/^(\-)*(\d+)\.(\d+).*$/, '$1$2.$3')
        .replace(/^\./g, "").replace(/^0+(\d)/, '');
    }
  },
}
</script>
<style lang="scss" scoped>
::v-deep .add-bid-opening-record {
  .el-dialog__body,
  .el-dialog__header {
    padding: 0px;
  }

  .add-bid-opening-record-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .add-header {
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 16px;
      box-sizing: border-box;
      border-bottom: 1px solid #e1e1e1;

      .header-left-container {
        display: flex;
        align-items: center;
        & > .header-icon {
          width: 17px;
          height: 17px;
        }
        & > .header-title {
          margin-left: 8px;
          color: #232323;
          font-size: 16px;
          font-weight: bold;
        }
      }

      .header-right-container {
        .dialog-header-close-icon {
          font-size: 16px;
          color: #999999;
          cursor: pointer;

          &:hover {
            color: #0081ff;
          }
        }
      }
    }

    .add-content-form {
      padding: 24px;
      box-sizing: border-box;

      .content-form-ins {
        .el-form-item {
          margin-bottom: 16px;
          display: flex;
          align-items: center;

          .el-form-item__label {
            padding: 0px;
            line-height: 32px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(35, 35, 35, 0.8);
            white-space: nowrap;
          }

          .el-form-item__content {
            width: 100%;
            margin-left: 0px !important;
            line-height: 32px;

            .el-input {
              .el-input__inner {
                height: 32px;
                line-height: 32px;
                padding: 0px 8px;
                box-sizing: border-box;
                &:focus {
                  border-color: #0081ff;
                }
                &::placeholder {
                  color: rgba(35, 35, 35, 0.4) !important;
                  font-size: 14px;
                }
              }
            }

            .el-form-item__error {
              padding-top: 2px;
            }
          }

          &.has-unit {
            .el-form-item__content {
              display: flex;
              align-items: center;

              .content-form-item-unit {
                white-space: nowrap;
                margin-left: 8px;
              }
            }
          }
        }
      }
    }

    .add-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 24px;
      padding-top: 0px;
      box-sizing: border-box;

      .add-footer-btn {
        min-width: 80px;
        padding: 0px 13px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 2px;
        color: rgba(35, 35, 35, 0.8);
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        box-sizing: border-box;

        &.cancel-btn {
          background: #fff;
          border: 1px solid #d9d9d9;
        }

        &.ok-btn {
          background: #0081ff;
          color: #fff;
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
