<template>
  <div class="app-container">
    <el-form :model="form" ref="form" :rules="rules" label-width="0px">
      <el-row>
        <el-col :span="24" class="m-b-20">
          <el-descriptions class="margin-top" title="基本信息" :column="2" border>
            <el-descriptions-item label="企业名称">
              <el-form-item prop="qyname">
                <el-input v-model="form.qyname" readonly placeholder="请输入企业名称" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="用 户 名">
              <el-form-item prop="UserName">
                <el-input v-model="form.username" readonly placeholder="请输入用户名" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="负责人姓名">
              <el-form-item prop="name">
                <el-input v-model="form.name" placeholder="请输入负责人姓名" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="手机号码">
              <el-form-item prop="photo">
                <el-input v-model="form.photo" placeholder="请输入手机号码" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="电子邮箱">
              <el-form-item prop="lxryx">
                <!-- <el-input v-model="form.lxryx" placeholder="请输入电子邮箱" /> -->
                <el-select v-model="form.lxryx" style="width: 100%;" filterable :allow-create="type2" default-first-option
                  :filter-method="searchEmail2" placeholder="请输入电子发票邮箱">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
           <!-- <el-descriptions-item label="邮政编码">
              <el-form-item prop="yjCode">
                <el-input v-model="form.yjCode" placeholder="请输入邮政编码" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="通讯地址">
              <el-form-item prop="kpzcdz">
                <el-input v-model="form.kpzcdz" placeholder="请输入通讯地址" />
              </el-form-item>
            </el-descriptions-item> -->
            <el-descriptions-item label="营业执照">
              <el-form-item prop="UserName">
				  <div class="flex-ac" style="height: 100%;">
					  <ImagePreview :src="form.yyzz" :width="100" :height="50"></ImagePreview>
				  </div>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="24" class="m-b-20">
          <el-descriptions size="small" class="margin-top" title="开票信息" :column="2" border> 
            <el-descriptions-item label="电子发票邮箱">
              <el-form-item prop="dzfpyx"> 
                <el-select v-model="form.dzfpyx" style="width: 100%;" filterable :allow-create="type" default-first-option
                  :filter-method="searchEmail" placeholder="请输入电子发票邮箱">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="开票单位">
              <el-form-item prop="kpdw">
                <el-input v-model="form.kpdw" placeholder="请输入开票单位" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="纳税人识别号">
              <el-form-item prop="nsrsbh">
                <el-input v-model="form.nsrsbh" placeholder="请输入纳税人识别号" />
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="24">
          <div class="flex-jc" style="text-align: center;">
            <el-button type="danger" @click="saveInfo">保 存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { saveQyInfo } from "@/api/qiye/qyInfo"
export default {
  name: "QiyeInfo",
  data() {
    var validatePass = (rule, value, callback) => {
      let gz = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
      if (!value) {
        callback(new Error('请填写邮箱'));
      } else if (!gz.test(value)) {
        callback(new Error('请填写正确格式的邮箱'));
      } else {
        callback();
      }
    };
    return {
      form: {},
      rules: {
        name: [
          { required: true, message: '请填写负责人姓名', trigger: ['blur', 'change'] }
        ],
        photo: [
          { required: true, message: '请填写手机号码', trigger: ['blur', 'change'] }
        ],
        lxryx: [
          { validator: validatePass, trigger: ['blur', 'change'] }
        ],
        yjCode: [
          { required: true, message: '请填写邮政编码', trigger: ['blur', 'change'] }
        ],
        kpzcdz: [
          { required: true, message: '请填写通讯地址', trigger: ['blur', 'change'] }
        ],
        dzfpyx: [
          { validator: validatePass, trigger: ['blur', 'change'] }
        ],
        nsrsbh: [
          { required: true, message: '请填写纳税人识别号', trigger: ['blur', 'change'] }
        ]
      },
      options: [],
      options2: [],
      type: false,
      type2: false
    }
  },
  created() {
    this.form = this.$store.getters.userInfo
  },
  methods: {
    searchEmail(e) {
      if (e.includes('@') == false) {
        this.type = false
        this.options = [
          {
            value: e + '@163.com',
            label: e + '@163.com'
          },
          {
            value: e + '@126.com',
            label: e + '@126.com'
          },
          {
            value: e + '@yeah.net',
            label: e + '@yeah.net'
          },
          {
            value: e + '@qq.com',
            label: e + '@qq.com'
          },
          {
            value: e + '@gmail.com',
            label: e + '@gmail.com'
          },
          {
            value: e + '@outlook.com',
            label: e + '@outlook.com'
          },
        ]
      } else {
        this.type = true
        this.options = []
      }
    },
    searchEmail2(e) {
      if (e.includes('@') == false) {
        this.type2 = false
        this.options2 = [
          {
            value: e + '@163.com',
            label: e + '@163.com'
          },
          {
            value: e + '@126.com',
            label: e + '@126.com'
          },
          {
            value: e + '@yeah.net',
            label: e + '@yeah.net'
          },
          {
            value: e + '@qq.com',
            label: e + '@qq.com'
          },
          {
            value: e + '@gmail.com',
            label: e + '@gmail.com'
          },
          {
            value: e + '@outlook.com',
            label: e + '@outlook.com'
          },
        ]
      } else {
        this.type2 = true
        this.options2 = []
      }
    },
    //保存企业信息
    saveInfo() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          saveQyInfo(this.form).then(res => {
			  this.$message({
				  type:"success",
				  message:"保存成功"
			  })
            this.$store.dispatch('GetInfo')
          })
        } else {

        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-descriptions-item__label {
  text-align: center !important;

}

::v-deep .el-form-item {
  margin-bottom: 8px !important;
  margin-top: 0px !important;
}
</style>
