<template>
  <page-layout :desc="desc">
    <div class="page-body">

      <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
                :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
      <!--  =========================== 自定义区域 Start  ======================= -->

      <!--  =========================== 自定义区域 End  ======================= -->
      </vxe-form>

      <div class="mk-toolbar" v-if="isEdit">

      </div>

      <div class="footerbar">
        <a-button type="primary" @click="ok">确定</a-button>
        <a-button @click="cancel">取消</a-button>
      </div>

    </div>
  </page-layout>
</template>

<script>
import BASE_URL from '@/services/Middle/bathroom/BathroomQuotation/api.js';
import PageLayout from '@/layouts/PageLayout'


export default {

  name: 'BathroomQuotationPartsUpdate',
  i18n: require('./i18n'),
  components: { PageLayout },
  props: {
    pageMode: {
      type: String,
      default: "edit"
    },
    dataId: {
    }

  },

  data() {

    // 页面数据变量
    var pageData = {
      // 当前项目名称
      currentConfigName: "",
      // 当前项目ID
      currentBeid: 0,

      uploadDefaultImg: null,
      detailDataFieldName: "bathroom_quotation",

      actions: {
        // =============================== 接口地址 自动生成 Start ===============================
					BathroomQuotationList: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/list`, // 报价单列表
					BathroomQuotationDetail: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/detail`, // 报价单详情
					BathroomQuotationCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/create`, // 创建报价单
					BathroomQuotationUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/update`, // 更新报价单
					BathroomQuotationDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/detele`, // 删除报价单
					BathroomQuotationBatchDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/batchDelete`, // 批量删除报价单
					BathroomQuotationBatchUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/batchUpdate`, // 批量更新报价单
					BathroomQuotationBatchCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/batchCreate`, // 批量创建报价单
					BathroomQuotationExportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/export/excel`, // 导出报价单数据到EXCEL
					BathroomQuotationImportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/import/excel`, // 批量导入EXCEL报价单数据
					BathroomQuotationFittingsList: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/list`, // 报价单部件列表
					BathroomQuotationFittingsDetail: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/detail`, // 报价单部件详情
					BathroomQuotationFittingsCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/create`, // 创建报价单部件
					BathroomQuotationFittingsUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/update`, // 更新报价单部件
					BathroomQuotationFittingsDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/detele`, // 删除报价单部件
					BathroomQuotationFittingsBatchDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/batchDelete`, // 批量删除报价单部件
					BathroomQuotationFittingsBatchUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/batchUpdate`, // 批量更新报价单部件
					BathroomQuotationFittingsBatchCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/batchCreate`, // 批量创建报价单部件
					BathroomQuotationFittingsExportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/export/excel`, // 导出报价单部件数据到EXCEL
					BathroomQuotationFittingsImportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/fittings/import/excel`, // 批量导入EXCEL报价单部件数据
					BathroomQuotationPartsList: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/list`, // 报价单配件列表
					BathroomQuotationPartsDetail: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/detail`, // 报价单配件详情
					BathroomQuotationPartsCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/create`, // 创建报价单配件
					BathroomQuotationPartsUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/update`, // 更新报价单配件
					BathroomQuotationPartsDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/detele`, // 删除报价单配件
					BathroomQuotationPartsBatchDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/batchDelete`, // 批量删除报价单配件
					BathroomQuotationPartsBatchUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/batchUpdate`, // 批量更新报价单配件
					BathroomQuotationPartsBatchCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/batchCreate`, // 批量创建报价单配件
					BathroomQuotationPartsExportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/export/excel`, // 导出报价单配件数据到EXCEL
					BathroomQuotationPartsImportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/parts/import/excel`, // 批量导入EXCEL报价单配件数据
					BathroomQuotationMaterialList: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/list`, // 报价单材料列表
					BathroomQuotationMaterialDetail: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/detail`, // 报价单材料详情
					BathroomQuotationMaterialCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/create`, // 创建报价单材料
					BathroomQuotationMaterialUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/update`, // 更新报价单材料
					BathroomQuotationMaterialDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/detele`, // 删除报价单材料
					BathroomQuotationMaterialBatchDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/batchDelete`, // 批量删除报价单材料
					BathroomQuotationMaterialBatchUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/batchUpdate`, // 批量更新报价单材料
					BathroomQuotationMaterialBatchCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/batchCreate`, // 批量创建报价单材料
					BathroomQuotationMaterialExportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/export/excel`, // 导出报价单材料数据到EXCEL
					BathroomQuotationMaterialImportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/material/import/excel`, // 批量导入EXCEL报价单材料数据
					BathroomQuotationLaborList: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/list`, // 报价单人工费用列表
					BathroomQuotationLaborDetail: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/detail`, // 报价单人工费用详情
					BathroomQuotationLaborCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/create`, // 创建报价单人工费用
					BathroomQuotationLaborUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/update`, // 更新报价单人工费用
					BathroomQuotationLaborDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/detele`, // 删除报价单人工费用
					BathroomQuotationLaborBatchDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/batchDelete`, // 批量删除报价单人工费用
					BathroomQuotationLaborBatchUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/batchUpdate`, // 批量更新报价单人工费用
					BathroomQuotationLaborBatchCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/batchCreate`, // 批量创建报价单人工费用
					BathroomQuotationLaborExportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/export/excel`, // 导出报价单人工费用数据到EXCEL
					BathroomQuotationLaborImportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/labor/import/excel`, // 批量导入EXCEL报价单人工费用数据
					BathroomQuotationProcessList: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/list`, // 报价单工序列表
					BathroomQuotationProcessDetail: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/detail`, // 报价单工序详情
					BathroomQuotationProcessCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/create`, // 创建报价单工序
					BathroomQuotationProcessUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/update`, // 更新报价单工序
					BathroomQuotationProcessDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/detele`, // 删除报价单工序
					BathroomQuotationProcessBatchDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/batchDelete`, // 批量删除报价单工序
					BathroomQuotationProcessBatchUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/batchUpdate`, // 批量更新报价单工序
					BathroomQuotationProcessBatchCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/batchCreate`, // 批量创建报价单工序
					BathroomQuotationProcessExportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/export/excel`, // 导出报价单工序数据到EXCEL
					BathroomQuotationProcessImportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/process/import/excel`, // 批量导入EXCEL报价单工序数据
					BathroomQuotationPackagingList: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/list`, // 包装材料列表
					BathroomQuotationPackagingDetail: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/detail`, // 包装材料详情
					BathroomQuotationPackagingCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/create`, // 创建包装材料
					BathroomQuotationPackagingUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/update`, // 更新包装材料
					BathroomQuotationPackagingDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/detele`, // 删除包装材料
					BathroomQuotationPackagingBatchDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/batchDelete`, // 批量删除包装材料
					BathroomQuotationPackagingBatchUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/batchUpdate`, // 批量更新包装材料
					BathroomQuotationPackagingBatchCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/batchCreate`, // 批量创建包装材料
					BathroomQuotationPackagingExportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/export/excel`, // 导出包装材料数据到EXCEL
					BathroomQuotationPackagingImportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/packaging/import/excel`, // 批量导入EXCEL包装材料数据
					BathroomQuotationOutsourcingList: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/list`, // 外购产品列表
					BathroomQuotationOutsourcingDetail: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/detail`, // 外购产品详情
					BathroomQuotationOutsourcingCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/create`, // 创建外购产品
					BathroomQuotationOutsourcingUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/update`, // 更新外购产品
					BathroomQuotationOutsourcingDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/detele`, // 删除外购产品
					BathroomQuotationOutsourcingBatchDelete: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/batchDelete`, // 批量删除外购产品
					BathroomQuotationOutsourcingBatchUpdate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/batchUpdate`, // 批量更新外购产品
					BathroomQuotationOutsourcingBatchCreate: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/batchCreate`, // 批量创建外购产品
					BathroomQuotationOutsourcingExportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/export/excel`, // 导出外购产品数据到EXCEL
					BathroomQuotationOutsourcingImportExcel: `${BASE_URL.BASE_URL}/BathroomQuotation/v1/bathroom/quotation/outsourcing/import/excel`, // 批量导入EXCEL外购产品数据

        // =============================== 接口地址 自动生成 End ===============================
      },

      keyName: 'id',
      // 是否编辑模式
      isEdit: false,
      // 表单数据
      formOptions: {
        data: {
          // =============================== 表单数据 自动生成 Start ===============================

					id: 0,
					quotation_id: 0,
					type: "",
					parts_id: 0,
					code: "",
					name: "",
					brand: "",
					model: "",
					spec: "",
					unit: "",
					supplier: "",
					image: "",
					quantity: 0,
					remark: "",
					create_uid: 0,
					update_uid: 0,
					create_time: new Date(2100, 1, 1).getTime() / 10000,
					update_time: new Date(2100, 1, 1).getTime() / 10000,

          // =============================== 表单数据 自动生成 End ===============================
        },
        // 标题宽度
        titleWidth: 100,
        // 标题对齐方式
        titleAlign: 'right',

        // 表单校验规则
        rules: {
          // =============================== 表单校验 自动生成 Start ===============================

					quotation_id: [
						{ required: true, message: '请输入报价单id' }
					],
					type: [
						{ required: true, message: '请输入类型:1.主柜,2.抽屉' }
					],
					parts_id: [
						{ required: true, message: '请输入配件id' }
					],
					code: [
						{ required: true, message: '请输入编码' }
					],
					name: [
						{ required: true, message: '请输入配件名称' }
					],
					brand: [
						{ required: true, message: '请输入配件品牌' }
					],
					model: [
						{ required: true, message: '请输入配件型号' }
					],
					spec: [
						{ required: true, message: '请输入配件规格' }
					],
					unit: [
						{ required: true, message: '请输入配件单位' }
					],
					supplier: [
						{ required: true, message: '请输入供应商' }
					],
					image: [
						{ required: true, message: '请输入图片' }
					],
					quantity: [
						{ required: true, message: '请输入数量' }
					],
					remark: [
						{ required: true, message: '请输入备注' }
					],

          // =============================== 表单校验 自动生成 End ===============================
        },
        // 表单项
        items: [
            // =============================== 表单项 自动生成 Start ===============================

					{ field: 'quotation_id', title: '报价单id', span: 12, itemRender: { name: '$input' } },
					{ field: 'type', title: '类型:1.主柜,2.抽屉', span: 12, itemRender: { name: '$input' } },
					{ field: 'parts_id', title: '配件id', span: 12, itemRender: { name: '$input' } },
					{ field: 'code', title: '编码', span: 12, itemRender: { name: '$input' } },
					{ field: 'name', title: '配件名称', span: 12, itemRender: { name: '$input' } },
					{ field: 'brand', title: '配件品牌', span: 12, itemRender: { name: '$input' } },
					{ field: 'model', title: '配件型号', span: 12, itemRender: { name: '$input' } },
					{ field: 'spec', title: '配件规格', span: 12, itemRender: { name: '$input' } },
					{ field: 'unit', title: '配件单位', span: 12, itemRender: { name: '$input' } },
					{ field: 'supplier', title: '供应商', span: 12, itemRender: { name: '$input' } },
					{ field: 'image', title: '图片', span: 12, itemRender: { name: '$input' } },
					{ field: 'quantity', title: '数量', span: 12, itemRender: { name: '$input' } },
					{ field: 'remark', title: '备注', span: 12, itemRender: { name: '$input' } },

          // =============================== 表单项 自动生成 End ===============================
        ]
      },
      // 新增模式表单项
      addModeItems: [

      ],


    };

    pageData.actions.get = pageData.actions.BathroomQuotationDetail;
    pageData.actions.create = pageData.actions.BathroomQuotationCreate;
    pageData.actions.update = pageData.actions.BathroomQuotationUpdate;

    // 合并表单数据及配置
    pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);

    return pageData;
  },

  computed: {
    desc() {
      return this.$t('editPageDesc')
    }
  },


  created() {


    // 获取路由的id参数
    let dataId = this.getDataId();

    // 如果有id参数，说明是编辑模式
    if (dataId) {
      const json = `{"id":${dataId}}`;
      this.$mk.post({
        url: this.actions.get,
        loading: "加载中...",
        data: json,
        config: {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      }).then(a => {
        // =============================== 时间字段判断 自动生成 Start ===============================

					if(a.data[this.detailDataFieldName].create_time){
						a.data[this.detailDataFieldName].create_time = new Date(a.data[this.detailDataFieldName].create_time * 1000);
					}
					if(a.data[this.detailDataFieldName].update_time){
						a.data[this.detailDataFieldName].update_time = new Date(a.data[this.detailDataFieldName].update_time * 1000);
					}

        // =============================== 时间字段判断 自动生成 End ===============================
        this.formOptions.data = a.data[this.detailDataFieldName];
      }).catch((a) => {
        this.$mk.error(a.data.msg);
      });

      this.isEdit = true;
    } else {
      // 如果没有id参数，说明是新增模式
      this.addModeItems.forEach(item => {
        this.formOptions.items.push(item);
      })

    }

  },
  // 函数
  methods: {


    // 获取路由的id参数
    getDataId() {
      let dataId = this.dataId;
      if (this.$route.params.id) {
        dataId = this.$route.params.id;
      }
      if (!dataId) {
          dataId = 0;
      }
      return dataId;
    },



    // 返回
    back() {
      // 如果是新增模式，关闭当前页面
      if (!this.isEdit) {
        this.$closePage({
          closeRoute: "/BathroomQuotation/BathroomQuotationPartsAdd"
        });
      } else {
        // 如果是编辑模式，关闭当前页面
        this.$closePage({
          closeRoute: "/BathroomQuotation/BathroomQuotationPartsUpdate"
        });
      }
      // 打开列表页面
      this.$openPage('/BathroomQuotation/BathroomQuotationPartsList')
    },

    // 保存
    ok() {

      let save = () => {


        // 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
        let action = !this.isEdit ? this.actions.create : this.actions.update;
        // 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
        let postdata = Object.assign({}, this.formOptions.data);
        // 如果是编辑模式
        if (this.isEdit) {
          // postdata = { BathroomQuotationParts: postdata }
        }
        // 格式化提交的数据
        this.$mk.formatFormData({ data: postdata, rules: this.formOptions.items });


        // 提交数据
        this.$mk.post({
          url: action,
          loading: "保存中...",
          data: postdata,
          useBigInt: true,
        }).then(() => { // 成功回调
          this.$mk.success("保存成功");
          if (!this.isEdit) { // 如果是新增模式，关闭当前页面
            this.back();
          }
        }).catch((a) => { // 失败回调
          this.$mk.error(a.data.msg); // 显示错误信息
        });


      };


      // 验证表单
      this.$mk.validateForm({ form: this.$refs.xForm }).then(() => { // 验证表单
        save(); // 提交保存
      }).catch(count => { // 验证失败
        this.$mk.error(`存在${count}项错误，请检查`);
      });


    },


    // 取消 返回
    cancel() {
      this.back();
    }
  },
  // 监听属性
  watch: {

  }
};

</script>


<style scoped lang="less">
.page-body {
  padding: 30px;
  background: @base-bg-color;
}

.formtabs .ant-tabs-tabpane {
  /* background: white; */
  padding: 12px;
}

.gridPanel {
  height: calc(100vh - 600px);
}

.footerbar {
  padding-left: 10px;
}

.imagePanel {
  cursor: pointer;
  padding: 10px;
  width: 100px;
  img {
    width: 80px;
    height: 80px;
  }
}
</style>
