<style scoped>
  .instMg .query_box_top {
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .instMg .query_box_bottom {
    margin-top: 20px;
    display: flex;
    align-items: center
  }

  /* .instMg .avatar-uploader-icon {font-size: 28px;color:white;width: 100px;height: 100px;line-height: 80px;text-align: center;position: absolute;left: 0;top: 0;background:rgba(0,0,0,0.5);} */
  .instMg .avatar {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0
  }

  .avatar-uploader {
    width: 156px;
    border-radius: 4px;
    height: 34px;
    line-height: 34px;
    color: #666666;
    font-size: 12px;
    text-align: center;
    overflow: hidden;
  }

  .instMg .tips {
    width: 85px;
    color: #E95252;
    font-size: 12px;
    line-height: 20px;
    position: absolute;
    top: 30px;
    right: 90px;
  }

  .instMg .url .el-input__inner {
    border-radius: 0;
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px;
  }

  .instMg .el-input-group__prepend {
    border-top-left-radius: 17px;
    border-bottom-left-radius: 17px;
  }

  .instMg .query-box li label {
    display: inline-block;
    min-width: 80px;
    text-align: right;
    font-style: normal;
    margin: 0 20px 0 0;
  }

  .instMg .addCompany {
    width: 440px;
    max-height: 600px;
  }

  .instMg .addCompany .el-dialog__body {
    max-height: 486px;
    overflow: auto;
  }

  ._scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  ._scrollbar::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  ._scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #EDEDED;
  }

  .instMg ._vMG_edit {
    overflow: auto;
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: 'PingFangSc-Fine';
    border-top: 3px solid #38425d;
    background-color: #fff;
    padding: 10px;
    width: 100%;
    padding-right: 10px
  }

  .instMg ._vMG_edit ._tit {
    padding-left: 10px;
    border-left: 3px solid #E95252;
    font-size: 16px;
    color: #000000
  }

  .instMg ._vMG_edit ._tit span {
    color: #666666;
    font-size: 14px;
  }

  .cm_content {
    padding: 30px 0;
    overflow-x: auto;
  }

  ._edHeight {
    height: 400px;
  }

  .edHeight {
    display: block !important;
    height: 230px;
  }

  .instMg ._info_box ul {
    margin-top: 15px
  }

  .instMg ._info_box ul li {
    float: left;
  }

  .instMg_list_item {
    width: 212px;
    min-height: 175px;
    border-radius: 4px;
    border: 1px solid #ebebeb;
    float: left;
    background: rgba(255, 255, 255, 1);
    overflow: hidden;
    margin-right: 13px;
    margin-bottom: 15px;
  }

  .instMg_list_item:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  ._item_top {
    padding: 10px 0;
    border-bottom: 1px solid #EEEEEE;
    position: relative;
    text-align: center
  }

  ._item_top img._nom {
    height: 30px;
    width: 80%;
  }

  ._item_bt {
    padding: 15px 20px;
    cursor: pointer;
  }

  ._item_bt p._t {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666666;
    margin-bottom: 5px;
    padding-bottom: 15px
  }

  ._item_bt p._t span:nth-child(2)._PeopleNum {
    font-weight: bold;
    text-decoration: underline;
  }

  .instMg ._PeopleNum {
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
  }

  ._item_top ._n {
    padding: 5px;
    text-align: center;
  }

  ._item_top ._n span {
    display: inline-block;
    padding: 4px 10px;
    background-color: #2AAEF2;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 14px
  }

  ._item_top ._n span._ping {
    background-color: #47BF8C;
  }

  ._btn {
    padding: 0 30px;
    display: flex;
    justify-content: space-around;
  }

  ._btn span {
    display: inline-block;
    font-size: 12px;
    background-color: #E7E7E7;
    color: #333333;
    padding: 3px 8px;
    border-radius: 14px;
    cursor: pointer;
  }

  ._btn span:hover {
    background-color: #E95252;
    color: white
  }

  ._up_text {
    position: absolute;
    z-index: 10;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    height: 34px;
    background-color: rgba(243, 243, 243, 0.8);
  }

  ._tag {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 0;
    background-color: #47bf8c;
    color: white;
    font-size: 12px;
    padding: 2px 3px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  ._item_top .over_ellipsis {
    max-width: 100%;
  }

  .instMg .query-box {
    padding: 20px 0 0 0;
  }

  .instMg .po_content {
    border-collapse: collapse;
  }

  .instMg .po_content {
    width: 100%;
  }

  .instMg .po_content tr:first-child {
    font-size: 12px;
    color: #666666;
    background-color: #DCDCDC;
  }

  .instMg .po_content tr th,
  .instMg .po_content tr td {
    padding: 10px 20px;
    text-align: left;
  }

  .instMg .po_content tr td {
    color: #333333;
    font-size: 14px;
    border: 1px solid #E6E6E6;
  }

  .instMg .po_content tr td .iconfont {
    font-size: 14px;
    padding: 4px;
  }

  .instMg .query-box .iconfont {
    cursor: pointer;
    background-color: #E95252;
    color: white;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-left: 10px;
  }

  .instMg ._yuan {
    width: 12px;
    height: 12px;
    background: rgba(233, 82, 82, 1);
    border-radius: 50%;
    display: inline-block;
  }

  .instMg ._yuan._yuan_red {
    background: #47BF8C;
  }

  ._flex_rete {
    cursor: pointer;
  }

  .display_none {
    opacity: 0;
  }

  ._flex_rete .icon-qiehuan {
    background-color: #E5E5E5;
    color: white;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    padding: 0 !important;
    line-height: 20px;
    float: right;
  }

  ._flex_rete .icon-qiehuan:hover {
    background-color: rgba(233, 82, 82, 1);
    color: white;
  }

</style>
<template>
  <div class='flexOne instMg'>
    <div class='query-box'>
      <el-form label-width="110px">
        <el-row>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('system.table_jgName')">
              <el-input v-model="msg.Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('system.table_jgType')">
              <el-select filterable v-model='msg.Type'>
                <el-option :label='$t("pub.unlimitedSel")' value='-1'></el-option>
                <el-option v-for='item in departmentList' :label='item.Name' :value='item.Id' :key='item.Id'>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <ul>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')"
            @click="addShow=true,text=$t('pub.addBtn'),cancelEdit(),imageUrl=''" />
          <el-tooltip class="item" effect="dark" :content="$t('fnc.qhpaiban')" placement="top-end">
            <i v-if="transitionShow" class="iconfont icon-biaoge" @click="switchMethod(1)"></i>
            <i v-if="transitionShow2" class="iconfont icon-icon-ssan" @click="switchMethod(2)"></i>
          </el-tooltip>
        </li>
      </ul>
    </div>
    <div class="cm_content _scrollbar" :class="addShow==true?'_edHeight':''">
      <div class="clearfix" v-loading='loading' v-if="transitionShow">
        <div class="instMg_list_item" v-for="(item,index) in DataList">
          <div class="_item_top">
            <img v-if="!item.LogoStr" class="_nom" src="../../assets/img/bg_c1@2x.png" alt="">
            <img v-else style="height: 26px;display:inline-block" :src="item.LogoStr" alt="">
            <p class="_n ">
              <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start">
                <span class="over_ellipsis" :class="item.Type==1?'_ping':''">{{item.Name}}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="_item_bt">
            <p class="_t" @click="item.PeopleNum!=0?goUrl('AccountPageList',item.ID):''">
              <span>{{$t('insManage.im_acc')}}</span>
              <span class="PingFangSC _PeopleNum" v-if='item.PeopleNum!=0'>{{item.PeopleNum}}</span>
              <span class="PingFangSC" v-else>-</span>
            </p>
            <p class="_btn">
              <span class="_e"
                @click="editCurency(item.ID,item.LogoStr),text=$t('pub.updateMsg'),addShow=true">{{$t('pub.updateMsg')}}</span>
              <span class="_d" @click="financeinfoRemove(item.ID,item.Name)">{{$t('system.table_delete')}}</span>
            </p>
          </div>
        </div>
      </div>
      <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"
        v-if="transitionShow2" v-loading="loading">
        <tr>
          <th>{{$t('system.table_jgName')}}</th>
          <th>{{$t('system.table_jgCode')}}</th>
          <th>{{$t('system.table_jgType')}}</th>
          <th>{{$t('insManage.im_acc')}}</th>
          <th>{{$t('system.table_operation')}}</th>
        </tr>
        <tr v-for="(item,index) in DataList" :key="index">
          <td>{{item.Name}}</td>
          <td>{{item.EnCode}}</td>
          <td>{{item.TypeStr}}</td>
          <td><span class="PingFangSC _PeopleNum"
              @click="item.PeopleNum!=0?goUrl('AccountPageList',item.ID):''">{{item.PeopleNum}}</span></td>
          <td>
            <el-row>
              <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
                <el-button type="primary" class="iconfont icon-bianji-smal" circle
                  @click="editCurency(item.ID,item.LogoStr),text=$t('pub.updateMsg'),addShow=true"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
                <el-button type="danger" class="iconfont icon-img_delete_small" circle
                  @click="financeinfoRemove(item.ID,item.Name)"></el-button>
              </el-tooltip>
            </el-row>
          </td>
        </tr>
      </table>
      <div class="noData" v-show="noData">
        {{$t('system.content_noData')}}
      </div>
      <div>
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
          layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
        </el-pagination>
      </div>
    </div>
    <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
      <p class="_tit">{{text}}{{$t('fnc.jigou')}}</p>
      <el-form class="_info_box clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('system.table_jgName')" prop="Name">
              <el-input v-model="addMsg.Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('system.table_jgCode')" prop="EnCode">
              <el-input v-model="addMsg.EnCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('system.table_jgType')" prop="Type">
              <el-select filterable v-model='addMsg.Type'>
                <el-option v-for='item in departmentList' :label='item.Name' :value='item.Id' :key='item.Id'>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('system.table_icon')">
              <el-upload class="avatar-uploader" :http-request="UploadImage" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" style="height:34px" class="avatar">
                <p class="_up_text">
                  <i class="el-icon-plus"></i>
                  <span v-if="imageUrl" class="repUp">{{$t('system.up_againUp')}}</span>
                  <span v-else class="repUp">{{$t('system.up_upImg')}}</span>
                </p>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <ul class="clearfix" style="text-align: right;">
          <li class="_add_saveBtn" style="float: initial;">
            <button type="button" class="normalBtn" @click="submitForm('addMsg',1)">{{$t('pub.saveBtn')}}</button>
            <button class="hollowFixedBtn" type="button"
              @click="cancelEdit(),resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog custom-class='addCompany' :title="dialogTitle" :visible.sync="outerVisible" center
      :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <el-form-item :label="$t('system.table_jgName')" prop="Name">
          <el-input type="text" v-model="addMsg.Name" :placeholder="$t('system.ph_jgName')" class="w210"></el-input>
        </el-form-item>
        <el-form-item :label="$t('system.table_jgCode')" prop="Code">
          <el-input type="text" v-model="addMsg.Code" :placeholder="$t('system.ph_jgCode')" class="w210"></el-input>
        </el-form-item>
        <el-form-item :label="$t('system.table_Url')" class='url'>
          <el-input v-model="addMsg.Url" :placeholder="$t('system.ph_url')" class="w210">
            <template slot="prepend">Http://</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('system.table_logoImg')">

          <div class="tips">
            <!-- {{$t('system.up_tips')}} -->
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary"
          @click="submitForm('addMsg'),resetPageIndex()">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn"
          @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 15,
          Name: '',
          Type: '-1',
        },
        addMsg: {
          ID: 0,
          Name: '',
          EnCode: '',
          Logo: '',
          Type: ''
        },

        DataList: [],
        total: 0,
        currentPage: 1,
        loading: true,
        outerVisible: false,
        text: '',
        dialogTitle: '',
        departmentList: [],
        addShow: false,
        noData: false,
        imageUrl: '',
        rules: { //表单必填验证
          Name: [{
            required: true,
            message: this.$t('rule.qsrjgmingcheng'),
            trigger: 'blur'
          }],
          Type: [{
            required: true,
            message: this.$t('rule.sxzjgleixing'),
            trigger: 'change'
          }],
        },
        transitionShow: false,
        transitionShow2: true,
        contenWidth: 0,
        contenHeight: 0,
        tableSize: 0,
        blockSize: 0,
      }
    },
    created() {
      let allH, allW, cH, cW;
      allH = document.documentElement.clientHeight;
      allW = document.documentElement.clientWidth;
      cW = allW - 90;
      cH = allH - 320; //298 = 顶部导航 50 面包屑83 查询框75 table表头41 分页49
      this.contenWidth = cW;
      this.contenHeight = cH;
      this.tableSize = this.msg.pageSize = parseInt(cH / 45);
    },
    methods: {
      //上传图片
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/Temporary/";
        this.UploadSelfFileT(path, newArr, x => {
          this.imageUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.Logo = x.data.FilePath;
        });
      },
      switchMethod(t) {
        this.msg.pageIndex = 1;
        if (t === 1) {
          this.transitionShow = false;
          this.transitionShow2 = true;
          this.msg.pageSize = this.tableSize;
          this.getList();
        } else if (t === 2) {
          this.transitionShow = true;
          this.transitionShow2 = false;
          // 宽 220 高 153
          let cont = parseInt(this.contenWidth / 220) * parseInt(this.contenHeight / 153);
          this.msg.pageSize = cont;
          this.getList();
        }
      },
      editCurency(id, src) { //  修改根据ID 获取信息
        this.apipost('FinancialInstitutions_post_Get', {
          ID: id
        }, res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data
            this.addMsg = data
            this.imageUrl = src ? src : ''
          } else {
            this.tips(res.data.message, 'error');
          }
        }, err => {})
      },
      cancelEdit() { // 取消修改、新增
        this.addMsg = {
          ID: 0,
          Name: '',
          EnCode: '',
          Logo: '',
          Type: ''
        }
      },
      getDepartment() { //获取机构类型
        this.apipost('FinancialInstitutions_post_GetFinancialInstitutionsTypeList', {}, res => {
          if (res.data.resultCode == 1) {
            this.departmentList = res.data.data;
          }
        }, err => {})
      },
      getList() { //获取列表
        this.loading = true;
        this.DataList = [];
        this.apipost('FinancialInstitutions_post_GetPageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            if (this.total > 0) {
              this.noData = false;
            } else {
              this.noData = true;
            }
            this.DataList = res.data.data.pageData
            this.loading = false;
          }
        }, err => {})
      },
      addInstitutions() { // 保存 修改、新增
        this.apipost('FinancialInstitutions_post_Set', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.tips(this.$t('tips.saveYes'), 'success')
            this.getList();
            this.initAddMsg();
            this.imageUrl = '';
            this.addShow = false
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      financeinfoRemove(id, text) { //删除
        this.$confirm(this.$t('tips.qrsc') + text + '?', this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.deletInstitutions(id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('hotel.hotel_HasBeenCancelled')
          });
        });
      },
      deletInstitutions(id) {
        this.apipost('FinancialInstitutions_post_Remove', {
          ID: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.innerVisible = false;
            this.tips(this.$t('tips.shanchuchenggong'), 'success')
          } else {
            this.tips(res.data.message, 'error');
          }
          this.getList();
        }, err => {})
      },
      initAddMsg() { //初始化添加、修改数据
        let newMsg = {
          ID: 0,
          Name: '',
          Url: '',
          Code: ''
        }
        this.addMsg = newMsg;
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addInstitutions()
          } else {
            return false;
          }
        });
      },
      resetPageIndex() { //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      handleCurrentChange(val) { //翻页功能按钮
        this.msg.pageIndex = val;
        this.getList();
      },
      tips(msg, type) {
        this.$message({
          message: msg,
          duration: 2000,
          type: type
        });
      },
      closeChangeMachie(done) {
        done();
        this.resetForm('addMsg');
      },
      resetForm(formName) {
        this.initAddMsg();
        this.$refs[formName].resetFields();
        this.imageUrl = '';
      },
      handleAvatarSuccess(res, file) { //上传
        if (res.resultCode == 1) {
          var img_path = res.data.FullFilePath
          this.addMsg.Logo = res.data.FilePath
          this.imageUrl = img_path
        }
      },
      beforeAvatarUpload(file) { //上传-
        const extension = file.name.split(".")[1] === "jpg";
        const extension2 = file.name.split(".")[1] === "png";
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!extension && !extension2) {
          this.$message.error(thi.$t('tips.znsJPGPNGgs'))
        }
        if (!isLt2M) {
          this.$message.error(thi.$t('tips.wjdxbncgsz'))
        }
        return extension || (extension2 && isLt2M);
      },
      goUrl(path, id) {
        this.$router.push({
          name: path,
          query: {
            'BackId': id
          }
        })
      },
    },
    mounted() {
      this.getList();
      this.getDepartment()
    }
  }

</script>