<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;
    }
    .tagF{
        margin-right: 5px;
    }
    .el-tag-box .el-tag{
        white-space: wrap !important;
    }
    .KingdeeName{
        background-color: #ecf5ff;
        border-color: #d9ecff;
        display: inline-block;
        height: 22px;
        padding: 0 10px;
        line-height: 20px;
        font-size: 12px;
        color: #409EFF;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .KingdeeName .icon-close{
        border-radius: 50%;
        text-align: center;
        position: relative;
        cursor: pointer;
        font-size: 12px;
        height: 16px;
        width: 16px;
        line-height: 18px;
        vertical-align: middle;
        top: 0;
        right: -5px;
    }
    .KingdeeName .icon-close:hover{
        color: #FFF;
        background-color: #409eff;
    }
  </style>
  <template>
    <div>
        <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" 
        cellspacing="0" cellpadding="0" v-loading="loading">
          <thead>
          <tr>
            <th width="150px">{{$t('fnc.yijimingcheng')}}</th>
            <th width="150px">{{$t('fnc.erjimingcheng')}}</th>
            <th width="150px">{{$t('fnc.sanjimingcheng')}}</th>
            <th width="150px">科目</th>
            <th width="50px">操作</th>
          </tr>
          </thead>
          <tbody class="po_content_item">
          <tr v-for="(item,index) in list" :key="index" v-loading="loading">
            <td width="150px">
              <span class="cursorpointer">{{item.Name}}</span>
            </td>
            <template v-if="item.ChildList&&item.ChildList.length>0">
              <td colspan="8" style="padding:0">
                <table class="po_content_item po_content_item_two" style="width: 100%;" cellspacing="0" cellpadding="0">
                  <tbody>
                  <tr v-for="(son,sIndex) in item.ChildList">
                    <td width="150px">
                      <span class="cursorpointer">{{son.Name}}</span></td>
                    <template v-if="son.ChildList.length>0">
                      <td colspan="7" style="padding:0">
                        <table class="po_content_item po_content_item_str" style="width: 100%" cellspacing="0" cellpadding="0">
                          <tbody>
                          <tr v-for="(grSon,gsIndex) in son.ChildList">
                            <td class="cursorpointer_last" width="150px">
                              <span class="cursorpointer">{{grSon.Name}}</span></td>
                              <td width="150px" style="white-space:wrap">
                                <p style="padding: 3px 0;" v-for="(i,indexs) in grSon.KingdeeList" :key="indexs">
                                  <span class="q-mr-xs">{{i.BranchName}}: </span>
                                  <el-tag size="mini" class="tagF"
                                closable @close="Delete(grSon,i)">
                                  {{i.KingdeeName}}<span class="q-ml-xs">{{i.KingdeeCode}}</span>
                                </el-tag>
                                </p>
                              </td>
                            <td width="50px">
                                <span style="cursor: pointer;color:blue;text-decoration:underline;margin-right: 5px"
                                @click="AddR(grSon)">新增</span>
                            </td>
                          </tr>
                          </tbody>
                        </table>
                      </td>
                    </template>
                    <template v-else>
                      <td width="150px"></td>
                      <td width="150px" style="white-space:wrap">
                        <p style="padding: 3px 0;" v-for="(i,indexs) in son.KingdeeList" :key="indexs">
                          <span class="q-mr-xs">{{i.BranchName}}: </span>
                          <el-tag size="mini" class="tagF"
                        closable @close="Delete(son,i)">
                          {{i.KingdeeName}}<span class="q-ml-xs">{{i.KingdeeCode}}</span>
                        </el-tag>
                        </p>
                      </td>
                      <td width="50px">
                        <span style="cursor: pointer;color:blue;text-decoration:underline;margin-right: 5px"
                        @click="AddR(son)">新增</span>
                      </td>
                    </template>
                  </tr>
                  </tbody>
                </table>
              </td>
            </template>
            <template v-else>
              <td width="150px"></td>
              <td width="150px"></td>
              <td width="150px" style="white-space:wrap">
                <p style="padding: 3px 0;" v-for="(i,indexs) in item.KingdeeList" :key="indexs">
                  <span class="q-mr-xs">{{i.BranchName}}: </span>
                  <el-tag size="mini" class="tagF"
                closable @close="Delete(item,i)">
                  {{i.KingdeeName}}<span class="q-ml-xs">{{i.KingdeeCode}}</span>
                </el-tag>
                </p>
              </td>
              <td>
                <span style="cursor: pointer;color:blue;text-decoration:underline;margin-right: 5px"
                @click="AddR(item)">新增</span>
              </td>
            </template>
          </tr>
          </tbody>
        </table>
        <div class="noData" v-show="list.length==0">
          {{$t('system.content_noData')}}
        </div>
    </div>
  </template>
  <script>
    export default {
    props: {
      list: {
        type: Array,
        default: null
      },
      loading: {
        type: Boolean,
        default: null
      },
      type: {
        type: Number,
        default: null
      }
    },
      // components: { Treeselect },
      data() {
        return {
            msg:{}
        }
      },
      watch: {
        list: {
            handler(val) {
                this.list = val
            },
            deep: true
        },
        loading: {
            handler(val) {
                this.loading = val
            },
            deep: true
        },
        type: {
            handler(val) {
                this.type = val
            },
            deep: true
        }
    },
      created(){
        
      },
      methods: {
        Delete(item,i){
            let _this = this
            let msg = {
                Type: this.type,
                TargetId: item.ID,
                SubjectId: i.SubjectId,
            }
            this.$q.dialog({
                title: '将删除此科目数据',
                message: '是否继续?',
                cancel: true,
                persistent: true,
                ok: "确定",
                cancel: "取消",
            }).onOk(() => {
            this.apipost('Financial_post_DelCostTypeKingdeeRelation',msg, res => {
                if(res.data.resultCode == 1) {
                    this.$q.notify({
                        icon: 'iconfont icon-chenggong',
                        color: 'accent',
                        timeout: 2000,
                        message: res.data.Message,
                        position: 'top'
                    });
                    this.$emit('success');
                } else {
                }
            }, err => {
                
            })
            }).onCancel(() => {
                
            });
        },
        AddR(item){
            this.$emit('clickEdit',item)
        },
      },
      mounted(){
        
  
      }
    }
  </script>
  