<style>
.RegistrationStatistic .Rs_LtName {
    text-align: left;
    padding-left: 20px;
}

.RegistrationStatistic .RS_Nameover {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    cursor: pointer;
    text-align: left;
}

.RegistrationStatistic .singeRowTable {
    border-collapse: collapse;
}

.RegistrationStatistic .singeRowTable tr td {
    border: 1px solid #e5e5e5;
}

.RegistrationStatistic .Rs_Start1 {
    background-color: #ff6670;
    color: #fff;
}

.RegistrationStatistic .Rs_Start2 {
    background-color: #16e09d;
    color: #fff;
}

.RegistrationStatistic .Rs_Start3 {
    background-color: #ff8547;
    color: #fff;
}

.RegistrationStatistic .Rs_Start4 {
    background-color: #ff528b;
    color: #fff;
}

.RegistrationStatistic .Rs_Start5 {
    background-color: #ffab1e;
    color: #fff;
}

.RegistrationStatistic .Rs_Start6 {
    background-color: #7ccc4e;
    color: #fff;
}

.RegistrationStatistic .Rs_Start7 {
    background-color: #b47df0;
    color: #fff;
}

.RegistrationStatistic .Rs_Start8 {
    background-color: #00c8f5;
    color: #fff;
}

.RegistrationStatistic .Rs_Start9 {
    background-color: #7598ff;
    color: #fff;
}

.RegistrationStatistic .Rs_Start10 {
    background-color: #dbc500;
    color: #fff;
}

.RegistrationStatistic .Rs_Start11 {
    background-color: #7598ff;
    color: #fff;
}

.RegistrationStatistic .Rs_Start12 {
    background-color: #00d9c3;
    color: #fff;
}

.RegistrationStatistic .Rs_Start13 {
    background-color: #40afff;
    color: #fff;
}

.RegistrationStatistic .RS_RedType {
    color: #ff0000;
}

.RegistrationStatistic .Order_RS {
    text-decoration: underline;
    cursor: pointer;
}
.pleaseTable td{
    padding:5px;
}
</style>
<template>
  <div class="flexOne RegistrationStatistic">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('system.table_company')}}</em>
            <el-select class="w150" filterable :placeholder="$t('sm.company')" v-model="queryMsg.OutBranchId">
              <el-option :label="$t('pub.unlimitedSel')" :value='queryCommonData.SelectDefaultValue2'></el-option>
              <el-option v-for='item in queryCommonData.BranchList' :key="item.Id" :label="item.BName" :value="item.Id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_line')}}</em>
            <el-select class='w150' v-model="queryMsg.LineID" filterable :placeholder="$t('pub.pleaseSel')" @change="getLineTeamList()">
              <el-option :label="$t('pub.unlimitedSel')" :value='queryCommonData.SelectDefaultValue'></el-option>
              <el-option v-for="item in queryCommonData.LineList" :label='item.LineName' :value='item.LineID' :key='item.LineID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li style="display:none;">
          <span>
            <em>{{$t('advmanager.v_xilie')}}</em>
            <el-select class='w150' v-model="queryMsg.ltID" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='queryCommonData.SelectDefaultValue'></el-option>
              <el-option v-for="item in queryCommonData.LineTeamList" :label='item.LtName' :value='item.LtID' :key='item.LtID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('fnc.tuanqi')}}</em>
            <!-- <el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder="" v-model="queryMsg.QStartDate">
            </el-date-picker> -->
            <DateLimit :clearable="false" :StartGroupDate="queryMsg.QStartDate" :EndGroupDate="queryMsg.QEndDate" @change="(date)=> queryMsg.QStartDate = date"></DateLimit>
            <el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder="" v-model="queryMsg.QEndDate" :picker-options="pickerBeginDateAfter">
            </el-date-picker>
          </span>
        </li>
        <li style="display:none;">
          <span>
            <em>{{$t('objFill.v101.jiweizanbi')}}</em>
            <el-input class="w100" type="text" placeholder="" v-model="queryMsg.TicketStartNum" @keyup.native="checkPrice(queryMsg,'TicketStartNum')" maxlength="3">
            </el-input>—
            <el-input class="w100" type="text" placeholder="" v-model="queryMsg.TicketEndNum" @keyup.native="checkPrice(queryMsg,'TicketEndNum')" maxlength="3">
            </el-input>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" /> &nbsp;
        </li>
      </ul>
    </div>
    <table class="singeRowTable pleaseTable" border="0" cellspacing="0" cellpadding="0" v-loading='queryCommonData.loading'>
      <tr>
        <th width="100">{{$t('active.ad_xuhao')}}</th>
        <th width="20%">{{$t('Operation.Op_chutuan')}}</th>
        <th>{{$t('objFill.v101.yishrenshu')}}</th>
        <th>{{$t('op.FlightToNum')}}</th>
        <th width="20%">{{$t('salesModule.ZB')}}</th>
      </tr>
      <tbody v-for="(item,index) in DataList" :key="index">
        <tr>
          <td>{{index+1}}</td>
          <td>{{item.OutBName}}</td>
          <td>{{item.OrderTotalSeat}}</td>
          <td>{{item.TotalSeat}}</td>
          <td>
              <el-progress  :text-inside="true" :color="customColorMethod(item.AirticketPer)" :stroke-width="26" :percentage="item.AirticketPer"></el-progress></td>
        </tr>
      </tbody>
    </table>
    <div class="noDataNotice" v-if="DataList.length<1">
      <i class="iconfont icon-kong"></i>
      <p>{{$t('active.ld_noData')}}</p>
    </div>
  </div>
</template>
<script>
import DateLimit from '../../public/DateLimit.vue';
export default {
    components: {
      DateLimit
    },
    data() {
        return {
          pickerBeginDateAfter: {
            disabledDate: time => {
              let startTime = new Date(this.queryMsg.QStartDate);
              return startTime.getTime() >= time.getTime();
            }
          },
            queryCommonData: {
                //线路列表
                LineList: [],
                //系列列表
                LineTeamList: [],
                //公司数据
                BranchList: [],
                //公用下拉默认
                SelectDefaultValue: 0,
                //公用下拉默认
                SelectDefaultValue2: -1,
                //loading
                loading: false
            },
            queryMsg: {
                pageIndex: 1,
                pageSize: 50,
                LineID: 0,
                ltID: 0,
                OutBranchId: -1,
                QStartDate: "",
                QEndDate: "",
                TicketStartNum: "",
                TicketEndNum: ""
            },
            //数据列表
            DataList: [],
            currentPage: 0,
            total: 0
        };
    },
    methods: {
        //进度条颜色
         customColorMethod(percentage) {
            if (percentage < 50) {
                return '#ff6670';
            } else if (50<=percentage&&percentage<60) {
                return '#ffab1e';
            } else if(60<=percentage&&percentage<80){
                return '#dbc500';
            } else if(percentage>=80){
                return '#16e09d';
            }
        },
        goUrlTCList(path, TCNUMS, title) {
            this.$router.push({
                name: path,
                query: {
                    tcmun: TCNUMS,
                    blank: "y",
                    tab: title
                }
            });
        },
        //初始化公司
        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.queryCommonData.BranchList = res.data.data;
                    }
                },
                err => {}
            );
        },
        //获取线路列表
        getLineList() {
            this.apipost(
                "line_post_GetAllList_V2",
                { LineDirection: 2 },
                res => {
                    if (res.data.resultCode == 1) {
                        this.queryCommonData.LineList = res.data.data;
                    }
                }
            );
        },
        //获取系列列表
        getLineTeamList() {
            this.queryMsg.ltID = 0;
            let msg = {
                lineID: this.queryMsg.LineID,
                isTOOP: 1
            };
            this.apipost("team_post_GetList", msg, res => {
                if (res.data.resultCode == 1) {
                    this.queryCommonData.LineTeamList = res.data.data;
                }
            });
        },
        getList() {
            this.queryCommonData.loading = true;
            if (this.queryMsg.TicketStartNum == "") {
                this.queryMsg.TicketStartNum = 0;
            }
            if (this.queryMsg.TicketEndNum == "") {
                this.queryMsg.TicketEndNum = 0;
            }
            this.apipost(
                "travel_get_TravelPriceSetStatisticsService",
                this.queryMsg,
                res => {
                    this.queryCommonData.loading = false;
                    if (res.data.resultCode == 1) {
                        this.DataList = res.data.data;
                    }
                }
            );
        },
        goUrl(path, id, NameStr) {
            if (id > 0) {
                this.$router.push({
                    name: path,
                    query: {
                        id: id,
                        blank: "y",
                        tab: NameStr
                    }
                });
            } else {
                this.$router.push({
                    name: path
                });
            }
        },
        goUrlTM(path, TCNUM) {
            this.$router.push({
                name: path,
                query: {
                    id: TCNUM
                }
            });
        },
        addMoth(d, m) {
            let ds = d.split("-"),
                _d = ds[2] - 0;
            let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
            let max = nextM.getDate();
            d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
            return d
                .toLocaleDateString()
                .match(/\d+/g)
                .join("-");
        },
        handleCurrentChange: function(val) {
            //翻页
            this.queryMsg.pageIndex = val;
            this.getList();
        },
        resetPageIndex: function() {
            // 重置页码
            this.queryMsg.pageIndex = 1;
            this.currentPage = 1;
        }
    },
    mounted() {
        let myDate = new Date();
        let nowDate =
            myDate.getFullYear() +
            "-" +
            parseInt(myDate.getMonth() + 1) +
            "-" +
            myDate.getDate();

        this.queryMsg.QStartDate = nowDate;
        this.queryMsg.QEndDate = this.addMoth(nowDate, 1);
        this.getCompanyList();
        this.getLineList();
        this.getList();
    }
};
</script>