<style>
 .heightauto .el-input{
  height: auto !important;
}
.LianMengManagement ._icon_btn i{width: 30px;height: 30px;display: inline-block;color: white !important;border-radius: 50%;text-align: center;line-height: 30px;margin-right: 10px;cursor: pointer;outline: none;}
.LianMengManagement ._icon_btn i.el-icon-edit{background-color: #47BF8C;}
.LianMengManagement ._icon_btn i.el-icon-check{background-color: #E95252;}
.LianMengManagement ._icon_btn i.el-icon-search{background-color: #E6A23C;}
</style>
<template>
  <div class="LianMengManagement">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>名称</em>
            <el-input v-model="msg.AllianceName" maxlength="50" class="w150"></el-input>
          </span>
        </li>
        <li>
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')" @click="dialogFormVisible = true,addType = 1, iniTAddMsg" />
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()"/>
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>名称</th>
        <th>门店数</th>
        <th>年份</th>
        <th>总金额</th>
        <th>收客数</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in dataList">
         <td>{{item.AllianceName}}</td>
         <td><span class="cursorpointer text-decoration" @click="goCustomerList(item.ID)">{{item.CustomerCount}}</span></td>
         <td>{{item.StartYear}}-{{item.EndYear}}</td>
         <td>{{moneyFormat(item.TradeMoney)}}</td>
         <td><span class="cursorpointer text-decoration" @click="jiesuan(item.ID, 'happyMoneyDetails')" >{{item.TotalGuestNum}}</span></td>
         <td class="_icon_btn">
            <el-tooltip class="item" effect="dark" content="新增客户" placement="top">
              <i class="edit el-icon-edit"@click="addCustorm(item)"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="结算" placement="top"> 
              <i class="edit el-icon-check"  v-if="item.IsClearing == 1" @click="jiesuan(item.ID, 'happyMoney')" ></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="详情" placement="top"> 
              <i class="edit el-icon-search"  v-if="item.IsClearing == 2" @click="jiesuan(item.ID, 'happyMoneyDetails')" ></i>
            </el-tooltip>
         </td>
      </tr>
    </table>
    <el-dialog :title="addType == 1 ? '新增联盟' : '新增客户'" width="600px" :visible.sync="dialogFormVisible" center :before-close="closeChangeMachie" >
      <el-form label-width="110px" :model="addMsg" :rules="rules" ref="addMsg" class="demo-ruleForm">
          <div v-if="addType == 1">
            <el-form-item label="联盟名称" prop="AllianceName" >
              <el-input type="text" v-model="addMsg.AllianceName" class=""></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="StartYear">
              <el-date-picker class="h34 "
                v-model="addMsg.StartYear"
                @change="EndYearChange"
                type="year"
                value-format="yyyy"
                :range-separator="$t('restaurant.res_To')">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="EndYear">
              <el-date-picker class="h34"
                @change="EndYearChange"
                v-model="addMsg.EndYear"
                type="year"
                value-format="yyyy"
                :range-separator="$t('restaurant.res_To')">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="销售" prop="Contact">
              <el-select  filterable  v-model='addMsg.Contact' class="">
                <el-option v-for='item in EmployeeList'
                    :label='item.EmName'
                    :value='item.EmployeeId'
                    :key='item.EmployeeId'>
                </el-option>
              </el-select>
            </el-form-item>
            </div>
            <el-form-item label="客户" prop="CustomerIDs">
              <el-select v-model="addMsg.CustomerIDs"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="getAllListBy"
                  class="heightauto ">
                <el-option
                  v-for="item in AllListBy"
                  :key="item.CustomerId"
                  :label="item.CustomerName"
                  :value="item.CustomerId">
                  <span style="float: left">{{ item.CustomerName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.Contact + item.ContactNumber }}</span>
                </el-option>
              </el-select>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <button class="hollowFixedBtn" @click="dialogFormVisible=false, iniTAddMsg">{{$t('pub.cancelBtn')}}</button>
          <button class="normalBtn" type="primary" @click="UpdateDate('addMsg')">{{$t('pub.sureBtn')}}</button>
      </div>
    </el-dialog>
    <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 class="noDataNotice" v-if="dataList.length<1">
      <i class="iconfont icon-kong"></i>
      <p>{{$t("active.ld_noData")}}</p>
    </div> 
  </div>
</template>
<script> 
export default { 
  data(){
    return{
      loading: false,
      dataList: [],
      DiaoChaShow: false,
      YouJiShow: false,
      showID: 0,
      addType: 1,
      dialogTitle: '',
      dialogFormVisible: false,
      optionloading: false,
      msg: {
        pageIndex: 1,
        pageSize: 10,
        AllianceName: '',
        Contact: '',
      },
      addMsg: {
        StartYear: '',
        EndYear: '',
        AllianceName: '',
        Contact: '',
        CustomerIDs: [],
        ID: 0,
      },
      currentPage:1,
      total:0,
      AllListBy: [],
      employeeMsg: {
        GroupId:'',
        BranchId:-1,
        DepartmentId:0,
        PostId:0,
        IsLeave:0,
      },
      EmployeeList: [],
      rules: {
        AllianceName: [
          { required: true, message: '请输入联盟名称', trigger: 'blur' },
        ],
        StartYear: [
          { required: true, message: '请选择开始年份', trigger: 'change' },
        ],
        EndYear: [
          { required: true, message: '请选择结束年份', trigger: 'change' },
        ],
        Contact: [
          { required: true, message: '请选择销售', trigger: 'change' },
        ],
        CustomerIDs: [
          { type: 'array', required: true, message: '请至少选择一个客户', trigger: 'change' },
        ],
      }
    }
  },mounted() {
    this.getList();
    let userInfo=this.getLocalStorage(); 
    this.employeeMsg.GroupId = userInfo.RB_Group_id;    //集团ID
    this.getEmployee()
  },methods: {
    jiesuan: function (ID, path, t){
      this.$router.push({
        name: path,
        query: {
          id: ID,
          blank: "y",
          tab: '大红包结算',
          type: t
        }
      });
    },
    goCustomerList: function (ID) {
      this.$router.push({
        name: 'LianMengManagementList',
        query: {
          id: ID,
          blank: "y",
          tab: '客户列表'
        }
      });
    },
    EndYearChange: function () {
      let Eyear = this.addMsg.EndYear ? parseInt(this.addMsg.EndYear) : 0
      let Syear = this.addMsg.StartYear ? parseInt(this.addMsg.StartYear) : 0
      if (Eyear < Syear) {
        this.addMsg.EndYear = ''
        this.$message.error('结束时间必须大于开始时间！');
      }
    },
    getList: function () {
      this.loading = true
      this.apipost('app_customer_GetAlliancePageList', this.msg, res=>{
        if (res.data.resultCode === 1) {
          this.loading = false;
          this.dataList = res.data.data.pageData;
          this.total = res.data.data.count;
        }
      }, null)
    },
    addCustorm: function (obj) {
      this.addMsg.StartYear = obj.StartYear;
      this.addMsg.EndYear = obj.EndYear;
      this.addMsg.AllianceName = obj.AllianceName;
      this.addMsg.Contact = obj.Contact;
      this.addMsg.ID = obj.ID;
      this.addType = 2;
      this.dialogFormVisible = true;
    },
    // 保存
    UpdateDate: function(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.apipost('app_customer_SetAlliance', this.addMsg, res=>{
            if (res.data.resultCode === 1) {
              this.dialogFormVisible = false;
              this.iniTAddMsg();
              this.getList();
              this.$message.success(res.data.message);
            } else{
              this.$message.error(res.data.message);
            }
          }, null)
        } else {
          return false;
        }
      }); 
    },
    getAllListBy: function (query) {
      if(query == ''){
        this.AllListBy = [];
        return
      }
      this.optionloading = true
      this.apipost('app_customer_GetAllListByGroupId', {CustomerName: query}, res=>{
        if (res.data.resultCode === 1) {
          this.optionloading = false
          this.AllListBy = res.data.data
        }
      }, null)
    },
    iniTAddMsg: function () {
      this.addMsg = {
        StartYear: '',
        EndYear: '',
        AllianceName: '',
        Contact: '',
        CustomerIDs: [],
        ID: 0,
      };
      this.CustomerIDs = [];
      this.resetForm('addMsg');
    },
    handleCurrentChange(val) { //翻页
      this.msg.pageIndex = val;
      this.getList();
    },
    resetPageIndex(){  // 重置页码
      this.msg.pageIndex=1;
      this.currentPage = 1;
    },
    closeChangeMachie(done) {  //  转交窗口关闭
      done();
      this.iniTAddMsg()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getEmployee() { //员工
      this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
          if(res.data.resultCode == 1) {
              this.EmployeeList = res.data.data;
          }
      }, err => {})
    },
  }
}
</script>