<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="yqrange-index-content">
      <el-form ref="searchForm" :model="searchForm" label-width="75px" label-suffix=":" :inline="true">
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="8">
              <el-input v-model="searchForm.name" size="small" placeholder="请输入申请人姓名"></el-input>
          </el-col>
          <el-col :span="9">
            <el-input v-model="searchForm.circleName" size="small" placeholder="请输入圈子名称"></el-input>
          </el-col>
          <el-col :span="9">
              <el-select
                v-model="searchForm.status"
                placeholder="全部审核状态"
                size="small"
                clearable>
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
          </el-col>


          <el-col :span="7" style="text-align: right">
            <el-button type="primary" size="small" @click="search">搜索</el-button>
            <el-button type="default" size="small" @click="resetForm" style="margin-left:0;">取消搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;">
        <el-table-column prop="name" label="申请人" min-width="100" align="center"></el-table-column>
        <el-table-column prop="circleName" label="申请加入圈子" min-width="100" align="center"></el-table-column>
        <el-table-column prop="department" label="所属科室" min-width="100" align="center"></el-table-column>
        <el-table-column prop="hospital" label="所属医院" min-width="100" align="center"></el-table-column>
        <el-table-column prop="provinceName" label="所属省份" min-width="100" align="center"></el-table-column>
        <el-table-column prop="cityName" label="所属城市" min-width="100" align="center"></el-table-column>
        <el-table-column prop="countyName" label="所属区县" min-width="100" align="center"></el-table-column>
        <el-table-column prop="townName" label="所属街道" min-width="100" align="center"></el-table-column>
        <el-table-column prop="status" label="审核状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | circleApplyStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="370" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status != 50">
              <el-button @click="approve(scope.row)" type="text" size="small" v-if="scope.row.status != 0 && scope.row.status != 2">通过</el-button>
              <el-button @click="reject(scope.row)" type="text" size="small" v-if="scope.row.status != 0 && scope.row.status != 2">拒绝</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleNumChange"
          :current-page="searchForm.pageNo"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>

    </div>
  </div>

</template>
<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { applyList, applyUpdate} from "../../utils/yqrange/yqrangeApi";
  export default {
    components: {
      BreadCrumb
    },
    data(){
      return{
        curmbFirst: '审核列表',
        showAllFlag: false,
        showNewFlag: false,
        searchForm: {
          name: '',
          circleName: '',
          // endTime: '',
          status: -1,
          pageNo: 1,
          pageSize: 10,
        },
        totalRows: 0,
        tableData: [],
        dialogSettingVisible: false,
        settingForm:{
          circleId: null,
          settingData: []
        },
        statusList: [
          {
            value: -1,
            label: "全部状态"
          },
          {
            value: 0,
            label: "拒绝"
          },
          {
            value: 1,
            label: "待审核"
          },
          {
            value: 2,
            label: "通过"
          },
        ],
        dialogVisible: false
      }
    },
    created() {
      this.initPrivilege();
      this.search();
    },
    methods: {

      initPrivilege(){
        let idType = localStorage.getItem('storageIdType');
        // if(idType == null || idType == ""){
        //   idType = 2;
        //   localStorage.setItem('storageIdType', idType);
        // }
        // this.searchForm.userType = idType;

        // 内部用户:运营人员
        if(idType == "1"){
          this.showAllFlag = true;
          this.showNewFlag = true;
        }
        // 外部用户
        else if(idType == "2"){
          this.showAllFlag = false;
          setTimeout(() => {
            this.getUserAuth();
          },1500)

        }

      },
      // 外部用户权限
      getUserAuth(){

        let highMainManager = localStorage.getItem('highMainManager');
        let mainManager = localStorage.getItem('mainManager');
        let manager = localStorage.getItem('manager');

        if(highMainManager == "1" || mainManager == "1"){
          this.showNewFlag = true;
        }
        else if(manager == "1"){
          this.showNewFlag = false;
        }
        // localStorage.setItem('ordinary', vm.setStoreData(ordinary))

      },

      // 搜索
      search(){
        this.searchForm.pageNo = 1;
        this.searchList();
      },

      searchList() {
        openLoading(this);
        let params = this.searchForm;

        console.log('查询圈子')
        applyList(params).then((res) => {
          closeLoading(this);
          if(res.code == "000000") {
            this.tableData = res.data.list;
            this.totalRows = res.data.total;
          } else {
            this.tableData = [];
          }
        }).catch((error) => {
          // this.$message({
          //   message: error,
          //   type: 'error'
          // });
          this.$message.error("请重试");
        })
      },

      resetForm() {
        this.searchForm.name = "";
        this.searchForm.circleName = "";
        this.searchForm.status = -1;
        console.log('重置')
        this.search();
      },


      // 更新圈子状态（上线，下线）
      updateStatus(params){
        applyUpdate(params).then((res) => {
          closeLoading(this);
          if(res.code == "000000") {
            this.$message.success("成功");
            this.searchList();
          } else {
            this.$message.success("失败");
          }
        }).catch((error) => {
          // this.$message({
          //   message: error,
          //   type: 'error'
          // });
          this.$message.error("请重试");

        })


      },

     // 0:拒绝，1:待审核；2.通过
      approve(row){

        let params = {
          applyList: [{
            "circleId": row.circleId,
            "doctorId": row.doctorId,
            "status": 2
          }]
        };

        this.updateStatus(params);
      },

      //拒绝
      reject(row) {

        let params = {
          applyList: [{
            "circleId": row.circleId,
            "doctorId": row.doctorId,
            "status": 0
          }]
        };
        this.$confirm(`拒绝后"${row.name}"将无法访问"${row.circleName}"`, `确认拒绝`, {
          confirmButtonText: '拒绝',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'range-make-box',
        }).then(() => {
          this.updateStatus(params);

          //  confirm
        }).catch(() => {
          //  cancel
        });
      },



      // 关闭
      handleSettingClose(){
        this.dialogSettingVisible = false;
      },

      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.search();
      },
      handleNumChange(val) {
        this.searchForm.pageNo = val;
        this.searchList();
      },


    },
  }
</script>
<style lang="scss">
  .yqrange-index-wrapper{
    .yqrange-index-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 12px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
  }
  /*.range-make-box{*/
  /*.el-message-box__btns{*/
  /*margin-top: 30px;*/
  /*}*/
  /*}*/
</style>
