<template>
  <div class="app-container">
    <div div style="font-size:25px;text-align:left ; position:relative;">
      <el-button v-if="view" type="primary">
        {{ '保存' }}
      </el-button>
      <el-button v-if="view" type="primary">
        {{ '提交' }}
      </el-button>
    </div>
    <el-divider></el-divider>
    <el-form ref="ContractSalaryForm" :rules="rules" :model="ruleFrom" :label-position="labelPosition" label-width="auto" style="width: 100%" :disabled="this.status==='9'">
      <!-- 基础信息 -->
      <div class="form-dataForm">
        <el-row>基本信息</el-row>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label='报价单号' prop="FBillNo">
            <el-input v-model="ruleFrom.FBillNo"  readonly ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label='询价名称' prop="FProjectName">
            <el-input v-model="ruleFrom.FProjectName"  readonly clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="询价单号" prop="FSrcBillNo" >
            <el-input v-model="ruleFrom.FSrcBillNo"   readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="供应商编码" prop="FSupplierId" >
            <el-input    maxlength="64" v-model="ruleFrom.FSupplierId"   readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商名称" prop="FSupplierName">
            <el-input  maxlength="64" v-model="ruleFrom.FSupplierName"  readonly></el-input>

          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开标日期" prop="FOpenDate">
            <el-date-picker
                style="width: 100%"
                v-model="ruleFrom.FOpenDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :disabled="true">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label='报价状态' prop="FPriceStatus">
            <el-input v-model="ruleFrom.FPriceStatus"  readonly ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label='报价日期' prop="FQuoteDate">
            <el-input v-model="ruleFrom.FQuoteDate"   readonly clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="报价截至日期" prop="FExpiryDate" >
            <el-input v-model="ruleFrom.FExpiryDate"   readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label='联系人' prop="FContact">
            <el-input v-model="ruleFrom.FContact"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label='电话' prop="FPhone">
            <el-input v-model="ruleFrom.FPhone" placeholder='请输入电话'   clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="FMail" >
            <el-input v-model="ruleFrom.FMail" maxlength="64" placeholder="请输入邮箱"  clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label='币别' prop="FCurrId">
            <el-input v-model="ruleFrom.FCurrId"  readonly ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="含税" prop="FIsIncludedTax" >
            <el-switch v-model="ruleFrom.FIsIncludedTax" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="priceInputView()">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 其他信息 -->
      <el-collapse v-model="activeNames"  >
        <el-collapse-item title="其他信息" class="form-title"  name="1">
          <div class="form-content" v-if="activeNames=='1'">
                  <el-divider content-position="left"></el-divider>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label='采购组织' prop="FPurOrgId">
                        <el-input v-model="ruleFrom.FPurOrgId" :disabled="true"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label='询价日期' prop="FDate">
                        <el-date-picker type="date"  value-format="yyyy-MM-dd" format="yyyy年MM月dd日" v-model="ruleFrom.FDate" style="width: 100%;" :disabled="true"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label='询价员' prop="FBuyer" >
                        <el-input v-model="ruleFrom.FBuyer"  :disabled="true" />
                      </el-form-item>
                    </el-col>
                  </el-row>
        </div>
        </el-collapse-item>
      </el-collapse>

    </el-form>
    <el-tabs type="border-card" style="margin-top: 50px">
      <el-tab-pane label="明细信息">
        <div>
          <el-table
              :key="tableKey"
              :data="SalaryItemList1"
              border
              fit
              highlight-current-row
              show-summary
              max-height="500px"
              style="width: 100%"
          >
            <el-table-column label="序号" align="center" width="50" fixed="left">
              <template slot-scope="{row,$index}">{{ $index == listQuery.pageSize -1 ? ($index+1) * listQuery.currentPage :
                  listQuery.currentPage == 1? ($index+1) : ($index+1)+listQuery.pageSize*(listQuery.currentPage-1)}}
              </template>
            </el-table-column>
            <el-table-column
                prop="FMaterialId"
                label="物料代码"
                min-width="150"
                fixed="left"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FMaterialName"
                label="物料名称"
                min-width="150"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FMaterialModel"
                label="规格型号"
                min-width="150"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FUnitID"
                label="单位"
                min-width="150"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FQty"
                label="询价数量"
                min-width="100"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FPrice"
                label="单价"
                min-width="100"
                align="center">
              <template slot-scope="scop">
                <el-input type="number" v-model="scop.row.FPrice" v-show="!priceInput" @blur="yearPaymentAmtBlur(scop.row.yearPaymentAmt,scop.$index,'SalaryItemList1',scop.row.timesPerYear)"  :disabled="status==='9'"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="FTaxRate"
                label="税率%"
                min-width="100"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FTaxPrice"
                label="含税单价"
                min-width="110"
                align="center">
              <template slot-scope="scop">
                <el-input type="number" v-model="scop.row.FTaxPrice" v-show="priceInput" @blur="yearPaymentAmtBlur(scop.row.yearPaymentAmt,scop.$index,'SalaryItemList1',scop.row.timesPerYear)"  :disabled="status==='9'"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="FNote"
                label="备注"
                align="center"
                width="240">
            </el-table-column>
            <el-table-column
                prop="FPayConditionId"
                label="付款方式"
                align="center"
                width="240">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>


import {supplierLogin} from "@/api/login";

export default {
  name: "master",
  components: {},
  data() {
    return{
      labelPosition: 'right',
      list: [],
      data:{
        FormId:"kafe2f22a0498441f9109c31cf5586da5",
        FieldKeys:'',
        FilterString:"FBILLNO like'%BJ23060004'",
        OrderString:"",
        TopRowCount:"0",
        StartRow:"0",
        Limit:100
      },
      FieldKeysMaster:'Fid,FSrcBillNo, FProjectName, FBILLNO ,FDocumentStatus, FDATE, FOpenDate, FExpiryDate,FQuoteDate, FBuyer, FSupplierId.FNumber,FSupplierId.FName, FPriceStatus, FContact ,FPhone ,FMail, FCurrId, FIsIncludedTax, FIsConfirm, FConfirmDate',
      FieldKeysslave:'FEntity_FSEQ,FEntity_FEntryID, FMATERIALID.FNumber,FMaterialId.FName, FUnitID.FName, FQty, FPrice, FTaxRate, FTaxPrice, FPayConditionId, FNote, FSourceBillNo, FSrcId, FSrcEntryId, FSrcSeq',
      tableKey: 0,
      customerId:undefined,
      status:undefined,
      // 折叠信息激活状态
      activeNames: '1',
      staffIds:undefined,
      useable:undefined,
      //时间验证
      TimeQuery: {
        id:undefined,
        contractId:undefined,
        beginTime:undefined,
        endTime:undefined
      },
      //组件的刷新
      timer:'',
      //工资项 选择
      salaryItemName:'',
      priceInput:false,
      viewCustomerDialogFormVisible:false,
      viewContractDialogFormVisible:false,
      view:true,
      //把列表存在的工资项传过去
      SalaryItemList:[],
      //工资项数据
      SalaryItemList1: [{
        FEntryID :'1',
        FMaterialId:'1',
        FMaterialName:'1',
        FMaterialModel:'1',
        FUnitID:'1',
        FQty:'1',
        FPrice:'1',
        FTaxRate:'1',
        FTaxPrice:'1',
        FPayConditionId:'1',
        FNote:'1',
      }],
      SalaryItemList2: [],
      SalaryItemList3: [],
      SalaryItemList4: [],


      StaffJob: [],
      tempStaffJob: [],
      //多选
      multipleSelection: [],
      //病假方案
      sickLeaveSolutionOptions: [],
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        id:undefined,
        type:undefined,
      },
      ruleFrom: {
        id: undefined,
        //传给后端辨认是编辑还是复制
        type: undefined,
        //存储工资项页签的数据
        contractSalaryItemList: [],
        staffs: [],
      },
      options: [{
        value: 1,
        label: '是'
      }, {
        value: 0,
        label: '否'
      }],
      //在职员工组件
      viewStaffJobDialogFormVisible: false,
      //合同薪资方案薪资项  =》 工资项
      viewSalaryItemDialogFormVisible: false,
      //多选
      SalaryItemSingleMulti: 'multi',
      rules: {
        contractName: [{required: true, message: '请选择服务合同', trigger: ['blur', 'change']}],
        customerName: [{required: true, message: '请选择用工单位', trigger: ['blur', 'change']}],
        solutionName: [{required: true, message: '请填写岗位名称', trigger: ['blur', 'change']}],
        beginTime: [{required: true, message: '请填写生效起始时间', trigger: ['blur', 'change']}],
        endTime: [{required: true, message: '请填写生效终止时间', trigger: ['blur', 'change']}],
      },
      // 自定义开始和结束时间验证     =>  新增页面
      pickerOptionsOne: {
        disabledDate: time => {
          // if 判断另一项为空时可以随便选择时间
          if (this.ruleFrom.endTime) {
            return time.getTime() > new Date(this.ruleFrom.endTime).getTime()
          } else {
            return false
          }

        }
      },
      pickerOptionsTwo: {
        disabledDate: time => {
          if (this.ruleFrom.beginTime) {
            return time.getTime() < new Date(this.ruleFrom.beginTime).getTime()
          } else {
            return false
          }
        }
      }
    }
  },
  created() {
    this.data.FilterString='FBILLNO like\'%' + this.$route.query.FBILLNO +'\''
    this.Obj();
  },
  computed: {
    monthlyTotal() {
      return this.annualTotal()/12
    },
    annualTotal() {
      // 年度的合计
      let total = 0;
      let arr1 = this.SalaryItemList1;
      let arr2 = this.SalaryItemList2;
      let arr3 = this.SalaryItemList3;
      let arr4 = this.SalaryItemList4;
      // console.log("annualTotal===>",arr1);
      arr1.forEach( ele => {
        if(ele.addSubtract == 1 || ele.addSubtract == 2) total += Number(ele.yearPaymentAmt)
      })
      arr2.forEach( ele => {
        if(ele.addSubtract == 1 || ele.addSubtract == 2) total += Number(ele.yearPaymentAmt)
      })
      arr3.forEach( ele => {
        if(ele.addSubtract == 1 || ele.addSubtract == 2) total += Number(ele.yearPaymentAmt)
      })
      arr4.forEach( ele => {
        if(ele.addSubtract == 1 || ele.addSubtract == 2) total += Number(ele.yearPaymentAmt)
      })
      return total
    },
    monthlyWages() {
      let total = 0;
      let arr1 = this.SalaryItemList1;
      let arr2 = this.SalaryItemList2;
      let arr3 = this.SalaryItemList3;
      let arr4 = this.SalaryItemList4;
      // console.log("annualTotal===>",arr1);
      arr1.forEach( ele => {
        if(ele.addSubtract == 1 && ele.isTemp ===false) total += Number(ele.paymentAmt)
      })
      arr2.forEach( ele => {
        if(ele.addSubtract == 1 && ele.isTemp ===false) total += Number(ele.paymentAmt)
      })
      arr3.forEach( ele => {
        if(ele.addSubtract == 1 && ele.isTemp ===false) total += Number(ele.paymentAmt)
      })
      arr4.forEach( ele => {
        if(ele.addSubtract == 1 && ele.isTemp ===false) total += Number(ele.paymentAmt)
      })
      return total
    },
    monthlyNet() {
      let total = 0;
      let newTotal = 0;
      let arr1 = this.SalaryItemList1;
      let arr2 = this.SalaryItemList2;
      let arr3 = this.SalaryItemList3;
      let arr4 = this.SalaryItemList4;
      // console.log("annualTotal===>",arr1);
      arr1.forEach( ele => {
        if(ele.addSubtract == 0 && ele.isTemp ===false) total += Number(ele.paymentAmt)
      })
      arr2.forEach( ele => {
        if(ele.addSubtract == 0 && ele.isTemp ===false) total += Number(ele.paymentAmt)
      })
      arr3.forEach( ele => {
        if(ele.addSubtract == 0 && ele.isTemp ===false) total += Number(ele.paymentAmt)
      })
      arr4.forEach( ele => {
        if(ele.addSubtract == 0 && ele.isTemp ===false) total += Number(ele.paymentAmt)
      })
      newTotal = this.monthlyWages - total
      return newTotal
    },
  },
  watch:{
    annualTotal(newValue,lodValue) {
      this.ruleFrom.annualTotal = Number(newValue).toFixed(2);
      this.ruleFrom.monthlyTotal = Number(this.ruleFrom.annualTotal/12).toFixed(2);;
    },
    // 月度应发
    monthlyWages(newValue,lodValue) {
      this.ruleFrom.monthlyWages = Number(newValue).toFixed(2);
    },
    // 月度实发
    monthlyNet(newValue,lodValue) {
      this.ruleFrom.monthlyNet = Number(newValue).toFixed(2);
    },
  },
  methods:{
    priceInputView(){
      if (this.ruleFrom.FIsIncludedTax == 1){
        this.priceInput=true;
      }else {
        this.priceInput=false;
      }
    },
    ruleFromData(){
      this.data.FieldKeys=this.FieldKeysMaster
      supplierLogin(this.data).then(res =>{
        // const template = {Fid:'', FBillNo:'', FProjectName:'', FSrcBillNo:'',FSupplierId:'',FSupplierName:'', FDocumentStatus:'', FDATE:'', FOpenDate:'', FExpiryDate:'', FQuoteDate:'', FBuyer:'', FSupplierId:{FNumber:'', FName:''}, FPriceStatus:'', FContact:'', FPhone:'', FMail:'', FCurrId:'', FIsIncludedTax:'', FIsConfirm:'', FConfirmDate:''};;
        const template = {Fid:'', FSrcBillNo:'', FProjectName:'', FBILLNO:'',FSupplierId:'',FSupplierName:'', FOpenDate:'', FPriceStatus:'', FQuoteDate:'', FExpiryDate:'', FContact:'', FPhone:'', FMail:'', FCurrId:'', FIsIncludedTax:'',};
      })
    },
    Obj(){
      const template = {name:'', age:'', no:''};
      const arr = [1, 1, 1];
      const result = arr.map(item => {
        const obj = {...template};
        obj.name = item.toString();
        obj.age = item.toString();
        obj.no = item.toString();
        return obj;
      });
      console.log(result);
      console.log(this.data);
    },
  },
}
</script>
<style scoped>
/* 设置表单的居中 */
.dataForm-style {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 设置基础信息标题的样式 */
.form-dataForm {
  width: 100%;
  height: 47px;
  line-height: 47px;
  font-size: 17px;
  font-weight: 600;
  margin: 15px 0;
  border-bottom: 1px solid #e6ebf5;
  /* border-bottom: 1px solid #0efc61; */
}

/* 去掉折叠上边框线 */
::v-deep .el-collapse {
  border-top: 0;
}
/* 修改折叠标题样式 */
::v-deep .form-title .el-collapse-item__header {
  font-size: 17px;
  font-weight: 600;
}
/* 修改折叠标题样式 */
::v-deep .form-title .el-collapse-item__content {
  border-bottom: 0;
}
/* 修改折叠标题箭头样式 */
::v-deep .form-title .el-collapse-item__header .el-collapse-item__arrow {
  margin: 0 0 0 5px;
}
::v-deep .el-divider--horizontal {
  margin: 10px 0;
}
/* 去掉数字输入框上下加减按钮 */
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
</style>
