<style>
  @import url('../../assets/css/financia/ReceivingOfficer.css');

</style>
<template>
  <div class="page_ReceivingOfficer">
    <div class="query-box">
      <ul>
        <li>
          <button class="normalBtn" @click="addShow=true,text='新增'">新增</button>
        </li>
      </ul>
    </div>
    <div v-loading="loading" class="cm_content _scrollbar" :class="addShow==true?'_edHeight':''">
      <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" >
        <tr>
          <th>窗口名称</th>
          <th>所属公司</th>
          <th>业务人员</th>
          <th>负责方向</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in dataList" :key="index">
          <td>{{item.Name}}</td>
          <td>{{item.BName}}</td>
          <td>
            <span v-for="(i,ix) in item.emList">{{i.emName}} <span v-if="ix!=item.emList.length-1">,</span> </span>
          </td>
          <td>
            <span v-if="item.Direct==1">收款</span>
            <span v-else-if="item.Direct==2">支款</span>
            <span v-else>收支</span>
          </td>
          <td>
            <el-row>
              <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
                <el-button type="primary" class="iconfont icon-bianji-smal" circle @click="editCurency(item.ID),text='修改'"></el-button>
              </el-tooltip>
              <!--<el-tooltip class="item" effect="dark" content="单据信息" placement="top-start">-->
                <!--<el-button type="danger" class="iconfont icon-img-rili" circle @click="goUrlDetail('CashierWorkDetail',2,item.Name,item.ID,item.BranchId)"></el-button>-->
              <!--</el-tooltip>-->
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <el-button type="danger" class="iconfont icon-img_delete_small" circle @click="financeinfoRemove(item.ID,item.ID)"></el-button>
              </el-tooltip>
            </el-row>
          </td>
        </tr>
      </table>
      <div class="noData" v-show="noData">
        {{$t('system.content_noData')}}
      </div>
      <div>
        <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>
    </div>
    <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
      <el-row class="_margin_bottom_20">
        <el-col :span="20">
          <p class="_tit">{{text}}窗口</p>
        </el-col>
        <el-col :span="4" class="_add_saveBtn">
          <button type="button" class="normalBtn" @click="submitForm('addMsg',1)">{{$t('pub.saveBtn')}}</button>
          <button class="hollowFixedBtn" type="button" @click="cancelEdit(),resetForm('addMsg'),addShow=false">
            {{$t('pub.cancelBtn')}}
          </button>
        </el-col>
      </el-row>
      <el-form class=" clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="名称：" prop="Name">
              <el-input v-model="addMsg.Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="所属公司">
              <el-select  filterable  v-model='addMsg.BranchId' >
                <el-option v-for='item in CompanyList'
                 :label='item.BName'
                 :value='item.Id'
                 :key='item.Id'>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务人员：" prop="listArr">
              <el-select
                v-model="addMsg.listArr"
                filterable
                remote
                multiple
                reserve-keyword
                placeholder="请输入"
                :remote-method="remoteMethod"
                @change="$forceUpdate()"
                @remove-tag="removeTag"
                :loading="loading2">
                <el-option
                  v-for="item in searchList"
                  :key="item.empId"
                  :label="item.name"
                  :value="item.empId">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.postName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责方向" prop="Direct">
              <el-radio v-model="addMsg.Direct" :label="1">收</el-radio>
              <el-radio v-model="addMsg.Direct" :label="2">支</el-radio>
              <el-radio v-model="addMsg.Direct" :label="3">收支</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    components: {Treeselect},
    data () {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 15,
        },
        addMsg: {
          ID: 0,
          Name: '',
          emList: [],
          BranchId: '',
          Direct: '',
          listArr: [],
        },
        searchList: [],
        CompanyList: [],
        dataList: [],
        total: 0,
        currentPage: 1,
        loading: false,
        addShow: false,
        loading2: false,
        noData: false,
        text: '',
        rules: {
          Name: [
            { required: true, message: '请填写窗口名称', trigger: 'blur' }
          ],
          listArr: [
            {type: 'array', required: true, editCurencymessage: '请选择业务员', trigger: 'blur' }
          ],BranchId:[
            { required: true, message: '请选择公司', trigger: 'change' }
          ],Direct:[
            { required: true, message: '请选择使用方向', trigger: 'change' }
          ]
        },
      }
    }, created () {
      let userInfo = this.getLocalStorage()

    }, methods: {
      financeinfoRemove: function(id){  // 删除
        this.$confirm('确定删除窗口？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('Window_post_RemoveTwo',{ID:id}, res => {
            if(res.data.resultCode == 1) {
              this.getList()
              this.$message.success(res.data.message);
            } else {
              this.$message.error(res.data.message);
            }
          }, err => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      editCurency: function(id){  //   修改  根据id 获取信息
        this.apipost('Window_post_GetTwo',{ID:id}, res => {
          if(res.data.resultCode == 1) {
            let data = res.data.data;
            this.addMsg = data;
            this.addMsg.listArr = [];
            if(data.emList&&data.emList.length>0){
              data.emList.forEach(x=>{
                this.remoteMethod(x.emName);
                this.addMsg.listArr.push(x.EmId)
              })
            }
            this.addShow = true;
          } else {
            this.$message.error(res.data.message);
          }
        }, err => {})
      },
      mergeArray: function(list3, list1,){
        let newList = [...list1,...list3]
        let HTobj = {};
        newList = newList.reduce(function(item, next) {  //数组对象去重
          HTobj[next.EmId] ? '' : HTobj[next.EmId] = true && item.push(next);
          return item;
        }, []);
        list3.forEach((x)=>{
          newList.filter((val, vIndex)=>{
            if (x.EmId === val.EmId)
              newList.splice(vIndex,1)
          })
        })
        return list3;
      },
      addCashierWork: function() { // 提交保存
        let emList = this.addMsg.listArr;
        let arr = [];
        emList.forEach(x=>{
          let obj = {
            'EmId': x,
            'ID': 0,
          }
          arr.push(obj);
        })
        let list4 = this.mergeArray(arr,this.addMsg.emList);
        this.addMsg.emList = list4;
        this.apipost('Window_post_SetTwo',this.addMsg,r=>{
          if(r.data.resultCode==1){
            this.$message.success(r.data.message);
            this.getList();
            this.addShow = false;
            this.cancelEdit();
            // this.CostIdS = [];
          }else{
            this.$message.error(r.data.message);
          }
        },null)
      },
      submitForm: function(addMsg) {//提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addCashierWork();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleCurrentChange: function(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      cancelEdit: function(){  // 取消修改、新增
        this.addMsg = {
          ID:0,
          Name: '',
          emList: [],
          BranchId: '',
          Direct: '',
          listArr: [],
        }
        this.searchList = [];
      },
      resetForm: function(formName) {//弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
      },
      removeTag: function(id) {
        this.addMsg.emList.forEach((x,index)=>{
          if (x.EmId === id) {
            this.addMsg.emList.splice(index,1)
          }
        })
      },
      remoteMethod: function(query) {
        if (query !== ''||this.addShow) {
          this.loading2 = true;
          this.apipost("admin_Get_Chat_All_SelectEmpName",{ EmName:query },res => {
            if (res.data.resultCode == 1) {
              this.searchList = res.data.data;
              this.loading2 = false;
            }
          },err => {});
        } else {
          this.searchList = [];
          this.loading2 = false;
        }
      },
      getList: function () {
        this.loading = true;
        this.apipost('Window_post_GetPageTwoList', this.msg, res=>{
          if (res.data.resultCode === 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
            if(this.total>0){
              this.noData =false;
            }else{
              this.noData =true;
            }
          }
          this.loading = false;
        }, null)
      },
      getCompanyList: function() { //获取公司列表
        this.apipost('admin_get_BranchGetList', this.getCompanyMsg, res => {
          if (res.data.resultCode == 1) {
            this.CompanyList = res.data.data;
          } else {}
        }, null)
      }
    }, mounted () {
      this.getList()
      this.getCompanyList()
    }
  }
</script>