<style>
  .CM_detail {
    color: #3980C8;
    cursor: pointer;
  }

  .CM_detail:hover {
    text-decoration: underline;
    color: #E95252;
  }
  .Complain_info{
    margin:20px 0;
  }
  .Complain_item{
    font-weight: 400;
    padding: 10px;
    height: 100%;
    border: 1px solid #E6E6E6;
    background-color: #FFFFFF;
    color: #333333;
  }
  .Complain_item span{
    font-size:14px;
  }
  .Complain_item div{
    margin-top:7px;
  }
  .Complain_item div i{
    font-size:12px;
  }
  .complain_col{
    height:60px;
  }
  .Complain_green{
    color:#1BC594;
  }
  .Com_yingfu{
      font-size:16px;
      color:#1BC594;
      font-weight:bold;
  }
  .Com_zong{
      font-size:16px;
      color: #E95252;
      font-weight:bold;
  }
</style>

<template>
  <div class="flexOne">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>投诉编号</em>
            <el-input placeholder="" v-model="queryMsg.ID" @keyup.native="checkInteger(queryMsg,'ID')"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>线路</em>
            <el-select v-model="queryMsg.LineID" filterable :placeholder="$t('pub.pleaseSel')"
                       @change="getLineTeamList()">
              <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
              <el-option v-for="item in queryCommonData.LineList" :label="item.LineName"
                         :value="item.LineID" :key="item.LineID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>系列</em>
            <el-select v-model="queryMsg.LineteamId" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
              <el-option v-for="item in queryCommonData.LineTeamList" :label="item.LtName"
                         :value="item.LtID" :key="item.LtID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>团队编号</em>
            <el-input placeholder="" v-model="queryMsg.TCID"  @keyup.native="checkInteger(queryMsg,'TCID')" ></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>订单号</em>
            <el-input placeholder="" v-model="queryMsg.OrderID" @keyup.native="checkInteger(queryMsg,'OrderID')"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>投诉内容</em>
            <el-select v-model="queryMsg.Contentrs" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
              <el-option v-for="item in queryCommonData.ComplainContentEnumList" :label="item.Name"
                         :value="item.Id" :key="item.Id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>严重程度</em>
            <el-select v-model="queryMsg.SeverityLevel" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
              <el-option v-for="item in queryCommonData.ComplainDealLevelList" :label="item.Name"
                         :value="item.Id" :key="item.Id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>状态</em>
            <el-select v-model="queryMsg.DisposeStatus" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
              <el-option v-for="item in queryCommonData.DisposeStatusList" :label="item.Name"
                         :value="item.Id" :key="item.Id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>处理人</em>
            <el-select class="w150" v-model="queryMsg.NextPersion" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
              <el-option v-for="item in queryCommonData.EmployeeList" :label="item.EmName"
                         :value="item.EmployeeId" :key="item.EmployeeId"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>日期</em>
            <el-date-picker value-format="yyyy-MM-dd" v-model="queryMsg.startDate" type="date"></el-date-picker>
            <el-date-picker value-format="yyyy-MM-dd" v-model="queryMsg.endDate" type="date"></el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" value="查询" @click="getList(),resetPageIndex()"/>&nbsp;
          <input type="button" class="normalBtn" value="新增" @click="goUrl('AddComplaints',0)"/>
          <input type="button" class="normalBtn" value="导出" @click="exportExcel()"/>
        </li>
      </ul>
    </div>
    <!-- 统计版块 -->
    <div class="Complain_info">
      <el-row :gutter="20">
        <el-col :span="4" class="complain_col">
          <div class="Complain_item">
            <div>
              <i class="iconfont icon-qian Complain_green"></i>
              <span>应赔总金额：<span class="Com_yingfu">{{complainStatistic.compensateTotalMoney}}</span></span>
            </div>
          </div>
        </el-col>
        <el-col :span="4" class="complain_col">
          <div class="Complain_item">
            <div>
              <i class="iconfont icon-qian Complain_green"></i>
              <span>实赔总金额：<span class="Com_zong">{{complainStatistic.backTotalMoney}}</span></span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="commonContent" v-loading="queryCommonData.loading">
      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>投诉编号</th>
          <th>团队编号</th>
          <th>订单号</th>
          <th>投诉内容</th>
          <th>严重程度</th>
          <th>记录人员</th>
          <th>状态</th>
          <th>应赔金额</th>
          <th>实赔金额</th>
          <th>创建日期</th>
          <th>当前处理人</th>
          <th>处理人耗时</th>
          <th>总耗时</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in queryCommonData.dataList">
          <td>{{item.ID}}</td>
          <td style="text-decoration:underline;cursor:pointer;"
              @click="goTeamBalancePayment('团队收支','TeamBalancePayment',item.TCID,item.OutBranchId)">
            {{item.TCNUM}}（{{item.TCID}}）
          </td>
          <td style="text-decoration:underline;cursor:pointer;"
              @click="goEnrollTotal('报名统计','enrollTotal',item.OrderID)">{{item.OrderID}}
          </td>
          <td>{{item.Contentrs}}</td>
          <td>{{item.SeverityLevelStr}}</td>
          <td>{{item.RecordEmpName}}</td>
          <td>{{item.DisposeStatusStr}}</td>
          <td>{{item.DisposeStatus===4?item.ShouldPayMoney:''}}</td>
          <td>{{item.DisposeStatus===4?item.BackMoney:''}}</td>
          <td>{{item.CreateTime}}</td>
          <td>{{item.CurrentDealEmpName}}</td>
          <td>{{getTimeConsuming(item,1)}}</td>
          <td>{{getTimeConsuming(item,2)}}</td>
          <td>
            <span class="CM_detail" @click="goUrl('ComplaintsDetail',item.ID,item.OrderID,'投诉详情')">详情</span>
            <span class="CM_detail" @click="delComplaints(item.ID,item.CreateBy)">删除</span>
          </td>
        </tr>
      </table>
      <div class="noData" v-show="queryCommonData.noData">
        {{$t('system.content_noData')}}
      </div>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryCommonData.currentPage"
                     layout="total,prev, pager, next, jumper" :page-size="queryCommonData.pageSize"
                     :total="queryCommonData.total"></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        queryCommonData: {
          //下拉默认值
          SelectDefaultValue: 0,
          //加载
          loading: false,
          //线路下拉
          LineList: [],
          //系列下拉
          LineTeamList: [],
          //紧急程度
          ComplainDealLevelList: [],
          //投诉内容
          ComplainContentEnumList: [],
          //状态
          DisposeStatusList: [],
          //员工
          EmployeeList: [],
          //是否有数据
          noData: false,
          //总数
          total: 0,
          //第几页
          currentPage: 1,
          pageSize: 10,
          //数据列表
          dataList: [],
        },
        queryMsg: {
          ID: '',
          LineID: 0,
          LineteamId: 0,
          Contentrs: '',
          SeverityLevel: 0,
          DisposeStatus: 0,
          NextPersion: 0,
          OrderID: '',
          TCID: '',
          pageIndex: 1,
          pageSize: 10,
          startDate:'',
          endDate:'',
        },
        complainStatistic: {}
      }
    },
    methods: {
      //添加修改投诉
      goUrl (path, id) {
        this.$router.push({
          path: path,
          query: {
            id: id,
            blank: 'y',
            tab: '投诉编辑'
          }
        })
      },
      getList () {
        this.queryCommonData.loading = true
        this.queryMsg.pageIndex = this.queryCommonData.currentPage
        this.queryMsg.pageSize = this.queryCommonData.pageSize
        let msg = JSON.parse(JSON.stringify(this.queryMsg))
        if (msg.ID == '') {
          msg.ID = 0
        }
        if (msg.OrderID == '') {
          msg.OrderID = 0
        }
        if (msg.TCID == '') {
          msg.TCID = 0
        }
        this.apipost('conplain_get_GetPageList', msg, res => {
          this.queryCommonData.loading = false
          if (res.data.resultCode == 1) {
            this.queryCommonData.total = res.data.data.count
            this.queryCommonData.noData = !this.queryCommonData.total > 0
            this.queryCommonData.dataList = res.data.data.pageData
          } else {
            this.Error(res.data.message)
          }
        }, err => {
        })
      },
      //翻页
      handleCurrentChange (val) {
        this.queryCommonData.pageIndex = val
        this.getList()
      },
      //重新查询
      resetPageIndex () {
        this.queryCommonData.pageIndex = 1
        this.queryMsg.pageIndex = 1
        this.queryCommonData.currentPage = 1
      },
      //获取线路列表
      getLineList () {
        this.apipost('line_post_GetList', {}, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineList = res.data.data
          }
        })
      },
      //获取系列列表
      getLineTeamList () {
        this.queryMsg.LineteamId = 0
        let msg = {
          lineID: this.queryMsg.LineID,
          isTOOP: 1
        }
        this.apipost('team_post_GetList', msg, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineTeamList = res.data.data
          }
        })
      },
      //获取投诉枚举集合
      getEnumeration () {
        this.apipost('conplain_get_GetComplainEnumList', {}, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.ComplainContentEnumList = res.data.data.ComplainContentEnumList
            this.queryCommonData.ComplainDealLevelList = res.data.data.ComplainDealLevelList
            this.queryCommonData.DisposeStatusList = res.data.data.DisposeStatusList
          } else {
            this.Error(res.data.message)
          }
        })
      },
      //根据当前员工所在部门获取该部门及子部门员工信息
      getEmployeeList () {
        let userInfo = this.getLocalStorage()
        let msg = {
          GroupId: userInfo.RB_Group_id,
          BranchId: '-1',
          DepartmentId: '-1',
          PostId: '-1',
          IsLeave: '0'
        }
        this.apipost(
          'admin_get_EmployeeGetList', {},
          res => {
            if (res.data.resultCode == 1) {
              this.queryCommonData.EmployeeList = res.data.data
            }
          },
          err => {
          }
        )
      },
      //跳转
      goUrl (path, id, orderId, title) {
        this.$router.push({
          name: path,
          query: {
            id: id,
            orderId: orderId,
            blank: 'y',
            tab: title
          }
        })
      },
      //获取耗时
      getTimeConsuming (item, type) {
        var endDate = new Date()//获取系统当前时间
        let resultStr = ''
        //处理人耗时
        if (type === 1) {
          if (item.DisposeStatus === 2) {
            resultStr = this.$commonUtils.getDateTimeInterval(new Date(item.DealCreateTime), endDate)
          } else {
            resultStr = item.ElapsedTime
          }
        } else {//总耗时
          if (item.DisposeStatus === 2) {
            resultStr = this.$commonUtils.getDateTimeInterval(new Date(item.CreateTime), endDate)
          } else {
            resultStr = this.$commonUtils.getDateTimeInterval(new Date(item.CreateTime), new Date(item.UpdateTime))
          }
        }
        return resultStr
      },
      goEnrollTotal (name, path, orderId) {
        this.$router.push({
          name: path,
          query: {orderId: orderId, blank: 'y', tab: name}
        })
      },
      goTeamBalancePayment (name, path, id, outBranchId) {
        this.$router.push({
          name: path,
          query: {id: id, outBranchId: outBranchId, blank: 'y', tab: name}
        })
      },
      //获取投诉统计
      getComplainStatistic () {
        let msg = {}
        this.apipost('travel_post_GetComplainStatistic', msg, res => {
          if (res.data.resultCode == 1) {
            this.complainStatistic = res.data.data
          }
        })
      },
      exportExcel() {
        //导出报表
        let msg = JSON.parse(JSON.stringify(this.queryMsg))
        if (msg.ID == '') {
          msg.ID = 0
        }
        if (msg.OrderID == '') {
          msg.OrderID = 0
        }
        if (msg.TCID == '') {
          msg.TCID = 0
        }
        let userInfo = this.getLocalStorage();
        msg.UId=userInfo.EmployeeId;
        var fileName = "投诉报表.xls";
        this.GetLocalFile("get_complain_GetExport", msg, fileName);
      },
      //删除
      delComplaints(ID,UserID){
        let userInfo = this.getLocalStorage();
        if(userInfo.EmployeeId==UserID){
          var that = this;
          that.Confirm("是否删除?", function () {
            var msg = {
              ID : ID
            };
            that.apipost(
              "conplain_post_Remove",msg,res => {
                if (res.data.resultCode == 1) {
                  that.Success(res.data.message);
                  that.getList();
                }else{
                  that.Error(res.data.message);
                }
              },
              null
            );
          });
        }else{
          this.Error('只能删除自己创建的单据');
        }
      }
    },
    mounted () {
      this.getLineList()
      this.getEnumeration()
      this.getEmployeeList()
      this.getList()
      this.getComplainStatistic()
    }
  }

</script>