<style>
  .ComplaintsDetail {
    width: 800px;
    height: auto;
    margin: 50px auto;
    overflow: hidden;
    padding: 50px 20px 20px;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: relative;
  }

  .ComplaintsDetail .CD_Nav {
    position: absolute;
    width: 800px;
    height: 40px;
    line-height: 40px;
    left: 0;
    top: 0;
    color: #666;
    background: #eee;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .ComplaintsDetail .CD_Detail > p {
    background: #ccc;
    color: #333;
    padding: 5px 0;
    text-indent: 11px;
  }

  .ComplaintsDetail .CD_OrderList {
    overflow: hidden;
    width: 800px;
  }

  .ComplaintsDetail .CD_OrderList ul {
    overflow: hidden;
  }

  .ComplaintsDetail .CD_OrderList ul li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
    width: 380px;
    height: 36px;
    line-height: 36px;
    border-bottom: 1px solid #ccc;
  }

  .ComplaintsDetail .CD_OrderList ul li:nth-child(2n + 1) {
    border-right: 1px solid #ccc;
    box-sizing: border-box;
  }

  .ComplaintsDetail .CD_OrderList ul li span {
    display: inline-block;
    width: 80px;
    text-align: right;
  }

  .ComplaintsDetail .CD_Messagebox {
    clear: both;
    border: 1px solid #ccc;
    height: auto;
    background: #eee;
    overflow: hidden;
    padding: 10px 20px;
    margin: 0 0 10px 0;
  }

  .ComplaintsDetail .CD_Messagebox p.t {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    height: 28px;
    color: #666;
    line-height: 28px;
    margin: 0 0 10px 0;
  }

  .ComplaintsDetail .CD_Messagebox p.t > span {
    float: right;
  }

  .ComplaintsDetail .CD_Messagebox p.f {
    border-top: 1px solid #ccc;
    font-weight: bold;
    height: 28px;
    line-height: 28px;
    margin: 10px 0 0 0;
    padding-top: 5px;
    color: #666;
  }

  .ComplaintsDetail .CD_Messagebox p.f > span {
    float: right;
  }

  .ComplaintsDetail .CD_aboutList {
    overflow: hidden;
    width: 800px;
  }

  .ComplaintsDetail .CD_aboutList ul li {
    float: left;
    width: 380px;
    height: 36px;
    line-height: 36px;
    border-bottom: 1px dashed #ccc;
  }

  .ComplaintsDetail .CD_aboutList ul li:nth-child(1) {
    width: 760px;
  }

  .ComplaintsDetail .CD_aboutList ul li span {
    display: inline-block;
    width: 80px;
    text-align: right;
  }

  .CD_OrderList > a {
    color: #3980c8 !important;
    cursor: pointer;
  }

  .CD_OrderList > a:hover {
    color: #bd2e40 !important;
    text-decoration: underline !important;
  }

  .CP_redType {
    color: red;
  }

  .CP_Chuli {
    margin: 20px 0;
    background: #eee !important;
  }

  .CD_Complaints {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .CD_Conditions {
    background: #fff;
    margin: 5px 0;
    padding: 5px 10px 10px 10px;
    text-indent: 0;
    border-bottom: 1px solid #ccc;
  }

  .CD_dealResult {
    color: #3980C8;
    display: inherit;
  }

  .CD_dealResult:hover {
    text-decoration: underline;
    color: #E95252;
  }

  .CD_ListLi li {
    border: 1px solid #ccc;
    padding: 4px 8px;
    float: left;
    margin: 0 5px 5px 0;
    cursor: pointer;
  }

  .addComComplain {
    width: 500px;
  }

  .CD_ComplainTable tr {
    height: 50px;
  }

  .CD_ListLi li.checked {
    border: 1px #d81e06 solid;
  }
</style>
<template>
  <div v-loading="loading">
    <div id="printComplaintDetial" class="ComplaintsDetail" v-if="isGetData">
      <p class="CD_Nav">{{ComplainInfo.ID}}投诉详情</p>
      <div class="CD_Detail">
        <p class="CP_Chuli">
          处理结果：
          <span class="CP_redType">{{ComplainInfo.DisposeStatusStr}}</span>
          <span v-if="ComplainInfo.DisposeStatus===4" style="margin: 0 0 0 270px;">应赔金额：<span class="CP_redType">{{getCompensateMoney()}}</span></span>
        </p>
        <p>团队情况</p>
        <div class="CD_OrderList">
          <ul>
            <li><span>线路：</span>{{PriceInfo.LineName}}</li>
            <li><span>系列：</span>{{PriceInfo.LtName}}</li>
            <li><span>团队编号：</span><a style="text-decoration:underline;cursor:pointer;"
                                     @click="goTeamBalancePayment('团队收支','TeamBalancePayment',PriceInfo.TCID,PriceInfo.OutBranchId)">{{PriceInfo.TCID}}</a>
            </li>
            <li><span>行程天数：</span>{{PriceInfo.DayNum}}</li>
            <li><span>出发日期：</span>{{PriceInfo.StartDate}}</li>
            <li><span>返回日期：</span>{{PriceInfo.BackDate}}</li>
            <li><span>订单号：</span><a style="text-decoration:underline;cursor:pointer;"
                                    @click="goEnrollTotal('报名统计','enrollTotal',PriceInfo.OrderId)">{{PriceInfo.OrderId}}</a>
            </li>
            <li><span>业务员：</span>{{PriceInfo.Salesman}}</li>
            <li><span>线控：</span>{{PriceInfo.DriveByWire}}</li>
            <li><span>操作OP：</span>{{PriceInfo.OpName}}</li>
            <li><span>领队：</span>{{PriceInfo.LeaderName}}</li>
            <li><span>导游：</span>{{PriceInfo.GuideName}}</li>
          </ul>
        </div>
        <p>投诉情况</p>
        <div class="CD_aboutList">
          <ul>
            <li class="CD_Complaints">
              <span>主题内容：</span>{{ComplainInfo.Contentrs}}
            </li>
            <li><span>严重程度：</span>{{ComplainInfo.SeverityLevelStr}}</li>
            <li><span>记录人员：</span>{{ComplainInfo.RecordEmpName}}</li>
            <li><span>记录时间：</span>{{ComplainInfo.RecordDateTime}}</li>
            <li><span>上报时间：</span>{{ComplainInfo.ReportDateTime}}</li>
            <li v-if="ComplainInfo.DisposeStatus===4">
              <span>应赔金额：</span>{{getCompensateMoney()}}
            </li>
            <li v-if="ComplainInfo.DisposeStatus===4">
              <span>已赔金额：</span>{{getBackMoney()}}
            </li>
            <li
              v-if="ComplainInfo.DisposeStatus===4&&(getLocalStorage().EmployeeId===ComplainInfo.CreateBy || getLocalStorage().EmployeeId===ComplainDetial[ComplainDetial.length-1].CreateBy||authority.indexOf('S_Complain_Finance')!=-1)">
              <span>立即制单：</span>
              <span v-for="compensation in ComplainCompensation" class="CD_dealResult" href="javascript:void(0)"
                    @click="setFinance(compensation)">{{compensation.CompensateMoney}}</span>
            </li>
            <li
              v-if="ComplainInfo.DisposeStatus===4&&getLocalStorage().EmployeeId===ComplainDetial[ComplainDetial.length-1].CreateBy">
            </li>
            <li></li>
          </ul>
          <ul>
            <li style="height:auto;line-height: 20px;padding:5px 0;">
              <p>{{ComplainInfo.Description}}</p>
            </li>
          </ul>
        </div>
        <div class="CD_Conditions">
        </div>
        <p>处理情况</p>
        <div class="CD_Messagebox" v-for="item in ComplainDetial">
          <p class="t">{{item.EmpName}}
            <span v-if="item.Level!=0">耗时 {{getTimeConsuming(item)}}</span>
            <span v-else>处理中</span>
          </p>
          <p v-if="item.Level!=0">
            {{item.Description}}
          </p>
          <p class="f" v-if="item.Level!=0">{{item.LevelStr}}<span>{{item.DealTime}}</span></p>
          <a class="CD_dealResult" v-if="getLocalStorage().EmployeeId===item.CreateBy&&item.Level===0"
             href="javascript:void(0)"
             @click="setResult(item)">点击填写处理结果</a>
        </div>
      </div>
      <p style="text-align: center;margin-top:20px;" v-if="ishowBtn">
        <input type="button" v-if="getLocalStorage().EmployeeId===ComplainDetial[ComplainDetial.length-1].CreateBy"
               class="normalBtn" @click="showChangeResult = true" value="更改投诉结果"/>
        <input
          v-if="ComplainInfo.DisposeStatus===4&&getLocalStorage().EmployeeId===ComplainDetial[ComplainDetial.length-1].CreateBy"
          type="button" class="normalBtn" @click="showAppendMoney = true"
          value="追加赔款">
        <input type="button" class="hollowFixedBtn" value="打印" @click.prevent="doPrint">
      </p>
    </div>

    <el-dialog custom-class='addComComplain' title="填写投诉处理结果" :visible.sync="showDealModal" center>
      <table class="CD_ComplainTable">
        <tr>
          <td style="padding-left:15px;">处理人：</td>
          <td>{{DealEmpName}}</td>
        </tr>
        <tr style="height:70px;vertical-align:top;">
          <td colspan="2">
            <el-input type="textarea" class="w450" v-model="EditMsg.Description" placeholder="请填写处理结果"></el-input>
          </td>
        </tr>
        <tr>
          <td>严重程度：</td>
          <td>
            <ul class="CD_ListLi">
              <li v-for="subItem in severityList" @click="getServerity(subItem)" :class="{'checked':subItem.isCheck}">
                {{subItem.Name}}
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>处理结果：</td>
          <td>
            <ul class="CD_ListLi">
              <li v-for="subItem in processResult" @click="getResult(subItem)" :class="{'checked':subItem.isCheck}">
                {{subItem.name}}
              </li>
            </ul>
          </td>
        </tr>
        <tr v-if="isShowDealWay">
          <td>解决方式：</td>
          <td>
            <ul class="CD_ListLi">
              <li v-for="subItem in solutionList" @click="getSolution(subItem)" :class="{'checked':subItem.isCheck}">
                {{subItem.name}}
              </li>
            </ul>
          </td>
        </tr>
        <tr v-if="isShowMoney">
          <td>赔偿金额：</td>
          <td>
            <el-input type="text" v-model="EditMsg.CompensateMoney" class="w160"  @keyup.native="checkPrice(EditMsg,'CompensateMoney')"></el-input>
          </td>
        </tr>
        <tr v-if="isShowNextPersion">
          <td>下一个处理人：</td>
          <td>
            <el-select class="w160" v-model="EditMsg.NextPersion" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option v-for="(item,index) in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
                         :key="index"></el-option>
            </el-select>
          </td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" @click="saveResult()" type="primary">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="showDealModal = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
    <el-dialog custom-class='addComComplain' title="更改处理人" :visible.sync="showChangeResult" center>
      <table class="CD_ComplainTable">
        <tr>
          <td>指定新的处理人：</td>
          <td>
            <el-select class="w160" v-model="ChangeMsg.NextPersion" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option v-for="(item,index) in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
                         :key="index"></el-option>
            </el-select>
          </td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" @click="saveChangeResult()" type="primary">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="showChangeResult = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
    <el-dialog custom-class='addComComplain' title="追加赔偿款" :visible.sync="showAppendMoney" center>
      <table class="CD_ComplainTable">
        <tr>
          <td>赔偿金额：</td>
          <td>
            <el-input type="text" v-model="ZuiMsg.CompensateMoney" class="w160"  @keyup.native="checkPrice(ZuiMsg,'CompensateMoney')"></el-input>
          </td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" @click="appendCompensateMoney()" type="primary">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="showAppendMoney = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        //员工
        EmployeeList: [],
        queryMsg: {
          ID: 0,
          OrderId: 0,
        },
        PriceInfo: '',//	团控详情
        ComplainInfo: '',//投诉详情
        ComplainDetial: [],//处理情况列表
        loading: false,
        showDealModal: false,
        //严重程度选中数组
        severityCked: [],
        //严重程度
        severityList: [],
        //处理结果
        processResult: [
          {
            Id: 1,
            name: '投诉未解决',
            isCheck: false
          }, {
            Id: 2,
            name: '投诉已解决',
            isCheck: false
          }
        ],
        //解决选中数组
        solutionArr: [],
        //解决方式
        solutionList: [{
          Id: 3,
          name: '对方取消投诉',
          isCheck: false
        }, {
          Id: 4,
          name: '赔偿',
          isCheck: false
        }, {
          Id: 5,
          name: '和解',
          isCheck: false
        }],
        //处理结果选取数组
        resultArr: [],
        //是否显示解决方式
        isShowDealWay: false,
        //是否显示赔偿金额
        isShowMoney: false,
        isShowNextPersion: false,//显示下一个处理人
        EditMsg: {
          ID: 0,
          Level: 0,//	严重程度
          ComplainID: 0,//	投诉id
          Description: '',//	描述
          Time: '',//	耗时
          DealResult: false,//处理结果 true:已解决，false:未解决
          DealWay: 0,//	解决方式
          CompensateMoney: 0,//赔偿金额
          NextPersion: '',//	下一个处理人
          CreateTime: '',//	创建时间
        },
        isGetData: false,
        showChangeResult: false,
        ChangeMsg: {
          ID: 0,
          ComplainID: 0,//	投诉id
          IsCreateNew: false,
          NextPersion: ''//	下一个处理人
        },
        DealEmpName: '',
        ishowBtn: true,
        showAppendMoney: false,
        ZuiMsg:{
           CompensateMoney: 0,//赔偿金额
        },
        ComplainCompensation: [],//赔款列表
        authority: [],
      }
    },
    methods: {
      getDetial () {
        this.loading = true
        this.apipost('conplain_get_GetComplainDetial', this.queryMsg, res => {
          this.loading = false
          this.isGetData = true
          if (res.data.resultCode == 1) {
            this.PriceInfo = res.data.data.PriceInfo;
            this.ComplainInfo = res.data.data.ComplainInfo
            this.ComplainDetial = res.data.data.ComplainDetial
            this.DealEmpName = this.ComplainDetial[this.ComplainDetial.length - 1].EmpName
            this.ComplainCompensation = res.data.data.ComplainCompensation
          } else {
            this.Error(res.data.message)
          }
        }, err => {
        })
      },
      //获取投诉枚举集合
      getEnumeration () {
        this.apipost('conplain_get_GetComplainEnumList', {}, res => {
          if (res.data.resultCode == 1) {
            this.severityList = []
            res.data.data.ComplainDealLevelList.forEach(x => {
              x['isCheck'] = false
              this.severityList.push(x)
            })
          } 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.EmployeeList = res.data.data
            }
          },
          err => {
          }
        )
      },
      //获取耗时
      getTimeConsuming (item) {
        var endDate = new Date()//获取系统当前时间
        let resultStr = ''
        if (item.Level === 0) {
          resultStr = this.$commonUtils.getDateTimeInterval(new Date(this.$commonUtils.getDateStr(item.CreateTime)), endDate)
        } else {
          resultStr = this.$commonUtils.getDateTimeInterval(new Date(this.$commonUtils.getDateStr(item.CreateTime)), new Date(this.$commonUtils.getDateStr(item.DealTime)))
        }
        return resultStr
      },
      //将yyyy年mm月dd日 hh:mm:ss 转换为 yyyy-mm-dd hh:mm:ss
      getDateStr (date) {
        let dateStr = ''
        if (date != '') {
          let dateArr = date.split(' ')
          let str = dateArr[0].replace(/[^\d]/g, '-')
          dateStr = str.substr(0, str.length - 1) + ' ' + dateArr[1]
        }
        return dateStr
      },
      //选择严重程度
      getServerity (item) {
        this.severityCked = []
        this.severityList.forEach(x => {
          x.isCheck = false
        })
        item.isCheck = !item.isCheck
        this.severityList.forEach(x => {
          if (x.isCheck) {
            this.severityCked.push(x.Id)
          }
        })
      },
      //处理结果
      getResult (item) {
        this.resultArr = []
        this.processResult.forEach(x => {
          x.isCheck = false
        })
        item.isCheck = !item.isCheck
        this.processResult.forEach(x => {
          if (x.isCheck) {
            this.resultArr.push(x.Id)
          }
        })
        this.isShowDealWay = false
        this.isShowNextPersion = false
        this.isShowMoney = false
        if (this.resultArr[0] === 1) {
          this.isShowNextPersion = true
          this.EditMsg.DealResult = false
        } else if (this.resultArr[0] === 2) {
          this.EditMsg.DealResult = true
          this.isShowDealWay = true
        }
      },
      //解决方式
      getSolution (item) {
        this.solutionArr = []
        this.solutionList.forEach(x => {
          x.isCheck = false
        })
        item.isCheck = !item.isCheck
        this.solutionList.forEach(x => {
          if (x.isCheck) {
            this.solutionArr.push(x.Id)
          }
        })
        if (this.solutionArr[0] === 4) {
          this.isShowMoney = true
        } else {
          this.isShowMoney = false
        }
      },
      setResult (item) {
        this.showDealModal = true
        this.EditMsg.ID = item.ID
        this.EditMsg.ComplainID = item.ComplainID
        this.EditMsg.CreateTime = item.CreateTime
      },
      //设置财务单据
      setFinance (compensation) {
        let id = [11, 16];
        //TODO跳转到财务单据
        if (compensation.FinanceID === 0) {
          var TCArr = [this.PriceInfo.TCID]
          let orderObj = {
            OrderID: this.PriceInfo.OrderId,
            OrderSource: 11,
            Obj: {},
            SourceID: compensation.ID,
            TCIDList: TCArr
          }
          this.$router.push({
            name: 'ChoiceAddFinancialDocuments',
            query: {
              Type: 2,
              templateID: JSON.stringify(id),
              companyID: this.PriceInfo.OutBranchId,
              'blank': 'y',
              'orderObj': JSON.stringify(orderObj)
            }
          })
        } else if (compensation.FinanceID > 0) {
          this.$router.push({
            name: 'FinancialDocumentsDetail',
            query: {
              id: compensation.FinanceID,
              blank: 'y',
              tab: '单据详情'
            }
          })
        }

      },
      //保存结果
      saveResult () {
        if (this.severityCked.length === 0) {
          this.Error('请选择严重程度')
          return false
        } else {
          this.EditMsg.Level = this.severityCked[0]
        }
        if (this.resultArr.length === 0) {
          this.Error('请选处理结果')
          return false
        }
        if (this.resultArr[0] === 1 && !(this.EditMsg.NextPersion > 0)) {
          this.Error('请选处理人')
          return false
        }
        if (this.resultArr[0] === 2 && this.solutionArr.length === 0) {
          this.Error('请选解决方式')
          return false
        } else {
          this.EditMsg.DealWay = this.solutionArr[0]
        }
        this.EditMsg.Time = this.getTimeConsuming({Level: 0, CreateTime: this.EditMsg.CreateTime})
        if (this.EditMsg.NextPersion == '') {
          this.EditMsg.NextPersion = 0
        }
        this.apipost('conplain_post_UpdateComplainDetial', this.EditMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success('修改成功')
            this.showDealModal = false
            this.getDetial()
          } else {
            this.Error(res.data.message)
          }
        }, err => {
        })
      },
      //更改投诉处理
      saveChangeResult () {
        if (!(this.ChangeMsg.NextPersion > 0)) {
          this.Error('请选处理人')
          return false
        }
        let changeItem = this.ComplainDetial[this.ComplainDetial.length - 1]
        this.ChangeMsg.ID = changeItem.ID
        this.ChangeMsg.ComplainID = changeItem.ComplainID
        if (changeItem.Level === 0) {
          this.ChangeMsg.IsCreateNew = false
        } else {
          this.ChangeMsg.IsCreateNew = true
        }
        this.apipost('conplain_post_ChangeDealWithPeople', this.ChangeMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success('修改成功')
            this.showChangeResult = false
            this.EditMsg.NextPersion = 0
            this.getDetial()
          } else {
            this.Error(res.data.message)
          }
        }, err => {
        })
      },
      //追加赔偿金额
      appendCompensateMoney () {
        if (!(this.ZuiMsg.CompensateMoney > 0)) {
          this.Error('赔偿金额必须大于0')
          return false
        }
        let msg = {ID: this.queryMsg.ID, CompensateMoney: this.ZuiMsg.CompensateMoney}
        this.apipost('conplain_post_AppendCompensateMoney', msg, res => {
          if (res.data.resultCode == 1) {
            this.Success('追加赔偿成功')
            this.showAppendMoney = false
            this.ZuiMsg.CompensateMoney = 0
            this.getDetial()
          } else {
            this.Error(res.data.message)
          }
        }, err => {
        })
      },
      //打印
      doPrint () {
        this.ishowBtn = false
        setTimeout(this.getPrint, 500)
      },
      getPrint () {
        let subOutputRankPrint = document.getElementById('printComplaintDetial')
        let newContent = subOutputRankPrint.innerHTML
        let oldContent = document.body.innerHTML
        document.body.innerHTML = newContent
        window.print()
        window.location.reload()
        document.body.innerHTML = oldContent
        return false
      },
      //应赔金额
      getCompensateMoney () {
        let money = 0
        this.ComplainCompensation.forEach(x => {
          money += x.CompensateMoney
        })
        return money.toFixed(2);
      },
      //已赔金额
      getBackMoney () {
        let money = 0
        this.ComplainCompensation.forEach(x => {
          money += x.BackMoney
        })
        return money
      },
      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}
        })
      },
      initAuthor() {
        let msg = {
          MenuUrl: "/ChoiceAddFinancialDocuments"
        };
        this.apipost("admin_get_GetActionCodeForUrlAndUser", msg, r => {
          this.authority = r.data.data;
        });
      },
    },
    mounted () {
      this.queryMsg.ID = this.$route.query.id
      this.queryMsg.OrderId = this.$route.query.orderId
      this.getEnumeration()
      this.getEmployeeList()
      this.getDetial()
      this.initAuthor();
    }
  }

</script>