<!-- 公司信息 -->
<template>
  <div class="main-content" v-loading="loadingFlag">
    <!--左侧树-->
    <div class="box-left">
      <yh-tree
        ref="tree"
        :show="show"
        @treeClick="treeClick"
        @treeMsg="treeMsg"
      />
    </div>
    <!--2.列表显示-->
    <div class="box-right">
      <div class="label-box">
        <span class="label-title">公司信息设置</span>
        <div class="button-float">
          <el-button type="primary" @click="saveDate">保存</el-button>
        </div>
      </div>
      <div class="two-form">
        <el-form
          ref="companyInfoList"
          :rules="companyInfoRules"
          :model="companyInfoList"
        >
          <el-form-item label="公司名称" prop="compName">
            <el-input
              clearable
              v-model="companyInfoList.compName"
              maxlength="100"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="公司简称" prop="compSimpleName">
            <el-input
              clearable
              v-model="companyInfoList.compSimpleName"
              maxlength="100"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="公司英文名称">
            <el-input
              clearable
              v-model="companyInfoList.compNameEn"
              maxlength="100"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="公司类型" prop="compTypeKey">
            <el-select
              v-model="companyInfoList.compTypeKey"
              placeholder="请选择"
            >
              <el-option
                v-for="item in compTypeList"
                :key="item.constKey"
                :label="item.constValue"
                :value="item.constKey"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="组织本币" prop="organizationMonetaryKey">
            <el-select
              v-model="companyInfoList.organizationMonetaryKey"
              placeholder="请选择"
            >
              <el-option
                v-for="item in curyencyList"
                :key="item.parameterKey"
                :label="item.parameterValue"
                :value="item.parameterKey"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input
              clearable
              v-model="companyInfoList.compLinkman"
              maxlength="20"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="联系电话" prop="compTel">
            <el-input
              clearable
              v-model="companyInfoList.compTel"
              maxlength="100"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="法人">
            <el-input
              clearable
              v-model="companyInfoList.compRepresentative"
              maxlength="20"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="电子邮箱" prop="compMail">
            <el-input
              clearable
              v-model="companyInfoList.compMail"
              maxlength="100"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="邮政编码" prop="compPostcode">
            <el-input
              clearable
              v-model="companyInfoList.compPostcode"
              maxlength="100"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="传真">
            <el-input
              clearable
              v-model="companyInfoList.compFax"
              maxlength="50"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input
              clearable
              v-model="companyInfoList.compAddress"
              maxlength="100"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="uphead">
        <span class="logo-title">公司logo上传</span>
        <img :src="companyInfoList.compHeadimg" class="img" />
        <input
          type="file"
          class="kyc-passin"
          @change="uploadPhotoLocal($event)"
        />
        <span class="talk"
          >建议上传图像尺寸为640*640，大小不能超过1M视觉元素保持在方形区域内</span
        >
        <span class="lookImg" @click="showLogo = true">效果预览</span>
      </div>
      <el-dialog
        title="企业logo效果"
        :visible.sync="showLogo"
        width="637px"
        center
      >
        <div class="show-logo">
          <span class="setBefore">
            <div class="setTitle">
              <span>设置前</span>
            </div>
            <div class="img1">
              <img :src="url" class="imgshow" />
            </div>
            <span class="text"></span>
          </span>
          <span class="setAfter">
            <div class="setTitle">
              <span>设置后</span>
            </div>
            <div class="img1 imgRight">
              <img :src="companyInfoList.compHeadimg" class="imgshow" />
            </div>
            <span class="text">登录到平台后，左上角会显示企业自定义的logo</span>
          </span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import yhTree from "../../views/companyInfo/tree";
import {
  getOssInterimCredentials,
  GotOssAccessConfig,
  uploadShipFiles
} from "../../api/upload";
import { client } from "../../utils/alioss";
import {
  companyInfo,
  changeInfo,
  getSystemConsts
} from "../../api/companyInfo";

import { validEmail, isNumber } from "@/utils/validate.js";

export default {
  name: "companyInfoIndex",
  components: {
    yhTree
  },
  data() {
    const checkNumber = (rule, value, callback) => {
      if (value)
        if (!isNumber(value)) {
          callback(this.$message.error("输入格式不正确"));
          return;
        } else {
          callback();
          return;
        }
      callback();
    };
    const checkEmail = (rule, value, callback) => {
      if (value)
        if (!validEmail(value)) {
          callback(
            this.$message({
              message: "邮箱格式不正确！",
              type: "error"
            })
          );
          return;
        } else {
          callback();
          return;
        }
      callback();
    };
    const checkEnglish = (rule, value, callback) => {
      if (value) {
        callback();
      }
      // if (!isEnglish(value)) {
      //   callback(this.$message.error('请输入英文！'));
      //   return;
      // } else {
      //   callback();
      //   return;
      // }
    };
    return {
      treeComp: {},
      showLogo: false,
      newAddMan: false,
      loadingFlag: false,
      companyInfoList: {},
      companyInfoRules: {
        compNameEn: [{ trigger: "blur", validator: checkEnglish }],
        compMail: [{ trigger: "blur", validator: checkEmail }],
        compTel: [{ trigger: "blur", validator: checkNumber }],
        compPostcode: [{ trigger: "blur", validator: checkNumber }],
        compName: [{ required: true, trigger: "blur" }],
        compSimpleName: [{ required: true, trigger: "blur" }],
        compTypeKey: [{ required: true, trigger: "change" }],
        organizationMonetaryKey: [{ required: true, trigger: "change" }]
      },
      url: "",
      title: "",
      deptId: "",
      compId: localStorage.getItem("enterprise-front-companyId"),
      checklist: [],
      list: false,
      headState: "/organization",
      setUpTheDepartment: false,
      /* 更改部门弹窗 */
      selectradio: "",
      selectradioname: "",
      msg1: false,
      msg: false,
      msg2: false,
      msg3: false, // 查看禁用成员
      centerDialogVisible: false,
      /* 添加部门弹窗 */
      memberList: [],
      tabelselection: [],
      tabellist: {
        staffIds: []
      },
      listdata: "",
      delateid: [],
      editmsg: "",
      lcdmsg: "",
      lable: [
        {
          lab: "编辑",
          click: "skip1"
        },
        {
          lab: "删除",
          click: "delate"
        }
      ],
      data: [],
      curyencyList: [],
      addSection: {
        compId: this.compId,
        deptName: "",
        parentDeptId: ""
      },

      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      show: "",
      treeCompId: ""
    };
  },
  watch: {
    $route() {
      // this.treeClick(this.listdata, 1);
    }
  },
  computed: {
    compTypeList() {
      return [
        {
          constValue: "船东及船管",
          constKey: "1"
        },
        {
          constValue: "船东",
          constKey: "2"
        },
        {
          constValue: "船管",
          constKey: "3"
        }
      ];
    }
  },
  created() {
    this.basicInfo();
  },
  methods: {
    async basicInfo() {
      this.curyencyList = await getSystemConsts({
        compId: localStorage.getItem("enterprise-front-companyId"),
        constCode: "CURRENCY"
      });
    },
    getTreeList() {
      this.$refs.tree.getList();
    },
    getSelectLabel() {
      this.companyInfoList.organizationMonetaryValue = this.curyencyList.find(
        item =>
          item.parameterKey === this.companyInfoList.organizationMonetaryKey
      ).parameterValue;

      this.companyInfoList.compTypeValue = this.compTypeList.find(
        item => item.constKey === this.companyInfoList.compTypeKey
      ).constValue;
    },
    // 保存
    saveDate() {
      this.$refs.companyInfoList.validate(valid => {
        if (valid) {
          this.loadingFlag = true;
          this.getSelectLabel();
          changeInfo(this.companyInfoList)
            .then(() => {
              this.loadingFlag = false;
              this.getTitleList(this.treeComp.compId);
              this.$message({
                message: "保存成功",
                type: "success",
                showClose: true
              });
              this.treeComp.compName = this.companyInfoList.compName;
            })
            .catch(() => {
              this.loadingFlag = false;
            });
        } else {
          this.$message({
            message: "带*号的为必填项！",
            type: "error"
          });
          return false;
        }
      });
    },
    uploadPhotoLocal(param) {
      const file = param.target.files[0];
      uploadShipFiles(file, {
        companyId: this.compId || "",
        modelId: ""
      }).then(response => {
        this.companyInfoList.compHeadimg =
          this.$store.getters.baseInfo.fileUrl + response.appendixPath;
        this.$message({
          type: "success",
          message: "上传公司logo成功！",
          showClose: true
        });
      });
    },
    // 上传头像
    uploadPhoto(e) {
      let ossInter = null;
      let ossAccessConfig = null;
      let fileName = null;
      const fileTypes = [".jpg", ".png"];
      const filePath = e.target.value;
      if (filePath) {
        let isNext = false;
        const fileEnd = filePath.substring(filePath.indexOf("."));
        for (let i = 0; i < fileTypes.length; i++) {
          if (fileTypes[i] === fileEnd) {
            isNext = true;
            break;
          }
        }
        if (!isNext) {
          this.$message({
            message: "不接受此类型文件",
            type: "error",
            showClose: true
          });
          e.target.value = "";
          return false;
        }
      } else {
        return false;
      }
      const file = e.target.files[0];
      const filesize = file.size;

      fileName = file.name;
      if (filesize > 1048576) {
        this.$message({
          type: "error",
          message: "图片大于1M",
          showClose: true
        });
        return false;
      }
      getOssInterimCredentials().then(response => {
        ossInter = response;
        GotOssAccessConfig().then(res => {
          ossAccessConfig = res;

          client(ossInter, ossAccessConfig)
            .put(fileName, file)
            .then(result => {
              this.companyInfoList.compHeadimg = result.url;
              this.$message({
                type: "success",
                message: "上传公司logo成功！",
                showClose: true
              });
            });
        });
      });
    },
    // 根据公司id或子公司的id 获取页面详情
    getTitleList(treeCompId) {
      companyInfo({
        compId: treeCompId
      }).then(response => {
        this.companyInfoList = response;
        if (this.companyInfoList.compHeadimg) {
          this.url = this.companyInfoList.compHeadimg;
        } else {
          this.companyInfoList.compHeadimg =
            "http://winsea-saas-test.oss-cn-shanghai.aliyuncs.com/default-logo.png";
        }
        localStorage.setItem(
          "enterprise-front-companyLogo",
          this.companyInfoList.compHeadimg
        );
        this.$store.commit("user/SET_LOGO", this.companyInfoList.compHeadimg);
        this.$refs.companyInfoList.resetFields();
      });
    },
    // 页面加载后传递tree的信息判断页面展示内容
    treeMsg(treeMsg) {
      this.treeCompId = treeMsg[0].compId;
      this.treeComp.compId = treeMsg[0].compId;
      this.getTitleList(this.treeCompId);
    },
    // 点击树 渲染右侧数据
    treeClick(data) {
      this.treeComp = data;
      this.getTitleList(data.compId);
    }
  }
};
</script>
<style scoped lang="scss">
// logo 预览样式
.show-logo {
  .setBefore,
  .setAfter {
    display: inline-block;
  }
  .setAfter {
    float: right;
    right: 20px;
    border-left: 1px dashed #cccccc;
    padding-left: 15px;
  }
  .setTitle {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #666666;
  }
  .img1 {
    position: relative;
    margin: 10px 0;
    width: 278px;
    height: 135px;
    background-image: url("../../static/images/components/businessSettings/logoimg.png");
    border: 1px solid #999999;
  }
  .text {
    display: inline-block;
    font-size: 12px;
    color: #666666;
  }
  .imgshow {
    position: absolute;
    top: 3px;
    left: 3px;
    background-color: #666666;
    width: 23px;
    height: 23px;
    border-radius: 4px;
  }
}
// 企业logo
.uphead {
  margin: 20px 0;
  height: 60px;
  line-height: 60px;
  .logo-title {
    font-size: 14px;
    color: #333;
    padding-right: 6px;
    width: 103px;
    display: inline-block;
    text-align: right;
  }
  .img {
    display: inline-block;
    height: 60px;
    width: 60px;
    border-radius: 8px;
  }
  .lookImg {
    color: #1d6ced;
    display: inline-block;
    margin-left: 30px;
    cursor: pointer;
    font-size: 13px;
  }
  .kyc-passin {
    margin-left: 20px;
    width: 170px;
  }
  .talk {
    font-size: 12px;
    color: #999999;
  }
}
</style>
