<style>
  .WebSiteService .el-button.is-circle {
    padding: 6px;
  }

  .WebSiteService .preview {
    color: #409eff;
    text-decoration: underline
  }
  .xuqiuDialog .el-form-item {
    margin-bottom: 0;
  }
  .xuqiuDialog .el-form-item__label{
    line-height: 25px;
  }
  .xuqiuDialog .el-form-item__content{
    line-height: 25px;
  }
  .webSitestatus_label .el-form-item__label{
    line-height: 33px;
  }
</style>
<template>
  <!--服务管理-->
  <div class="WebSiteService">
    <div class="query-box">
      <ul>
        <li>
          <label>狀態：</label>
          <el-select class="wp40 accountList" v-model="msg.DemandStatus" placeholder="請選擇">
            <el-option :key="0" label="待處理" :value="0"> </el-option>
            <el-option :key="1" label="處理中" :value="1"> </el-option>
            <el-option :key="2" label="已完成" :value="2"> </el-option>
            <el-option :key="3" label="轉訂單" :value="3"> </el-option>
            <el-option :key="4" label="已取消" :value="4"> </el-option>
          </el-select>
        </li>
        <li>
          <label>稱呼：</label>
          <el-input v-model="msg.Name" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
          </el-input>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getData()" />
          <!-- <input type="button" class="normalBtn" @click="outerVisible=true,clearMsg()" value="添加服务" /> -->
        </li>
      </ul>
    </div>
    <div>
      <el-table :data="dataList" style="width: 100%" v-loading="loading"
        :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="SalesManName" label="業務員" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="Id" label="需求單編號" header-align="center" align="center">
        </el-table-column>
        <!-- <el-table-column prop="Id" label="旅行社" sortable>
        </el-table-column> -->
        <el-table-column prop="TripStartDate" label="出團日期" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="TripTitle" width="400" label="行程名稱" header-align="center" align="left">
        </el-table-column>
        <el-table-column prop="TCNUM" label="團位編號" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="CreateByName" label="需求者" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="Mobile" label="手機號碼" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="EMail" label="電子信箱" header-align="center" align="left">
        </el-table-column>
        <el-table-column prop="Remarks" label="備註" header-align="center" align="left">
        </el-table-column>
        <el-table-column prop="CreateDateStr2" label="提出時間" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="DemandStatusStr" label="状态" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,updateData(scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total=total>
      </el-pagination>
    </div>

    <el-dialog title="需求单管理" :visible.sync="outerVisible" custom-class="xuqiuDialog" center width="800px">
      <el-form :model="addMsg" ref="addMsg" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="行程名稱">
              <span>{{EditObj.TripTitle}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="12">
            <el-form-item label="出團日期">
              <span>{{EditObj.TripStartDate}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="團位編號">
              <span>{{EditObj.TCNUM}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="border-bottom:1px solid #d1d1d1;padding-bottom:10px;">
          <el-col :span="24">
            <el-form-item label="旅行社">
              <span></span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
            <el-col :span="12">
              <el-form-item label="需求者">
                <span>{{EditObj.CreateByName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="稱呼">
                <span>{{EditObj.Name}}</span>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手機號碼">
              <span>{{EditObj.Mobile}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="電子信箱">
              <span>{{EditObj.EMail}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提出時間">
              <span>{{EditObj.CreateDateStr2}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="border-bottom:1px solid #d1d1d1;padding-bottom:10px;">
          <el-col :span="24">
            <el-form-item label="備註">
              <span>{{EditObj.Remarks}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px;" class="webSitestatus_label">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select class="wp40 accountList" v-model="addMsg.DemandStatus" @change="ChangeDemand()"
                placeholder="请选择">
                <el-option :key="0" label="待处理" :value="0"> </el-option>
                <el-option :key="1" label="处理中" :value="1"> </el-option>
                <el-option :key="2" label="已完成" :value="2"> </el-option>
                <el-option :key="3" label="转订单" :value="3"> </el-option>
                <el-option :key="4" label="已取消" :value="4"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客服人員">
              <el-select class="wp40 accountList" v-model="addMsg.SalesmanId" filterable placeholder="请选择">
                <el-option :label="$t('pub.unlimitedSel')" :value="0">
                </el-option>
                <el-option v-for="(item,index) in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px;">
          <el-col :span="24">
            <el-form-item label="承辦人員備註">
              <el-input type="textarea" :rows="4" maxlength='50' placeholder="承辦人員備註" v-model='addMsg.SalesManRemark'>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>

    <el-dialog title="需求单转订单" :visible.sync="isShowDemandOrder" width="1000px" append-to-body>
      <el-form label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="成人">
              <el-input placeholder="成人数量" class="wp40" v-model="addMsg.ManNum" />
            </el-form-item>
            <el-form-item label="小孩">
              <el-input placeholder="小孩数量" class="wp40" v-model="addMsg.ChirdNum" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDemandOrder = false" size="small">取 消</el-button>
        <el-button type="danger" size="small" @click="TransOrder()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        msg: {
          Name: '', //名称
          pageSize: 15,
          pageIndex: 1,
          DemandStatus: 0,
        },
        isShowDemandOrder: false, //需求单转订单
        total: 0,
        currentPage: 1,
        //弹窗
        outerVisible: false,
        dataList: [],
        addMsg: {
          Id: 0, //编号         
          SalesmanId: 0, //销售人员
          SalesManRemark: "", //销售备注
          DemandStatus: 0, //状态(需求单状态(0-待处理，1-处理中，2-已完成，3-已转订单，4-已取消))
          ManNum: 0, //成人人数
          ChirdNum: 0, //儿童人数
        },
        EditObj: {},
        EmployeeList: [], //员工列表

      }
    },
    mounted() {
      this.getEmployeeList();
      this.getData();
    },
    methods: {
      ChangeDemand() {
        if (this.addMsg.DemandStatus == 3) {
          this.isShowDemandOrder = true;
        }
      },
      //根据当前员工所在部门获取该部门及子部门员工信息
      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 => {}
        );
      },
      //获取配置
      getData() {
        //获取现有线路列表
        this.loading = true;
        this.apipost(
          "ws_get_GetServicePageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data.pageData;
              this.total = res.data.data.count
            } else {
              this.loading = false;
            }
          },
          err => {}
        );
      },
      handleCurrentChange(val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getData();
      },
      resetPageIndex() {
        //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      //修改
      updateData(item) {
        this.apipost(
          "ws_get_GetService", {
            Id: item.Id,
          },
          res => {
            if (res.data.resultCode == 1) {
              var tempData = res.data.data;
              this.EditObj = tempData;
              this.addMsg.Id = tempData.Id;
              this.addMsg.DemandStatus = tempData.DemandStatus;
              this.addMsg.SalesmanId = tempData.SalesmanId;
              this.addMsg.SalesManRemark = tempData.SalesManRemark;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //删除
      deleteData(item) {
        var that = this;
        that.Confirm("是否删除?", function () {
          that.apipost(
            "ws_post_RemoveService", {
              Id: item.Id
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getData();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      //清空数据
      clearMsg() {
        this.addMsg.Id = 0;
        this.addMsg.SalesmanId = 0;
        this.addMsg.SalesManRemark = "";
        this.addMsg.DemandStatus = 0;
        this.addMsg.ManNum = 0;
        this.addMsg.ChirdNum = 0;
      },
      //修改需求单状态
      submitForm(addMsg) {
        this.apipost(
          "ws_post_SetServiceDemandStatusService", this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.getData();
              this.clearMsg();
              this.Success(res.data.message);
              this.outerVisible = false;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //需求单转订单
      TransOrder() {
        this.apipost(
          "ws_post_TransformOrderService", this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.getData();
              this.clearMsg();
              this.Success(res.data.message);
              this.outerVisible = false;
              this.isShowDemandOrder = false;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      }
    }
  }

</script>