<template>
  <el-dialog class="complaintDialog" :title="detailsTitle" :close-on-click-modal="false" :visible.sync="complaintDialog" width="1250px" top="20px">
  <div class="complaintDetails" style="margin-top: -10px">

    <div class="clearfix"></div>
    <el-form>
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">客户名称：</label>
                  <div class="item_content">{{ form.clientName }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">联系电话：</label>
                  <div class="item_content">{{ form.linkPhone }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">订单名称：</label>
                  <div class="item_content">{{ form.orderName }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">订单编号：</label>
                  <div class="item_content">
                    <el-link type="primary" @click="openDetail">{{ form.orderCode }}</el-link>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">投诉类型：</label>
                  <div class="item_content">
                    <span v-if="form.tsType == 1">内部投诉</span>
                    <span v-else-if="form.tsType == 2">外部投诉</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">时限要求：</label>
                  <div class="item_content" v-if="form.tsLimitDate">{{ form.tsLimitDate | getTime }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">客服跟踪人：</label>
                  <div class="item_content">{{ form.sevPerson }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">涉及金额：</label>
                  <div class="item_content" v-if="type == 1 && billDetail.billFlag == 1">
                    <input type="number" style="outline: none;border: none;border-bottom: 1px solid #3e3e3e;"
                           v-model="form.relateMoney"/>
                  </div>
                  <div class="item_content" v-else>{{ form.relateMoney }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">登记部门：</label>
                  <div class="item_content">{{ form.creDept }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">登记人员：</label>
                  <div class="item_content">{{ form.crePerson }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detailItem">
                  <label class="item_label">登记时间：</label>
                  <div class="item_content">{{ form.creDate | getTime }}</div>
                </div>
              </el-col>
<!--              <el-col :span="12">-->
<!--                <div class="detailItem">-->
<!--                  <label class="item_label">分配时间：</label>-->
<!--                  <div class="item_content">{{ form.assignDate | getTime }}</div>-->
<!--                </div>-->
<!--              </el-col>-->
              <el-col :span="24" v-if="form.backFlag == 1">
                <div class="detailItem">
                  <label class="item_label">退回原因：</label>
                  <div class="item_content">{{ form.backReason }}</div>
                </div>
              </el-col>
              <el-col :span="24" v-if="form.backFlag == 0 && billDetail.billFlag >1">
<!--                <div class="detailItem">-->
<!--                  <label class="item_label">客服意见：</label>-->
<!--                  <div class="item_content">{{ form.sevPersonDoc }}</div>-->
<!--                </div>-->
                <label class="labelText">客服意见：</label>
                <el-input type="textarea" class="textareaCls" disabled v-model="form.sevPersonDoc"></el-input>
              </el-col>

              <el-col :span="24" v-if="billDetail.billFlag >= 5">
                <label class="labelText">结单说明：</label>
                <el-input type="textarea" class="textareaCls" disabled v-model="finishMemo"></el-input>
              </el-col>

              <el-col :span="24" v-if="billDetail.billFlag == 6">
                <label class="labelText">行政审核意见：</label>
                <el-input type="textarea" class="textareaCls" disabled v-model="adminReviewDoc"></el-input>
              </el-col>
              <el-col :span="24" v-if="form.attachmentList.length>0">
                <div class="detailItem">
                  <label class="item_label">附件图片：</label>
                  <template v-for="item in form.attachmentList">
                    <a :href="item.attachmentUrl" target="_blank">
                      <el-image style="width: 30px;height: 30px;margin-left: 10px" :src="item.attachmentUrl"
                                fit="contain"></el-image>
                    </a>
                  </template>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <label class="labelText">事件描述：</label>
            <el-input type="textarea" rows="6" class="textareaCls" disabled v-model="form.tsEven"></el-input>
            <label class="labelText">投诉依据：</label>
            <el-input type="textarea" class="textareaCls" disabled v-model="form.complainReason"></el-input>
            <label class="labelText">投诉目的：</label>
            <el-input type="textarea" class="textareaCls" disabled v-model="form.tsGoal"></el-input>
            <label class="labelText" v-if="relateManList.length>0">奖惩人员：</label>
            <el-table
              v-if="relateManList.length>0"
              :data="relateManList"
              max-height="130px"
              border
              size="mini">
              <el-table-column
                label="人员姓名"
                prop="relateMan"></el-table-column>
              <el-table-column
                label="罚款金额"
                prop="deductMoney"></el-table-column>
              <el-table-column
                label="奖励金额"
                prop="rewardMoney"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" v-if="type == 1">
        <div slot="header" class="clearfix">
          <span>客服受理</span>
          <!--        <el-button style="float: right;" size="mini" type="primary">提交</el-button>-->
          <!--        <el-button style="float: right;margin-right: 10px" size="mini" type="green" @click="acceptBill">受理</el-button>-->
        </div>
        <el-row :gutter="20" v-if="billDetail.billFlag == 1 || billDetail.billFlag == 2 || billDetail.billFlag == 3">
          <el-col :span="12">
            <div class="detailItem">
              <label class="labelText" style="line-height: 50px">客服意见：</label>
              <el-input type="textarea" v-model="complaintBill.sevPersonDoc" style="width: 80%"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <el-button style="margin-top: 20px" size="mini" type="green" @click="acceptBill">
              {{ billDetail.billFlag == 1 ? '受理' : '保存' }}
            </el-button>
            <el-button style="margin-top: 20px" v-if="billDetail.billFlag == 1 || billDetail.billFlag == 2" size="mini"
                       type="warning" @click="backBill">退回
            </el-button>
          </el-col>
        </el-row>
        <!--      <el-divider></el-divider>-->
        <el-row :gutter="20" v-if="billDetail.billFlag == 2 || billDetail.billFlag == 3">
          <el-col :span="12">
            <div class="detailItem">
              <label class="labelText">选择部门：</label>
              <el-select v-model="deptList" multiple filterable placeholder="请选择" style="width: 80%">
                <el-option
                  v-for="item in deptOptions"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <el-button size="mini" style="margin-top: 10px" type="primary" :disabled="addDeptDisabled" @click="addDeptSurvey(1)">添加内部调查单</el-button>
            <el-button size="mini" style="margin-top: 10px" type="primary"
                       @click="addDeptSurvey(2)">添加外部调查单
            </el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-row :gutter="10" >
        <el-col :span="12">
          <el-card class="box-card" v-if="type == 2">
            <div slot="header" class="clearfix">
              <span>{{ currentDeptName }}反馈</span>

              <el-input v-if='currentDeptName == "外部调查"' v-model="deptSurveyInfo.sevMoneyOut" maxlength="5" oninput = "value=Number(value.replace(/[^\d.]/g,''))" style="width: 100px"  placeholder="损失金额" size="mini"></el-input>
              <el-button style="float: right;margin-left: 10px" size="mini" type="green" v-show="examineFlag"
                         @click="examineBill">提交行政
              </el-button>
              <el-button style="float: right" size="mini" type="primary" @click="feedbackBill">反馈</el-button>
              <el-checkbox style="float: right" v-model="isFinishSurvey">完成调查</el-checkbox>
            </div>
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="detailItem">
                  <label class="labelText">调查过程：</label>
                  <el-input type="textarea" v-model="deptSurveyInfo.finishReason"></el-input>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="detailItem">
                  <label class="labelText">调查结果：</label>
                  <el-input type="textarea" v-model="deptSurveyInfo.finishResult"></el-input>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="12">
        <el-card class="box-card" v-if="type == 4">
          <div slot="header" class="clearfix">
            <span>行政审核</span>
            <!--        <el-button style="float: right;" size="mini" type="primary">提交</el-button>-->
            <!--        <el-button style="float: right;margin-right: 10px" size="mini" type="green" @click="acceptBill">受理</el-button>-->
          </div>
          <el-row :gutter="20">
            <el-col :span="20">
              <div class="detailItem">
                <label class="labelText" style=" display:inline-block;line-height: 50px;width: 22%">行政审核意见：</label>
                <el-input type="textarea" v-model="reviewInfo.adminReviewDoc" style="width: 77%;display: inline-block"></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <el-button style="margin-top: 20px" size="mini" type="green" @click="reviewBill">行政审核</el-button>
              <el-button v-if="type == 4" size="mini" type="primary" style="margin-top: 5px;margin-left: 0px;font-size: 12px" @click="printSurvey">
                打印调查
              </el-button>
            </el-col>
          </el-row>
        </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" v-if="type == 2 || type == 4">
            <div slot="header" class="clearfix">
              <span>人员奖惩</span>
            </div>
            <el-button type="green" size="mini" style="margin-bottom: 10px" @click="relateManDialog = true">增加
            </el-button>
            <el-table
              :data="relateManList"
              max-height="130px"
              border
              size="mini">
              <el-table-column
                label="人员姓名"
                prop="relateMan"></el-table-column>
              <el-table-column
                label="部门"
                prop="relateManDept"></el-table-column>

              <el-table-column
                label="罚款金额"
                prop="deductMoney"></el-table-column>
              <el-table-column
                label="奖励金额"
                prop="rewardMoney"></el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="removeRelateMan(scope)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <el-card class="box-card" v-if="type == 3">
        <div slot="header" class="clearfix">
          <span>登记人结单</span>
          <!--        <el-button style="float: right;" size="mini" type="primary">提交</el-button>-->
          <!--        <el-button style="float: right;margin-right: 10px" size="mini" type="green" @click="acceptBill">受理</el-button>-->
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detailItem">
              <label class="labelText" style="line-height: 50px">结单说明：</label>
              <el-input type="textarea" v-model="registerInfo.finishMemo" style="width: 80%"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <el-button style="margin-top: 20px" size="mini" type="green" @click="registerBill">结单</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" v-if="deptSurveylist.length>0 ||wbSurveylist.length >0">
        <div class="or-container">
          <div class="box" v-for="(ele,i) in wbSurveylist" :key="i" @mouseenter="enter(i)"
               :class="eleindex ==i?'eleactive':''" @mouseleave="out(i)">
            <div class="box-title">
              <label class="title-main">{{ ele.surveyDept }}反馈</label>
              <span class="title-state">
              (
              <span v-if="ele.surveyState == 0" style="color: #F56C6C">初始</span>
              <span v-else-if="ele.surveyState == 1" style="color: #E6A23C">待反馈</span>
              <span v-else-if="ele.surveyState == 2" style="color: #E6A23C">待审核</span>
              <span v-else-if="ele.surveyState == 3" style="color:green">待结单</span>
              <span v-else-if="ele.surveyState == 4" style="color:green">待行政审核</span>
              <span v-else-if="ele.surveyState == 5" style="color:green">行政审核完成</span>
              )
            </span>
              <el-button size="mini" @click="printSurveyBill(ele.id)" type="primary">打印</el-button>
            </div>
            <div class="box-show">
              <div class="showText">
                <label class="labelText">调查单号</label>
                <br>
                <span>{{ ele.surveyCode }}</span>
              </div>
              <div class="showText">
                <label class="labelText">分配时间</label>
                <br>
                <span v-if="ele.createTime != null">{{ ele.createTime | getTime }}</span>
                <span v-else>{{ ele.createTime }}</span>
              </div>
              <div class="showText">
                <label class="labelText">调查人</label>
                <br>
                <span>{{ ele.surveyPerson }}</span>
              </div>
              <div class="showText">
                <label class="labelText">调查时间</label>
                <br>
                <span v-if="ele.feedBackDate != null">{{ ele.feedBackDate | getTime }}</span>
                <span v-else>{{ ele.feedBackDate }}</span>
              </div>
              <div class="showText">
                <label class="labelText">损失金额</label>
                <br>
                <span>{{ ele.sevMoneyOut}}</span>
              </div>
            </div>
            <div class="box-main">
              <el-row :gutter="10">
                <el-col :span="24">
                  <label class="item_label">调查单号：</label>
                  <span class="item_content">{{ ele.surveyCode }}</span>
                </el-col>
                <el-col :span="12">
                  <label class="item_label">分配时间：</label>
                  <br>
                  <span v-if="ele.createTime != null">{{ ele.createTime | getTime }}</span>
                  <span v-else>{{ ele.createTime }}</span>
                </el-col>
                <el-col :span="12">
                  <label class="item_label">调查人：</label>
                  <div class="item_content">{{ ele.surveyPerson }}</div>
                </el-col>
                <el-col :span="12">
                  <label class="item_label">调查时间：</label>
                  <br>
                  <span v-if="ele.feedBackDate != null">{{ ele.feedBackDate | getTime }}</span>
                  <span v-else>{{ ele.feedBackDate }}</span>
                </el-col>
                <el-col :span="12">
                  <label class="item_label">损失金额：</label>
                  <br>
                  <span>{{ ele.sevMoneyOut }}</span>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="调查过程：">
                    <el-input type="textarea" rows="4" class="textareaCls"  v-model="ele.finishReason" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="调查结果：">
                    <el-input type="textarea" rows="4" class="textareaCls" v-model="ele.finishResult" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="box" v-for="(ele,i) in deptSurveylist" :key="i+wbSurveylist.length" @mouseenter="enter(i+wbSurveylist.length)"
               :class="eleindex ==i+wbSurveylist.length?'eleactive':''" @mouseleave="out(i+wbSurveylist.length)">
            <div class="box-title">
              <label class="title-main">{{ ele.surveyDept }}反馈</label>
              <span class="title-state">
              (
              <span v-if="ele.surveyFlag == 0" style="color: #F56C6C">待反馈</span>
              <span v-else-if="ele.surveyFlag == 1" style="color: #E6A23C">待审核</span>
              <span v-else-if="ele.surveyFlag == 2" style="color:green">审核完成</span>
              )
            </span>
              <el-button size="mini" @click="printSurveyBill(ele.idSurveyBill)" type="primary">打印</el-button>
            </div>
            <div class="box-show">
              <div class="showText">
                <label class="labelText">调查单号</label>
                <br>
                <span>{{ ele.surveyCode }}</span>
              </div>
              <div class="showText">
                <label class="labelText">分配时间</label>
                <br>
                <span v-if="ele.createTime != null">{{ ele.createTime | getTime }}</span>
                <span v-else>{{ ele.createTime }}</span>
              </div>
              <div class="showText">
                <label class="labelText">调查人</label>
                <br>
                <span>{{ ele.surveyPerson }}</span>
              </div>
              <div class="showText">
                <label class="labelText">调查时间</label>
                <br>
                <span v-if="ele.feedBackDate != null">{{ ele.feedBackDate | getTime }}</span>
                <span v-else>{{ ele.feedBackDate }}</span>
              </div>
            </div>
            <div class="box-main">
              <el-row :gutter="10">
                <el-col :span="24">
                  <label class="item_label">调查单号：</label>
                  <span class="item_content">{{ ele.surveyCode }}</span>
                </el-col>
                <el-col :span="12">
                  <label class="item_label">分配时间：</label>
                  <br>
                  <span v-if="ele.createTime != null">{{ ele.createTime | getTime }}</span>
                  <span v-else>{{ ele.createTime }}</span>
                </el-col>
                <el-col :span="12">
                  <label class="item_label">调查人：</label>
                  <div class="item_content">{{ ele.surveyPerson }}</div>
                </el-col>
                <el-col :span="12">
                  <label class="item_label">调查时间：</label>
                  <br>
                  <span v-if="ele.feedBackDate != null">{{ ele.feedBackDate | getTime }}</span>
                  <span v-else>{{ ele.feedBackDate }}</span>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="调查过程：">
                    <el-input type="textarea" rows="4" class="textareaCls" v-model="ele.finishReason" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="调查结果：">
                    <el-input type="textarea" rows="4" class="textareaCls" v-model="ele.finishResult" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-card>
    </el-form>
    <el-dialog :visible.sync="relateManDialog" title="增加奖惩人员" append-to-body width="800px">
      <el-dialog :visible.sync="relateInnerDialog1" title="选择用户" append-to-body width="80%">
        <user :is-choose="true" @chooseUser='chooseUser'></user>
      </el-dialog>
      <el-dialog :visible.sync="relateInnerDialog2" title="选择部门" append-to-body width="80%">
<!--        <user :is-choose="true" @chooseUser='chooseUser'></user>-->
        <select-depart :is-choose="true" @choosePaper='chooseDept'></select-depart>
      </el-dialog>

      <el-form>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="罚款金额" label-width="80px">
              <el-input v-model="relateManInfo.deductMoney" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖励金额" label-width="80px">
              <el-input v-model="relateManInfo.rewardMoney" type="number">></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖惩目标" label-width="80px">
              <el-input
                style="width: 300px"
                disabled
                class="input-with-select"
                v-model="relateManInfo.relateMan"
                @click.native="relateInnerDialog = true"
              >
                <el-button
                  slot="append"
                  @click="relateInnerDialog1 = true">人员
                </el-button>
              </el-input>
              <el-input
                style="width: 300px"
                disabled
                class="input-with-select"
                v-model="relateManInfo.relateManDept"
                @click.native="relateInnerDialog2 = true"
              >
                <el-button
                  slot="append"
                  @click="relateInnerDialog2 = true">部门
                </el-button>
              </el-input>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="relateManDialog = false">取 消</el-button>
        <el-button type="primary" @click="addRelateMan()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="订单详情" append-to-body :close-on-click-modal="false" class="orderDetailDialog" :visible.sync="detailVisible" top="10px" width="1200px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
  </div>
  </el-dialog>
</template>

<script>
import {
  getComplaintBillDetail,
  getSurveyBillDetail,
  acceptComplaintBill,
  getDeptList,
  addSurveyBill,
  acceptBackComplaintBill,
  deptSurveyFeedBack,
  deptSurveyReview,
  feedBackSurveyBill,
  reviewSurveyBill,
  registerCheck,
  adminReview,
  addRelateManInfo,
  removeRelateManInfo,
  printSurveyBill
} from '@/api/complaint/complaintDetails'
import User from '@/views/system/user/user'
import {doLocalPrint} from '@/utils'
import OrderDetail from "@/components/orderDetail/orderDetail";
import SelectDepart from "@/views/select/department";

const form = {
  attachmentList: [],
  clientName: '',
  linkPhone: '',
  orderCode: '',
  tsType: '',
  orderName: '',
  sevPerson: '',
  creDept: '',
  crePerson: '',
  creDate: '',
  assignDate: '',
  tsEven: '',
  tsGoal: '',
  complainReason: '',
  tsLimitDate: '',
  relateMoney: ''
}
export default {
  name: 'ComplaintDetails',
  components: {SelectDepart, OrderDetail, User},
  props: {
    /**
     * type 类型
     * 0 查看无编辑需求
     * 1 客服受理
     * 2 其他部门填写反馈
     * 3 登记人结单
     * 4 行政审核
     */
    type: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Number | String,
      default: 0
    }

  },
  data() {
    return {
      complaintDialog: false,
      form: Object.assign({}, form),
      complaintId: '', // 投诉单id
      surveyId: '', // 调查单id
      deptSurveyId: '', // 部门调查单id
      surveyType: 1, // 调查单类型 1内部调查单 2外部调查单
      billDetail: {},
      surveyDetail: {},
      complaintBill: {
        id: '',
        sevPersonDoc: '',
        relateMoney: ''
      },
      deptOptions: [], // 部门列表
      deptSurvey: { // 调查单部门
        idComplaintBill: '',
        deptSurveyInfoList: []
      },
      deptList: [], // 选中部门
      eleindex: 0,
      deptSurveylist: [],
      wbSurveylist: [],
      deptSurveyInfo: {// 部门调查单
        id: '',
        finishReason: '',
        finishResult: '',
        sevMoneyOut: '',
        isFinishSurvey: 0,
        versionCode: 0
      },
      isFinishSurvey: false,
      currentDeptId: '', // 当前操作部门id
      currentDeptName: '', // 当前操作部门name
      registerInfo: { // 结单信息
        'id': '',
        'finishMemo': ''
      },
      reviewInfo: { // 行政审核
        'id': '',
        'adminReviewDoc': ''
      },
      relateManList: [], // 奖惩人员列表
      relateInnerDialog1: false,
      relateInnerDialog2: false,
      relateManDialog: false,
      relateManInfo: {
        idSurveyBill: '',
        idrelateman: '',
        relateMan: '',
        rewardMoney: '',
        deductMoney: '',
        relateManDept: '',
        idRelateManDept: ''
      },
      // 订单详情
      detailVisible: false,

      // 调查审核权限
      examineFlag: false,

      finishMemo: '',
      adminReviewDoc: '',
      detailsTitle: '投诉单',
      addDeptDisabled: false,

    }
  },
  mounted() {
    this.getDepts()
  },
  watch: {
    // 增加奖惩人员
    relateManDialog(val) {
      // console.log(val)
      if (val) {
        this.relateManInfo.relateMan = ''
        this.relateManInfo.rewardMoney = ''
        this.relateManInfo.deductMoney = ''
        this.relateManInfo.relateManDept = ''
        this.relateManInfo.idRelateManDept = ''
      }
    },
    complaintDialog(val) {
      if(!val){
        this.$emit('tableReload')
      }
    },
  },
  methods: {
    // 获取投诉单详情
    getInfo() {
      const _that = this
      _that.detailsTitle = '投诉单'
      var data = {
        id: _that.complaintId
      }

      getComplaintBillDetail(data).then(res => {
        // console.log('getComplaintBillDetail', res)
        var dataInfo = res.data
        _that.billDetail = dataInfo
        _that.form = {
          id: dataInfo.id,
          clientName: dataInfo.clientName,
          linkPhone: dataInfo.linkPhone,
          orderCode: dataInfo.orderCode,
          tsType: dataInfo.tsType,
          orderName: dataInfo.orderName,
          sevPerson: dataInfo.sevPerson,
          creDept: dataInfo.creDept,
          crePerson: dataInfo.crePerson,
          creDate: dataInfo.creDate,
          assignDate: dataInfo.assignDate,
          tsEven: dataInfo.tsEven,
          tsGoal: dataInfo.tsGoal,
          complainReason: dataInfo.complainReason,
          attachmentList: dataInfo.attachmentList,
          backFlag: dataInfo.backFlag,
          backReason: dataInfo.backReason,
          sevPersonDoc: dataInfo.sevPersonDoc,
          tsLimitDate: dataInfo.tsLimitDate,
          relateMoney: dataInfo.relateMoney
        }
        _that.complaintBill.sevPersonDoc = dataInfo.sevPersonDoc
        _that.deptList = []
        _that.relateManList = dataInfo.relateManInfoList
        _that.deptSurveylist = []
        _that.wbSurveylist = []
        _that.adminReviewDoc = ''
        _that.finishMemo = ''
        _that.detailsTitle = `投诉单（投诉单号:${_that.billDetail.billCode})`
        if (dataInfo.surveyBillList.length > 0) {
          dataInfo.surveyBillList.forEach(surveyBill => {
            // _that.relateManList = _that.relateManList.concat(surveyBill.relateManInfoList)
            // if(_that.surveyType == surveyBill.surveyType){
            //   _that.relateManList = surveyBill.relateManInfoList
            // }
            if (surveyBill.surveyType == 1) {
              _that.adminReviewDoc += '内部行政审核意见：' + surveyBill.adminReviewDoc+'\n'
              _that.finishMemo = surveyBill.finishMemo
              _that.deptSurveylist = surveyBill.deptSurveyInfoList
              surveyBill.deptSurveyInfoList.forEach(deptSurvey => {
                _that.deptList.push(deptSurvey.idSurveyDept);
                if(_that.currentDeptId == deptSurvey.idSurveyDept){
                  _that.deptSurveyInfo.versionCode = deptSurvey.versionCode
                }
              })
            } else {
              _that.adminReviewDoc += '外部行政审核意见：' + surveyBill.adminReviewDoc+'\n'
              _that.wbSurveylist.push({
                surveyDept: '外部',
                id: surveyBill.id,
                createTime: surveyBill.createTime,
                surveyCode: surveyBill.surveyBillCode,
                surveyState: surveyBill.surveyState,
                feedBackDate: surveyBill.surveyDate,
                surveyPerson: surveyBill.surveyPerson,
                finishReason: surveyBill.finishReason,
                finishResult: surveyBill.finishResult,
                sevMoneyOut: surveyBill.sevMoneyOut,
                versionCode: surveyBill.versionCode
              })
              if (_that.surveyId == surveyBill.id) {
                _that.detailsTitle = `投诉单（投诉单号:${_that.billDetail.billCode})`
                if(surveyBill.surveyBillCode){
                  _that.detailsTitle += `(调查单号:${surveyBill.surveyBillCode})`
                }
                if(surveyBill.surveyType==1){
                  _that.detailsTitle +=`(内部调查)`
                }else if (surveyBill.surveyType==2) {
                  _that.detailsTitle +=`(外部调查)`
                }
                // console.log(_that.detailsTitle);
                if (surveyBill.isFinishSurvey == 0) {
                  _that.isFinishSurvey = false
                } else {
                  _that.isFinishSurvey = true
                }
                _that.deptSurveyInfo.sevMoneyOut = surveyBill.sevMoneyOut
                _that.deptSurveyInfo.finishReason = surveyBill.finishReason
                _that.deptSurveyInfo.finishResult = surveyBill.finishResult
                _that.deptSurveyInfo.versionCode = surveyBill.versionCode
              }
            }
          })
        } else {
          _that.deptSurveylist = []
        }
        if (_that.currentDeptId != '') {
          (_that.deptSurveylist).forEach((item) => {
            if (item.idSurveyDept == _that.currentDeptId) {
              _that.detailsTitle = `投诉单（投诉单号:${_that.billDetail.billCode})`
              if(item.surveyCode){
                _that.detailsTitle += `(调查单号:${item.surveyCode})`
              }
              if(item.surveyType==1){
                _that.detailsTitle +=`(内部调查)`
              }else if (item.surveyType==2) {
                _that.detailsTitle +=`(外部调查)`
              }
              // console.log(_that.detailsTitle);
              _that.deptSurveyInfo.finishReason = item.finishReason
              _that.deptSurveyInfo.finishResult = item.finishResult
              if (item.isFinishSurvey == 0) {
                _that.isFinishSurvey = false
              } else {
                _that.isFinishSurvey = true
              }
            }
          })
        }
      }).catch(err => {
        // console.log('出错了', err)
        _that.$message.error(err)
      })
      console.log(_that.detailsTitle);
    },

    openDetail() {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = _that.billDetail.idOrder
        _that.$refs.orderDetail.getInfo()
      })
    },

    // 获取调查单详情
    getSurveyList() {
      const _that = this
      var data = {
        id: _that.surveyId
      }
      getSurveyBillDetail(data).then(res => {
        // console.log('getSurveyBillDetail', res)
        const data = res.data
        _that.surveyDetail.surveyBillList = data.surveyBillList
        if(_that.type == 4){
          _that.detailsTitle = `投诉单（投诉单号:${data.billCode})`
          if(_that.surveyDetail.surveyBillList[0].surveyBillCode){
            _that.detailsTitle += `(调查单号:${_that.surveyDetail.surveyBillList[0].surveyBillCode})`
          }
          if(_that.surveyDetail.surveyBillList[0].surveyType==1){
            _that.detailsTitle +=`(内部调查)`
          }else if (_that.surveyDetail.surveyBillList[0].surveyType==2) {
            _that.detailsTitle +=`(外部调查)`
          }
        }
      }).catch(err => {
        // console.log('出错了', err)
        _that.$message.error(err)
      })
    },
    // 获取部门列表
    getDepts() {
      const _that = this
      var data = {}
      getDeptList(data).then(res => {
        // console.log('getDeptList', res)
        const data = res.data
        _that.deptOptions = data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 受理投诉单
    acceptBill() {
      const _that = this
      _that.complaintBill.id = _that.complaintId
      _that.complaintBill.relateMoney = _that.form.relateMoney
      var data = {
        'complaintBill': JSON.stringify(_that.complaintBill)
      }
      acceptComplaintBill(data).then(res => {
        // console.log('acceptComplaintBill', res)
        // const data = res.data
        if (res.httpCode == 200) {
          _that.$message.success('受理成功')

          _that.$emit('tableReload')
          _that.complaintDialog = false
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    // 退回
    backBill() {
      const _that = this
      var data = {
        'id': _that.complaintId,
        'backReason': _that.complaintBill.sevPersonDoc
      }
      acceptBackComplaintBill(data).then(res => {
        // console.log('acceptBackComplaintBill', res)
        // const data = res.data
        if (res.httpCode == 200) {
          _that.$message.success('退回成功')
          _that.$emit('tableReload')
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    /**
     * 生成部门调查单
     * type 1 内部调查单
     * 2 外部调查单
     */

    addDeptSurvey(type) {
      const _that = this
      _that.deptSurvey.idComplaintBill = _that.complaintId
      _that.deptSurvey.deptSurveyInfoList = []
      // if(_that.billDetail.surveyBillList.length > 0) {
      //   _that.deptSurvey.id =_that.billDetail.surveyBillList[0]
      // }
      if (type == 1) {
        // if (_that.deptList.length <= 0) {
        //   _that.$message.error('选择部门')
        //   return
        // }
        var typeIndex = null
        if (_that.billDetail.surveyBillList.length > 0) {
          _that.billDetail.surveyBillList.forEach((item, index) => {
            if (item.surveyType == 1) {
              typeIndex = index
              _that.deptSurvey.id = item.id
            }
          })
        } else {
          _that.deptSurvey.id = 0
        }
        _that.deptSurvey.surveyType = 1
        if (_that.deptList.length > 0) {

          if (typeIndex === null || _that.billDetail.surveyBillList[typeIndex].deptSurveyInfoList.length == 0) {
            _that.deptList.forEach((item) => {
              var arr = {
                'idSurveyDept': item
              }
              _that.deptSurvey.deptSurveyInfoList.push(arr)
            })
          } else {
            _that.deptList.forEach((item) => {
              var arr = {
                'idSurveyDept': item
              }
              _that.deptSurvey.deptSurveyInfoList.push(arr)
            })
          }
        } else {
          _that.deptSurvey.deptSurveyInfoList = []
        }
        _that.deptSurvey.versionCode = _that.billDetail.versionCode
        _that.addDeptSurveyFun()
      } else {
        if(_that.billDetail.outSurveyFlag == 1){
          _that.$confirm(`已添加过外部调查单是否继续添加`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
            _that.deptSurvey.id = 0
            _that.deptSurvey.surveyType = 2
            _that.addDeptSurveyFun()
          }).catch(() => {
            return
          })
        }else{

        // if (_that.billDetail.surveyBillList.length > 0) {
        //   _that.billDetail.surveyBillList.forEach(item => {
        //     if (item.surveyType == 2) {
        //       _that.deptSurvey.id = item.id
        //     } else {
        //       _that.deptSurvey.id = 0
        //     }
        //   })
        // } else {
          _that.deptSurvey.id = 0
        // }
        _that.deptSurvey.surveyType = 2
          _that.addDeptSurveyFun()

        }
      }
      // console.log(_that.deptSurvey)
      // return
    },
    addDeptSurveyFun(){
      const _that = this
      _that.addDeptDisabled = true
      var data = {
        'surveyBill': JSON.stringify(_that.deptSurvey)
      }
      addSurveyBill(data).then(res => {
        // console.log('addSurveyBill', res)
        // const data = res.data
        if (res.httpCode == 200) {
          _that.$message.success('分配成功')
          _that.addDeptDisabled = false
          // _that.deptSurveylist = res.data
          // res.data.deptSurveyInfoList.forEach( (item,index) => {
          //   _that.deptSurveylist.push(item)
          // })
          _that.getInfo()
        }
      }).catch(err => {
        _that.addDeptDisabled = false
        _that.$message.error(err)
      })
    },

    // 调查反馈
    feedbackBill() {
      const _that = this

      if (!_that.deptSurveyInfo.finishReason) {
        _that.$message.warning('请填写调查过程')
        return;
      }
      if (!_that.deptSurveyInfo.finishResult) {
        _that.$message.warning('请填写调查结果')
        return;
      }
      if (_that.isFinishSurvey) {
        _that.deptSurveyInfo.isFinishSurvey = 1
      } else {
        _that.deptSurveyInfo.isFinishSurvey = 0
      }
      _that.deptSurveyInfo.relateManInfoList = _that.relateManList
      // console.log(data);
      // return
      if (_that.surveyType == 1) {
        _that.deptSurveyInfo.idDeptSurvey = _that.deptSurveyId
        // var data = {
        //   'surveyFeedBackInfo': JSON.stringify(_that.deptSurveyInfo)
        // }

        var data = JSON.stringify(_that.deptSurveyInfo)
        // console.log(_that.deptSurveyInfo);
        // return;
        deptSurveyFeedBack(data).then(res => {
          // console.log('deptSurveyFeedBack', res)
          // const data = res.data
          if (res.httpCode == 200) {
            _that.getInfo()
            _that.$message.success('反馈成功')
            // _that.$emit('tableReload')
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      } else {
        _that.deptSurveyInfo.idSurveyBill = _that.surveyId
        var data = {
          'surveyFeedBackInfo': JSON.stringify(_that.deptSurveyInfo)
        }
        // console.log(_that.deptSurveyInfo);
        // return;
        feedBackSurveyBill(data).then(res => {
          // console.log('feedBackSurveyBill', res)
          // const data = res.data
          if (res.httpCode == 200) {
            _that.getInfo()
            _that.$message.success('反馈成功')
            // _that.$emit('feedBackSuccess')
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      }
    },
    // 调查审核
    examineBill() {
      const _that = this
      if (_that.isFinishSurvey == false) {
        _that.$message.warning('反馈未完成，请稍后审核')
        return
      }
      if (!_that.deptSurveyInfo.finishReason) {
        _that.$message.warning('请填写调查过程')
        return;
      }
      if (!_that.deptSurveyInfo.finishResult) {
        _that.$message.warning('请填写调查结果')
        return;
      }
      if (_that.isFinishSurvey) {
        _that.deptSurveyInfo.isFinishSurvey = 1
      } else {
        _that.deptSurveyInfo.isFinishSurvey = 0
      }
      _that.deptSurveyInfo.relateManInfoList = _that.relateManList
      if (_that.surveyType == 1) {
        _that.deptSurveyInfo.idDeptSurvey = _that.deptSurveyId
        // var data = {
        //   'surveyFeedBackInfo': JSON.stringify(_that.deptSurveyInfo)
        // }
        var data = JSON.stringify(_that.deptSurveyInfo)
        deptSurveyReview(data).then(res => {
          // console.log('deptSurveyReview', res)
          // const data = res.data
          if (res.httpCode == 200) {
            _that.$message.success('审核成功')
            _that.$emit('tableReload')
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      } else {
        _that.deptSurveyInfo.idSurveyBill = _that.surveyId
        var data = {
          'surveyFeedBackInfo': JSON.stringify(_that.deptSurveyInfo)
        }
        reviewSurveyBill(data).then(res => {
          // console.log('reviewSurveyBill', res)
          // const data = res.data
          if (res.httpCode == 200) {
            _that.$message.success('审核成功')
            _that.$emit('tableReload')
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      }
    },
    // 结单
    registerBill() {
      const _that = this
      _that.registerInfo.id = _that.surveyId
      var data = {
        'surveyBill': JSON.stringify(_that.registerInfo)
      }
      registerCheck(data).then(res => {
        // console.log('registerCheck', res)
        // const data = res.data
        if (res.httpCode == 200) {
          _that.$message.success('结单成功')
          _that.$emit('tableReload')
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 行政审核
    reviewBill() {
      const _that = this
      _that.reviewInfo.id = _that.surveyId
      // var data = {
      //   'surveyBill': JSON.stringify(_that.reviewInfo)
      // }

      var data = JSON.stringify(_that.reviewInfo)
      adminReview(data).then(res => {
        // console.log('adminReview', res)
        // const data = res.data
        if (res.httpCode == 200) {
          _that.$message.success('审核成功')
          _that.$emit('tableReload')
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 增加奖惩人员
    chooseUser(row) {
      // console.log(row)
      var _that = this
      _that.relateInnerDialog1 = false
      _that.relateManInfo.idrelateman = row.id
      _that.relateManInfo.relateMan = row.userName
      _that.relateManInfo.idRelateManDept = row.deptId
      _that.relateManInfo.relateManDept = row.deptName
    },
    chooseDept(row){
      var _that = this
      // console.log(row);
      _that.relateInnerDialog2 = false
      _that.relateManInfo.idrelateman = 0
      _that.relateManInfo.relateMan = ''
      _that.relateManInfo.idRelateManDept = row.id
      _that.relateManInfo.relateManDept = row.deptName
    },
    addRelateMan() {
      var _that = this
      // console.log(_that.relateManList);
      _that.relateManList.push(JSON.parse(JSON.stringify(_that.relateManInfo)))
      _that.relateManDialog = false
      // _that.relateManInfo.idSurveyBill = _that.surveyId
      // var data = {
      //   'relateManInfo': JSON.stringify(_that.relateManInfo)
      // }
      // addRelateManInfo(data).then(res => {
      //   // console.log('addRelateManInfo', res)
      //   // const data = res.data
      //   if (res.httpCode == 200) {
      //     _that.$message.success('增加成功')
      //     _that.relateManDialog = false
      //     _that.getInfo()
      //   }
      // }).catch(err => {
      //   _that.$message.error(err)
      // })
    },
    // 删除奖惩人员
    removeRelateMan(scope) {
      const _that = this
      _that.relateManList.splice(scope.$index,1)
      // _that.$confirm('确认删除？', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消'
      // }).then(() => {
      //   var data = {
      //     'id': row.id
      //   }
      //   removeRelateManInfo(data).then(res => {
      //     // console.log(res);
      //     if (res.httpCode == 200) {
      //       _that.$message({
      //         message: '删除成功',
      //         type: 'success'
      //       })
      //       _that.getInfo()
      //     } else {
      //       _that.$message.error(res.msg)
      //     }
      //   }).catch(err => {
      //     _that.$message.error(err)
      //   })
      // }).catch(() => {
      //   _that.$message.error(err)
      // })
    },
    // 打印调查单
    printSurvey() {
      var _that = this
      var ids = []
      _that.surveyDetail.surveyBillList.forEach(item => {
        ids.push(item.id)
      })
      var data = {
        'surveyBillIds': ids.join(',')
      }
      printSurveyBill(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          var data = {
            PrintTemplate: res.data.resultMap.PrintTemplate,
            NeedPreview: 1,
            PrintData: JSON.stringify(res.data.resultMap.PrintData)
          }
          doLocalPrint(data)
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    printSurveyBill(id){
      var _that = this
      var data = {
        'surveyBillIds':id
      }
      printSurveyBill(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          var data = {
            PrintTemplate: res.data.resultMap.PrintTemplate,
            NeedPreview: 1,
            PrintData: JSON.stringify(res.data.resultMap.PrintData)
          }
          doLocalPrint(data)
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    enter(i) {
      this.eleindex = i
      // if (this.eleindex === i) {
      //   this.eleindex = -1
      // } else {
      //   this.eleindex = i
      // }
    },
    out(i) {
      // this.imgindex = -1
    }
  }
}
</script>

<style scoped>

  ::v-deep .el-dialog__body{
    padding: 10px 20px;
  }

::v-deep .el-card__header{
  padding: 10px 20px;
}
  ::v-deep .el-card__body{
    padding: 10px;
  }
  .detailItem {
  margin: 5px;
  color: #666;
}

.detailItem .item_content {
  display: inline-block;
}

.labelText {
  margin: 10px 0;
}

/*手风琴样式*/
.or-container {
  display: flex;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  height: 48vh;
}

.or-container:before {
  background-color: rgba(0, 0, 0, 0.4);
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  line-height: 0;
  padding: 0 15px;
}

.box-title {
  font-size: 16px;
  font-width: 700;
  line-height: 30px;
  margin: 10px 0;
  padding-left: 10px;
}

.title-state {
  display: none;
}

.box-show {
  display: block;
  line-height: 20px;
}

.box-main {
  display: none;
  line-height: 20px;
}

/*.box > img {*/
/*  width: 100%;*/
/*  height: calc(100% - 10vh);*/
/*  -o-object-fit: cover;*/
/*  object-fit: cover;*/
/*  transition: .5s;*/
/*}*/

/*.box > span {*/
/*  font-size: 3.8vh;*/
/*  display: block;*/
/*  text-align: center;*/
/*  height: 10vh;*/
/*  line-height: 2.6;*/
/*}*/

.eleactive {
  flex: 1 1 30%;
}

.eleactive .title-state {
  display: inline-block;
}

.eleactive .box-show {
  display: none;
}

.eleactive .box-main {
  display: block;
}

.eleactive > img {
  width: 100%;
  height: 100%;
}

/*end*/
.textareaCls >>> .el-textarea__inner {
  color: #464444;
}
</style>
