<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <div class="page-bg-wrap formViewStyle pdcss">
      <a-form ref="formRef" :model="formState" :rules="rules" v-bind="layout">
        <a-row>
          <a-col :span="24">
            <a-form-item label="批复意见" name="reply" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
              <a-textarea  v-model:value="formState.reply" :disabled="isDisable"  placeholder="请输入备注"  :auto-size="{ minRows: 2, maxRows: 5 }"/>
            </a-form-item>
          </a-col>
        </a-row>
        <Card title="日计划审批" :bordered="false" >
          <a-row>
            <a-col :span="8">
              <a-form-item label="计划日期" name="datePlan">{{ formState.datePlan }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="当日/次日" name="kName">{{ formState.datePlan }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="合同" name="kName">{{ formState.kName}}</a-form-item>
            </a-col> 
            <a-col :span="8">
              <a-form-item label="合同量(吉焦)" name="qtyContractGj">{{ formState.qtyContractGj }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="合同量(方)" name="qtyContractM3">{{ formState.qtyContractM3 }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="月合同量执行进度%" name="rateK">{{ formState.rateK }}</a-form-item>
            </a-col>
             <a-col :span="8">
              <a-form-item label="计划量(吉焦)" name="qtyPlanGj">{{ formState.qtyPlanGj }}</a-form-item>
            </a-col>
             <a-col :span="8">
              <a-form-item label="计划量(方)" name="qtyPlanM3">{{ formState.qtyPlanM3 }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="月计划量执行进度%" name="rateMp">{{ formState.rateMp }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="指定量(吉焦)" name="qtyDemandGj">{{ formState.qtyDemandGj }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="指定量(方)" name="qtyDemandM3">{{ formState.qtyDemandM3 }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="月时间进度%" name="rateS">{{ formState.rateS }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="批复量(吉焦)" name="qtySalesGj">{{ formState.qtySalesGj }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="批复量(方)" name="qtySalesM3">{{ formState.qtySalesM3 }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="比值(方/吉焦)" name="rateM3Gj">{{ formState.rateM3Gj }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="交易主体" name="name">{{ formState.name }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="版本号" name="verNo">{{ formState.verNo }}</a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="下载点" name="fullName" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
                {{ formState.fullName }}
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="审批状态" name="approName">{{ formState.approName }}</a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="开机方式" name="" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
                <div style="display: flex;">
                  <div class="dot"><span></span>连运<i>{{ formState.powerCont }}</i>台</div>
                  <div class="dot"><span></span>调峰<i>{{ formState.powerCont }}</i>台</div>
                  <div class="dot"><span></span>停机<i>{{ formState.powerStop }}</i>台</div>
                  <div class="dot"><span></span>其他<i>{{ formState.powerOther }}</i>台</div>
                </div>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="备注" name="note" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
                {{ formState.note }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-table style="width: 100%" :columns="columns" :data-source="dataList" :pagination="false" :scroll="{x: 1000}">
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.dataIndex === 'qtySalesGj'">
                <a-input-number v-model:value="record.qtySalesGj" :min="0" @change="numChange" style="width: 100%" />
              </template>
               <template v-if="column.dataIndex === 'qtySalesM3'">
                <a-input-number v-model:value="record.qtySalesM3" :min="0" @change="numChange" style="width: 100%" />
              </template>
               <template v-if="column.dataIndex === 'note'">
                <a-input v-model:value="record.note" style="width: 100%" />
              </template>
            </template>
          </a-table>
        </Card>
      </a-form>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
    import { Card } from 'ant-design-vue';
    import { useRouter } from 'vue-router';
    import { FromPageType, RecordType } from '/@/enums/workflowEnum';
    import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent, reactive, defineComponent, watch} from 'vue';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { useMultipleTabStore } from '/@/store/modules/multipleTab';
    import useEventBus from '/@/hooks/event/useEventBus';
    import type { Rule } from 'ant-design-vue/es/form';
    import { getDictionary } from '/@/api/sales/Customer';
    import { useModal } from '/@/components/Modal';
    import { addLngPngAppro,updateLngPngAppro, getLngPngAppro } from '/@/api/dayPlan/PngAppro';
    import dayjs from 'dayjs';
    import { getAppEnvConfig } from '/@/utils/env';
    import { message } from 'ant-design-vue';
    import { useUserStore } from '/@/store/modules/user';

    const userStore = useUserStore();
    const userInfo = userStore.getUserInfo;

    const tableName = 'ContractSales';
    const columnName = 'ContractSales'

    const formType = ref('2'); // 0 新建 1 修改 2 查看
    const formRef = ref();
    const props = defineProps({
      disabled: false,
      id: ''
    
    });
    const { bus, FORM_LIST_MODIFIED } = useEventBus();

    const router = useRouter();
    const { currentRoute } = router;
    const isDisable = ref(false);
    const { formPath } = currentRoute.value.query;
    const pathArr = [];

    const tabStore = useMultipleTabStore();
    const formProps = ref(null);
    const formId = ref(currentRoute.value?.params?.id);
    const pageType = ref(currentRoute.value.query?.type);
    const pageId = ref(currentRoute.value.query?.id)
    
    const contractQty = ref()
    const spinning = ref(false);
    const curIdx = ref(null)
    const { notification } = useMessage();
    const { t } = useI18n();
    const hasDel = ref(false)
    const formState = reactive({

    });
    const [register, { openModal:openModal}] = useModal();
    const rules= reactive({
      // kNo: [{ required: true, message: "该项为必填项", trigger: 'change' }],
      // kName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
    });
    const layout = {
      labelCol: { span: 9 },
      wrapperCol: { span: 18 },
    }
    const columns= ref([
      { title: t('序号'), dataIndex: 'index', key: 'index', sorter: true, customRender: (column) => `${column.index + 1}` ,width: 100},
      { title: t('上载点'), dataIndex: 'pointUpName', sorter: true, width:200},
      { title: t('供应商'), dataIndex: 'suSname', sorter: true, width: 130},
      { title: t('采购合同'), dataIndex: 'kName', sorter: true, width: 200},
      { title: t('指定量(吉焦)'), dataIndex: 'qtyDemandGj', sorter: true, width: 300},
      { title: t('指定量(方)'), dataIndex: 'qtyDemandM3', sorter: true, width: 200},
      { title: t('批复量(吉焦)'), dataIndex: 'qtySalesGj', sorter: true, width: 200},
      { title: t('批复量(方)'), dataIndex: 'qtySalesM3', sorter: true, width: 200},
      { title: t('备注'), dataIndex: 'note', sorter: true, width: 200},
    ]);
    const dataList = ref([])
    let optionSelect= reactive({
      approCodeList: [],
    });
    watch(
      () => props.id,
      (val) => {
        if (val) {
          getInfo(val)
        }  
      },
      {
        immediate: true
      }
    );
    watch(
      () => props.disabled,
      (val) => {
        isDisable.value = val
      },
      {
        immediate: true
      }
    );
    onMounted(() => {
      getOption()
      if (pageId.value) {
        getInfo(pageId.value)
      }
   
    });
    async function getInfo(id)  {
      spinning.value = true
      try {
      let data = await getLngPngAppro(id)
      spinning.value = false
      Object.assign(formState, {...data})
      Object.assign(dataList.value, formState.lngPngApproPurList || [{}])
      dataList.value.forEach(v => {
        v.qtyM3Month = Number(v.qtyM3Month)/10000
        v.qtyM3Day = Number(v.qtyM3Day)/10000
      });

      } catch (error) {
        console.log(error, 'error')
        spinning.value = false
      }
    }
    async function numChange () {
      let num = 0;
      let num1 = 1;
      dataList.forEach(v => {
        num+=(Number(v.qtySalesGj) || 0)
        num1+=(Number(v.qtySalesM3) || 0)
      })
      formState.qtySalesGj = num
      formState.qtySalesM3 = num1
    }
    async function getOption() {
      optionSelect.approCodeList = await getDictionary('LNG_APPRO')

    }
    function close() {
      tabStore.closeTab(currentRoute.value, router);
    }
    async function getFormValue() {
      return formState
    }
    async function handleSubmit(type) {
      try {
        await formRef.value.validateFields();
        let obj = {
          ...formState,
          lngContractSalesPngPointList: dataListPoint.value,
          lngContractSalesPngQtyList: arr,
          lngFileUploadList: dataFile.value,
          lngContractFactRelList: dataListContractFact.value,
          lngContractApproRelList: dataListAppro.value,
          
        }
        spinning.value = true;
        let request = !formState.id ? addLngPngAppro :updateLngPngAppro

        try {
          const data = await request(obj);
          // 新增保存
          if (data?.id) {
            getInfo(data?.id)
          }
          // 同意保存不提示
          if (!type) {
            notification.success({
                message: 'Tip',
                description: data?.id ? t('新增成功！') : t('修改成功！')
            }); //提示消息
          }
          return data?.id ? data : obj
          
        } finally {
          spinning.value = false;
        }

      } catch (errorInfo) {
         spinning.value = false;
         errorInfo?.errorFields?.length && notification.warning({
          message: 'Tip',
          description: '请完善信息'
        });
        return false
      }
    }

      defineExpose({
        handleSubmit,
        getFormValue
    });
</script>

<style lang="less" scoped>
  :deep(.ant-form-item .ant-form-item-label) {
    width: 135px !important;
    max-width: 135px !important;
  }
    .page-bg-wrap {
        background-color: #fff;
    }

    .top-toolbar {
        min-height: 44px;
        margin-bottom: 12px;
        border-bottom: 1px solid #eee;
    }
    .pdcss {
      padding: 6px 12px !important;
    }
    .dot {
      margin-right: 10px;
      display: flex;
      align-items: center;
      i{
        padding: 5px;
        font-style: normal;
      }
      span{
        width: 10px !important;
        height: 10px !important;
        border-radius: 50%;
        background: red;
        display: block;
      }
    }
    
</style>
