<template>
    <el-dialog
    :title="title"
    :visible.sync="diaShow"
    width="30%"
    >
    <!-- 创建 -->
        <section v-if="Dtype == 'create'">
            <el-form :model="ownerData" :rules="rules" ref="ownerData" label-width="120px" class="demo-ownerData">
                <el-form-item label="企业全称" prop="proprietorName">
                    <el-input v-model="ownerData.proprietorName"></el-input>
                </el-form-item>
                <el-form-item label="营业执照注册号" prop="registrationNum">
                    <el-input v-model="ownerData.registrationNum"></el-input>
                </el-form-item>
                <el-form-item label="营业执照扫描件">
                    <upload :isShow="false" @getKey="getKey" :identify="ownerData.license"></upload>
                </el-form-item>
                <el-form-item label="企业邮箱账号" prop="email">
                    <el-input v-model="ownerData.email"></el-input>
                    <p class="el-info">作为企业账户登录业主系统，同时用于接收上个云的各类通知。</p>
                </el-form-item>
                <div class="own-border"></div>
                <el-form-item label="企业联系人" prop="contact">
                    <el-input v-model="ownerData.contact"></el-input>
                </el-form-item>
                <el-form-item label="联系人手机" prop="phone">
                    <el-input v-model="ownerData.phone"></el-input>
                </el-form-item>
                <div class="own-border"></div>
                <el-form-item label="运维负责人" prop="managerName">
                    <el-input v-model="ownerData.managerName"></el-input>
                    <p class="el-info">上格云内部负责维护此客户的人员</p>
                </el-form-item>
            </el-form>
        </section>
        <!-- 修改 -->
      <section v-else>
            <div>
              <el-select size="mini" style="width:260px;" v-model="emailValue" placeholder="请选择">
                <el-option
                  v-for="item in emailOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button size="mini" @click="seedPsd">发送模板通知</el-button>
            </div>
            <form-input :value="ownerData.proprietorName" @change="changed" :keys="'proprietorName'" :label="'企业全称'" :isRule="true"></form-input>
            <form-input :value="ownerData.registrationNum" @change="changed" :keys="'registrationNum'" :label="'营业执照注册号'" :isRule="false"></form-input>
            <el-form :label-position="'right'" label-width="150px" :model="formLabelAlign" ref="form" @submit.native.prevent>
                <el-form-item label="营业执照扫描件">
                    <upload :isShow="false" @getKey="changeKey" :identify="ownerData.license"></upload>
                </el-form-item>
            </el-form>
            <form-input :value="ownerData.email" @change="changed" :keys="'email'" :label="'企业邮箱账号'" :isRule="true">
              <div slot="mess" class="el-info">上格云内部负责维护此客户的人员</div>
            </form-input>
            <el-form :label-position="'right'" label-width="150px" :model="formLabelAlign" ref="form" @submit.native.prevent>
                <el-form-item label="企业登录密码">
                  <el-button @click="reset">重置密码</el-button>
                  <p class="el-info">新密码会发送到目标邮箱</p>
                </el-form-item>
            </el-form>
            <form-input :value="ownerData.contact" @change="changed" :keys="'contact'" :label="'企业联系人'" :isRule="true">
              <div slot="mess" class="el-info">上格云内部负责维护此客户的人员</div>
            </form-input>
            <form-input :value="ownerData.phone" @change="changed" :keys="'phone'" :label="'联系人手机'" :isRule="true"></form-input>
            <form-input :value="ownerData.managerName" @change="changed" :keys="'managerName'" :label="'商务运维负责人'" :isRule="true"></form-input>
      </section>
      <span slot="footer" class="dialog-footer" v-if="Dtype == 'create'">
          <el-button type="primary" @click="submitForm('ownerData')">立即创建</el-button>
          <el-button @click="resetForm('ownerData')">重置</el-button>
          <p><el-checkbox style="margin-right: 50px;" v-model="isEmail">同时发送短信及邮件通知主体账号已开通</el-checkbox></p>
      </span>
    </el-dialog>
</template>

<script>
import formInput from "@/components/market/owner/formInput";
import upload from "@/components/market/owner/uploadImg"
export default {
  props: ["ownerData", "show", "Dtype"],
  components: {
    formInput,
    upload
  },
  data() {
    return {
      title: "",
      diaShow: true,
      formLabelAlign: {
        name: ""
      },
      dataKeys: [],
      capyData: {},
      rules: {
        proprietorName: [
          { required: true, message: "请输入企业全称", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur"] }
        ],
        contact: [
          { required: true, message: "请输入企业联系人", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入联系人手机", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号",
            trigger: ["blur"]
          }
        ]
      },
      emailOptions: [//Email的下拉
        {
          value: 'all',
          label: '业主账号开通通知（短信邮件）'
        }
      ],
      emailValue: 'all',//下拉选中的值
      isEmail: false,//是否发送邮件
    };
  },
  created() {
    // this.capyData = Object.assign({},this.ownerData)
    // console.log(this.capyData,'capyData')
    this.diaShow = this.show;
    this.dataKeys = Object.keys(this.ownerData);
  },
  methods: {
    changed(val, key) {
      this.ownerData[key] = val;
      let param = {
        proprietorId: this.ownerData.proprietorId
      };
      param[key] = val;
      this.changeOwn(param)
    },

    //修改接口调用
    changeOwn(param){
      this.postJson("/server/business-os/proprietor/update", param, res => {
        return;
      });
    },
    happenJson() {},
    
    //重置密码
    reset(){
      let param = {
        proprietorId: this.ownerData.proprietorId
      }
      this.postJson("/server/business-os/proprietor/reset",param,res => {
        this.$message.success("已重置密码")
      })
    },

    //发送账号密码
    seedPsd(){
      this.seedEmail(this.ownerData.proprietorId)
    },

    //创建时添加key
    getKey(key){
      this.ownerData.license = key
    },

    //修改合同信息时改变key
    changeKey(key){
      this.ownerData.license = key;
      let param = {
        proprietorId: this.ownerData.proprietorId
      };
      param.license = key;
      this.changeOwn(param)
    },

    //submit触发
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.craeteOwner();
        } else {
          return false;
        }
      });
    },

    uploadImg(file) {
      console.log(file);
    },

    //创建业主
    craeteOwner() {
      this.postJson(
        "/server/business-os/proprietor/create",
        this.ownerData,
        res => {
          this.diaShow = false;
          this.$emit("success");
          if(this.isEmail){
            this.seedEmail(res.proprietorId)
          }
        }
      );
    },

    //发送邮件短信
    seedEmail(id){
      let param = {
        proprietorId: id
      }
      this.postJson("/server/business-os/proprietor/inform",param,res=>{
        this.$message.success("发送邮件成功")
      })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  watch: {
    diaShow: {
      deep: true,
      handler(val, oldVal) {
        this.$emit("close");
        this.diaShow = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.own-border {
  height: 1px;
  width: 100%;
  background-color: #ccc;
  margin-bottom: 20px;
}
</style>
