<style type="text/css">
  .AC_content {
    width: 800px;
    margin: 50px auto;
    min-height: 730px;
    padding: 20px;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
  }

  .AC_inputGroup {
    margin-bottom: 20px;
  }

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

  .AC_inputGroup .el-input-group__append {
    background-color: #CD2929;
    color: #fff;
  }

  .AC_OrderList {
    overflow: hidden;
    width: 800px;
  }

  .AC_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;
  }

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

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

  .AC_complaintList {
    padding: 10px 0 0 0;
    height: auto;
    overflow: hidden;
  }

  .AC_complaintList .t {
    padding: 4px 0 0 0;
  }

  .AC_complaintList .t,
  .AC_complaintList ul {
    float: left;
  }

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

  .AC_complaintList ul li:hover {
    border: 1px #d81e06 solid;
  }

  .AC_complaintList ul li.checked {
    border: 1px #d81e06 solid;
  }

  .AC_contDetail > a {
    color: #3980c8 !important;
  }

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

  .AC_content .w757 {
    width: 757px !important;
  }

</style>

<template>
  <div class="AC_content">
    <div class="AC_inputGroup">
      <el-input placeholder="请输入订单号" class="w757" v-model="QMsg.OrderID">
        <el-button slot="append" @click="CheckOrder()">验证</el-button>
      </el-input>
    </div>
    <div class="AC_contDetail">
      <p>团队情况</p>
      <div class="AC_OrderList">
        <ul>
          <li><span>线路：</span>{{this.PriceInfo.LineName}}</li>
          <li><span>系列：</span>{{this.PriceInfo.LtName}}</li>
          <li><span>团队编号：</span><a>{{this.PriceInfo.TCID}}</a></li>
          <li><span>行程天数：</span>{{this.PriceInfo.DayNum}}</li>
          <li><span>出发日期：</span>{{this.PriceInfo.StartDate}}</li>
          <li><span>返回日期：</span>{{this.PriceInfo.BackDate}}</li>
          <li><span>订单号：</span><a>{{this.PriceInfo.OrderId}}</a></li>
          <li><span>业务员：</span>{{this.PriceInfo.Salesman}}</li>
          <li><span>线控：</span></li>
          <li><span>操作OP：</span>{{this.PriceInfo.OpName}}</li>
          <li><span>领队：</span>{{this.PriceInfo.LeaderName}}</li>
          <li><span>导游：</span>{{this.PriceInfo.GuideName}}</li>
        </ul>
      </div>
      <p>投诉情况</p>
      <div class="AC_complaintList">
        <div class="t">主题内容：</div>
        <ul>
          <li v-for="subItem in themeList" @click="getTheme(subItem)" :class="{'checked':subItem.isCheck}">
            {{subItem.Name}}
          </li>
        </ul>
      </div>
      <div class="AC_complaintList">
        <div class="t">严重程度：</div>
        <ul>
          <li v-for="subItem in severityList" @click="getServerity(subItem)" :class="{'checked':subItem.isCheck}">
            {{subItem.Name}}
          </li>
        </ul>
      </div>
      <el-input type="textarea" style="margin-top:10px;" :rows="5" v-model="EditMsg.Description" placeholder="具体问题描述，以及投诉人的姓名、联系方式"></el-input>
      <p style="margin: 15px 0">指定处理人</p>
      <el-select class="w150" 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>
    </div>
    <p style="text-align: center; margin: 10px 0 15px 0;">
      <input type="button" class="normalBtn" value="上报" @click="SaveData(2)"/>
      <!--<input type="button" class="normalBtn" value="暂存" @click="SaveData(1)"/>-->
      <input type="button" class="normalBtn" value="取消"/>
    </p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //主题内容
        themeList: [],
        //严重程度
        severityList: [],
        //主题选中数组
        themeCked: [],
        //严重程度选中数组
        severityCked: [],
        //员工
        EmployeeList: [],
        //添加修改投诉
        EditMsg: {
          ID: 0,//编号
          TCID: 0,//团队编号
          OrderID: 0,//订单编号
          Contentrs: '',//投诉内容
          Description: '',//问题描述
          SeverityLevel: 0, //严重程度
          DisposeStatus: 0,//	状态
          CompensateMoney: 0,//	赔偿金额
          NextPersion: '',//下一个审核人
          LineID: 0,//	线路id
          LineteamId: 0,//系列id
        },
        //查询参数
        QMsg: {
          OrderID: ""
        },
        //团信息
        PriceInfo: {},
        //订单投诉条数
        ExitCount: 0
      };
    },
    mounted() {
    },
    methods: {
      //选取主题内容
      getTheme(item) {
        item.isCheck = !item.isCheck;
        this.themeCked = [];
        this.themeList.forEach(x => {
          if (x.isCheck) {
            this.themeCked.push(x.Id)
          }
        })
      },
      //选择严重程度
      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)
          }
        })
      },
      //验证订单
      CheckOrder() {
        this.apipost('conplain_get_GetValidationOrderInfo', {
          OrderId: this.QMsg.OrderID
        }, res => {
          if (res.data.resultCode == 1) {
            this.PriceInfo = res.data.data.PriceInfo;
            if (this.PriceInfo == null) {
              this.Error("该订单不存在");
              this.PriceInfo = {};
            } else {
              this.EditMsg.TCID = this.PriceInfo.TCID;
              this.EditMsg.OrderID = this.PriceInfo.OrderId;
              this.EditMsg.LineID = this.PriceInfo.LineID;
              this.EditMsg.LineteamId = this.PriceInfo.LineteamId;
            }
            this.ExitCount = res.data.data.ExitCount;
            if(this.ExitCount>0){
              this.Error("该订单已存在投诉");
            }
          } else {
            this.Error(res.data.message)
          }
        }, err => {
        });
      },
      //保存数据
      SaveData(status) {
        this.EditMsg.DisposeStatus = status;
        if (this.EditMsg.OrderID === 0||this.EditMsg.TCID===0) {
          this.Error("请验证订单号");
          return false;
        }
        if (this.ExitCount > 0) {
          this.Error("该订单已存在投诉,不能重复创建");
          return false;
        }
        if (this.themeCked.length === 0) {
          this.Error("请选择主题内容");
          return false;
        }
        if (this.severityCked.length === 0) {
          this.Error("请选择严重程度");
          return false;
        }
        if (!(this.EditMsg.NextPersion > 0)) {
          this.Error("请选处理人");
          return false;
        }
        //数据组装
        this.EditMsg.Contentrs = "";
        let contentrArr = [];
        this.themeList.forEach(x => {
          if (x.isCheck) {
            contentrArr.push(x.Name);
          }
        });
        if (contentrArr.length > 0) {
          this.EditMsg.Contentrs = contentrArr.join(",")
        }
        this.severityList.forEach(x => {
          if (x.isCheck) {
            this.EditMsg.SeverityLevel = x.Id;
          }
        });
        this.apipost('conplain_post_Set', this.EditMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success("添加成功");
            this.$router.push({
              path: "ComplaintsManage",
              query: {}
            });
          } else {
            this.Error(res.data.message);
          }
        }, err => {
        });
      },
      //获取投诉枚举集合
      getEnumeration() {
        this.apipost("conplain_get_GetComplainEnumList", {}, res => {
          if (res.data.resultCode == 1) {
            this.themeList = [];
            res.data.data.ComplainContentEnumList.forEach(x => {
              x["isCheck"] = false;
              this.themeList.push(x);
            })
            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 => {
          }
        );
      },
    },
    created() {
      this.EditMsg.ID = this.$route.query.id;
    },
    mounted() {
      this.getEnumeration();
      this.getEmployeeList();
    }
  };

</script>