<template>
  <div class="app-container">

    <div class="company" v-if="!$store.state.user.tenantId">
      <el-input
        style="width: 200px"
        placeholder="公司名称"
        size="small"
        prefix-icon="el-icon-search"
        v-model="gsInfo.tenantName"
        @keyup.enter.native="getGsInfoList">
      </el-input>
      <div class="cp-content" style="width: 200px">
        <div :class="gsInfo.active_id===item.id?'cp-item active':'cp-item'" @click="changCompany(item.id)" v-for="item in gsInfo.list">{{ item.name }}</div>
      </div>
    </div>

    <div :class="$store.state.user.tenantId?'content-all':'content'">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="员工姓名" prop="employeeId">
          <el-input
            v-model="queryParams.empName"
            placeholder="请输入员工姓名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="补贴扣减金额" prop="money">
          <el-input
            v-model="queryParams.money"
            placeholder="请输入补贴扣减金额"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="年月日期" prop="date">
          <el-date-picker
            v-model="queryParams.date"
            type="month"
            value-format="yyyy-MM"
            placeholder="请选择年月日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-magic-stick"
              size="mini"
              @click="openGenerateDialog"
              v-hasPermi="['pay:butieEmplyee:gen']"
            >生成</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="butieEmplyeeList">
        <el-table-column label="员工" align="center" prop="empName" />
<!--        <el-table-column label="补贴扣减金额" align="center" prop="money" />-->
        <el-table-column label="年月日期" align="center" prop="date">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.date, '{y}年{m}月') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="item.butieName" align="center" :prop="item.butieName" min-width="80%" v-for="(item, index) in butieMap" :key="index">
          <template slot-scope="scope" >
            <template v-for="(sum,i) in scope.row.btList">
              <template v-if="scope.row.edit && item.butieName === sum.butieName">
                <el-input v-model="sum.money" class="edit-input" size="small" />
              </template>
              <template v-else>
                <span :key="i" v-if="item.butieName === sum.butieName">{{sum.money}}</span>
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.edit"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['pay:butieEmplyee:alledit']"
            >修改</el-button>
            <el-button
              v-if="scope.row.edit"
              size="mini"
              type="text"
              icon="el-icon-circle-check"
              @click="ensureRowEdit(scope.row)"
              v-hasPermi="['pay:butieEmplyee:alledit']"
            >确定</el-button>
            <el-button
              v-if="scope.row.edit"
              size="mini"
              type="text"
              icon="el-icon-circle-close"
              @click="cancelRowEdit(scope.row)"
              v-hasPermi="['pay:butieEmplyee:alledit']"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog title="选择自动生成月份" :visible.sync="generateDialogVisible" :close-on-click-modal="false" width="300">
      <div class="block">
        <span class="demonstration">请选择月份 </span>
        <el-date-picker
          v-model="genMonth"
          type="month"
          value-format="yyyy-MM"
          placeholder="月份">
        </el-date-picker>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="generateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="generateBuTieEmpByMonth">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listSummary, checkDataExist, generateBuTieEmpByMonth, updateAllbt } from "@/api/pay/butieEmplyee";
import { listTenant } from "@/api/pay/tenant";

export default {
  name: "ButieEmplyee",
  data() {
    return {
      // 公司信息
      gsInfo:{
        tenantName:'',
        active_id:this.$store.state.user.tenantId,
        list:[]
      },
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 补贴和员工联系表格数据
      butieEmplyeeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tenantId: undefined,
        butieId: undefined,
        employeeId: undefined,
        money: undefined,
        date: undefined,
      },
      butieMap: [],
      // 补贴信息生成对话框
      generateDialogVisible: false,
      genMonth: null,
    };
  },
  created() {
    if (!this.$store.state.user.tenantId) {
      this.getGsInfoList()
    }else {
      this.gsInfo.active_id = this.$store.state.user.tenantId
      this.getList();
    }
  },
  methods: {
    // 获取左侧公司列表
    getGsInfoList(){
      listTenant({ name: this.gsInfo.tenantName }).then(response => {
        if(response.rows.length>0){
          this.gsInfo.list = response.rows;
          this.gsInfo.active_id = this.gsInfo.list[0].id
          this.getList()
        }else{
          this.$alert(`没有查到相关公司，暂无数据！`, `提示`, {
            type: 'warning'
          });
        }
      });
    },
    // 选择公司
    changCompany(id){
      this.gsInfo.active_id = id
      this.getList()
    },
    /** 查询补贴和员工联系列表 */
    getList() {
      this.loading = true;
      this.queryParams.tenantId = this.gsInfo.active_id;
      listSummary(this.queryParams).then(response => {
        this.butieEmplyeeList = response.rows;
        if(this.butieEmplyeeList.length > 0){
          this.butieMap = [];
          this.butieEmplyeeList.forEach(item => {
            this.$set(item,"btList",[]);
            for(const key in item.butieMap){
              var list = {
                butieName: key,
                money: item.butieMap[key].money,
                btid: item.butieMap[key].btid
              }
              item.btList.push(list);
            }
          })
          for(const key in this.butieEmplyeeList[0].butieMap){
            var list = {
              butieName: key
            }
            this.butieMap.push(list);
          }
        }
        console.log(this.butieEmplyeeList);
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      if (!row.edit) {
        row.edit = true;
      }
    },
    /** 确定修改按钮操作*/
    ensureRowEdit(row) {
      updateAllbt(row).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          if (row.edit) {
            row.edit = false;
          }
        }
      })
    },
    /** 取消修改按钮操作*/
    cancelRowEdit(row) {
      this.getList();
    },
    openGenerateDialog() {
      this.genMonth = null;
      this.generateDialogVisible = true;
    },
    generateBuTieEmpByMonth() {
      let param = {
        month: this.genMonth,
        tenantId : this.gsInfo.active_id
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      checkDataExist(param).then(res => {
        if (res.code === 200 && res.msg == '数据已经存在，是否覆盖？') {
          this.$confirm('此操作将覆盖掉当月已录入数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            generateBuTieEmpByMonth(param).then(res => {
              this.$message({
                type: 'success',
                message: res.msg
              });
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
          this.generateDialogVisible = false
          loading.close();
        } else {
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            loading.close();
          }
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  .company {
    border-radius: 5px;
    width: 230px;
    height: calc(100vh - 115px);
    overflow-y: auto;
    .cp-content {
      margin-top: 20px;
      .cp-item {
        cursor: pointer;
        padding: 6px 10px 6px 5px;
        color: #424242;
        font-size: 14px;
        &:hover {
          background: #f6f6f6;
        }
      }
      .active{
        background: #edf6ff;
      }
    }
  }
  .content{
    padding-left: 15px;
    width: calc(100% - 250px);
    .el-button--medium {
      padding: 2px 0px;
    }
  }
  .content-all{
    width: 100%;
    .el-button--medium {
      padding: 2px 0px;
    }
  }
}
</style>
