<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          class="j-table-force-nowrap"
          :scroll="{ x: true }"
          :columns="columns"
          :dataSource="res"
          :pagination="false"
        >
        </a-table>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction, yanshouList } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { updateYan, yanshou } from '../../../api/manage'
import { mapGetters } from 'vuex'
export default {
  name: 'TblProductionYansForm',
  mixins: [JeecgListMixin],
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {},
      res: [],
      columns: [
        {
          title: '工序',
          align: 'center',
          width: 220,
          dataIndex: 'workingProcedure',
        },
        {
          title: '承接人',
          align: 'center',
          width: 150,
          dataIndex: 'undertaker',
        },
        {
          title: '工时',
          align: 'center',
          dataIndex: 'workHours',
        },
        {
          title: '验收结果',
          align: 'center',
          width: 100,
          modified: false,
          dataIndex: 'yanResult',
          customRender: (text, record, index) => {
            return (
              <a-select
                v-model={record.yanResult}
                style="width: 100%;"
                onChange={() => this.handleYanResultChange(record)}
              >
                <a-select-option value="合格入库">合格入库</a-select-option>
                <a-select-option value="不合格">不合格</a-select-option>
              </a-select>
            )
          },
        },
        {
          title: '备注',
          align: 'center',
          width: 150,
          modified2: false,
          dataIndex: 'notes',
          customRender: (text, record, index) => {
            return <a-input v-model={record.notes} style="text-align: center" v-on:input={() => this.handleInputChange(record)} />
          },
        },
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        jobId: [{ required: true, message: '请输入岗位编号!' }],
        jobTitle: [{ required: true, message: '请输入岗位名称!' }],
        basicSalary: [{ required: true, message: '请输入基本工资!' }],
        bili: [{ required: true, message: '请输入计算比例!' }],
        zongPrice: [{ required: true, message: '请输入总工资算法!' }],
      },
      url: {
        list: '/production/tblProductionGongxu/list',
        edit: '/production/tblProductionGongxu/edit',
        queryByNumber: '/production/tblProductionGongxu/queryByNumber',
        updateYan: '/production/tblProductionGongxu/updateYan',
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    handleInputChange(record){
       // 找到当前更改行的索引
      const index = this.res.findIndex((item) => item.id === record.id)
      console.log("index：",index)
      // 如果找到了该行
      if (index !== -1) {
        this.res[index].modified2 = true
      }
      console.log("modified2：",this.res[index].modified2)
    },
    handleYanResultChange(record) {
      console.log('当前更改的行的ID：', record.id)
      console.log('当前选中的值：', record.yanResult)

      // 找到当前更改行的索引
      const index = this.res.findIndex((item) => item.id === record.id)

      // 如果找到了该行
      if (index !== -1) {
        console.log('页面加载时显示的值：', this.res[index].originalYanResult)

        // 比较当前选中的值和页面加载时显示的值
        if (record.yanResult !== this.res[index].originalYanResult) {
          // 如果不相同，则将 modified 属性设置为 true
          this.res[index].modified = true
        } else {
          // 如果相同，则将 modified 属性设置为 false
          this.res[index].modified = false
        }
      }
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    yanshouList(record) {
      console.log(record.orderId)
      yanshouList(this.url.queryByNumber, { orderId: record.orderId }).then((ress) => {
        if (ress) {
          this.res = ress.result.map((item) => ({
            id: item.id,
            workingProcedure: item.workingProcedure,
            undertaker: item.undertaker,
            workHours: item.workHours,
            yanResult: item.yanResult,
            notes: item.notes,
            yanRen: this.userInfo().realname,
            yanTime: new Date(),
            originalYanResult: item.yanResult, // 添加一个 originalYanResult 属性保存页面加载时的值
          }))
        }
      })
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true

          // 对记录进行分组，根据不同字段的修改情况进行更新
          const recordsToUpdate = this.res.reduce((acc, record) => {
            console.log("是否修改2：",record.modified2)
            console.log("是否修改：",record.modified)
            // 判断是否有字段被修改
            if (record.modified) {
              // 若 yanResult 字段被修改，则整条记录更新
              if (record.yanResult !== record.originalYanResult) {
                acc.push(record)
              } 
            }else if(record.modified2){
                // 若只有 notes 字段被修改，则只更新 notes 字段
                const updatedRecord = Object.assign({}, record, { notes: record.notes })
                console.log("备注：",updatedRecord)
                acc.push(updatedRecord)
            }
            return acc
          }, [])
          updateYan(this.url.updateYan, recordsToUpdate)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>