<style scoped>
   @import "css/cssReset.css";
  .AccountType .addCompany {
    width: 440px;
  }

  /* 币种管理 */
  .cm_content {
    overflow-x: auto;
  }

  .cmc_item {
    float: left;
    width: 205px;
    height: auto;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    overflow: hidden;
    margin: 15px 15px 15px 0;
    border: 1px solid #ebebeb;
    position: relative;
  }

  .cmci_top {
    background-color: #47BF8C;
    padding: 14px 20px 0 20px;
    font-size: 14px;
    color: #FFFFFF;
    position: relative;
  }

  .cmci_top p._tit {
    border-bottom: 1px solid #3FB382;
    padding-bottom: 14px;
    text-align: center;
  }

  .fc_red {
    color: #E95252 !important
  }

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

  ._underline {
    text-decoration: underline;
    cursor: pointer;
  }

  .AccountType ._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;
    margin: 15px;
    width: calc(100% - 30px);
  }

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

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

  ._edHeight {
    height: 540px;
  }

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

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

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

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

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

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

  ._max_width {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: top;
  }

  .cmci_cen p._t span:nth-child(2) {
    font-weight: bold
  }

  .cmci_cen {
    padding: 30px 20px 20px 20px
  }

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

  .cmci_cen p .PingFangSC {
    color: #333333;
    font-size: 14px;
  }

  ._btn {
    padding: 20px 30px 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
  }

  ._addbox {
    width: 203px;
    height: 193px;
    background-color: #E9E9E9;
    font-size: 14px;
    color: #666666;
    text-align: center;
    padding-top: 60px;
    cursor: pointer;
  }

  ._addbox .iconfont {
    font-size: 48px;
    color: #D1D1D1;
  }

  ._gongsi {
    position: absolute;
    right: 20px;
    top: 5px
  }

  ._cup {
    cursor: pointer;
  }

  .AccountType .query-box .iconfont {
    cursor: pointer;
    background-color: var(--q-color-primary);
    color: white;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-left: 10px;
  }

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

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

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

  .AccountType .po_content {
    width: 100%;
  }

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

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

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

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

  ._underline {
    text-decoration: underline;
    cursor: pointer;
  }

</style>
<template>
  <div class="flexOne AccountType page-body">
    <div class="query-box">
      <ul>
        <li>
          <!-- <button v-if="transitionShow2" class="normalBtn"
            @click="addShow=true,text=$t('pub.addBtn')">{{$t('pub.addBtn')}}</button> -->
          <q-btn color="primary" size="11px" :label="$t('pub.addBtn')" @click="addShow=true,text=$t('pub.addBtn')"/>
          <el-tooltip class="item" effect="dark" :content="$t('pub.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-if="transitionShow" v-loading='loading'>
        <div class="cmc_item" v-for="(item,index) in tableInfo" :key="index">
          <div class="cmci_top">
            <p class="_tit">
              <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start">
                <span class="_max_width">{{item.Name}}</span>
              </el-tooltip>
            </p>
            <img v-if="item.IsPublic==1" class="_gongsi" src="../financial/image/gong.png" alt="">
            <img v-if="item.IsPublic==0" class="_gongsi" src="../financial/image/si.png" alt="">
          </div>
          <div class="cmci_cen">
            <p class="_t _cup" @click="item.PeopleNum!=0?goUrl('AccountPageList',item.ID):''">
              <span>{{$t('fnc.glzhangu')}}</span>
              <span class="PingFangSC _underline" v-if='item.PeopleNum!=0'>{{item.PeopleNum}}个</span>
              <span class="PingFangSC" v-else>-</span>
            </p>
            <p class="_t"><span>{{$t('fnc.xnleixing')}}</span><span
                v-if="item.IsVirtual==0">{{$t('fnc.fou')}}</span><span v-if="item.IsVirtual==1">{{$t('fnc.yes')}}</span>
            </p>
            <p class="_btn">
              <span class="_e"
                @click="editCurency(item.ID),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 class="cmc_item _addbox" @click="addShow=true,text=$t('pub.addBtn')">
          <p><i class="iconfont icon-img_haha"></i></p>
          <p>{{$t('fnc.tjzhanghu')}}</p>
        </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('fnc.zhanghuleixing')}}</th>
          <th>{{$t('fnc.glzhangu')}}</th>
          <th>{{$t('fnc.sfduigong')}}</th>
          <th>{{$t('fnc.xnleixing')}}</th>
          <th>{{$t('system.table_operation')}}</th>
        </tr>
        <tr v-for="(item,index) in tableInfo" :key="index">
          <td>{{item.Name}}</td>
          <td> <span class="PingFangSC _underline"
              @click="item.PeopleNum!=0?goUrl('AccountPageList',item.ID):''">{{item.PeopleNum}}</span></td>
          <td>
            <span class="_yuan" v-if="item.IsPublic==0"></span>
            <span class="_yuan _yuan_red" v-if="item.IsPublic==1"></span>
          </td>
          <td>
            <span class="_yuan" v-if="item.IsVirtual==0"></span>
            <span class="_yuan _yuan_red" v-if="item.IsVirtual==1"></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),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.zhanghuleixing')}}</p>
      <el-form class="_info_box clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
        <ul class="clearfix">
          <li>
            <el-form-item :label="$t('fnc.Name')" prop="Name">
              <el-input v-model="addMsg.Name" class="w135"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('fnc.sybumen')">
              <!--<el-select filterable   v-model='addMsg.DepartmentID' @change="getPostList()">-->
              <el-select filterable multiple v-model='RangeIdsList' @change="changeRange">
                <el-option :label="$t('active.cl_tongyong')" :value='-1'></el-option>
                <el-option v-for='item in departmentList' :label='item.DeptName' :value='item.DeptId'
                  :key='item.DeptId' :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('fnc.sfduigong')+'：'" class='w150' prop="IsPublic">
              <el-switch v-model="addMsg.IsPublic" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('fnc.xnleixing')+'：'" class='w150' prop="IsVirtual">
              <el-switch v-model="addMsg.IsVirtual" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
          </li>
        </ul>
      </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> -->
            <q-btn color="primary" size="11px" :label="$t('pub.saveBtn')" @click="submitForm('addMsg',1)" style="marginRight:10px"/>
            <!-- <button class="hollowFixedBtn" type="button"
              @click="cancelEdit(),resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button> -->
            <q-btn text-color="primary" size="11px" :label="$t('pub.cancelBtn')" @click="cancelEdit(),resetForm('addMsg')"/>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getDeptPage,
  } from '../../api/system/dept'

  export default {
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 14,
        },
        addMsg: {
          ID: 0,
          Name: '',
          IsVirtual: '0', // 0-否  1-是
          IsPublic: '0', // 0-否  1-是
          RangeIds: ''
        },
        RangeIdsList: [-1],
        text: '',
        total: 0,
        currentPage: 1,
        loading: true,
        airlineList: '',
        tableInfo: '',
        addShow: false,
        noData: false,
        dialogTitle: '',
        deleteID: '',
        ProfitLossList: [],
        departmentList: [],
        showBtnID: -1,
        pickerOptions1: {
          disabledDate(time) {
            //  return time.getTime()==time.getTime();
          }
        },
        departmentMsg: {
          RB_Group_Id: '0',
          RB_Branch_Id: '-1',
          Status: '0',
          ParentId: '-1',
          Tier: '0',
        },
        rules: { //表单必填验证
          Name: [{
            required: true,
            message: this.$t('rule.qtxzhmingcheng'),
            trigger: 'blur'
          }],
          DepartIDsArr: [{
            required: true,
            message: this.$t('fnc.qxzsybumen'),
            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 - 236; //255 = 顶部导航 50 面包屑21 查询框75 table表头41 分页49
      this.contenWidth = cW;
      this.contenHeight = cH;
      this.tableSize = this.msg.pageSize = parseInt(cH / 40) - 1;
    },
    methods: {
      changeRange: function (val) {
        let tongY = false;
        val.forEach(x => {
          if (x === -1) {
            tongY = true;
            this.RangeIdsList = [];
            this.RangeIdsList.push(x);
          }
        })
        if (tongY) {
          this.departmentList.forEach(x => {
            x.disabled = true;
          })
        } else {
          this.departmentList.forEach(x => {
            x.disabled = false;
          })
        }
      },
      switchMethod(t) {
        this.msg.pageIndex = 1;
        if (t === 1) {
          this.transitionShow = false;
          this.transitionShow2 = true;
          this.msg.pageSize = this.tableSize;
          this.initTableInfo();
        } else if (t === 2) {
          this.transitionShow = true;
          this.transitionShow2 = false;
          // 宽 205 高 193
          let cont = parseInt(this.contenWidth / 205) * parseInt(this.contenHeight / 193);
          this.msg.pageSize = cont - 1;
          this.initTableInfo();
        }
      },
      getDepartment() { //获取部门
         var msg = {
          pageIndex: 1,
          pageSize: 999,
          rowsPerPage: 12,
          DeptName: "", //部门名称
          DeptId: 0, //部门编号
          Status: "-1",
          School_Id: "0",
          DeptTier: "0",
          ParentId: "0",
        }
        getDeptPage(msg).then(res => {
          this.departmentList = res.Data.PageData;
          this.departmentList.forEach(x=>{
            x.disabled = true;
          })
        }).catch(() => {

        })
      },
      getProfitLossList(id) { // 获取禁用时间
        this.apipost('FinanceInfo_post_GetProfitLossList', {
          CurrencyId: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.ProfitLossList = res.data.data
            // new Date(this.ProfitLossList[0].TermNum).getTime()
          } else {
            this.tips(res.data.message, 'error');
          }
        }, err => {})
      },
      regNum(n, t) { // 判断数字    n 值 t 类型
        let reg = /^\d+(\.\d{0,6})?$/
        if (!n) return 0
        if (t == 2) {
          if (reg.test(n)) {
            return Number(n)
          }
          return 0;
        } else if (t == 1) {
          if (reg.test(n)) {
            return Number(n)
          }
          return 0
        }
      },
      financeinfoRemove(id, text) { // 删除
        this.$confirm(this.$t('tips.qrsc') + text + this.$t('tips.feiyongleixing'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost('AccountType_post_Remove', {
            ID: id
          }, res => {
            if (res.data.resultCode == 1) {
              this.initTableInfo()
              this.tips(res.data.message, 'success');
            } else {
              this.tips(res.data.message, 'error');
            }
          }, err => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('hotel.hotel_HasBeenCancelled')
          });
        });
      },
      editCurency(id) { //  修改根据ID 获取信息
        this.apipost('AccountType_post_Get', {
          ID: id
        }, res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data
            data.IsPublic = data.IsPublic.toString()
            data.IsVirtual = data.IsVirtual.toString()
            this.RangeIdsList = [];
            if (data.RangeIds !== '') {
              let RangeIdsList = data.RangeIds.split(',')
              RangeIdsList.forEach(x => {
                this.RangeIdsList.push(parseInt(x))
              })
              if (this.RangeIdsList[0] === -1) {
                this.departmentList.forEach(x => {
                  x.disabled = true;
                })
              } else {
                this.departmentList.forEach(x => {
                  x.disabled = false;
                })
              }
            }
            this.addMsg = data
          } else {
            this.tips(res.data.message, 'error');
          }
        }, err => {})
      },
      cancelEdit() { // 取消修改、新增
        this.addMsg = {
          ID: 0,
          Name: '',
          IsVirtual: '0', // 0-否  1-是
          IsPublic: '0', // 0-否  1-是
          RangeIds: ''
        }
        this.RangeIdsList = [];
        this.addShow = false
      },
      initTableInfo() { //获取数据
        this.tableInfo = [];
        this.loading = true;
        this.apipost('AccountType_post_GetPageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.tableInfo = res.data.data.pageData;
            this.total = res.data.data.count;
            if (this.total > 0) {
              this.noData = false;
            } else {
              this.noData = true;
            }
            this.loading = false;
          } else {
            this.tips(res.data.message, 'error');
            this.loading = false;
          }
        }, err => {})
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.initTableInfo();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      addFlightmodule() { //添加
        this.addMsg.RangeIds = ''
        this.RangeIdsList.forEach((x, index) => {
          this.addMsg.RangeIds = this.addMsg.RangeIds + x + ((index === this.RangeIdsList.length - 1) ? '' : ',');
        })
        this.apipost('AccountType_post_Set', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.tips(res.data.message, 'success');
            this.initTableInfo();
            this.cancelEdit()
            this.addShow = false
          } else {
            this.tips(res.data.message, 'error');
          }
          this.RangeIdsList = [];
        }, err => {})
      },
      updateInfo(ID) { //修改模板信息
        let msg = {
          ID: ID
        }
        this.apipost('currency_get_Get', msg, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
          } else {

          }
        }, err => {})
      },
      isdelete(ID) {
        this.deleteID = ID;
        this.$confirm(this.$t('tips.shifoushanchu'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: this.$t('tips.shanchuchenggong')
          });
          this.delInfo();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('hotel.hotel_HasBeenCancelled')
          });
        });
      },
      delInfo() {
        let msg = {
          ID: this.deleteID
        }
        this.apipost('currency_post_Remove', msg, res => {
          if (res.data.resultCode == 1) {
            this.tips(this.$t('tips.shanchuchenggong'), 'success');
            this.innerVisible = false;
            this.initTableInfo();
          } else {
            this.tips(this.$t('tips.shanchushibai'), 'success');
          }
        }, err => {})
      },
      submitForm(addMsg, type) { //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate((valid) => {
          if (valid) {
            if (type == 1) {
              that.addFlightmodule()
            }
          } else {
            return false;
          }
        });
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
      },
      tips(msg, type) {
        this.$message({
          message: msg,
          duration: 2000,
          type: type
        });
      },
      goUrl(path, id) {
        var tempStr = '/financial/' + path  +'?TypeId='+id;
        this.$router.push({
          path: tempStr
        });
      }
    },
    mounted() {
      this.initTableInfo();
      let userInfo = this.getLocalStorage();
      this.departmentMsg.RB_Group_Id = userInfo.RB_Group_id; //集团
      this.getDepartment();
    }
  }

</script>
