<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-group>

    <el-button type="primary" v-if="type===1" @click="outerVisible = true" style="margin-top: 15px;margin-right: 30px;float: right">技术分类</el-button>
    <el-button type="primary" v-if="type===2" @click="outerVisible = true" style="margin-top: 15px;margin-right: 30px;float: right">咨询分类</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="-1">全部（{{ 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-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="workfileData" border style="width: 100%"  v-loading="loading">
        <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.nickname }}({{ scope.row.uid }})</a>
          </span>
          </template>
        </el-table-column>

        <el-table-column prop="type" label="服务类型"></el-table-column>
        <el-table-column prop="title" label="服务标题"></el-table-column>
        <el-table-column prop="cate" label="资源分类"></el-table-column>
        <el-table-column prop="price" label="出售价格"></el-table-column>

        <el-table-column prop="pay_time" label="上传时间">
          <template slot-scope="scope">
            <span>{{ scope.row.addtime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="version" label="来源"></el-table-column>
        <el-table-column prop="pay_time" label="当前状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == '1'">待审核</span>
            <span v-else-if="scope.row.status == '2'">审核通过</span>
            <span v-else-if="scope.row.status == '3'">审核拒绝</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="pay_time" label="基本数据"  width="150px">
          <template slot-scope="topic">
            <el-tag type="success">购买{{topic.row.buy_num}}</el-tag>
            <el-tag type="success">浏览{{topic.row.view_num}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="uid" label="操作" width="220px">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.status == '1' " @click="infoDialogFunc(scope.row)">去审核</el-button>
            <el-button type="text" v-if="scope.row.status != '1' " @click="infoDialogFunc(scope.row)">查看详情</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>

    <el-dialog title="分类管理" :visible.sync="outerVisible"  custom-class="mall_list" lock-scroll width="70%">
      <el-button type="primary" @click="addFirstCate()" style="margin: 15px;float: right">添加一级分类</el-button>

      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="name" label="名称" ></el-table-column>
          <el-table-column  prop="f_name" label="别名" width="200">
            <template slot-scope="scope">
              <span @click="editDialogEvent(scope.row)" >{{scope.row.f_name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order" label="排序" width="200"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success" v-if="scope.row.children" @click="addDialogEvent(scope.row)">新增</el-button>
              <el-button size="mini" type="primary" v-else @click="editDialogEvent(scope.row)">编辑</el-button>
            </template>
           </el-table-column>
        </el-table>
    </el-dialog>

    <el-dialog :visible.sync="infoDialog"  custom-class="mall_list" lock-scroll width="70%">
      <h3 style="margin-top: 0px !important;">用户信息</h3>
      <el-row>
        <el-col :span="4">
          <el-col :span="24" style="overflow: hidden">
            <el-avatar style="float:left;height: 50px;width: 50px;margin-right: 20px" :src="info.user_icon"></el-avatar>
            <a target="_blank" :href="info.host+'/rooter/user/'+info.uid" style="height: 50px;line-height: 50px;float: left;color:#308eff">{{info.nickname}}({{info.uid}})</a>
          </el-col>
        </el-col>
      </el-row>

      <el-row style="margin-bottom: 15px;margin-top: 15px">
        <el-col :span="8" style="width: 150px">
          <h3 v-if="info.status==1"> 服务内容(待审核)</h3>
          <h3 v-if="info.status==2"> 服务内容(已通过)</h3>
          <h3 v-if="info.status==3"> 服务内容(已拒绝)</h3>
        </el-col>
        <el-col :span="8" style="margin-top:15px;float: left">
          <el-button size="mini" v-if="info.status==1" @click="onChange(info.id,2)" type="primary" >审核通过</el-button>
          <el-button size="mini" v-if="info.status==1" @click="onChange(info.id,3)" type="danger" >审核拒绝</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4">
          <el-col :span="24" style="overflow: hidden">
            <img width="100%" :src="info.img">
          </el-col>
        </el-col>
        <el-col :span="15">
          <div class="grid-content bg-purple-dark" style="margin-left: 20px;">{{info.title}}</div>
          <div class="grid-content bg-purple-dark" style="margin-left: 20px;color: red;margin-top: 20px">￥{{info.price}}</div>
          <div class="grid-content bg-purple-dark"  v-html="info.content" style="margin-left: 20px;margin-top: 20px"></div>
        </el-col>
      </el-row>

      <h3>审核记录</h3>

      <el-table :data="logList" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
        <el-table-column prop="content" label="审核内容" ></el-table-column>
        <el-table-column  prop="addtime" label="审核时间"></el-table-column>
        <el-table-column prop="check_name" label="审核人" ></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="添加分类" :visible.sync="addDialog" width="500px">
      <el-form :model="add_form"  label-width="70px">
        <el-form-item label="名称">
          <el-input v-model="add_form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="别名">
          <el-input v-model="add_form.f_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="add_form.order" autocomplete="off" placeholder="请输入数字"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="addDialog = false">取消</el-button>
        <el-button size="medium" type="primary" @click="formAdd">确定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="编辑分类" :visible.sync="editDialog" width="500px">
      <el-form :model="form"  label-width="70px">
        <el-form-item label="名称">
          <el-input v-model="add_form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="别名">
          <el-input v-model="add_form.f_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="add_form.order" autocomplete="off" placeholder="请输入数字"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editDialog = false">取消</el-button>
        <el-button size="medium" type="primary" @click="formAdd">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script src="./js/sale.js"></script>
<style scoped>
.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>
