<template>
    <div class="groupApproval">
        <div class="query-box">
            <ul>
              <li>
                <em>{{$t('scen.sc_cp')}}</em>
                <el-select class="permiss-input w160" filterable  v-model='msg.OutBranchId'
                @change='getControlList()'>
                <el-option :label="$t('pub.unlimitedSel')" :value="-1" :key="-1"></el-option>
                <el-option
                v-for="item in companyList"
                :label='item.BName'
                :value='item.Id'
                :key='item.Id'
                ></el-option>
                </el-select>
            </li>
                <li>
                    <span>
                        <em>{{$t('objFill.v101.FinancialModule.tuanleix')}}</em>
                        <el-select class="permiss-input w160" v-model="msg.PriceTeamType" filterable :placeholder="$t('pub.pleaseImport')"
                            @change="getControlList()">
                            <el-option :label="$t('pub.unlimitedSel')" value="-1">
                            </el-option>
                            <el-option v-for="item in TeamListArr" :label="item.Name" :value="item.Id"
                                :key="item.Id"></el-option>
                        </el-select>
                    </span>
                </li>
                <li>
                    <span>
                        <em>{{$t('visa.v_tuanhao')}}</em>
                        <el-input maxlength="50" v-model="msg.TCNUM" class="permiss-input w160"
                            @keyup.enter="getControlList" :placeholder="$t('pub.pleaseImport')"></el-input>
                    </span>
                </li>
                <li>
                    <span>
                        <em>{{$t('hotel.hotel_SerialNumber')}}</em>
                        <el-input maxlength="6" v-model="msg.TCID" class="permiss-input w160"
                            @keyup.native.enter="getControlList" :placeholder="$t('pub.pleaseImport')"
                            @keyup.native="checkInteger(msg,'TCID')"></el-input>
                    </span>
                </li>
                <li>
                    <span>
                        <em>{{$t('objFill.v101.dmc.chutrq')}}</em>
                        <el-date-picker
                            style="height: 34px;"
                            value-format="yyyy-MM-dd"
                            v-model="DatelistBM"
                            type="daterange"
                            :range-separator="$t('OrderList.zhi')"
                            :start-placeholder="$t('OrderList.star')"
                            :end-placeholder="$t('OrderList.end')" @change="getDatesBM">
                        </el-date-picker>
                    </span>
                </li>
                <li v-if="userinfo.ActionMenuCode.indexOf('Finance_clumpSeeAll')!=-1">
                  <span><em>{{$t('objFill.v101.FinancialModule.zhikdwsh')}}</em>
                    <el-switch
                        v-model="PendingMyTrial"
                        active-value="1"
                        inactive-value="0" @change="getPendingMyTrial"> </el-switch>
                  </span>
                </li>
                <li>
                <button class="hollowFixedBtn" type="button"
                    @click="getControlList">{{$t('pub.searchBtn')}}</button>
                </li>
            </ul>
        </div>
        <ul class="_nav clearfix">
            <li :class="active==1?'_active':''" @click="active=1, msg.OutGroupAuditState=1, getControlList()">{{$t('salesModule.Pending')}}</li>
            <li :class="active==2?'_active':''" @click="active=2, msg.OutGroupAuditState=2, getControlList()">{{$t('salesModule.YSP')}}</li>
            <div style="float: right;" v-if="multipleSelection.length>0">
                <button class="hollowFixedBtn" @click="setAudit()">{{$t('objFill.v101.FinancialModule.piliansh')}}</button>
            </div>
            <li style="float: right;color: red;font-size: 14px;">
                {{$t('objFill.v101.FinancialModule.luodtxbtddtc')}}
            </li>
        </ul>

        <ul style="overflow: initial!important">
            <li style="margin-bottom:10px;width: 100%;">

            </li>
        </ul>
        <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="dataList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            >
                <el-table-column
                type="selection"
                width="55" :selectable="selectable">
                </el-table-column>
                <el-table-column
                :label="$t('scen.sc_temID')"
                width="170">
                    <template slot-scope="scope">
                        <p>{{scope.row.OutBranchName}}</p>
                        <span style="cursor: pointer;text-decoration: underline;"
                        @click="goTravel(scope.row.TCID,scope.row.TeamType)">{{scope.row.TCNUM}}({{scope.row.TCID}})</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="LtName"
                :label="$t('advmanager.v_xilie')+'/'+$t('Operation.Op_TeamName')"
                width="200"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.Title}}</br>
                    {{scope.row.LineName}}</br>
                    {{scope.row.LtName}}
                </template>
                </el-table-column>
                <el-table-column
                prop="OPName"
                :label="$t('objFill.v101.FinancialModule.opshenqrq')">
                <template slot-scope="scope">
                   <p> {{scope.row.OPName}}</p>
                   <p> {{scope.row.OutGroupApplyDateStr}}</p>
                </template>
            </el-table-column>
                <el-table-column
                prop="PriceTeamTypeName"
                :label="$t('objFill.v101.commissonBill.col.t3')">
                <template slot-scope="scope">
                    <template v-if="scope.row.TeamTypeName">{{scope.row.TeamTypeName}}/</template>
                    {{scope.row.PriceTeamTypeName}}
                </template>
                </el-table-column>
                <el-table-column
                prop="ShouldReceive"
                :label="$t('fnc.yingshou')"></el-table-column>
                <el-table-column
                prop="ActualReceive"
                :label="$t('fnc.shishou')"></el-table-column>
                <el-table-column
                prop="WaitRecive"
                :label="$t('op.Tocollected')"></el-table-column>
                <el-table-column
                prop="ShouldPay"
                :label="$t('fnc.yingfu')"></el-table-column>
                <el-table-column
                prop="ActualPay"
                :label="$t('fnc.shifu')"></el-table-column>
                <el-table-column
                prop="WaitPay"
                :label="$t('objFill.dengdaifu')"></el-table-column>
                <el-table-column
                prop="ActualProfit"
                :label="$t('objFill.v101.FinancialModule.tuanduilr')"></el-table-column>
                <el-table-column
                prop="SaleCommission"
                :label="$t('objFill.v101.FinancialModule.yudxstc')" width="110px">
                    <template slot-scope="scope">
                        <span
                        :style="{'cursor':scope.row.SaleCommissionType>0?'pointer':'',
                        'color': scope.row.SaleCommissionType>0?'#33B3FF':''}"
                        @click="scope.row.SaleCommissionType>0?goAnticipate(scope.row,scope.row.SaleCommissionType):''">
                        {{scope.row.SaleCommission}}
                      </span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="Config_OfferId"
                :label="$t('ground.baojiaDetail')">
                    <template slot-scope="scope">
                        <p v-if="scope.row.ConfigID>0&&scope.row.Config_OfferId>0"
                            style="cursor: pointer;text-decoration: underline;color: #33B3FF;font-size: 12px;"
                        @click="showDialog(scope.row.ConfigID, scope.row.Config_OfferId)">{{$t('objFill.baojiaxiangqing')}}</p>
                    </template>
                </el-table-column>
                <el-table-column v-if="active==1"
                prop=""
                :label="$t('objFill.v101.administrative.shenpiren')" width="130px">
                <template slot-scope="scope">
                        <p>{{$t('objFill.dsh')}}：{{scope.row.AuditEmpName}}</p>
                        <p v-if="scope.row.FinanceAuditEmpName">{{$t('fnc.a_yshenhe')}}：{{scope.row.FinanceAuditEmpName}}/{{scope.row.FinanceOutGroupAuditDate}}</p>
                    </template>
            </el-table-column>
            <el-table-column v-if="active==1"
                prop=""
                :label="$t('objFill.caiwubz')" width="130px">
                <template slot-scope="scope">
                    <p v-if="EmployeeId==2786 && scope.row.RoomDayState==1">房费单天数<i class="el-icon-success" style="color: #5cb6ff;"></i></p>
                    <p v-if="EmployeeId==2786 &&scope.row.RoomDayState==2">房费单天数<i class="el-icon-warning" style="color: red;"></i></p>
                        <p>{{scope.row.AuditRemark}}</p>
                        <i class="el-icon-edit" @click="financeRemark(scope.row)" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId && EmployeeId !=5"></i>
                    </template>
            </el-table-column>
                <el-table-column v-if="active==2"
                prop=""
                :label="$t('objFill.v101.FinancialModule.shenpjg')">
                    <template slot-scope="scope">
                        <span v-if="scope.row.OutGroupAuditState == 2" style="color: green;">{{$t('visa.v_tongguo')}}</span>
                        <span v-if="scope.row.OutGroupAuditState == 3" style="color: red;">{{$t('visa.v_jujue')}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="active==2"
                prop=""
                :label="$t('objFill.v101.FinancialModule.shenpxinx')" width="130px">
                    <template slot-scope="scope">
                        <p>{{scope.row.AuditEmpName}}/{{scope.row.OutGroupAuditDate}}</p>
                        <p v-if="scope.row.FinanceAuditEmpName">{{scope.row.FinanceAuditEmpName}}/{{scope.row.FinanceOutGroupAuditDate}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                prop=""
                :label="$t('system.table_operation')"
                width="150">
                    <template slot-scope="scope">
                        <div class="_icon_btn">
                        <el-tooltip class="item" effect="dark" :content="$t('fnc.shenhe')" placement="top" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId && EmployeeId==5">
                            <i class="iconfont icon-ico_commodity_defaul" @click="shenhei(scope.row)" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('fnc.shenhe')" placement="top" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId && EmployeeId !=5">
                            <i class="iconfont icon-ico_commodity_defaul" @click="financeAudit(scope.row)" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('fnc.bohui')" placement="top" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId">
                            <i class="iconfont icon-shenhebohui" @click="bohui(scope.row)" v-if="active==1 && EmployeeId==scope.row.OutGroupAuditEmpId"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.FinancialModule.shouzmx')" placement="top">
                            <i class="iconfont icon-mingxi" @click="goTeamBalance(scope.row.TCID)"></i>
                        </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        <div style="width: 100%;">
            <el-pagination  background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="msg.pageIndex"
                layout="sizes,total,prev, pager, next, jumper"
                :page-sizes="[5, 10, 20, 30,50,100]"
                :page-size="msg.pageSize" :total="total">
            </el-pagination>
        </div>

        <el-dialog
          custom-class="w600"
          :title="$t('objFill.bohuiyy')"
          :visible.sync="cancelOrderDialog"
          :close-on-click-modal="false"
        >
          <div style="padding-bottom:20px">
            <el-input
              type="textarea"
              autofocus
              rows="5"
              :placeholder="$t('objFill.v101.dmc.qingtxbtyy')"
              clear="w300"
              v-model="cancelRemark"
            ></el-input>
            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="24" style="text-align: right;">
                <input
                  type="button"
                  class="normalBtn"
                  :value="$t('objFill.v101.dmc.quedinbh')"
                  @click="cancelOrderHandler"
                />
                <input
                  type="button"
                  class="hollowFixedBtn"
                  :value="$t('pub.closeSel')"
                  @click="cancelOrderDialog = false,cancelRemark=''"
                />
              </el-col>
            </el-row>
          </div>
        </el-dialog>

        <el-dialog
          custom-class="w600"
          :title="$t('objFill.tijiaoshenhe')"
          :visible.sync="auditDialog"
          :close-on-click-modal="false"
        >
          <div style="padding-bottom:20px">
            <el-input
              type="textarea"
              autofocus
              rows="5"
              clear="w300"
              v-model="auditRemark"
            ></el-input>
            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="24" style="text-align: right;">
                <input
                  type="button"
                  class="normalBtn"
                  :value="$t('pub.saveBtn')"
                  @click="auditOrderHandler"
                />
                <input
                  type="button"
                  class="hollowFixedBtn"
                  :value="$t('pub.closeSel')"
                  @click="auditDialog = false,auditRemark=''"
                />
              </el-col>
            </el-row>
          </div>
        </el-dialog>

        <el-dialog
          custom-class="w600"
          :title="$t('objFill.qingshurbzxx')"
          :visible.sync="auditDialog2"
          :close-on-click-modal="false"
        >
          <div style="padding-bottom:20px">
            <el-input
              type="textarea"
              autofocus
              rows="5"
              clear="w300"
              v-model="auditRemark"
            ></el-input>
            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="24" style="text-align: right;">
                <input
                  type="button"
                  class="normalBtn"
                  :value="$t('pub.saveBtn')"
                  @click="auditOrderHandler2"
                />
                <input
                  type="button"
                  class="hollowFixedBtn"
                  :value="$t('pub.closeSel')"
                  @click="auditDialog2 = false,auditRemark=''"
                />
              </el-col>
            </el-row>
          </div>
        </el-dialog>

        <el-dialog :visible.sync="dialog.show" width="1400px" :title="$t('objFill.baojiaxiangqing')">
            <price-dialog :ConfigId="dialog.ConfigId" :OfferId="dialog.OfferId" ref="dialog"></price-dialog>
          </el-dialog>
    </div>
</template>

<script>
     import priceDialog from '../TravelManager/TravelNewQuotation/priceDialog.vue';
    export default {
        data() {
            return {
                PendingMyTrial: '0',
                companyList:[],
                cancelRemark: '',
                auditRemark: '',
                dataRow: null,
                cancelOrderDialog: false,
                auditDialog: false,
                auditDialog2: false,
                loading: false,
                dataList: [],
                active: '1',
                msg: {
                    pageIndex: 1,
                    pageSize: 10,
                    PriceTeamType: "0",
                    TCNUM: '',//团号
                    TCID: '',
                    OutBranchId: -1,
                    OutGroupAuditState: 1,
                    OutGroupAuditEmpId: 0,//当前登录用户id ， 如果有查询所有的权限 则=0
                    QStartDate: '',
                    QEndDate: ''
                },
                TeamListArr:[],
                total:0,
                EmployeeId:0,
                multipleSelection: [],
                AuditLoading: false,
                dialog: {
                    show: false,
                    ConfigId: '',
                    OfferId: ''
                },
              getCompanyMsg:{
                RB_Group_Id:'0',
                Status:'0',
              },
              userinfo: {},
              DatelistBM:[]
            }
        },
        components: {
            priceDialog
        },
        created() {
            this.getTeamList()
            let userinfo = this.getLocalStorage();
            this.userinfo = this.getLocalStorage()
            this.getCompanyMsg.RB_Group_Id=userinfo.RB_Group_id;
            this.EmployeeId = userinfo.EmployeeId
            let ActionMenuCode=userinfo.ActionMenuCode;
            if(ActionMenuCode.indexOf('Finance_clumpSeeAll')!=-1){//如果有权限 可以查看所有 如果没有只能看自己审核的
                if(userinfo.EmployeeId==2786||userinfo.EmployeeId==5){
                  this.PendingMyTrial = '1'
                  this.msg.OutGroupAuditEmpId = userinfo.EmployeeId
                }else this.msg.OutGroupAuditEmpId = 0
            }else{
                this.msg.OutGroupAuditEmpId = userinfo.EmployeeId
            }
            if(this.$route.query && this.$route.query.TCID){
                this.msg.TCID = this.$route.query.TCID
            }
            this.getCompany()
        },
        mounted() {
            this.getList()

        },
        methods: {
          getDatesBM(){
            if(this.DatelistBM){
              this.msg.QStartDate = this.DatelistBM[0];
              this.msg.QEndDate = this.DatelistBM[1];
            }if(!this.DatelistBM){
              this.msg.QStartDate = '';
              this.msg.QEndDate = '';
            }
          },
          getPendingMyTrial(){
            let ActionMenuCode=this.userinfo.ActionMenuCode;
            if(ActionMenuCode.indexOf('Finance_clumpSeeAll')!=-1){
              if(this.PendingMyTrial=='0') {
                this.msg.OutGroupAuditEmpId = '0'
              }else{
                this.msg.OutGroupAuditEmpId = this.userinfo.EmployeeId
              }
              this.getList()
            }
          },
          // 销售预期提成
      goAnticipate(row,type){
          let userInfo = this.getLocalStorage();
          let name
          if(type==1){//国内
            name = 'domesticCommissiondetails'
          }else if(type==2){//单项
            name = 'ServiceCommissiondetails'
          }else if(type==3){//台湾
            name = 'domesticCommissiondetailsTW'
          }else if(type==4){//同业
            name = 'TradeTicketDetails'
          }
          this.$router.push({
            name: name,
            query: {
              Type: 1,
              TCNUM: row.TCNUM,
              blank: 'y'
            }
          });
        },
        getCompany(){
                this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
                    if(res.data.resultCode==1){
                        this.companyList=res.data.data;
                    }else{}
                },err=>{})
            },
            showDialog(ConfigId, OfferId) {
                this.dialog = {
                    show: true,
                    ConfigId,
                    OfferId
                }
                this.$nextTick(() => {
                this.$refs.dialog.getPostData()
                })
            },
            selectable(row, index) {
                if(this.active==1){
                    return true
                }else{
                    return false
                }
            },
            setAudit(type){
                let ids = this.multipleSelection.map(x=>{ return x.TCID})
                if(ids.length==0){
                    return this.$message.error(this.$t('objFill.v101.FinancialModule.qinggxxyplshsj'));
                }
                let that = this;
                that.$confirm(this.$t('objFill.v101.FinancialModule.shiftggplshsj'), this.$t('tips.tips'), {
                    confirmButtonText: this.$t('pub.sureBtn'),
                    cancelButtonText: this.$t('pub.cancelBtn'),
                    type: 'warning'
                }).then(() => {
                    for(let i=0;i<ids.length;i++){
                        setTimeout(()=>{
                            this.groupAudit(2,ids[i],'multiple',(i+1)==ids.length?ids.length:0)
                        },500)
                    }
                }).catch(() => {

                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getControlList() {
                this.msg.pageIndex = 1;
                this.getList()
            },
            handleSizeChange(e){
                this.msg.pageSize = e;
                this.getList()
            },
            handleCurrentChange(e){
                this.msg.pageIndex = e;
                this.getList()
            },
            getList() {
                this.loading = true
                let msg = JSON.parse(JSON.stringify(this.msg))
                if(msg.TCID==''){
                    msg.TCID = 0
                }
                this.apipost(
                    "travel_get_GetOutGroupAuditPageListNew",
                    msg,
                    res => {
                        this.loading = false
                        if (res.data.resultCode == 1) {
                            this.dataList = res.data.data.pageData;
                            this.total = res.data.data.count;

                        }else{
                            this.Error(res.data.message);
                        }
                    },
                    err => {

                    }
                );
            },
            shenhei(item) {
                let that = this;
                that.$confirm(this.$t('objFill.v101.dmc.shifshtggt'), this.$t('tips.tips'), {
                    confirmButtonText: this.$t('pub.sureBtn'),
                    cancelButtonText: this.$t('pub.cancelBtn'),
                    type: 'warning'
                }).then(() => {
                    this.groupAudit(2,item.TCID)
                }).catch(() => {

                });
            },
            financeAudit(item){
                this.dataRow = item
                this.auditDialog = true
                this.auditRemark='';
            },
            financeRemark(item){
                this.dataRow = item
                this.auditDialog2 = true
                this.auditRemark=item.AuditRemark;
            },
            cancelOrderHandler(){
                if(!this.cancelRemark) return this.Error(this.$t('objFill.v101.dmc.qingsrbhyy'))
                let that = this;
                that.$confirm(this.$t('objFill.v101.dmc.shifoubhgt'), this.$t('tips.tips'), {
                    confirmButtonText: this.$t('pub.sureBtn'),
                    cancelButtonText: this.$t('pub.cancelBtn'),
                    type: 'warning'
                }).then(() => {
                    //掉接口
                    this.groupAudit(3,this.dataRow.TCID)
                }).catch(() => {

                });
            },
            auditOrderHandler(){
                this.groupAudit(2,this.dataRow.TCID);
            },
            auditOrderHandler2(){
                this.groupRemark(this.dataRow.TCID);
            },
            bohui(item) {
                this.dataRow = item
                this.cancelOrderDialog = true
                this.cancelRemark='';
                return
                let that = this;
                that.$confirm(this.$t('objFill.v101.dmc.shifoubhgt'), this.$t('tips.tips'), {
                    confirmButtonText: this.$t('pub.sureBtn'),
                    cancelButtonText: this.$t('pub.cancelBtn'),
                    type: 'warning'
                }).then(() => {
                    //掉接口
                    this.groupAudit(3,item.TCID)
                }).catch(() => {

                });
            },
            groupAudit(type,TCID,name,length){

                this.apipost("travel_post_SetOutGroupAuditInfo", {
                    TCID:TCID,
                    OutGroupAuditState:type,
                    OutGroupAuditRemark:this.cancelRemark,
                    AuditRemark: this.auditRemark
                }, res => {
                    if (res.data.resultCode == 1) {
                        if(!name){
                           this.cancelOrderDialog = false
                           this.auditDialog=false
                           this.Success(res.data.message);
                           this.getList()
                        }else{
                            if(length){
                                this.cancelOrderDialog = false
                                this.auditDialog=false
                                this.Success(res.data.message);
                                this.getList()
                            }
                        }
                    } else {
                        this.Error(res.data.message);
                    }
                },
                    err => { }
                );
            },
            groupRemark(TCID){
            this.apipost("travel_post_SetOutGroupAuditInfo", {
                TCID:TCID,
                OutGroupAuditState:4,
                OutGroupAuditRemark:'',
                AuditRemark: this.auditRemark
            }, res => {
                if (res.data.resultCode == 1) {
                    this.auditDialog2=false;
                    this.dataRow.AuditRemark=this.auditRemark;
                    this.Success(res.data.message);
                } else {
                    this.Error(res.data.message);
                }
            },
                err => { }
            );
            },
            goTeamBalance(id, OutBranchId) {//团队收支明细
                this.$router.push({
                    name: "TeamBalancePayment",
                    query: {
                        id: id,
                        IsHaveAuth: true,
                        blank: "y",
                        tab: "团队收支明细"
                    }
                });
            },
            getTeamList() {
                this.apipost("travel_get_GetTravelPriceTeamTypeList", {}, res => {
                    if (res.data.resultCode == 1) {
                        this.TeamListArr = res.data.data;
                    } else {
                        this.Error(res.data.message);
                    }
                },
                    err => { }
                );
            },
            goTravel(TCID,type){//跳转到团队列表
              let path = 'TravelControlList'
              if(type==1) path = 'TravelControlListSale'
              if(type==2) path = 'oneDayTrip'
                this.$router.push({
                    path: path,
                    query: {
                        TCID: TCID,
                        blank: 'y',
                        tab: '团控列表'
                    }
                });
            }
        }
    }

</script>
<style scoped>
    .groupApproval .singeRowTable {
        margin-top: 20px;
    }

    ._nav {
        margin: 20px 0 0 0;
        background-color: #f5f5f5;
    }

    ._nav li {
        float: left;
        font-size: 14px;
        color: #666666;
        padding: 15px 20px;
        cursor: pointer;
        position: relative;
        background-color: #f1f1f1;
        margin-right: 5px
    }

    ._nav li._active {
        background-color: #FFFFFF;
        color: #333333
    }

    ._nav li._active::after {
        content: "";
        width: 20px;
        height: 3px;
        background-color: #E95252;
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 38%;
    }

    ._icon_btn i {
        width: 30px;
        height: 30px;
        display: inline-block;
        color: white !important;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        margin-right: 10px;
        cursor: pointer;
        outline: none;
    }

    ._icon_btn i.icon-ico_commodity_defaul {
        background-color: #F16C3C;
    }

    ._icon_btn i.icon-ico_commodity_defaul:hover {
        background-color: #e87c54
    }

    ._icon_btn i.icon-ico_commodity_defaul:active {
        background-color: #f76630
    }

    ._icon_btn i.icon-shenhebohui {
        background-color: #E95252
    }

    ._icon_btn i.icon-mingxi {
        background-color: rgb(71, 191, 140)
    }
</style>