<template>
  <div class="padding" style="height: 650px; overflow: auto">
    <div class="back_color padding">
      <a-form ref="formRef" :model="queryData">
        <a-row v-if="isQueryValue == true">
          <a-col :span="6" style="margin-right: 12px">
            <a-form-item prop="name">
              <a-input v-model:value="queryData.name" placeholder="请输入产品名称" allowClear />
            </a-form-item>
          </a-col>
          <a-col style="margin-right: 12px">
            <a-button type="primary" size="middle" @click="fetchData">查询</a-button>
          </a-col>
          <a-col style="margin-right: 12px">
            <a-button size="middle" @click="resetForm">重置</a-button>
          </a-col>
        </a-row>
        <a-row v-else>
          <a-col :span="6">
            <a-form-item prop="id" label="编号" required>
              <a-input v-model:value="queryData.id" :disabled="disabled" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item prop="onlineDate" label="上线日期">
              <XjrDatePicker
                :disabled="disabled"
                v-model:value="queryData.onlineDate"
                placeholder="请选择"
                :allowClear="true"
                :format="'YYYY-MM-DD'"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item prop="remark" label="备注">
              <a-input v-model:value="queryData.remark" :disabled="disabled" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-table
        bordered
        :columns="isQueryValue ? columns : columns2"
        :data-source="isQueryValue ? dataList : tableList"
        :loading="dataLoading"
        :pagination="false"
      >
         <template #scheNum="{ record }" v-if="!disabled">
          <!-- <a-input v-model:value="record.sche_num" placeholder="请输入" /> -->
          <a-input-number
            :min="0"
            :max="record.saleNum ? record.saleNum : null"
            :step="1"
            :disabled="disabled"
            v-model:value="record.scheNum"
            placeholder="请输入"
          />
        </template>
         <template #state="{ record }">
          {{ record.state == '0' ? '未完成' : '' }}
          {{ record.state == '1' ? '已完成' : '' }}
           </template
        >

        <template #operation="{ record, index }">
          <a-button type="text" danger @click="onDelete(index)" :disabled="disabled">删除</a-button>
        </template>
      </a-table>
      <div class="aPagination" v-if="isQueryValue">
        <a-pagination
          v-model:current="current1"
          :total="totals"
          :pageSize="pageSize"
          show-size-changer
          show-quick-jumper
          :show-total="(total: any) => `共 ${total} 条`"
          @change="onChange"
        />
      </div>
    </div>
  </div>
  <a-divider />
  <div style="text-align: right; padding: 0 12px 12px 0" v-if="!isQueryValue && !disabled">
    <a-button @click="cancel">取消</a-button>
    <a-button @click="ok" type="primary" style="margin-left: 12px">确认</a-button>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, watch } from 'vue';
  import { getMesProSchetoolPage } from '/@/api/mes/schetool';
  import { XjrDatePicker } from '/@/components/DatePicker';

  let props = defineProps(['sche']);

  const scheId = ref('');
  const isQueryValue = ref<boolean>(false);
  const disabled = ref<boolean>(false);

  const queryData = ref<any>({
    name: '',
    id: '',
  });

  const dataList = ref<any[]>([]);

  const dataLoading = ref<boolean>(false);
  const current1 = ref<number>(1);
  const pageSize = ref<number>(10);
  const totals = ref<any>(0);

  const tableList = ref<any[]>([]);

  const obj = ref<any>({});

  const emit = defineEmits(['cancel', 'ok']);

  const cancel = () => {
    emit('cancel');
  };
  const ok = () => {
    let sum = 0;
    for (let i = 0; i < tableList.value.length; i++) {
      sum += Number(tableList.value[i].scheNum);
    }

    obj.value = {
      scheNum: sum,
      id: queryData.value.id,
      onlineDate: queryData.value.onlineDate,
      remark: queryData.value.remark,
      mesProSchetoolDetailList: tableList,
      isQuery: isQueryValue,
    };

    emit('ok', obj.value);
  };

  const columns = [
    {
      title: '序号',
      align: 'center',
      customRender: ({ index }: { index: number }) => {
        return `${(current1.value - 1) * pageSize.value + index + 1}`;
      },
    },
    {
      title: '上线日期',
      dataIndex: 'onlineDate',
      sorter: true,
    },
    {
      title: '产品编码',
      dataIndex: 'productNo',
      sorter: true,
    },
    {
      title: '产品名称',
      dataIndex: 'productName',
      sorter: true,
    },
    {
      title: '排期数量',
      dataIndex: 'scheNum',
      sorter: true,
    },
    {
      title: '制单日期',
      dataIndex: 'toolDate',
      sorter: true,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      sorter: true,
    },
    {
      title: '完成状态',
      dataIndex: 'state',
      sorter: true,
      slots: { customRender: 'state' },
    },
  ];

  const current2 = ref<number>(1);
  const pageSize2 = ref<number>(10);

  const columns2 = [
    {
      title: '#',
      align: 'center',
      fixed: 'left',
      width: 55,
      customRender: ({ index }: { index: number }) => {
        return `${(current2.value - 1) * pageSize2.value + index + 1}`;
      },
    },
    {
      title: '销售单号',
      dataIndex: 'saleNo',
      width: 120,
      sorter: true,
    },
    {
      title: '订单主题',
      dataIndex: 'saleName',
      width: 120,
      sorter: true,
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
      width: 120,
      sorter: true,
    },
    {
      title: '产品编码',
      dataIndex: 'productNo',
      width: 120,
      sorter: true,
    },
    {
      title: '产品名称',
      dataIndex: 'productName',
      width: 120,
      sorter: true,
    },
    {
      title: '订单数量',
      dataIndex: 'saleNum',
      width: 120,
      sorter: true,
    },
    {
      title: '排期数量',
      dataIndex: 'scheNum',
      width: 120,
      sorter: true,
      slots: { customRender: 'scheNum' },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 50,
      slots: { customRender: 'operation' },
    },
  ];

  watch(
    () => props.sche,
    (val) => {
      console.log('监听', val);
      if (val) {
        isQueryValue.value = props.sche.isQuery;
        disabled.value = props.sche.disabled;
        // 未完成查询
        if (isQueryValue.value) {
          scheId.value = props.sche.id;
          fetchData();
        } else {
          console.log('props.sche', props.sche);
          queryData.value.id = props.sche.id;
          queryData.value.onlineDate = props.sche.onlineDate;
          queryData.value.remark = props.sche.remark;
          tableList.value = props.sche.list;
        }
      }
    },
  );

  onMounted(() => {
    isQueryValue.value = props.sche.isQuery;
    disabled.value = props.sche.disabled;
    if (isQueryValue.value) {
      scheId.value = props.sche.id;
      fetchData();
    } else {
      queryData.value.id = props.sche.id;
      tableList.value = props.sche.list;
    }
  });

  const fetchData = async () => {
    const pageParams = {
      limit: current1.value, //当前页数
      size: pageSize.value, //每页条数
      // scheId: scheId.value,
      publishState: 1, //发布状态-已发布
      productName: queryData.value.name,
      needDetail: true,
      needState: true,
    };
    const res = await getMesProSchetoolPage(pageParams);

    dataList.value = res.list;
    totals.value = res.total;
  };

  const onChange = (pageNumber: number) => {
    console.log('Page: ', pageNumber);
    current1.value = pageNumber;
    fetchData();
  };

  const resetForm = () => {
    queryData.value = {
      name: '',
    };
    fetchData();
  };

  const onDelete = (index) => {
    tableList.value.splice(index, 1);
    // tableList.value = tableList.value.filter(
    //   (item) =>
    //     item.id !== record.id
    // );
  };
</script>

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

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

  .aPagination {
    position: absolute;
    right: 0;
    bottom: 0;
  }
</style>
