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

  .Supplier_AC_inputGroup {
    margin-bottom: 20px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .Supplier_AC_content .w757 {
    width: 757px !important;
  }
  .Supplier_TouSu .el-textarea__inner{
    height:300px;
  }
</style>

<template>
  <div class="Supplier_AC_content Supplier_TouSu">
    <div class="Supplier_AC_inputGroup">
      <el-input placeholder="请输入团号/编号" class="w757" v-model="QMsg.TCID">
        <el-button slot="append" @click="CheckTCID()">验证</el-button>
      </el-input>
    </div>
    <div class="Supplier_AC_contDetail">
      <p>团队情况</p>
      <div class="Supplier_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>操作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="Supplier_AC_complaintList">
        <div class="t">主题内容：</div>
        <ul style="width:90%;">
          <li v-for="subItem in themeList" @click="getTheme(subItem)" :class="{'checked':subItem.isCheck}">
            {{subItem.Name}}
          </li>
        </ul>
      </div> -->

      <el-input type="textarea" style="margin-top:10px;" :rows="5" v-model="EditMsg.ComplainContent"
        placeholder="具体问题描述"></el-input>
    </div>
    <p style="text-align: center; margin: 35px 0 15px 0;">
      <input type="button" class="normalBtn" value="保存" @click="SaveData()" />
      <input type="button" class="normalBtn" value="取消" @click="goUrl('roomQuery2')" />
    </p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //主题内容
        themeList: [],
        //主题选中数组
        themeCked: [],
        //添加修改投诉
        EditMsg: {
          Id: 0, //编号
          SupplierId: 0, //供应商编号
          TCID: 0, //团队编号
          ComplainContentrs: '', //投诉内容
          ComplainContent: '', //问题描述
        },
        //查询参数
        QMsg: {
          TCID: ""
        },
        //团信息
        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)
          }
        })
      },
      //验证订单
      CheckTCID() {
        this.ApiPost2('supplierComplain_Get_GetPriceData', {
          TCID: this.QMsg.TCID
        }, res => {
          if (res.data.resultCode == 1) {
            this.PriceInfo = res.data.data.PriceInfo;
            if (this.PriceInfo == null) {
              this.PriceInfo = {};
            } else {
              this.EditMsg.TCID = this.PriceInfo.TCID;
            }
          } else {
            this.Error(res.data.message)
          }
        }, err => {});
      },
      //保存数据
      SaveData(status) {
        // if (this.themeCked.length === 0) {
        //   this.Error("请选择主题内容");
        //   return false;
        // }
        //数据组装
        this.EditMsg.ComplainContentrs = "";
        let contentrArr = [];
        this.themeList.forEach(x => {
          if (x.isCheck) {
            contentrArr.push(x.Name);
          }
        });
        if (contentrArr.length > 0) {
          this.EditMsg.ComplainContentrs = contentrArr.join(",")
        }
        this.ApiPost2('supplierComplain_Post_SetSupplierComplain', this.EditMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success("添加成功");
            this.$router.push({
              path: "roomQuery2",
              query: {}
            });
          } else {
            this.Error(res.data.message);
          }
        }, err => {});
      },
      //获取投诉枚举集合
      getEnumeration() {
        this.ApiPost2("conplain_get_GetComplainEnumList", {}, res => {
          if (res.data.resultCode == 1) {
            this.themeList = [];
            res.data.data.ComplainContentEnumList.forEach(x => {
              x["isCheck"] = false;
              this.themeList.push(x);
            })
          } else {
            this.Error(res.data.message);
          }
        });
      },
      GetData() {
        this.ApiPost2('supplierComplain_Get_GetSupplierComplain', {
          Id: this.EditMsg.Id
        }, res => {
          if (res.data.resultCode == 1) {
            this.EditMsg = res.data.data;
            if (this.EditMsg.ComplainContentrs && this.EditMsg.ComplainContentrs != '') {
              var array = this.EditMsg.ComplainContentrs.split(',');
              if (array != null && array.length > 0) {
                array.forEach(subItem => {
                  this.themeList.forEach(x => {
                    if (subItem==x.Name) {
                       x.isCheck=true;
                        this.themeCked.push(x.Id)
                    }
                  });
                });
              }
            }
          } else {
            this.Error(res.data.message);
          }
        }, err => {});
      },
      goUrl(path) {
        this.$router.push({
          path: path,
          query: {}
        });
      }
    },
    created() {
      this.EditMsg.Id = this.$route.query.Id;
      this.QMsg.TCID = this.$route.query.TCID;
    },
    mounted() {
      this.getEnumeration();
      if (this.QMsg.TCID) {
        this.CheckTCID();
      }
      if (this.EditMsg.Id && this.EditMsg.Id > 0) {
        this.GetData();
      }
    }
  };

</script>