<style>
  @import url('./css/accountingWork.css');
  @import "./css/cssReset.css";

</style>
<template>
  <div class="page_accountingWork page-body">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>流程</em>
            <el-select class="w200" filterable v-model="msg.TemplateId">
              <el-option :label="$t('system.ph_buxian')" value="-1"></el-option>
              <el-option v-for="(item,index) in SingleList" :label="item.Name" :value="item.Id" :key="index+50000">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <!-- <button class="normalBtn" @click="getList">查询</button> -->
          <q-btn color="primary" size="11px" label="查询" @click="getList" style="marginRight:10px"/>
          <!-- <button class="normalBtn" @click="addShow=true,text=$t('pub.addBtn')">{{$t('pub.addBtn')}}</button> -->
          <q-btn color="primary" size="11px" :label="$t('pub.addBtn')"@click="addShow=true,text=$t('pub.addBtn')" />
          <el-tooltip class="item" effect="dark" :content="$t('fnc.qhpaiban')" placement="top-end">
            <i v-if="transitionShow" class="iconfont icon-biaoge" @click="switchMethod(1)"></i>
            <i v-if="transitionShow2" class="iconfont icon-icon-ssan" @click="switchMethod(2)"></i>
          </el-tooltip>
        </li>
      </ul>
    </div>
    <div>
      <p class="_cashierWorl_tit">{{$t('tips.accWorkTips')}}</p>
      <div class="cm_content _scrollbar" :class="addShow==true?'_edHeight':''">
        <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0"
          v-loading="loading" v-if="transitionShow2">
          <tr>
            <th>{{$t('fnc.w_ckmingcheng')}}</th>
            <th>{{$t('system.query_company')}}</th>
            <th>{{$t('fnc.w_ywrenyuan')}}</th>
            <th>流程</th>
            <th>{{$t('fnc.w_fzfangxiang')}}</th>
            <th>{{$t('system.table_operation')}}</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-for="(i,ix) in item.TemplateList" :key="ix+5000">{{i.Name}} <span
                  v-if="ix!=item.TemplateList.length-1">,</span> </span>
            </td>
            <td>
              <span v-if="item.Direct==1">{{$t('fnc.shoukuan')}}</span>
              <span v-else-if="item.Direct==2">{{$t('fnc.zhikuan')}}</span>
              <span v-else>{{$t('fnc.shouzhi')}}</span>
            </td>
            <td>
              <el-row>
                <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" 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="$t('fnc.w_djxinxi')" 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="$t('system.table_delete')" 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 v-if="transitionShow" class="clearfix">
          <div class="po_content_list_item" v-for="(item,index) in dataList" :key="index">
            <div class="po_content_list_item_top">
              <span class="_item_top_name">{{item.Name}}</span>
              <span class="_item_top_icon">
                <i class="iconfont icon-rizhi1"
                  @click="goUrlDetail('CashierWorkDetail',1,item.Name,item.ID,item.BranchId)"></i>
                <i class="iconfont icon-bianji-smal" @click="editCurency(item.ID),text=$t('system.table_edit')"></i>
                <i class="iconfont icon-img_delete_small" @click="financeinfoRemove(item.ID)"></i>
              </span>
            </div>
            <div class="po_content_list_item_bottom">
              <p>
                <span>{{$t('fnc.w_ywrenyuan')}}</span>
                <template v-if="item.emList.length>0">
                  <span v-if="item.emList.length==1">
                    {{item.emList[0].emName}}
                  </span>
                  <div v-else>
                    <el-popover placement="bottom" popper-class="CashierWork_tripDetails" trigger="click">
                      <div class="">
                        <span class="_all_name" v-for="(i,io) in item.emList">{{i.emName}}</span>
                      </div>
                      <span slot="reference" @click="" class="_underline">{{item.emList[0].emName}}
                        {{$t('fnc.w_gong')}}（{{item.emList.length}}）{{$t('hotel.hotel_people')}}</span>
                    </el-popover>
                  </div>
                </template>
                <template v-else>
                  <span>{{$t('fnc.no')}}</span>
                </template>

              </p>
            </div>
          </div>
        </div>
        <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}}{{$t('fnc.w_chuangkou')}}</p>
          </el-col>
          <el-col :span="4" class="_add_saveBtn">
            <!-- <button type="button" class="normalBtn" @click="submitForm('addMsg',1)">{{$t('pub.saveBtn')}}</button> -->
            <q-btn color="primary" size="11px" :label="$t('pub.saveBtn')" @click="submitForm('addMsg',1)" style="marginRight:10px"/>
            <!-- <button class="hollowFixedBtn" type="button"
              @click="cancelEdit(),resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button> -->
            <q-btn text-color="primary" size="11px" :label="$t('pub.cancelBtn')" @click="cancelEdit(),resetForm('addMsg'),addShow=false"/>
          </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="$t('system.query_airName')+'：'" prop="Name">
                <el-input v-model="addMsg.Name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('fnc.ssuogongsi')+'：'" prop="BranchId">
                <el-select filterable v-model='addMsg.BranchId'>
                  <el-option v-for='item in CompanyList' :label='item.SName' :value='item.SId' :key='item.SId'
                    :disabled="item.disabled">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="$t('fnc.w_ywrenyuan')+'：'" prop="listArr">
                <el-select v-model="addMsg.listArr" filterable remote multiple reserve-keyword :remote-method="remoteMethod"
                  :placeholder="$t('pub.pleaseImport')" @change="$forceUpdate()"
                  @remove-tag="removeTag" :loading="loading2">
                  <el-option v-for="(item,index) in searchList" :key="index+60000" :label="item.EmployeeName"
                    :value="item.Id">
                    <span style="float: left">{{ item.EmployeeName }}</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="5">
              <el-form-item label="流程">
                <el-select v-model="addMsg.TemplateListArr" filterable multiple collapse-tags @change="$forceUpdate()"
                  :placeholder="$t('pub.pleaseImport')">
                  <el-option v-for="(item,index) in SingleList" :key="index+200" :label="item.Name" :value="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('fnc.w_fzfangxiang')" prop="Direct">
                <el-radio v-model="addMsg.Direct" :label="1">{{$t('fnc.w_shou')}}</el-radio>
                <el-radio v-model="addMsg.Direct" :label="2">{{$t('fnc.w_zhi')}}</el-radio>
                <el-radio v-model="addMsg.Direct" :label="3">{{$t('fnc.shouzhi')}}</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {
    getSchoolPage
  } from '../../api/school/index'
  import {
    queryEmployee
  } from '../../api/users/user'

  export default {
    components: {
      Treeselect
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 15,
          TemplateId: '',
        },
        addMsg: {
          ID: 0,
          Name: '',
          accountant_list: [],
          emList: [],
          TemplateList: [],
          listArr: [],
          BranchId: '',
          Direct: '',
          BranchIdName:''
        },
        type: -1,
        addShow: false,
        loading: false,
        loading2: false,
        noData: false,
        zhiChe: false,
        shouChe: false,
        total: 0,
        currentPage: 1,
        text: '',
        dataList: [],
        searchList: [],
        AccList: [],
        CompanyList: [],
        rules: { //表单必填验证
          Name: [{
            required: true,
            message: this.$t('rule.qtxckmingcheng'),
            trigger: 'blur'
          }],
          listArr: [{
            type: 'array',
            required: true,
            editCurencymessage: this.$t('rule.qxzywuyuan'),
            trigger: 'blur'
          }],
          BranchId: [{
            required: true,
            message: this.$t('rule.company'),
            trigger: 'change'
          }],
          Direct: [{
            required: true,
            message: this.$t('rule.qxzsyfangxiang'),
            trigger: 'change'
          }]
        },
        AccListProps: {
          value: 'Num',
          label: 'Name',
          children: 'children'
        },
        selectVal: [],
        transitionShow: false,
        transitionShow2: true,
        contenWidth: 0,
        contenHeight: 0,
        tableSize: 0,
        shouList: [],
        shouListLoading: false,
        CostTypeList: [],
        normalizer(node) {
          return {
            id: node.ID,
            label: node.Name,
            children: node.ChildList,
          }
        },
        CostIdS: [],
        getCompanyMsg: {
          RB_Group_Id: '0',
          Status: '0',
        },
        SingleList: [],
        schoolMsg: {
          pageIndex: 1,
          pageSize: 999,
          rowsPerPage: 12,
          SName: "",
          Status: '-1'
        }
      }
    },
    created() {
      let userInfo = this.getLocalStorage();
      let allH, allW, cH, cW;
      allH = document.documentElement.clientHeight;
      allW = document.documentElement.clientWidth;
      cW = allW - 90;
      cH = allH - 187; //255 = 50 40 21 36 40
      this.contenWidth = cW;
      this.contenHeight = cH;
      this.msg.pageSize = parseInt(cH / 40) - 1;
      this.tableSize = this.msg.pageSize = parseInt(cH / 45);
      this.getCompanyMsg.RB_Group_Id = userInfo.RB_Group_id; //集团ID
      this.getSingleList();
    },
    methods: {
      getSingleList() { // 获取费用类型
        this.apipost('FinancialFlowTemplate_post_GetSingleList', {}, res => {
          if (res.data.resultCode == 1) {
            this.SingleList = res.data.data;
          } else {}
        }, err => {})
      },
      switchMethod(t) {
        this.msg.pageIndex = 1;
        if (t === 1) {
          this.transitionShow = false;
          this.transitionShow2 = true;
          this.msg.pageSize = this.tableSize;
          this.getList();
        } else if (t === 2) {
          this.transitionShow = true;
          this.transitionShow2 = false;
          // 宽 235 高 206
          let cont = parseInt(this.contenWidth / 235) * parseInt(this.contenHeight / 120);
          this.msg.pageSize = cont;
          this.getList();
        }
      },
      getCostTypeList() { // 获取费用类型
        this.apipost('Financial_post_GetTreeList', {
          Type: 3
        }, res => {
          if (res.data.resultCode == 1) {
            this.CostTypeList = res.data.data;
          } else {}
        }, err => {})
      },
      goUrlDetail(path, type, name, id, bid) {
        this.$router.push({
          name: path,
          query: {
            WindowType: type,
            name: name,
            id: id,
            bid: bid,
            blank: 'y',
            tab: '会计窗口单据信息'
          }
        })
      },
      removeTag(id) {
        this.addMsg.emList.forEach((x, index) => {
          if (x.EmId === id) {
            this.addMsg.emList.splice(index, 1)
          }
        })
      },
      mergeArray(list3, list1) {
        for (var i = 0; i < list3.length; i++) {
          for (var j = 0; j < list1.length; j++) {
            if (list3[i].EmId === list1[j].EmId) {
              list3.splice(i, 1);
            }
          }
        }
        for (var i = 0; i < list1.length; i++) {
          list3.push(list1[i]);
        }
        return list3;
      },
      addCashierWork() { // 提交保存
        let emList = this.addMsg.listArr;
        this.addMsg.emList=[];
        emList.forEach(x=>{
          this.searchList.forEach(y=>{
            if(x==y.Id){
              let obj={
                EmId:y.Id,
                EmIdName:y.EmployeeName
              }
              this.addMsg.emList.push(obj);
            }
          })
        })
        let TemplateListArr = this.addMsg.TemplateListArr;
        let newArr = [];

        TemplateListArr.forEach(item => {
          this.SingleList.forEach(val => {
            let obj = {};
            if (item == val.Id) {
              obj.Id = val.Id;
              obj.Name = val.Name;
              newArr.push(obj);
            }
          })
        })

        // this.addMsg.emList = list4;
        this.addMsg.TemplateList = newArr;
        let obj = {};
        obj = this.CompanyList.find(item => {
          return item.SId === this.addMsg.BranchId; //筛选出匹配数据
        });
        this.addMsg.BranchIdName = obj.SName;
        this.apipost('Window_post_SetAccountant', 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(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addCashierWork();
          } else {
            return false;
          }
        });
      },
      financeinfoRemove(id) { // 删除
        this.$confirm(this.$t('tips.qrscchuangkou'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost('Window_post_RemoveAccountant', {
            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: this.$t('hotel.hotel_HasBeenCancelled')
          });
        });
      },
      remoteMethod(query) {
        var qMsg = {
          EmployeeName: query
        }
        queryEmployee(qMsg).then(res => {
          if(res.Code==1){
             this.searchList = res.Data;
          }
        }).catch(() => {

        })
      },
      getList() {
        this.loading = true;
        this.apipost('Window_post_GetAccountantPageList', 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;
            }
          } else {
            this.$message.error(res.data.message);
          }
          this.loading = false;
        }, err => {
          this.loading = false;
        })
      },
      editCurency(id) { //   修改  根据id 获取信息
        this.apipost('Window_post_GetAccountant', {
          ID: id
        }, res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data;
            this.addMsg = data;
            this.addMsg.listArr = [];
            this.addMsg.TemplateListArr = [];
            if (data.emList && data.emList.length > 0) {
              data.emList.forEach(x => {
                this.remoteMethod('');
                this.addMsg.listArr.push(x.EmId)
              })
            }
            if (data.TemplateList && data.TemplateList.length > 0) {
              data.TemplateList.forEach(x => {
                this.addMsg.TemplateListArr.push(x.Id)
              })
            }
            this.addMsg.accountant_list = [];
            this.addShow = true;
          } else {
            this.$message.error(res.data.message);
          }
        }, err => {})
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      cancelEdit() { // 取消修改、新增
        this.addMsg = {
          ID: 0,
          Name: '',
          accountant_list: [],
          emList: [],
          listArr: [],
          TemplateListArr: [],
          TemplateList: [],
          BranchId: '',
          Direct: ''
        }
        this.CostIdS = [];
        this.searchList = [];
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
      },
      getCompanyList() { //获取公司列表
        getSchoolPage(this.schoolMsg).then(res => {
          this.CompanyList = res.Data.PageData;
        }).catch(() => {

        })
      },
      getEmployee(){
        queryEmployee({}).then(res => {
          if(res.Code==1){
            this.searchList = res.Data;
          }
        }).catch(() => {

        })
      }
    },
    mounted() {
      this.getList();
      this.getCostTypeList();
      this.getCompanyList();
      this.getEmployee();
    }
  }

</script>
