<!--
 * @Descripttion: (表格数据/tb_table_data 添加弹窗)
 * @version: (1.0)
 * @Author: (lwh)
 * @Date: (2023-11-22)
 * @LastEditors: (lwh)
 * @LastEditTime: (2023-11-22)
-->
<template>
  <el-dialog v-model="props.modelValue" title="添加表格数据信息" width="900px" @closed="closeDialog" @open="openDialog">
    <el-form ref="formRef" :model="formData" :rules="rules">

      <div class="title">基本信息</div>
      <el-row :gutter="20">

        <el-col :lg="12">
          <el-form-item :label-width="labelWidth" label="涉及产品" prop="productsInvolvedGuid">
            <el-select v-model="formData.productsInvolvedGuid" multiple placeholder="请选择涉及产品">
              <el-option v-for="item in  dataList " :key="item.productsInvolvedGuid" :label="item.productsInvolvedName"
                :value="item.productsInvolvedId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :lg="24">
          <el-form-item :label-width="labelWidth" label="采购内容" prop="tableDataProcurementContent">
            <el-input v-model="formData.tableDataProcurementContent" placeholder="请输入采购内容" />
          </el-form-item>
        </el-col>
        <el-col :lg="24">
          <el-form-item :label-width="labelWidth" label="采购单位名称" prop="tableDataProcurementUnit">
            <el-input v-model="formData.tableDataProcurementUnit" placeholder="请输入采购单位名称" />
          </el-form-item>
        </el-col>
        <el-col :lg="24">
          <el-form-item :label-width="labelWidth" label="采购方式" prop="tableDataProcurementMethod">
            <el-input v-model="formData.tableDataProcurementMethod" placeholder="请输入采购方式" />
          </el-form-item>
        </el-col>
        <el-col :lg="24">
          <el-form-item :label-width="labelWidth" label="单一来源理由" prop="tableDataSingleSource">
            <el-input v-model="formData.tableDataSingleSource" placeholder="请输入单一来源理由（如有）" />
          </el-form-item>
        </el-col>
        <el-col :lg="24">
          <el-form-item :label-width="labelWidth" label="项目计价形式" prop="tableDataProjectPricingForm">
            <el-input v-model="formData.tableDataProjectPricingForm" placeholder="请输入项目计价形式" />
          </el-form-item>
        </el-col>
        <el-col :lg="24">
          <el-form-item :label-width="labelWidth" label="链接" prop="tableDataLink">
            <el-input v-model="formData.tableDataLink" placeholder="请输入链接" />
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item :label-width="labelWidth" label="日期" prop="tableDataDate">
            <el-date-picker v-model="formData.tableDataDate" type="date" :teleported="false"
              placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item :label-width="labelWidth" label="截止日期" prop="tableDataDeadline">
            <el-date-picker v-model="formData.tableDataDeadline" type="date" :teleported="false"
              placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item :label-width="labelWidth + 140" label="是否为中标公告" prop="tableDataIsBidAnnouncement">
            <el-select v-model="formData.tableDataIsBidAnnouncement" placeholder="请选择">
              <el-option v-for="item in  is_bid_announcement " :key="item.dictValue" :label="item.dictLabel"
                :value="parseInt(item.dictValue)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="24">
          <el-form-item :label-width="labelWidth + 140" label="是否是人力资源池或框架协议"
            prop="tableDataIsHumanResourcePoolOrFrameworkAgreement">
            <el-select v-model="formData.tableDataIsHumanResourcePoolOrFrameworkAgreement" placeholder="请选择">
              <el-option v-for="item in  is_human_resource_pool_or_framework_agreement " :key="item.dictValue"
                :label="item.dictLabel" :value="parseInt(item.dictValue)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="24">
          <el-form-item :label-width="labelWidth + 140" label="公告中是否包含多个包/标段/采购内容" prop="tableDataIsMultiple">
            <el-select v-model="formData.tableDataIsMultiple" placeholder="请选择">
              <el-option v-for="item in  is_multiple " :key="item.dictValue" :label="item.dictLabel"
                :value="parseInt(item.dictValue)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item :label-width="labelWidth + 140" label="是否仅有一个中标人" prop="tableDataIsOnlyBidder">
            <el-select v-model="formData.tableDataIsOnlyBidder" placeholder="请选择">
              <el-option v-for="item in  is_only_bidder " :key="item.dictValue" :label="item.dictLabel"
                :value="parseInt(item.dictValue)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="24">
          <el-form-item :label-width="labelWidth" label="详情" prop="tableDataDetails">
            <el-input type="textarea" :rows="10" v-model="formData.tableDataDetails" placeholder="请输入详情" />
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item :label-width="labelWidth" label="排序" prop="tableDataSort">
            <el-input-number v-model.number="formData.tableDataSort" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>


      <div class="title">中标信息</div>
      <el-row>
        <el-col :lg="12">
          <el-form-item :label-width="labelWidth" label="中标人或候选人" prop="tableDataWinningBidde">
            <el-input v-model="formData.tableDataWinningBidde" placeholder="请输入中标人或候选人" />
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item :label-width="labelWidth" label="中标金额" prop="tableDataBidWinningPrice">
            <el-input-number v-model.number="formData.tableDataBidWinningPrice" controls-position="right" :min="0"
              :precision="2" :step="0.1" />
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item :label-width="labelWidth" label="供应商名称" prop="tableDataSupplierName">
            <el-input v-model="formData.tableDataSupplierName" placeholder="请输入供应商名称" />
          </el-form-item>
        </el-col>
        <el-col :lg="12">
          <el-form-item :label-width="labelWidth" label="供应商报价" prop="tableDataSupplierOffer">
            <el-input-number v-model.number="formData.tableDataSupplierOffer" controls-position="right" :min="0"
              :precision="2" :step="0.1" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div key="dialog-footer">
        <el-button type="primary" @click="handleAddClick(formRef)" :loading="loadingStatus">添加</el-button>
        <el-button @click="handleResetClick(formRef)">重置</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup>
import { reactive, ref, watch } from "vue";
import { ElMessage } from 'element-plus'
import modal from '@/plugins/modal.js'
import { addOrUpdateTableData } from '@/api/business/TableDataManage/TableDatas/tableData.js';
import { productsInvolvedList } from '@/api/business/ProductsInvolveds/productsInvolved.js'


// 打开弹窗时回调
const openDialog = async () => {
  await getproductsInvolvedList()
  await getis_bid_announcement()
  await getis_human_resource_pool_or_framework_agreement()
  await getis_multiple()
  await getis_only_bidder()

}

// -业务参数
// 是否为中标公告字典选项列表
const is_bid_announcement = ref([]);
// 是否是人力资源池或框架协议字典选项列表
const is_human_resource_pool_or_framework_agreement = ref([]);
// 公告中是否包含多个包/标段/采购内容字典选项列表
const is_multiple = ref([]);
// 是否仅有一个中标人字典选项列表
const is_only_bidder = ref([]);
// 涉及产品列表
const dataList = ref([]);

const queryParams = {
  pageNum: 1,
  pageSize: 10000
}

// -业务方法
// 字典获取
async function getis_bid_announcement() {
  await proxy.getDicts('is_bid_announcement').then((res) => {
    is_bid_announcement.value = res.data
  })
}
// 字典获取
async function getis_human_resource_pool_or_framework_agreement() {
  await proxy.getDicts('is_human_resource_pool_or_framework_agreement').then((res) => {
    is_human_resource_pool_or_framework_agreement.value = res.data
  })
}
// 字典获取
async function getis_multiple() {
  await proxy.getDicts('is_multiple').then((res) => {
    is_multiple.value = res.data
  })
}
// 字典获取
async function getis_only_bidder() {
  await proxy.getDicts('is_only_bidder').then((res) => {
    is_only_bidder.value = res.data
  })
}

async function getproductsInvolvedList() {
  productsInvolvedList(queryParams).then((res) => {
    if (res.code == 200) {
      dataList.value = res.data.result;
    }
  });
}


// -基础参数
const loadingStatus = ref(false)
const labelWidth = 120;
const formRef = ref();
const { proxy } = getCurrentInstance()
const emits = defineEmits(["update:modelValue"]);
const formData = reactive({
  tableDataSort: 100,
  tableDataBidWinningPrice: 0.00
});
const props = defineProps({
  modelValue: Boolean,
  done: Function,
});
const imgData = ref({
  fileDir: "TableData"
})

// 验证
const rules = reactive({
  tableDataGuid: [{ required: true, message: "不能为空", trigger: "blur", type: "number" }],
  tableDataProcurementContent: [{ required: true, message: "采购内容不能为空", trigger: "blur" }],
  tableDataProcurementUnit: [{ required: true, message: "采购单位名称不能为空", trigger: "blur" }],
  tableDataDate: [{ required: true, message: "日期不能为空", trigger: "blur" }],
  tableDataIsBidAnnouncement: [{ required: true, message: "是否为中标公告不能为空", trigger: "change", type: "number" }],
  tableDataIsHumanResourcePoolOrFrameworkAgreement: [{ required: true, message: "是否是人力资源池或框架协议不能为空", trigger: "change", type: "number" }],
  tableDataIsMultiple: [{ required: true, message: "公告中是否包含多个包/标段/采购内容不能为空", trigger: "change", type: "number" }],
  tableDataIsOnlyBidder: [{ required: true, message: "是否仅有一个中标人不能为空", trigger: "change", type: "number" }],
  tableDataSort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
});

// -基础方法

// 提交
const handleAddClick = async (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return;
    }
    loadingStatus.value = true

    formData.productsInvolvedGuid = formData.productsInvolvedGuid.join(',')

    const { code } = await addOrUpdateTableData(formData);
    if (code == 200) {
      modal.msgSuccess('添加成功')
      closeDialog();
      loadingStatus.value = false
    }
  });
};
const closeDialog = () => {
  handleResetClick(formRef.value);
  props.done();
  emits("update:modelValue", false);
};
const handleResetClick = async (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style>
.title {
  margin-left: 20px;
  margin-bottom: 20px;
  font-size: 25px;
  font-weight: bold;
}
</style>