<template>
  <div class="app-container">
    <div div style="font-size:25px;text-align:left ; position:relative;">
      <el-button v-if="view" type="primary" @click="save()">
        {{ '保存' }}
      </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="FSupplierIdName">
            <el-input  maxlength="64" v-model="ruleFrom.FSupplierIdName"  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="list"
              border
              fit
              highlight-current-row
              show-summary
              max-height="500px"
              style="width: 100%"
          >
            <el-table-column prop="FSEQ" label="序号" align="center" width="50" fixed="left"></el-table-column>
            <el-table-column
                prop="FMaterialId"
                label="物料代码"
                min-width="150"
                fixed="left"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FName"
                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>
                <span v-show="priceInput">{{ scop.row.FPrice }}</span>
              </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"   :disabled="status==='9'"></el-input>
                <span v-show="!priceInput">{{ scop.row.FTaxPrice }}</span>
              </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 {save, 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 , 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',
      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: {

      },
      saveFrom: {
        Creator: "String",
        NeedUpDateFields: [],
        IsAutoSubmitAndAudit: true,
        Model: {
          FID: '',
          //供应商确认
          FIsConfirm: true,
          //供应商确认时间
          FConfirmDate: '',
          //供应商提交时间
          FQuoteDate: '',
          //供应商信息明细表：FEntryID 分录ID，FQty 询价数量，FPrice 单价，FTaxRate 税率，FTaxPrice 含税单价
          FEntity: []
        }
      },
        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.ruleFromData();
      this.listData();
    },
    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 obj = {
            Fid: res[0][0],
            FSrcBillNo: res[0][1],
            FProjectName: res[0][2],
            FBILLNO: res[0][3],
            FDATE: res[0][4],
            FOpenDate: res[0][5],
            FExpiryDate: res[0][6],
            FQuoteDate: res[0][7],
            FBuyer: res[0][8],
            FSupplierId: res[0][9],
            FSupplierIdName: res[0][10],
            FPriceStatus: res[0][11],
            FContact: res[0][12],
            FPhone: res[0][13],
            FMail: res[0][14],
            FCurrId: '人民币',
            FIsIncludedTax: res[0][16],
            FIsConfirm: res[0][17],
            FConfirmDate: res[0][18],

          }
          this.ruleFrom=obj;
        })
      },
      listData(){
        this.data.FieldKeys=this.FieldKeysslave
        supplierLogin(this.data).then(res =>{
          for (let i=0;i<res.length;i++){
            const obj = {
              FSEQ : res[i][0],
              FEntryID : res[i][1],
              FMaterialId : res[i][2],
              FName : res[i][3],
              FUnitID : res[i][4],
              FQty : res[i][5],
              FPrice : res[i][6],
              FTaxRate : res[i][7],
              FTaxPrice : res[i][8],
              FPayConditionId : res[i][9],
              FNote : res[i][10],
            }
            this.list.push(obj);
          }
        })
      },
      save(){
        let Model={
          FID: this.ruleFrom.Fid,
          //供应商确认
          FIsConfirm: true,
          //供应商确认时间
          FConfirmDate: new Date(),
          //供应商提交时间
          FQuoteDate: '',
          //供应商信息明细表：FEntryID 分录ID，FQty 询价数量，FPrice 单价，FTaxRate 税率，FTaxPrice 含税单价
          FEntity: []
        }
        for (let i=0;i<this.list.length;i++){
          let data={}
          data.FEntryID=this.list[i].FEntryID
          data.FQty=this.list[i].FQty
          data.FPrice=this.list[i].FPrice
          data.FTaxRate=this.list[i].FTaxRate
          data.FTaxPrice=this.list[i].FTaxPrice
          Model.FEntity.push(data);
        }
        this.saveFrom.Model=Model
        save(this.saveFrom).then(res=>{
          this.$message({
            message: message,
            type: '添加成功',
            duration: 2000
          })
        })
      },
      Obj(){
        let data=[
          [
            1,
            100011,
            "1.01.001.0005",
            "摄像头镜片",
            "Pcs",
            134.0000000000,
            9.4827590000,
            16.0000000000,
            11.0000000000,
            229310,
            " "
          ],
          [
            2,
            100012,
            "1.01.001.0057",
            "侧板-50KW系列",
            "Pcs",
            156.0000000000,
            10.3448280000,
            16.0000000000,
            12.0000000000,
            229310,
            " "
          ],
          [
            3,
            100013,
            "1.01.001.0002",
            "面壳",
            "Pcs",
            100.0000000000,
            11.2068970000,
            16.0000000000,
            13.0000000000,
            229310,
            " "
          ]
        ]
        console.log(data)
        const template = {FSEQ:'', FEntryID:'', FMaterialId:'',FName:'', FUnitID:'',FQty:'',FPrice:'', FTaxRate:'', FTaxPrice:'',FPayConditionId:'', FNote:''};
        for (let i=0;i<data.length;i++){
            const obj = {
            FSEQ : data[i][0],
            FEntryID : data[i][1],
            FMaterialId : data[i][2],
            FName : data[i][3],
            FUnitID : data[i][4],
            FQty : data[i][5],
            FPrice : data[i][6],
            FTaxRate : data[i][7],
            FTaxPrice : data[i][8],
            FPayConditionId : data[i][9],
            FNote : data[i][10],
          }
            this.list.push(obj);
        }
        console.log(this.list)
      },
      Obj1(){
        let data=
            [
              [
                100005,
                "XJ23060001",
                "测试密封报价",
                "BJ23060004",
                "2023-06-13T00:00:00",
                "2023-06-28T00:00:00",
                "2023-06-26T00:00:00",
                null,
                158053,
                "VEN000011",
                "美华公司",
                "A",
                " ",
                " ",
                " ",
                1,
                true,
                false,
                null
              ]
            ]
        FieldKeysMaster:'Fid,FSrcBillNo, FProjectName, FBILLNO , FDATE, FOpenDate, FExpiryDate,FQuoteDate, FBuyer, FSupplierId.FNumber,FSupplierId.FName, FPriceStatus, FContact ,' +
        'FPhone ,FMail, FCurrId, FIsIncludedTax, FIsConfirm, FConfirmDate';
        const obj = {
          Fid: data[0][0],
          FSrcBillNo: data[0][1],
          FProjectName: data[0][2],
          FBILLNO: data[0][3],
          FDATE: data[0][4],
          FOpenDate: data[0][5],
          FExpiryDate: data[0][6],
          FQuoteDate: data[0][7],
          FBuyer: data[0][8],
          FSupplierId: data[0][9],
          FSupplierIdName: data[0][10],
          FPriceStatus: data[0][11],
          FContact: data[0][12],
          FPhone: data[0][13],
          FMail: data[0][14],
          FCurrId: '人民币',
          FIsIncludedTax: data[0][16],
          FIsConfirm: data[0][17],
          FConfirmDate: data[0][18],

        }
        this.ruleFrom=obj;
        console.log(this.ruleFrom)
      },
    },
  }
</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>
