<style scoped>
    .suject-title-box {
      border-bottom: 1px solid #dedede;
    }
  
    .suject-title-box span {
      padding: 0 5px 10px 5px;
      display: inline-block;
      margin-right: 15px;
      cursor: pointer;
    }
  
    .suject-title-box span.active {
      color: #2961fe;
      border-bottom: 2px solid #2961fe;
    }
  
    ._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="flexOne currentManage page-body" style="position: relative;">
      <div class="query-box">
        <ul>
  
          <li>
            <q-btn color="primary" size="11px" label="关联导入"  @click="title='关联',outerVisible=true,clickDaoRu(14)"
              style="marginRight:10px" />
            <!-- <q-btn color="primary" size="11px" label="支出导入"  @click="title='支出',outerVisible=true,clickDaoRu(12)"
              style="marginRight:10px" />
              <q-btn color="primary" size="11px" label="收入导入"  @click="title='收入',outerVisible=true,clickDaoRu(13)" /> -->
            <q-btn color="primary" size="11px">
              <template v-slot:default>
                  <a style="color:#fff;width:84px;" :href="downList">导入模板下载</a>
              </template>
            </q-btn>
          </li>
        </ul>
        <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="cm_content _scrollbar"
        style="position: absolute;top:117px;bottom: 0;left: 15px;right:15px;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">
            <q-btn color="primary" size="11px" :label="$t('pub.saveBtn')" @click="addLoading?submitForm('addMsg'):''" style="marginRight:10px" />
            <q-btn text-color="primary" size="11px" :label="$t('pub.cancelBtn')" @click="cancelEdit(),resetForm('addMsg'),addShow=false" />
          </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="5">
              <el-form-item label="公司" prop="BranchId">
                <el-select filterable v-model='addMsg.BranchId' @change="GetKingdeeSubjectList">
                  <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-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: '',
            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.Financial_post_GetEduBranchEnumList()
      },
      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.msg.BranchId = this.addMsg.BranchId
          this.apipost('Financial_post_GetKingdeeSubjectList', this.msg, res => {
            if (res.data.resultCode == 1) {
              this.DataList = res.data.data;
              // this.total=res.data.data.count;
            } 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: '',
            Type: 2,
            TargetId: '',
            SubjectId: ''
          }
          if (!t) {
            this.addShow = false
          }
        },
        //重置表单
        resetInfo() {
          var msg = {
            BranchId: '',
            Type: 2,
            TargetId: '',
            SubjectId: ''
          }
          this.addMsg = msg;
        },
        clickEdit(item) {
          let row = JSON.parse(JSON.stringify(item))
          this.addMsg.BranchId = ''
          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=11&fileType=1&fileLimit=10&EmployeeId=" + userInfo.Id +
          //   '&RB_Group_id=' + userInfo.Group_Id;
          this.importFileUrl2 = this.domainManager().UploadFileUrl +
              `?cmd=dmc_post_LocalFileUpload&KingdeeBId=0&Type=${type}&fileType=1&fileLimit=10&EmployeeId=${userInfo.Id}&RB_Group_id=${userInfo.Group_Id}`;
          
        },
        beforeAvatarUpload(file) {
          return;
        },
        //上传
        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);
          }
        },
        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>
  