<template>
  <div>
    <el-radio-group v-model="type" size="medium" @change="typechange" style="margin-top: 15px;">
      <el-radio-button :label="0">全部（{{ count.total}}）</el-radio-button>
      <el-radio-button :label="1">技术培训（{{ count.type1}}）</el-radio-button>
      <el-radio-button :label="2">咨询服务（{{ count.type2}}）</el-radio-button>
      <el-radio-button :label="3">资源下载（{{ count.type3}}）</el-radio-button>
    </el-radio-group>
    <el-button type="success" @click="sale_order_rate()" style="margin-top: 15px;margin-right: 30px;float: right">服务费配置（当前{{ rate}}%）</el-button>
    <div style="clear: both;"></div>
    <el-radio-group v-model="status" size="medium" @change="statuschange" style="margin-top: 15px;">
      <el-radio-button :label="0">全部（{{ count.total}}）</el-radio-button>
      <el-radio-button :label="1">待接单（{{ count.status1}}）</el-radio-button>
      <el-radio-button :label="2">进行中（{{ count.status2}}）</el-radio-button>
      <el-radio-button :label="3">已完成（{{ count.status3}}）</el-radio-button>
      <el-radio-button :label="4">待结薪（{{ count.status4}}）</el-radio-button>
      <el-radio-button :label="5">已拒绝（{{ count.status5}}）</el-radio-button>
      <el-radio-button :label="6">已结薪（{{ count.status6}}）</el-radio-button>
      <el-radio-button :label="7">退款中（{{ count.status7}}）</el-radio-button>
      <el-radio-button :label="8">已退款（{{ count.status8}}）</el-radio-button>
    </el-radio-group>
    <div style="clear: both;"></div>
    <div  style="margin-top: 15px;margin-bottom: 15px">
      <div style="float: left;width: 200px;margin-right: 15px;">
        <el-input v-model="keywords" placeholder="UID搜索"></el-input>
      </div>
      <div style="float: left;width: 200px;margin-right: 15px;">
        <el-button type="primary" @click="searchkeywords">搜索</el-button>
      </div>
      <div style="clear: both;"></div>
    </div>

    <div>
      <el-table :data="listData" border style="width: 100%"  v-loading="loading">
        <el-table-column prop="type_text" label="服务类型"></el-table-column>
        <el-table-column
          prop=""
          label="购买方">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.buy_uid">{{ scope.row.buy_nickname }}({{ scope.row.buy_uid }})</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="服务方">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.sale_uid">{{ scope.row.sale_nickname }}({{ scope.row.sale_uid }})</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="pay_price" label="购买金额"></el-table-column>
        <el-table-column prop="real_price" label="实收金额"></el-table-column>
        <el-table-column prop="paytime" label="付款时间"></el-table-column>
        <el-table-column prop="version" label="购买来源"></el-table-column>
        <el-table-column prop="status_text" label="服务状态"></el-table-column>
        <el-table-column
          prop=""
          label="购买服务">
          <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.uid">{{scope.row.title}}</a>
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="memo" label="备注"></el-table-column>
        <el-table-column prop="uid" label="操作" min-width="120px">
          <template slot-scope="scope">
            <el-button class="status" type="primary" size="mini" @click="addmemo(scope.row)">添加备注</el-button>
            <el-button class="status" type="danger"size="mini" v-if="scope.row.status==1 && scope.row.is_remind==0" @click="isRemind(scope.row)">提醒接单</el-button>
            <el-button class="status" type="info" size="mini" v-if="scope.row.status==1 && scope.row.is_remind==1" plain disabled>已提醒</el-button>
            <el-button class="status" type="success" size="mini" v-if="scope.row.status==4" @click="pay(scope.row)">结算酬劳</el-button>
            <el-button class="status" type="warning" size="mini" v-if="scope.row.status==7" @click="tk(scope.row)">去退款</el-button>
            <el-button class="status" type="info" size="mini" v-if="scope.row.status==8" plain disabled>已退款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="padding-top: 5px">
      <el-pagination
        class="order-footer"
        background
        layout="total, prev, pager, next"
        :page-size="20"
        :total="total"
        :current-page.sync="page"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script src="./js/sale_order.js"></script>
<style scoped>
  .status{
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    margin-left:0px !important;
  }
.count-list {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}
/deep/ .mall_list .el-dialog {
  margin: 5vh auto !important;
}

/deep/ .mall_list .el-dialog__body {
  height: 70vh;
  overflow: auto;
}

/deep/ .el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

h3 {
  margin: 20px 0 20px;
}
</style>
