<template>
  <div v-loading="loading" class="addContact">
    <div class="head-title">
      <span @click="CommonJump('contactus')" class="blue point">联系我们</span> / 编辑联系人
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:60%">
        <el-form-item label="姓名" prop="Name" class="is-required">
          <el-input v-model="addMsg.Name" placeholder="请输入姓名" size="small" maxlength="20" />
        </el-form-item>
        <el-form-item label="电话" class="is-required" prop="Tel">
          <el-input v-model="addMsg.Tel" placeholder="请输入联系电话" size="small" maxlength="20" />
        </el-form-item>
        <el-form-item label="职位" class="is-required" prop="Position">
          <el-input v-model="addMsg.Position" placeholder="请输入职位名称" size="small" maxlength="50" />
        </el-form-item>
        <el-form-item label="头像">
          <div>
            <el-tooltip class="item" effect="dark" content="建议尺寸:88*88" placement="top-start">
              <el-button size="small" @click="choicImg=true,chooseType=1">选择文件</el-button>
            </el-tooltip>
          </div>
          <div class="headerImg">
            <img v-if="addMsg.HeadIcon" :src="addMsg.HeadIcon" alt="" />
            <img v-else src="../../assets/img/default.png" alt="" />
          </div>
        </el-form-item>
        <el-form-item label="背景图">
          <div>
            <el-tooltip class="item" effect="dark" content="建议尺寸:88*88" placement="top-start">
              <el-button size="small" @click="choicImg=true,chooseType=2">选择文件</el-button>
            </el-tooltip>
          </div>
          <div class="headerImg">
            <img v-if="addMsg.BgImg" :src="addMsg.BgImg" alt="" />
            <img v-else src="../../assets/img/default.png" alt="" />
          </div>
        </el-form-item>
        <el-form-item label="介绍">
          <UE style="width:750px;" :defaultMsg="defaultMsg" :config="config" :IsMultiple="true" ref="ue"></UE>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import UE from "@/components/global/UE.vue";
  export default {
    components: {
      UE,
      ChooseImg
    },
    data() {
      return {
        rules: {
          Name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          Tel: [{
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          }],
          Position: [{
            required: true,
            message: '请输入职位',
            trigger: 'blur'
          }]
        },
        defaultMsg: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 250
        },
        choicImg: false, //是否显示选择文件
        chooseType: 1, //选择类型1-头像，2-背景图
        loading: false,
        addMsg: {
          Id: 0, //编号
          Name: "", //姓名
          Tel: "", //电话
          HeadIcon: "", //头像
          BgImg: "", //背景图
          Position: "", //职位
          Intro: "", //介绍
        }
      };
    },
    created() {
      if (this.$route.query.Id) {
        this.addMsg.Id = this.$route.query.Id;
        this.getData(this.addMsg.Id)
      }
    },
    methods: {
      SelectId(msg) {
        this.choicImg = false;
        if (this.chooseType == 1) {
          this.addMsg.HeadIcon = this.getIconLink(msg.url);
        } else {
          this.addMsg.BgImg = this.getIconLink(msg.url);
        }
      },
      Save(formName) {
        let content = this.$refs.ue.getUEContent();
        this.addMsg.Intro = content;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost("/api/Trade/SetContract", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('contactus');
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      getData(ID) {
        this.loading = true;
        this.apipost("/api/Trade/GetContract", {
          Id: ID
        }, res => {
          this.loading = false;
          if (res.data.data) {
            var tempData = res.data.data;
            this.addMsg.Id = tempData.Id;
            this.addMsg.Name = tempData.Name;
            this.addMsg.Tel = tempData.Tel;
            this.addMsg.HeadIcon = tempData.HeadIcon;
            this.addMsg.BgImg = tempData.BgImg;
            this.addMsg.Position = tempData.Position;
            this.addMsg.Intro = tempData.Intro;
            if (tempData.Intro) {
              this.defaultMsg = tempData.Intro;
            }
          }
        })
      },
    },
    mounted() {}
  };

</script>
<style>
  .addContact .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
  }

  .addContact .app-image {
    background-size: cover;
    background-position: center center;
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .addContact .setTable .el-table__body .cell {
    display: flex;
    align-items: center;

  }

  .addContact .commonLabel .el-form-item__label {
    margin-top: -4px;
  }

  .addContact .discount .el-form-item__label {
    padding-right: 30px;
    margin-top: -4px;
  }

  .addContact .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
  }

  .addContact .el-form-item {
    position: relative;
  }

  .addContact .blue {
    color: #409EFF;

  }

  .addContact .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .addContact .gez_list {
    width: 650px;
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

  }

  .addContact .quyu {
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 5px;
  }

  .addContact .imgstyle {
    width: 32px;
    height: 32px;
    margin: 0 5px;
  }

  .addContact .headerImg {
    width: 80px;
    height: 80px;
  }

  .addContact .headerImg img {
    width: 100%;
    height: 100%;
  }

</style>
