<template>
  <div class="padding" style="height: 700px; overflow: auto">
    <div class="padding">
      <div style="display: flex; justify-content: space-between">
        <div style="font-weight: bold; font-size: 16px">合批派工</div>
      </div>
      <a-table
        :columns="filterColum(columnsProp.columns)"
        :bordered="true"
        :pagination="true"
        :data-source="rowData.list"
        :scroll="{ y: '300px' }"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key !== 'action'">
            <template v-if="column.dataIndex === 'index'">
              {{ index + 1 }}
            </template>
          </template>
          <template v-if="column.dataIndex === 'curSendNum'">
            <a-input-number
              :min="0"
              :step="1"
              :max="record.taskNum - record.sendNum"
              :disabled="!rowData.isUpdate"
              v-model:value="record.curSendNum"
              style="width: 100%"
              placeholder="请输入"
            />
          </template>
        </template>
      </a-table>
    </div>
    <div class="padding">
      <div style="font-weight: bold; font-size: 16px"></div>
      <div v-if="rowData">
        <div class="back_color padding marginTop">
          <a-descriptions title="" :column="2">
            <a-descriptions-item label="指派员工">
              <SelectUser
                :disabled="!rowData.isUpdate"
                :multiple="false"
                v-model:value="rowData.sendUser"
                suffix="ant-design:setting-outlined"
                placeholder="请选择"
            /></a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
    <a-divider />
    <div
      style="
        padding: 10px 16px;
        text-align: right;
        background: white;
        border-top: 1px solid rgb(240, 240, 240);
        border-radius: 0px 0px 2px 2px;
        position: absolute;
        bottom: 1px;
        width: 98%;
      "
      v-if="rowData.isUpdate"
    >
      <a-button @click="handleClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" style="margin-left: 12px">确认</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { uploadApi } from '/@/api/sys/upload';
  import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
  import { ref, reactive, watch, onMounted, createVNode } from 'vue';
  // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { getProcessTechList, getWorkOrderStepList } from '/@/api/mes/common';

  import { updateMesProOrderworkStepMergeBatchUser } from '/@/api/mes/proorderworkstep';
  import SelectUser from '/@/components/Form/src/components/SelectUser.vue';
  // import AutoCodeRule from '/@/components/Form/src/components/AutoCodeRule.vue';
  // import { XjrDatePicker } from '/@/components/DatePicker';
  // import { MultipleSelect } from '/@/components/MultiplePopup';
  // import Upload from '/@/components/Form/src/components/Upload.vue';
  // import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  // import { Modal } from 'ant-design-vue';
  const { notification } = useMessage();
  const { t } = useI18n();
  let props = defineProps(['rowData']);
  const rowData = ref({});

  const detailList = ref<any[]>([]);
  // const format = ref('YYYY-MM-DD HH:mm:ss');
  function filterColum(column) {
    return column.filter((o) => {
      return o.show == false ? false : true;
    });
  }

  const emit = defineEmits(['cancel', 'success']);
  // const formRef = ref();
  onMounted(async () => {
    rowData.value = props.rowData;
    console.log('row===', rowData);

    getDetailData();
  });

  watch(
    () => props.rowData?.flag,
    (val) => {
      console.log('监听', val);
      if (val) {
        rowData.value = props.rowData;
        rowData.value.list = props.rowData.list;
        getDetailData();
      }
    },
  );

  const getDetailData = async () => {};

  async function handleSubmit() {
    try {
      if (!rowData.value.list || rowData.value.list.length == 0) {
        notification.error({
          message: 'Tip',
          description: t('合批派工操作不能为空'),
        });
        return;
      }
      if (!rowData.value.sendUser || rowData.value.sendUser.length == 0) {
        notification.error({
          message: 'Tip',
          description: t('指派员工不能为空'),
        });
        return;
      }
      let tempList = ref<any[]>([]);
      rowData.value.list.forEach((ele) => {
        tempList.value.push({
          stepId: ele.id,
          sendUser: rowData.value.sendUser,
          sendNum: ele.curSendNum,
        });
      });
      // TODO custom api
      await updateMesProOrderworkStepMergeBatchUser({ detailList: tempList.value });
      notification.success({
        message: 'Tip',
        description: t('合批派工成功！'),
      }); //提示消息
      // formRef.value.resetFields();
      rowData.value = {};
      emit('success');
    } finally {
    }
  }
  function handleClose() {
    emit('cancel');
  }

  const columnsProp = {
    mainKey: 'mesProOrderworkStepuserList',
    columns: [
      {
        title: '工单编号',
        dataIndex: 'workNo',
      },
      {
        title: '工序编码',
        dataIndex: 'stepNo',
      },
      {
        title: '工序名称',
        dataIndex: 'stepName',
      },
      {
        title: '任务总量',
        dataIndex: 'taskNum',
      },
      {
        title: '已派数量',
        dataIndex: 'sendNum',
      },
      {
        title: '派发数量',
        dataIndex: 'curSendNum',
      },
    ],
  };
</script>

<style lang="less" scoped>
  .padding {
    padding: 12px;
  }

  .back_color {
    background-color: hsl(0, 0%, 98%);
    position: relative;
  }

  .marginTop {
    margin-top: 12px;
  }
</style>
