<template>
  <div class="outer-staff-cost">
    <table border="1" style="width:100%">
      <tr style="background-color:#f8f8f9">
        <td></td>
        <td style="min-width:50px;">序号</td>
        <td style="min-width:80px;">姓名</td>
        <td style="min-width:80px;">人员成本（天）</td>
        <td style="min-width:80px;">预算天数</td>
        <td style="min-width:80px;">预算系数</td>
        <td style="min-width:100px;">固定成本小计</td>
        <td style="min-width:100px;">绩效成本小计</td>
        <td style="width:120px;min-width:80px;">预算金额</td>
        <td class="adjust" style="width:120px;min-width:80px;">核算天数</td>
        <td class="adjust" style="width:120px;min-width:80px;">核算系数</td>
        <td class="adjust" style="width:120px;min-width:80px;">核算固定成本</td>
        <td class="adjust" style="width:120px;min-width:80px;">核算绩效</td>
        <td class="adjust" style="width:120px;min-width:80px;">核算金额</td>
      </tr>
      <tr v-for="staff, index in staffList" :key="'user' + staff.userId">
        <td>
          <div class="delete-btn" v-if="staff.days == 0" @click="removeStaff(staff, index)">
            <i class="el-icon-remove-outline" style="color:#F56C6C"></i>
          </div>
        </td>
        <td>{{ index + 1 }}</td>
        <td>{{ staff.user ? staff.user.nickName : '' }}</td>
        <td>{{ staff.dayCost }}</td>
        <td>{{ staff.days }}</td>
        <td>{{ staff.coefficient }}</td>
        <td style="text-align:right;">{{ staff.staffCost }}</td>
        <td style="text-align:right;">{{ staff.performance }}</td>
        <td style="text-align:right;">{{ staff.amount }}</td>
        <td style="text-align:right;">
          <el-input-number v-if="taskName === '核算编制'" :controls="false" style="width:100%;" v-model="staff.daysAdjust"
            @change="handleChange(staff)"></el-input-number>
          <span v-else>{{ staff.daysAdjust }}</span>
        </td>
        <td style="text-align:right;">
          <el-input-number v-if="taskName === '核算编制'" :controls="false" style="width:100%;" v-model="staff.coefficientAdjust"
            @change="handleChange(staff)"></el-input-number>
          <span v-else>{{ staff.coefficientAdjust }}</span>
        </td>
        <td style="text-align:right;">{{ (staff.dayCost * staff.daysAdjust).toFixed(2) }}</td>
        <td style="text-align:right;">
          {{ staff.performanceAdjust }}
        </td>
        <td style="text-align:right;">
          {{ staff.amountAdjust }}
        </td>
      </tr>
      <tr>
        <td colspan="6" class="head amount">外业人员成本合计</td>
        <td class="head amount" style="text-align:right;">{{staffList.reduce((sum, staff) => sum +
          (Number(staff.staffCost) || 0),
          0).toFixed(2)}}</td>
        <td class="head amount" style="text-align:right;">{{staffList.reduce((sum, staff) => sum +
          (Number(staff.performance) || 0),
          0).toFixed(2)}}</td>
        <td class="head amount" style="text-align:right;">{{staffList.reduce((sum, staff) => sum +
          (Number(staff.amount) || 0),
          0).toFixed(2)}}</td>
        <td class="head amount" style="text-align:right;">{{staffList.reduce((sum, staff) => sum +
          (Number(staff.daysAdjust) || 0), 0).toFixed(2)}}</td>
        <td class="head amount">
          ——
        </td>
        <td class="head amount" style="text-align:right;">{{staffList.reduce((sum, staff) => sum +
          ((staff.dayCost * staff.daysAdjust)), 0).toFixed(2)}}</td>
        <td class="head amount" style="text-align:right;">
          {{staffList.reduce((sum, staff) => sum + (Number(staff.performanceAdjust) || 0), 0).toFixed(2)}}
        </td>
        <td class="head amount" style="text-align:right;">
          {{staffList.reduce((sum, staff) => sum + (Number(staff.amountAdjust) || 0), 0).toFixed(2)}}</td>
      </tr>
    </table>
    <div class="add-staff mt10" v-if="taskName === '核算编制'">
      <el-button type="success" plain icon="el-icon-plus" @click="openPeople" size="mini">新增人员</el-button>
    </div>
    <!-- 选择人员对话框 -->
    <el-dialog title="选择人员" :visible.sync="isOpenPeople" width="700px" append-to-body>
      <choosePeople @chooseUser="getChooseUser"></choosePeople>
    </el-dialog>
  </div>
</template>

<script>
import choosePeople from '@/views/flowable/form/budget/components/choosePeople.vue'

export default {
  name: 'OuterStaffCost',
  components: {
    choosePeople
  },
  props: {
    staffList: {
      type: Array,
      default: () => []
    },
    taskName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isOpenPeople: false,
    }
  },
  watch: {
    staffList(newval, oldval) {
      if (oldval.length == 0) {

      }
    }
  },
  mounted() {

  },
  methods: {
    handleChange(staff) {
      // 计算调整后的金额
      staff.performanceAdjust = (200 * Number(staff.daysAdjust) * Number(staff.coefficientAdjust)).toFixed(2)
      staff.amountAdjust = (Number(staff.dayCost) * Number(staff.daysAdjust) + Number(staff.performanceAdjust)).toFixed(2)
      this.$emit('update:staffList', this.staffList);
    },
    openPeople() {
      this.isOpenPeople = true;
    },
    getChooseUser(val) {
      let arr = [];
      for (let v of val) {
        let dayCost = (parseFloat(((v.salary.salary + 1780) * 12) / 365) + v.socialSecurityUnit + v.houseFund).toFixed(2);
        let obj = {};
        obj.user = v;
        obj.dayCost = dayCost;
        obj.staffCost = 0;
        obj.performance = 0;
        obj.amount = 0;
        obj.days = 0;
        obj.coefficient = 1;
        obj.salary = v.salary;
        obj.userId = v.userId;
        this.$set(obj, 'type', '外业');
        this.$set(obj, 'daysAdjust', 0);
        this.$set(obj, 'coefficientAdjust', 0);
        this.$set(obj, 'amountAdjust', 0);
        arr.push(obj);
      }
      this.staffList.push(...arr);
      this.isOpenPeople = false;
      this.$emit('update:staffList', this.staffList);
    },
    removeStaff(staff, index) {
      this.$confirm('确定移除【' + staff.user.nickName + '】吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let arr = this.staffList;
        if (arr.length == 1) {
          return;
        }
        if (index >= 0 && index < arr.length) {
          arr.splice(index, 1);
        }
      }).catch(() => { });
    }
  }
}
</script>

<style lang="scss" scoped>
.outer-staff-cost {
  .add-staff {
    margin-bottom: 10px;
  }

  table {
    text-align: center;
    border-collapse: collapse;
    margin: 0 auto;

    td {
      padding: 5px;
    }
  }

  .adjust {
    color: #F56C6C;
    width: 120px;
  }
}

.delete-btn {
  cursor: pointer;
  font-size: 18px;
}

.amount {
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

.head.amount {
  font-weight: bold;
}
</style>