<style scoped>
  @import "../css/cssReset.css";

  .CostType .addCompany {
    width: 440px;
  }

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

  .cmc_item {
    float: left;
    width: 205px;
    height: 123px;
    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
  }

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

  .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;
  }

  .CostType ._vMG_edit {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: 'PingFangSc-Fine';
    border-top: 3px solid #38425d;
    background-color: #fff;
    padding: 10px;
    z-index: 999;
    margin: 15px;
    width: calc(100% - 30px);
  }

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

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

  ._edHeight {
    height: 400px;
  }

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

  ._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;
  }

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

  .CostType ._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;
  }

  ._bumen {
    padding: 20px 0;
    text-align: left;
    height: 75px;
  }

  ._bumen p:nth-child(1) {
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  ._bumen p.no_bumen {
    font-size: 12px;
    color: #ADE4CD
  }

  ._b_edit {
    position: absolute;
    right: 20px;
    top: 13px;
    z-index: 100;
    width: 32%;
    height: 35%;
    border-radius: 4px;
    text-align: right;
    opacity: 0;
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
  }

  ._b_edit .el-button--danger {
    background-color: rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    border: none
  }

  ._b_edit .el-button--primary {
    background: rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    border: none
  }

  ._b_edit .el-button--danger:hover,
  ._b_edit .el-button--primary:hover {
    background-color: #FFFFFF;
    color: #E95252
  }

  ._bumen:hover ._b_edit {
    opacity: 1;
  }

  .multiple_input .el-input {
    height: auto !important;
  }

  ._cmci_img {
    width: 48px;
    height: 48px;
    position: absolute;
    right: 15px;
    top: 30px;
  }

  .upload-demo {
    text-align: center;
  }

  .CostType ._add_saveBtn {
    text-align: right;
    margin-bottom: 20px;
  }

  .CostType .query-box {
    padding: 20px 0 0 0
  }

  .CostType .el-radio+.el-radio {
    margin-left: 15px;
  }

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

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

  .CostType .po_content,
  .CostType .po_content_item {
    border-collapse: collapse;
  }

  .CostType .po_content {
    width: 100%;
  }

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

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

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

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

  .CostType .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;
  }

  .po_content_item tr td:last-child {
    border-right: 0px !important;
  }

  .po_content_item_str tr:first-child td,
  .po_content_item_two tr:first-child td {
    border-top: 0px !important;
  }

  .po_content_item_str tr:last-child td,
  .po_content_item_two tr:last-child td {
    border-bottom: 0px !important;
  }

  .po_content_item_str tr td:first-child,
  .po_content_item_two tr td:first-child {
    border-left: 0px !important;
  }

  .cursorpointer_last:hover i {
    display: inline-block;
    margin-left: 10px;
  }

  .cursorpointer_last i {
    color: red;
    display: none;
  }

  .ct_Edit {
    position: absolute;
    right: 10px;
    top: 5px;
    color: #fff;
    cursor: pointer;
    z-index: 999;
  }

  .ct_Edit:hover {
    color: #E95252;
  }

  .cm_content._scrollbar {
    max-height: calc(100%-200px) !important;
  }

</style>
<template>
  <div class="flexOne currentManage page-body">
    <div class="query-box" style="display: flex;justify-content: space-between;border-bottom:0">
      <div>
        校区：
        <el-select filterable v-model='msg.BranchId' @change="getList">
          <el-option label="不限" value="0"></el-option>
          <el-option v-for="(item,index) in TheAliasList" :label="item.Name" :value='item.Id' :key="index">
          </el-option>
        </el-select>
      </div>
      <ul>

        <li>
          <q-btn color="primary" size="11px" label="导入"  @click="outerVisible=true" style="margin-right:10px" />
        </li>
      </ul>
    </div>
    <div class="cm_content _scrollbar"
      style="position: absolute;top:98px;bottom: 100px;left: 15px;right:15px;overflow-y: scroll;padding: 0 20px;">

      <table class="po_content singeRowTable" cellspacing="0" cellpadding="0" v-loading="loading">
        <tr>
          <th>科目名称</th>
          <th>科目代码</th>
          <th>科目类别</th>
          <th>余额方向</th>
          <th>项目辅助核算 </th>
          <th>公司</th>

        </tr>
        <tr v-for="(item,index) in DataList" :key="index">
          <td>{{item.Name}}</td>
          <td>
            {{item.Code}}
          </td>
          <td>
            {{item.Type}}
          </td>
          <td>
            <span v-if="item.Direction==1">借</span>
            <span v-if="item.Direction==2">贷</span>
          </td>
          <td>
            {{item.ItemCheck}}
          </td>
          <td>
            {{item.BranchName}}
          </td>
        </tr>

      </table>
      <div class="noData" v-if="DataList&&DataList.length==0">
        {{$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>
    <el-dialog custom-class='w700' title="导入" :visible.sync="outerVisible" center @close="addMsg.BranchId=''">
      <el-form class="clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="15" style="margin-left: 100px;">
            <el-form-item label="公司" prop="BranchId">
              <el-select filterable v-model='addMsg.BranchId' placeholder="请选择公司再上传文件" @change="getID">
                <!-- <el-option label="不限" value=0></el-option> -->
                <el-option v-for="(item,index) in TheAliasList" :label="item.Name" :value='item.Id' :key="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-upload v-if="addMsg.BranchId" style="text-align: center;" drag class="upload-demo" :action="importFileUrl2"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!-- <div slot="tip" class="el-upload__tip">只能上传Excel文件</div> -->
      </el-upload>

    </el-dialog>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        rules: { //表单必填验证
          BranchId: [{
            required: true,
            message: '请先选择公司再上传',
            trigger: 'change'
          }]
        },
        addMsg: {
          BranchId: ''
        },
        noData: false,
        text: '',
        imageUrl: '',
        outerVisible: false,
        msg: {
          BranchId: '0',
        },
        DataList: [],
        loading: false,
        currentPage: 1,
        total: 0,
        importFileUrl2: "",
        downList: "",
        TheAliasList: [],
      }
    },
    created() {

      this.downList = this.domainManager().LocalTemplateFileDownLoadUrl + "/Upload/Template/未认款导入模板.xls";
      this.getList();
      this.Financial_post_GetEduBranchEnumList()
    },
    mounted() {

    },
    methods: {
      getID(ID) {
        let userInfo = this.getLocalStorage();
        this.importFileUrl2 = this.domainManager().UploadFileUrl +
          "?cmd=dmc_post_LocalFileUpload&Type=10&fileType=1&fileLimit=1&EmployeeId=" + userInfo.Id +
          '&RB_Group_id=' + userInfo.Group_Id + '&KingdeeBId=' + this.addMsg.BranchId;
      },
      Financial_post_GetEduBranchEnumList() {
        this.apipost('Financial_post_GetEduBranchEnumList', {}, res => {
          if (res.data.resultCode == 1) {
            this.TheAliasList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      submitForm(addMsg) {
        let that = this;
        that.$refs[addMsg].validate((valid) => {
          if (valid) {

          } else {
            return false;
          }
        });
      },
      beforeAvatarUpload(file) {
        let that = this;
        // that.submitForm('addMsg');
        if (!that.addMsg.BranchId) {
          this.Error(this.$t('请选择公司'));
        }
        return that.addMsg.BranchId
      },
      //上传
      handleAvatarSuccess(res, file) {
        if (res.resultCode == 1) {
          this.Success(res.message);
          this.outerVisible = false;
          this.getList();
        } else {
          this.$q.dialog({
            title: '提示',
            message: res.message,
            cancel: false,
            persistent: true,
            ok: "确定",
            cancel: "取消",
          }).onOk(() => {

          }).onCancel(() => {

          });
          // this.Error(res.message);

        }
      },
      resetPageIndex() { // 重置页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      handleCurrentChange(val) { //翻页
        this.msg.pageIndex = val;
        this.getList();
      },
      getList() {
        this.loading = true;
        this.apipost('Financial_post_GetKingdeeSubjectList', this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data;
            // this.total=res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
    },

  }

</script>
