<style scoped>
    .suject-title-box span {
      padding: 0 5px 10px 5px;
      display: inline-block;
      margin-right: 15px;
      cursor: pointer;
      font-size: 14px;
    }

    .suject-title-box span.active {
      color: #E95252;
      border-bottom: 2px solid #E95252;
    }

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

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

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

    ._edHeight {
      height: 400px;
    }

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

    ._add_saveBtn {
      text-align: right;
    }

  </style>
  <template>
    <div class="dianshangannualRatio" ref="barparent">
        <div class="el-card__header">
          <div class="suject-title-box">
            <span v-for="(item,index) in titleList" :key="index" :class="{'active':item.Id==titleType}"
              @click="clickTitle(item)">
              {{item.Name}}
            </span>
          </div>
        </div>
      <div class="query-box" style="border: 0;padding: 0;border-bottom:0">
        <ul class="clearfix">
          <li class="hight_query">
              <button class="hollowFixedBtn" @click="title='关联',outerVisible=true,clickDaoRu(11)">关联导入</button>
              <button class="normalBtn">
                <template>
                  <a style="color:#fff;width:84px;" :href="downList">导入模板下载</a>
              </template>
              </button>
          </li>
      </ul>

      </div>
      <div class="cm_content _scrollbar"
        style="position: absolute;top:63px;bottom: 20px;left: 19px;right:19px;overflow-y: scroll;">
        <!-- 银行 -->
        <bankForm v-if="titleType==2" :list="RBankList" :loading="loading" @clickEdit="clickEdit" @success="getList"
          :type="titleType"></bankForm>
        <!-- 现金 -->
        <cashForm v-if="titleType==3" :list="RCashList" :loading="loading" @clickEdit="clickEdit" @success="getList"
          :type="titleType"></cashForm>
        <!-- 费用 -->
        <costForm v-if="titleType==1" :list="RCostList" :loading="loading" @clickEdit="clickEdit" @success="getList"
          :type="titleType"></costForm>
      </div>
      <el-dialog custom-class='w700' :title="title+'导入'" :visible.sync="outerVisible" center>
        <el-upload 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 class="_vMG_edit" :class="addShow==true?'edHeight':''">
        <el-row style="height:48px">
          <el-col :span="20">
            <p class="_tit">{{text}}</p>
          </el-col>
          <el-col :span="4" class="_add_saveBtn">
            <button class="normalBtn" @click="addLoading?submitForm('addMsg'):''">{{$t('pub.saveBtn')}}</button>
            <button class="hollowFixedBtn" @click="cancelEdit(),resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button>
          </el-col>
        </el-row>
        <el-form class="clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="类型" prop="Type" >
                <el-select filterable v-model='addMsg.Type' disabled>
                  <el-option v-for="(item,index) in typeList" :label="item.Name" :value='item.Id' :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="科目" prop="SubjectId">
                <el-select filterable v-model='addMsg.SubjectId' placeholder="请选择选科目">
                  <el-option v-for="(item,index) in DataList" :label="item.Name +' '+item.Code" :value='item.Id' :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>
  </template>
  <script>
    import bankForm from './suject/bank'
    import cashForm from './suject/cash'
    import costForm from './suject/cost'
    export default {
      components: {
        bankForm,
        cashForm,
        costForm
      },
      data() {
        return {
          TheAliasList:[],
          title: '',
          addLoading: true,
          DataList: [],
          typeList: [{
              Name: '银行',
              Id: 2
            },
            {
              Name: '现金',
              Id: 3
            },
            {
              Name: '费用',
              Id: 1
            },
          ],
          text: '新增银行对照表',
          rules: { //表单必填验证
            Type: [{
              required: true,
              message: '请选择类型',
              trigger: 'change'
            }],
            BranchId: [{
              required: true,
              message: '请选择公司',
              trigger: 'change'
            }],
            TargetId: [{
              required: true,
              message: '请选择费用',
              trigger: 'change'
            }],
            SubjectId: [{
              required: true,
              message: '请选择选科目',
              trigger: 'change'
            }]
          },
          addMsg: {
            BranchId: '0',
            Type: 2,
            TargetId: '',
            SubjectId: ''
          },
          addShow: false,
          titleType: 2,
          titleList: [{
              Name: '银行对照表',
              Id: 2
            },
            {
              Name: '现金对照表',
              Id: 3
            },
            {
              Name: '费用对照表',
              Id: 1
            },
          ],
          msg: {
            BranchId: 0,
          },
          RBankList: [], //银行
          RCashList: [], //现金
          RCostList: [], //费用
          loading: false,
          outerVisible: false,
          importFileUrl2: "",
          downList: "",
        }
      },
      created() {
        this.downList = this.domainManager().LocalTemplateFileDownLoadUrl + "/Upload/Template/金蝶科目关联导入-单项专用.xlsx";
        this.getList();
        this.GetKingdeeSubjectList()
      },
      mounted() {

      },
      methods: {
        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 => {})
        },
        // 获取科目
        GetKingdeeSubjectList() {
          this.apipost('Financial_post_GetKingdeeSubjectList', this.msg, res => {
            if (res.data.resultCode == 1) {
              this.DataList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          }, err => {})
        },
        submitForm(addMsg) { //提交创建、修改表单
          let that = this;
          that.$refs[addMsg].validate((valid) => {
            if (valid) {
              that.addFlightmodule()
            } else {
              return false;
            }
          });
        },
        addFlightmodule() { //添加
          this.addMsg.Type = this.titleType
          if (!this.addMsg.SubjectId) {
            return this.$message.error('请选择科目')
          }
          this.addLoading = false
          this.apipost('Financial_post_SetCostTypeKingdeeRelation', {
            Type: this.addMsg.Type,
            TargetId: this.addMsg.TargetId,
            SubjectId: this.addMsg.SubjectId
          }, res => {
            if (res.data.resultCode == 1) {
              this.addLoading = true
              this.addShow = false;
              this.Success(res.data.message);
              this.getList()
            } else {
              this.addLoading = true
              this.Error(res.data.message);
            }
          }, err => {})
        },
        resetForm(formName) { //弹出框取消 初始化谈框内表单
          this.$refs[formName].resetFields();
        },
        cancelEdit(t) { // 取消修改、新增
          this.addMsg = {
            BranchId: '0',
            Type: 2,
            TargetId: '',
            SubjectId: ''
          }
          if (!t) {
            this.addShow = false
          }
        },
        //重置表单
        resetInfo() {
          var msg = {
            BranchId: '0',
            Type: 2,
            TargetId: '',
            SubjectId: ''
          }
          this.addMsg = msg;
        },
        clickEdit(item) {
          let row = JSON.parse(JSON.stringify(item))
          this.addMsg.BranchId = '0'
          this.addMsg.TargetId = row.ID
          this.addMsg.SubjectId = row.SubjectId
          this.addShow = true
        },
        clickTitle(item) {
          this.addShow = false
          this.titleType = item.Id
          this.addMsg.Type = item.Id
          if (item.Id == 2) {
            this.text = '新增银行对照表'
          }
          if (item.Id == 3) {
            this.text = '新增现金对照表'
          }
          if (item.Id == 1) {
            this.text = '新增费用对照表'
          }
        },
        // type 1关联 2支出 3收入
        clickDaoRu(type) {
          let userInfo = this.getLocalStorage();
          this.importFileUrl2 = this.domainManager().UploadFileUrl +
              `?cmd=dmc_post_LocalFileUpload&KingdeeBId=0&Type=${type}&fileType=1&fileLimit=10&EmployeeId=${userInfo.EmployeeId}&RB_Group_id=${userInfo.RB_Group_id}`;

        },
        beforeAvatarUpload(file) {
          return;
        },
        //上传
        handleAvatarSuccess(res, file) {
            let that = this
          if (res.resultCode == 1) {
            this.Success(res.message);
            this.outerVisible = false;
            this.getList();
          } else {
            that.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {

            }).catch(() => {

            });
          }
        },
        getList() {
          this.loading = true;
          this.apipost('Financial_post_GetCostTypeKingdeeReList', this.msg, res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.RBankList = res.data.data.RBankList;
              this.RCashList = res.data.data.RCashList;
              this.RCostList = res.data.data.RCostList;
            } else {
              this.Error(res.data.message);
            }
          }, err => {})
        },
      },
    }

  </script>
  <style scoped>
    .dianshangannualRatio .el-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 18px 20px;
  }



  </style>