<style>
  .CommondityOrderList .el-button-group .el-button {
    padding: 5px;
  }

</style>

<template>
  <div class="flexOne CommondityOrderList">
    <div class="query-box">
      <ul class="user_time_picker">
        <li>
          <span>
            <em>{{$t('objFill.lvkeminc')}}</em>
            <el-input v-model="msg.AccountName" @keyup.enter.native="getList" class=""></el-input>
          </span>
        </li>
        <li style="display:none;">
          <span>
            <em>{{$t('Operation.Op_fellow')}}</em>
            <el-select class="" v-model="msg.CustomerId" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="SelectDefaultValue">
              </el-option>
              <el-option v-for="item in CustomerList" :label="item.CustomerName" :value="item.CustomerId"
                :key="item.CustomerId"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('visaT.sale')}}</em>
            <el-select class="" v-model="msg.SaleId" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="SelectDefaultValue">
              </el-option>
              <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
                :key="item.EmployeeId"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('objFill.v101.busManagement.jiedanlind')}}</em>
            <el-select class="" v-model="msg.ReciveLeaderId" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value="SelectDefaultValue">
              </el-option>
              <el-option v-for="item in LeaderList" :label="item.Name" :value="item.ID"
                :key="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('hotel.hotel_OrderStates')}}</em>
            <el-select filterable v-model="msg.COrderState" class="">
              <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
              <el-option v-for="item in OrderStatusList" :label="item.Name" :value="item.Id"
                :key="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" @click="getList()" class="hollowFixedBtn" :value="$t('objFill.v101.Buying.pilianszld')">
          <input type="button" @click="SetAccountStatus(1,2)" class="hollowFixedBtn" :value="$t('pub.searchBtn')">
        </li>
      </ul>
    </div>
    <div class="clearfix"></div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('objFill.v101.traveltrip.xuanzhe')}}</th>
        <th>{{$t('fnc.ddbianhao')}}</th>
        <th>{{$t('fnc.khmingcheng')}}</th>
        <th>{{$t('sm.dingdanxinxi')}}</th>
        <th>{{$t('objFill.v101.Buying.wuliuxx')}}</th>
        <th>{{$t('objFill.v101.Buying.tonghangmc')}}/{{$t('ground.tonghangfy')}}</th>
        <th>{{$t('objFill.xiaosoumingchen')}}</th>
        <th>{{$t('ground.gongsifany')}}</th>
        <th>{{$t('ground.lingduifany')}}</th>
        <th>{{$t('objFill.v101.Buying.tuanlind')}}</th>
        <th>{{$t('objFill.v101.busManagement.jiedanlind')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tbody v-for="item in dataList">
        <tr>
          <td>
            <el-input v-model="item.checked" type="checkbox" @change="ChangeList"></el-input>
          </td>
          <td>{{item.CorderId}}</td>
          <td>{{item.AccountName}}</td>
          <td>
            <template v-if="item.OrderDetailsList && item.OrderDetailsList.length>0"
              v-for="subItem in item.OrderDetailsList">
              <p> {{$t('MarketingActi.commName')}}: {{subItem.CommodityName}}</p>
              <p> {{$t('Operation.Op_PriceInfo')}}:  {{subItem.CommodityNum}}({{$t('restaurant.res_Number')}}) * {{subItem.CommodityPrice}}({{$t('fnc.danjia')}})</p>
            </template>
            <p> {{item.DeductionPrice}}({{$t('objFill.v101.Buying.dikou')}})</p>
            <p> {{item.PreferPrice}} ({{$t('fnc.yingshou')}})</p>
            <p> {{item.RealityPrice}} ({{$t('fnc.shishou')}})</p>
            <p> {{$t('hotel.hotel_OrderStates')}}: {{item.COrderStateStr}} {{$t('restaurant.res_oderTime')}}:{{item.CreateTimeStr}}</p>
          </td>
          <td>
            <p> {{$t('objFill.v101.Buying.shouhuodz')}}: {{item.GuestProvince}}{{item.GuestCity}}{{item.GuestDistrictCounty}}{{item.DetaileAddress}}</p>
            <p> {{$t('hotel.suplier_contact')}}: {{item.LinkMan}}</p>
            <p> {{$t('scen.sc_tel')}}: {{item.LinkTel}}</p>
          </td>
          <td>{{item.CustomerName}}&nbsp;/&nbsp;<span style="color:red;">￥{{item.CustomerCommission}}</span></td>
          <td>{{item.SaleName}}</td>
          <td>{{item.CompanyCommission}} </td>
          <td>{{item.LeaderCommission}} </td>
          <td>{{item.TCLeaderName}}</td>
          <td>{{item.ReciveLeaderName}}</td>
          <td>
            <el-button-group>
              <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.Buying.fenpaild')" placement="top">
                <el-button type="primary" size="mini" icon="iconfont icon-jinyong" @click="SetAccountStatus(item.CorderId,1)">
                </el-button>
              </el-tooltip>
            </el-button-group>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="11">
            <el-pagination background @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper"
              :page-size="msg.pageSize" :total="msg.total">
            </el-pagination>
          </td>
        </tr>
      </tfoot>
    </table>
    <el-dialog
      custom-class="w400"
      :title="$t('objFill.v101.Buying.fenpaild')"
      :visible.sync="outerVisible"
      center
      :before-close="closeChangeMachie"
    >
      <el-form :model="addMsg" label-width="130px">
        <el-form-item :label="$t('leader.leader_Leader')" prop="state">
          <el-select filterable v-model="addMsg.ReciveLeaderId" prop="ParentId" >
            <el-option v-for="item in LeaderList" :label="item.Name" :value="item.ID" :key="item.ID"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <button
          class="hollowFixedBtn"
          @click="outerVisible = false"
        >{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //查询参数
        msg: {
          AccountName: "", //旅客名称
          CustomerId: 0, //同行编号
          SaleId: 0, //销售编号
          COrderState: -1, //订单状态
          ReciveLeaderId:0,//接单领队
          pageIndex: 1,
          pageSize: 10,
          total: 0,
        },
        addMsg: {
          ReciveLeaderId: '',
          OrderIdList: [],
        },
        outerVisible: false,
        loading: false,
        dataList: [],
        //账户修改
        editMsg: {
          Id: 0,
          AccountStatus: 0,
        },
        //下拉框默认值
        SelectDefaultValue: 0,
        //员工列表
        EmployeeList: [],
        //客户列表
        CustomerList: [],
        //领队列表
        LeaderList: [],
        //订单状态列表
        OrderStatusList:[],
      };
    },
    mounted() {
      this.getEmployeeList();
      this.getLeaderList();
      this.getOrderStatusList();
      //this.getCustomerList();
      this.getList();
    },
    methods: {
      ChangeList(){
        let list = []
        this.dataList.map(x=>{
          if (x.checked) {
            list.push(x.CorderId)
          }
        })
        this.addMsg.OrderIdList = list
      },
      closeChangeMachie(done) {
        done();
      },
      submitForm(){
        this.apipost(
          'ShopOrder_get_SetShopOrderAllotLeader', this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.outerVisible = false;
              this.getList();
            }
          },
          err => {}
        )
      },
      SetAccountStatus(id, type){
        if (type === 1) {
          this.addMsg.OrderIdList = []
          this.addMsg.ReciveLeaderId = ''
          this.addMsg.OrderIdList.push(id)
          this.outerVisible = true;
        } else {
          this.outerVisible = true;
        }
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //根据当前员工所在部门获取该部门及子部门员工信息
      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 => {}
        )
      },
      //所有客户信息
      getCustomerList() {
        let msg = {
          CustomerName: "",
        }
        this.apipost(
          'app_customer_GetAllListByGroupId', {},
          res => {
            if (res.data.resultCode == 1) {
              this.CustomerList = res.data.data;
            }
          },
          err => {}
        )
      },
      //获取领队列表
      getLeaderList() {
        this.apipost(
          'leader_post_GetList', {},
          res => {
            if (res.data.resultCode == 1) {
              this.LeaderList = res.data.data;
            }
          },
          err => {}
        )
      },
      //获取数据
      getList() {
        this.loading = true;
        this.apipost("ShopOrder_get_GetCommodityOrderPageListService", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode === 1) {
            let dataList = res.data.data.pageData;
            dataList.map(x=>{
              x.checked = false
            })
            this.dataList = dataList
            this.msg.total = res.data.data.count;
            this.ChangeList()
          } else {
            this.Error(res.data.message);
          }
        }, null);
      },
       //获取领队列表
      getOrderStatusList() {
        this.apipost(
          'ShopOrder_get_GetShopOrderStateService', {},
          res => {
            if (res.data.resultCode == 1) {
              this.OrderStatusList = res.data.data;
            }
          },
          err => {}
        )
      },
    }
  };

</script>