<style>
  .CM_look {
    padding: 4px !important;
    position: relative;
    top: 1px;
  }

  .opUl li {
    display: inline-block;
    margin: 10px 15px 10px 0;
  }

  .domesticCommissiondetails .opUl li input {
    height: 34px !important;
  }

  .domesticCommissiondetails .singeRowTable tr td {
    padding: 8px 5px;
  }

  .domesticCommissiondetails .hoverSpan span:hover {
    cursor: pointer;
    text-decoration: underline;
    color: red;
  }

</style>
<template>
  <div class="flexOne domesticCommissiondetails">
    <div style="min-height: 70px;">
      <ul class="opUl">
        <li>
          <em>{{$t('tips.qishu')}}</em>
          <el-select v-model="msg.PeriodId" size="mini" @change="handleCurrentChange(1)">
            <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
            <el-option v-for="(item,index) in PeriodsList" :key="item.index"
            :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('scen.sc_cp')}}</em>
          <!-- S_CheckBranchOrder -->
          <el-select v-model="msg.OutBranchId" size="mini" @change="handleCurrentChange(1)"
          :disabled="false">
            <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
            <el-option v-for="(item,index) in BranchList" :key="item.index"
            :label="item.BName" :value="item.Id">
            </el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('sm.company')}}</em>
          <!-- disabled -->
          <el-select v-model="msg.RB_Branch_Id" size="mini" @change="handleCurrentChange(1)"
          :disabled='false'>
            <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
            <el-option v-for="(item,index) in BranchList" :key="item.index" :label="item.BName"
            :value="item.Id">
            </el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('admin.admin_Department')}}</em>
          <!-- disabled -->
          <el-select v-model="msg.RB_Department_Id" size="mini" @change="handleCurrentChange(1)"
          :disabled='false'>
            <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
            <el-option v-for="(item,index) in departMentList" :key="item.index" :label="item.DepartmentName"
              :value="item.DepartmentID"></el-option>
          </el-select>
        </li>
        <li>
          <em>{{$t('salesModule.Personnel')}}</em>
          <!-- disabled -->
          <el-select v-model="msg.UserId" size="mini" @change="handleCurrentChange(1)"
          filterable :disabled='false'>
            <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
            <el-option v-for="(item,index) in searchList" :key="item.index" :label="item.name" :value="item.empId">
            </el-option>
          </el-select>
        </li>

        <!-- <li>
          <em>{{$t('hotel.order_Number')}}</em>
          <el-input maxlength="50" v-model="msg.OrderId" class="permiss-input w200"
            @keyup.native.enter="handleCurrentChange(1)" :placeholder="$t('pub.pleaseImport')"></el-input>
        </li> -->
        <li>
          <em>{{$t('visa.v_tuanhao')}}</em>
          <el-input maxlength="50" v-model="msg.TCNUM" class="permiss-input w200"
            @keyup.native.enter="handleCurrentChange(1)" @change="handleCurrentChange(1)"
            :placeholder="$t('pub.pleaseImport')"></el-input>
        </li>



      </ul>
    </div>
    <!-- <li>
            <input type="button" class="normalBtn" :value="$t('visa.v_daochu')" @click="exportExcel">
        </li> -->
    <div style="display: flex;align-items: center;height: 50px;justify-content: space-between;">
      <div style="display: flex;align-items: center;">
        <span>{{$t('objFill.zongticeng')}}：{{TotalMoney}}{{$t('hotel.hotel_yuan')}}</span>
        <span style="margin-left: 15px;">{{$t('objFill.v101.DomesticModule.zhonglir')}}：{{TotalProfit}}</span>
      </div>
      <input type="button" class="normalBtn" :value="$t('visa.v_daochu')" @click="exportExcel">

    </div>
    <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0"
      style="margin-top: 10px;">
      <tr>


        <th>{{$t('scen.sc_cp')}}</th>
        <th>{{$t('system.query_name')}}</th>
        <th>{{$t('advmanager.v_type')}}</th>
        <th>{{$t('active.cl_orderType')}}</th>
        <th>{{$t('objFill.v101.FinancialModule.dindhth')}}</th>
        <th>{{$t('advmanager.v_line')}}</th>
        <th>{{$t('objFill.v101.FinancialModule.dindanlr')}}</th>
        <th>{{$t('hotel.hotel_Currency')}}</th>
        <th>{{$t('objFill.v101.FinancialModule.taiwlr')}}</th>
        <th>{{$t('objFill.v101.FinancialModule.yejihsbl')}}</th>
        <th>{{$t('objFill.v101.FinancialModule.yejilir')}}</th>
        <th>{{$t('salesModule.TCmoney')}}</th>


        <th>{{$t('objFill.v101.FinancialModule.tichengbil')}}</th>

        <th>{{$t('tips.qishu')}}</th>
        <th width='400'>{{$t('pub.pubRemark')}}</th>

        <!-- <th>{{$t('system.table_operation')}}</th> -->
      </tr>
      <tr v-for="item in dataList">


        <td>{{item.OutBranchName}}</td>
        <td>{{item.UserName}}</td>
        <td>{{$t('visaT.sale')}}</td>
        <td>{{item.OrderType==1?$t('active.cl_team'):item.OrderType==2?$t('hotel.hotel'):item.OrderType==3?$t('scen.sc_piao'):item.OrderType==4?$t('MarketingActi.car'):''}}</td>
        <td>
          <span class="cursor-p"
          :style="{'color': !disabled?'#409EFF':''}" @click="!disabled?goTuanDetails(item):''">{{item.OrderId?item.OrderId:'-'}} {{item.OrderType==1?'('+item.TCNUM+')':''}}</span>
        </td>
        <td>{{item.LineName}}</td>
        <td>{{item.OriginalProfit?item.OriginalProfit:'-'}}</td>
        <td>{{item.CurrencyName}}</td>
        <td>{{item.StandardProfit?item.StandardProfit:'-'}}</td>
        <td>{{item.ProfitRate?item.ProfitRate:'-'}}</td>
        <td>{{item.ProfitRate2}}</td>
        <td>{{item.CommissionMoney}}</td>


        <td>{{item.CommissionRate?item.CommissionRate+'%':'-'}}</td>

        <td>{{item.Periods}}</td>
        <td>{{item.Description}}</td>
      </tr>
      <tr v-if="dataList.length==0">
        <td style="text-align:center" colspan="15">{{$t('system.content_noData')}}</td>
      </tr>
    </table>
    <!-- 分页 -->
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.pageIndex"
      layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
    </el-pagination>

  </div>
</template>

<script>
  import moment from "moment"
  export default {
    data() {
      return {
        Month: moment().format("YYYY-MM"),
        msg: {
          pageIndex: 1,
          pageSize: 20,
          PeriodId: 0,
          UserId: -1,
          RB_Branch_Id: -1,
          RB_Department_Id: -1,
          // OrderId: '',
          TCNUM: '',
          OutBranchId: -1
        },
        loading: false,
        //数据源
        dataList: [],
        total: 0,
        btnShow: false,
        PeriodsList: [],
        BranchList: [],
        searchList: [],
        departMentList: [],
        TotalMoney: 0,
        TotalProfit: 0,
        TotalNum: 0,
        disabled: true,
        S_CheckBranchOrder: false,
      }
    },
    mounted() {
      this.msg.TCNUM = this.$route.query.TCNUM?this.$route.query.TCNUM:''
      let userInfo = this.getLocalStorage();
      let ActionMenuCode = userInfo.ActionMenuCode;
      this.msg.PeriodId =this.$route.query.PeriodId?Number(this.$route.query.PeriodId):0
      // this.msg.UserId = Number(this.$route.query.UserId)
      // this.msg.RB_Branch_Id = Number(this.$route.query.RB_Branch_Id)
      // this.msg.RB_Department_Id = Number(this.$route.query.RB_Department_Id)
      if (ActionMenuCode.indexOf('home_CommissionSeeAll') != -1) { //是否有看所有人的权限
        this.disabled = false;
      } else {
        this.disabled = true;
        this.msg.UserId = Number(userInfo.EmployeeId)
      }
      if (ActionMenuCode.indexOf('S_CheckBranchOrder') != -1 ){
        this.S_CheckBranchOrder = true
        // this.msg.OutBranchId = userInfo.RB_Branch_id
      }
      this.getList();
      this.getqishilist()
      this.getCompanyList() //获取公司
      this.getEmployee() //人员
      this.getDerpartMent() //部门
    },
    methods: {
      goTuanDetails(row) {
        this.$router.push({
          path: 'TeamBalancePayment',//TravelControlList
          query: {
            id: row.OrderId,
                blank: 'y',
                tab: '团队收支'//团控列表
              }
          });
      },
      getDerpartMent() {
        //获取部门
        this.apipost(
          "admin_get_DepartmentGetList",
          this.getDepartmentMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.departMentList = res.data.data;
            } else {}
          },
          err => {}
        );
      },
      getEmployee() { //所有人员下拉
        let employeeMsg = {
          RB_Group_id: "0",
          RB_Branch_id: "-1",
          departmentId: "0",
          IsLeave: "-1"
        }
        this.apipost(
          "app_get_company_employee",
          employeeMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.searchList = res.data.data;
            }
          },
          err => {}
        );
      },
      //初始化公司
      getCompanyList() {
        let userInfo = this.getLocalStorage();
        var RB_Group_id = userInfo.RB_Group_id;
        let msg = {
          Status: 0,
          is_show: 0,
          RB_Group_Id: RB_Group_id
        };
        this.apipost(
          "admin_get_BranchGetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.BranchList = res.data.data;

            }
          },
          err => {}
        );
      },
      getqishilist() {
        this.apipost(
          "sellcommission_GetTWSellCommissionPeriodsList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.PeriodsList = res.data.data;
              if (this.PeriodsList && this.PeriodsList.length > 0) {
                // this.msg.Periods = Number(this.PeriodsList[0].Id)
              }

            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },


      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      goUrl(path, id) {
        this.$router.push({
          path: path,
          query: {
            PeriodsId: id,
            blank: 'y',
            tab: '期数详情'
          }
        });
      },
      //获取数据
      getList() {
        let msg = JSON.parse(JSON.stringify(this.msg))
        if (msg.OrderId == '') {
          msg.OrderId = 0
        }
        this.loading = true;
        this.apipost(
          "sellcommission_GetTWSellCommissionDetailsList",
          msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.TotalMoney = res.data.data.TotalMoney ? res.data.data.TotalMoney : 0
              this.TotalProfit = res.data.data.TotalProfit ? res.data.data.TotalProfit : 0
              res.data.data.pmodel.pageData.forEach(item => {
                item.ProfitRate = item.ProfitRate/100
                item.ProfitRate2 = (item.StandardProfit*item.ProfitRate).toFixed(2)
              });
              this.dataList = res.data.data.pmodel.pageData;
              this.total = res.data.data.pmodel.count;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      exportExcel() { //导出
        let msg = JSON.parse(JSON.stringify(this.msg))
        if (msg.OrderId == '') {
          msg.OrderId = 0

        }
        let userInfo = this.getLocalStorage();
        msg.EmployeeIdUser = userInfo.EmployeeId
        var fileName = this.$t('objFill.v101.FinancialModule.taiwtcmx') + ".xls";
        this.GetLocalFile("sellcommission_GetTWSellCommissionDetailsListToExcel", msg, fileName);
      },
      goTravel(TCID) { //跳转到团队列表
        this.$router.push({
          path: 'TravelControlList',
          query: {
            TCID: TCID,
            blank: 'y',
            tab: '团控列表'
          }
        });
      }

    }
  }

</script>