<template>
  <div class="box" style>
    <el-tabs v-model="tabs" type="card">
      <el-tab-pane label="申请通过" name="complete"></el-tab-pane>
      <el-tab-pane label="待审批" name="waiting"></el-tab-pane>
      <el-tab-pane label="被驳回" name="refuse"></el-tab-pane>
    </el-tabs>

    <el-row style="margin-bottom: 15px;">
      <el-col :span="12">
        <el-button type="primary" @click="dialogVisible = true">申请积分</el-button>
      </el-col>
      <el-col :span="6" :offset="6">
        <el-input v-model="formData.keyword" placeholder="输入申请内容" @keyup.enter.native="searchFun">
          <el-button slot="append" @click="searchFun" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-table
      :data="dataList"
      stripe
      fit
      v-loading="table_loading"
      v-if="tabs == 'complete'"
      @row-click="openDetail"
    >
      <el-table-column label="申请内容" prop="remark">
        <template slot-scope="scope">{{scope.row.remark.customize || scope.row.remark.rule}}</template>
      </el-table-column>
      <el-table-column label="积分" prop="review_point" width="120">
        <template slot-scope="scope">
          <span :class="{color_green: scope.row.point > 0, color_red: scope.row.point < 0}">
            <span v-show="scope.row.point > 0">+</span>
            {{scope.row.point}} {{scope.row.pt_id==3?'B分':scope.row.pt_id==2?'A分':scope.row.pt_id==1?'绩效分':''}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="event_time" width="150"></el-table-column>
      <template slot="empty">
        <div class="nopoint_box" v-if="!formData.keyword">
          <div class="noimg"></div>
          <span class="title">
            你还没有申请积分 现在
            <el-button type="text" @click="dialogVisible = true">申请积分</el-button>
          </span>
        </div>
        <div class="nopoint_box" v-else>
          <div class="noimg"></div>
          <span class="title">暂无数据</span>
        </div>
      </template>
    </el-table>

    <el-table
      :data="dataList"
      stripe
      fit
      v-loading="table_loading"
      v-if="tabs == 'waiting'"
      @row-click="openDetail"
    >
      <el-table-column label="申请内容" prop="remark">
        <template slot-scope="scope">{{scope.row.remark.customize || scope.row.remark.rule}}</template>
      </el-table-column>
      <!-- <el-table-column label="积分" prop="review_point" width="120">
        <template slot-scope="scope">
          <span>
            <span v-show="scope.row.point > 0">+</span>
            {{scope.row.point}} B分
          </span>
        </template>
      </el-table-column> -->
      <el-table-column label="积分" prop="review_point" width="120">
        <template slot-scope="scope">
          <span class="green" v-show="scope.row.point>=0">+{{scope.row.point}} {{$getTypsName(scope.row.pt_id)}}</span>
          <span class="red" v-show="scope.row.point < 0">{{ scope.row.point }} {{$getTypsName(scope.row.pt_id)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="event_time" width="150"></el-table-column>
      <template slot="empty">
        <div class="nopoint_box" v-if="!formData.keyword">
          <div class="noimg"></div>
          <span class="title">
            暂无待审批数据
            <!-- 你还没有申请积分 现在
            <el-button type="text" @click="dialogVisible = true">申请积分</el-button> -->
          </span>
        </div>
        <div class="nopoint_box" v-else>
          <div class="noimg"></div>
          <span class="title">暂无数据</span>
        </div>
      </template>
    </el-table>

    <el-table
      :data="dataList"
      stripe
      fit
      v-loading="table_loading"
      v-if="tabs == 'refuse'"
      @row-click="openDetail"
    >
      <el-table-column label="申请内容" prop="remark">
        <template slot-scope="scope">{{scope.row.remark.customize || scope.row.remark.rule}}</template>
      </el-table-column>
      <el-table-column label="时间" prop="event_time" width="150"></el-table-column>
      <template slot="empty">
        <div class="nopoint_box" v-if="!formData.keyword">
          <div class="noimg"></div>
          <span class="title">
            暂无被驳回数据
            <!-- 你还没有申请积分 现在
            <el-button type="text" @click="dialogVisible = true">申请积分</el-button> -->
          </span>
        </div>
        <div class="nopoint_box" v-else>
          <div class="noimg"></div>
          <span class="title">暂无数据</span>
        </div>
      </template>
    </el-table>

    <center style="margin-top: 15px;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.page"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :page-size="pageLimit"
        :total="total"
      ></el-pagination>
    </center>

    <el-drawer :visible.sync="detailShow" :with-header="false" :size="'600px'">
      <div class="drawer_title">申请详情</div>
      <div class="detail_popup" v-loading="detail_loading" v-if=" detail_info!== null">
        <el-row :gutter="10" style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
          <el-col :span="24">
            <div class="flex-box flex-v-ce">
              <userImage
                v-if="detail_info.employee_info"
                :id="detail_info.employee_id"
                :user_name="detail_info.employee_info.name"
                :img_url="detail_info.employee_info.img_url"
                class="fl"
                width="50px"
                height="50px"
                fontSize="15"
                style="display: inline-block; margin-right: 10px;"
              ></userImage>
              <div class="user_text">
                <div v-if="detail_info.employee_info"><WWOpenData type="userName" :openid="detail_info.employee_info.name"></WWOpenData></div>
                <div v-if="detail_info.status == 1" style="margin: 0 10px;">
                  <span class="event-info__value green" v-if="detail_info.review_point >= 0">+{{ detail_info.review_point}} {{$getTypsName(detail_info.pt_id)}}</span>
                  <span class="event-info__value red" v-else>{{ detail_info.review_point}}{{$getTypsName(detail_info.pt_id)}}</span>
                </div>
                <div style="margin-left: 10px;">
                  <span :class="{ yellow: detail_info.review_status == 0 }">{{ detail_info.status_mark }}</span>
                </div>
                <!-- 优化 -->
                <!-- <div v-for="(item,index) in detail_info.process" :key="index" v-show="item.review_point != 0">
                  <p v-if="detail_info.status == 1">
                    <span v-show=" item.review_point >= 0 &&detail_info.item_prize_type == 1 || item.review_point >= 0 && detail_info.item_prize_type == -1|| item.review_point >= 0 && detail_info.item_prize_type == 0" style="color:#f56c6c;font-size:16px;padding-left:8px">+{{item.review_point}}</span>
                    <span v-show=" item.review_point <= 0 && detail_info.item_prize_type == 2 || item.review_point <= 0 && detail_info.item_prize_type == -1|| item.review_point <= 0 && detail_info.item_prize_type == 0" style="color:#67C23A;font-size:16px;padding-left:8px">{{item.review_point}}</span>
                    <span> {{detail_info.pt_id==1?'绩效分':detail_info.pt_id==2?'A分':detail_info.pt_id==3?'B分':''}}</span>
                  </p>
                </div> -->
              </div>
            </div>
            <!-- <p class="user_text text_ccc">{{detail_info.review_status_mark}}</p> -->
          </el-col>
        </el-row>
        <!-- <el-row :gutter="10" v-show="detail_info.source_type_mark">
          <el-col :span="4">来源类型</el-col>
          <el-col :span="20">{{detail_info.source_type_mark}}</el-col>
        </el-row> -->
        <el-row :gutter="10" v-for="(item,index) in detail_info.detail" :key="index">
          <el-col :span="4">{{item.key}}</el-col>
          <el-col :span="20" v-if="item.key == '附件'">
            <el-image
              v-for="(items, indexs) in item.value" :key="indexs"
              style="width: 100px; height: 100px;margin:2px;"
              :src="items"
              :preview-src-list="item.value"
            >
            </el-image>
          </el-col>
           <el-col :span="20" v-else-if="item.key == '收益人'">
            <WWOpenData type="userName" :openid="item.value"></WWOpenData>
					</el-col>
          <el-col :span="20" v-else-if="item.key == '奖扣目标'">
            <WWOpenData type="userName" :openid="item.value"></WWOpenData>
					</el-col>
          <el-col :span="20" v-else-if="item.key == '申请人'">
            <WWOpenData type="userName" :openid="item.value"></WWOpenData>
					</el-col>
          <el-col :span="20" v-else>{{ item.value }}</el-col>
        </el-row>
        
        <el-row :gutter="10" v-if="detail_info.files !=null && detail_info.files > 0">
          <el-col :span="4">图片</el-col>
          <el-col :span="20">
            <el-image
              v-for="(item,index) in detail_info.files"
              :key="index"
              style="width: 100px; height: 100px"
              :src="item"
            ></el-image>
          </el-col>
        </el-row>
        
        <div v-show="detail_info.process">
        	<Steps :process="detail_info.process"></Steps>
        </div>
        <div class="btn_danger flex-box flex-center-center" v-if="detail_info.applyor_id==$userInfo().id&&detail_info.can_refuse == '1'&&detail_info.source_type==2">
           <el-button type="danger" class="danger" @click="revocation" :loading="cx_loading">撤销</el-button>
         </div>
        <!-- <div v-show="detail_info.process != false">
          <p class="row_title">
            审批
            <span class="row_tips">多人审批时，以最后一人为准</span>
          </p>

          <div class="examine_steps">
            <el-steps direction="vertical" :space="50">
              <el-step v-for="(item,index) in detail_info.process" :key="index">
                <template slot="icon">
                  <userImage
                    width="36px"
                    height="36px"
                    :img_url="item.img_url"
                    :user_name="item.name"
                  ></userImage>
                </template>
                <template slot="title">
                  <div style="color: #303133;font-size:14px;margin-top:-2px;">
                    <WWOpenData type="userName" :openid="item.name"></WWOpenData> {{item.remark}}
                  </div>
                </template>
                <template slot="description">
                  <div>{{item.time}}</div>
                  <div style="color: #333; margin-bottom: 15px;">{{item.review_remark}}</div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div> -->
      </div>
    </el-drawer>

    <applicationIntegrationPopup title="申请积分" :visible.sync="dialogVisible"></applicationIntegrationPopup>
  </div>
</template>

<script>
import moment from "moment";
import Steps from '@/components/Steps.vue';
import EmployeeSelector from "@/views/common/EmployeeSelector";
import applicationIntegrationPopup from "@/views/common/applicationIntegrationPopup";
export default {
  data() {
    return {
      tabs: "complete",
      dataList: [],
      table_loading: false,
      detailShow: false,
      detail_loading: false,
      formData: {
        type: "complete",
        pt_id: 0,
        page: 1,
        page_size: 10,
        keyword: ""
      },
      total: 0,
      pageLimit: 10,
      point_types: JSON.parse(localStorage.getItem("SET_POINT_TYPES")),
      employee_name: JSON.parse(localStorage.getItem("SET_EMPLOYEE_MAP")),
      detail_info: {},

      dialogVisible: false,
      itemIndex: 0,
      
      cx_loading:false,
      selectId:0,
    };
  },
  components: {
    EmployeeSelector,
    applicationIntegrationPopup,
    Steps
  },
  watch: {
    tabs(val) {
      this.dataList = [];
      this.total = 0
      this.formData.page = 1;
      this.formData.keyword = "";
      this.formData.type = val;
      this.get_list();
    }
  },
  mounted() {
    this.get_list();
  },
  methods: {
    // 撤销待审批
    revocation(){
    	var that=this;
    	this.$confirm('撤销此项数据将不可恢复，是否撤销?', '提示', {
    		  confirmButtonText: '确定',
    		  cancelButtonText: '取消',
    		  type: 'warning'
    		}).then(() => {
    			let data = {
    				review_id: that.selectId,
    			};
    			that.cx_loading = true;
    			that.$http('DELETE', '/api/integral/review', data).then(res => {
    				if (res.data.code == 1) {
    					that.get_list()
    				} else {
    					that.$message.error(res.data.data.msg);
    				}
    			}).finally(() => {
    				that.detailShow = false;
    				that.cx_loading = false;
    			});
    		})
    },
    getEmployeeName(id) {
      for (const key in this.employee_name) {
        if (this.employee_name[key].id == id) {
          return this.employee_name[key].name || "未知";
        }
      }
    },
    point_name(id) {
      let point = this.point_types.find(item => {
        if (item.id == id) {
          return item;
        }
      });
      return point.name;
    },
    handleCurrentChange(val) {
      this.formData.page = val;
      this.get_list();
    },
    handleSizeChange(val) {
      this.pageLimit = val;
      this.formData.page_size = this.pageLimit;
      this.get_list();
    },
    searchFun(){
      this.dataList = [];
      this.total = 0
      this.formData.page = 1;
      this.get_list();
    },
    get_list() {
      let self = this;
      this.table_loading = true;
      this.$http("get","/api/integral/review/apply/list",self.formData)
        .then(res => {
          if (res.data.code == 1) {
            self.dataList = res.data.data.list;
            self.total = res.data.data.total;
          }
        })
        .catch(e => {
          self.$message.error(e.data.msg);
        })
        .finally(() => {
          this.table_loading = false;
        });
    },
    openDetail(item) {
      this.selectId=item.id;
      let self = this;
      let data = {
        review_id: item.id
      };
      self.detailShow = true;
      self.detail_loading = true;
      this.$http('get',"/api/integral/review",data)
        .then(res => {
          if (res.data.code == 1) {
            self.detail_info = res.data.data;
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          self.detail_loading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.box {
  background-color: #ffffff;
  padding: 20px;
  min-height: calc(100vh - 160px);
}
.color_green {
  color: #4bd964;
}
.color_red {
  color: #f56c6c;
}

.detail_popup {
  padding: 20px;
  height: 90vh;
  overflow-y: auto;

  .row_title {
    position: relative;
    margin: 0 0 20px 0;
    padding-top: 12px;
    font-size: 16px;
    color: #303133;
    line-height: 22px;
  }
  .row_title:before {
    position: absolute;
    top: 0;
    content: " ";
    width: 100%;
    border-top: 1px #f8f8f8 solid;
  }
  .el-row {
    margin-bottom: 10px;
    font-size: 14px;
    .el-col-4 {
      color: #606266;
    }
  }
  .examine_steps{
    .el-step{
      flex-basis: auto !important;
    }
  }
}

// 滚动条样式
.detail_popup::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background-color: rgba(216, 216, 216, 0.8);
}
.detail_popup::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(201, 201, 201, 0);
}
.detail_popup::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
  background-color: rgb(168, 167, 167);
}

.drawer_title {
  font-size: 18px;
  padding: 20px;
  border-bottom: 1px #efefef solid;
}
.user_text {
  margin: 0;
  line-height: 25px;
  display: flex;
}
.text_ccc {
  font-size: 12px;
  color: #606266;
}
   /deep/ .el-table tr:hover{
    cursor:pointer
  }
</style>
