<!--
 * @Author: zhp
 * @Date: 2023-10-17 16:50:19
 * @LastEditTime: 2023-10-20 14:13:39
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <el-dialog :visible.sync="visible" :show-close="false" :wrapper-closable="false" width="30%">
    <small-title slot="title" :no-padding="true">
      {{ !dataForm.id ? '新增' : '编辑' }}
    </small-title>

    <div class="content">
      <div class="visual-part">
        <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px"
          @keyup.enter.native="dataFormSubmit">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="模板名称" prop="name">
                <el-input v-model="dataForm.name" clearable placeholder="请输入模板名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签类型" prop="typeId">
                <el-select v-model="dataForm.typeId" style="width: 100%;" placeholder="请选择打印方式">
                  <el-option v-for="dict in typeList" clearable :key="dict.id" :label="dict.name" :value="dict.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="打印方式" prop="printModel">
                <el-select v-model="dataForm.printModel" style="width: 100%;" placeholder="请选择打印方式">
                  <el-option v-for="dict in printModelList" clearable :key="dict.id" :label="dict.name"
                    :value="dict.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签备注" prop="remark">
                <el-input v-model="dataForm.remark" clearable placeholder="请输入标签备注" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="模板设计" prop="content">
                <el-button type="primary" @click="btnClickDesign()">模板设计</el-button>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="单位平方数" prop="area">
                <el-input v-model="dataForm.area" placeholder="请输入单位平方数" />
              </el-form-item>
            </el-col> -->
          </el-row>
          <!-- <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="完成单位产品用时" prop="processTime">
                <el-input v-model="dataForm.processTime" placeholder="请输入完成单位产品用时" />
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>

        <!-- <small-title
					style="margin: 16px 0; padding-left: 8px"
					:no-padding="true">
					产品属性列表
				</small-title>

				<div class="attr-list">
					<base-table
						:table-props="tableProps"
						:page="listQuery.pageNo"
						:limit="listQuery.pageSize"
						:add-button-show="isdetail ? null : '添加属性'"
						@emitButtonClick="addNew()"
						:table-data="productAttributeList">
						<method-btn
							v-if="!isdetail"
							slot="handleBtn"
							:width="120"
							label="操作"
							:method-list="tableBtn"
							@clickBtn="handleClick" />
					</base-table>
					<pagination
						v-show="listQuery.total > 0"
						:total="listQuery.total"
						:page.sync="listQuery.pageNo"
						:limit.sync="listQuery.pageSize"
						:page-sizes="[5, 10, 15]"
						@pagination="getList" />
				</div> -->
      </div>
    </div>

    <!-- <div style="position: absolute; bottom: 24px; right: 24px">
			<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
			<el-button v-if="isdetail" type="primary" @click="goEdit()">
				编辑
			</el-button>
			<span v-if="!isdetail">
				<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
				<el-button
					v-if="dataForm.id && !isdetail"
					type="primary"
					@click="addNew()">
					添加属性
				</el-button>
			</span>
		</div> -->
    <template slot="footer">
      <el-button style="" @click="goback()">取消</el-button>
      <!-- <el-button v-if="isdetail" type="primary" @click="goEdit()">
				编辑
			</el-button> -->
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </template>
    <print-model-design v-if="modelShow" ref="printModelDesign" @saveData="getModelData" />
  </el-dialog>
</template>

<script>

import {
  createPackingModel,
  updatePackingModel,
  getPackingModel,
  // getWorkOrderList,
  // getCode,
  // getCustomerList,
  getTypeList
} from '@/api/base/printModel.js';
// import productAttrAdd from './attr-add';
import { parseTime } from '../mixins/code-filter';
import SmallTitle from './SmallTitle';
import printModelDesign from '../custom/index'

const tableBtn = [
	{
		type: 'edit',
		btnName: '编辑',
	},
	{
		type: 'delete',
		btnName: '删除',
	},
];
const tableProps = [
	{
		prop: 'createTime',
		label: '添加时间',
		filter: parseTime,
	},
	{
		prop: 'name',
		label: '属性名',
	},
	{
		prop: 'value',
		label: '属性值',
	},
];

export default {
  components: { SmallTitle, printModelDesign },
	data() {
		return {
			visible: false,
			addOrUpdateVisible: false,
			tableBtn,
      tableProps,
      modelShow:false,
      typeList:[],
			dataForm: {
				id: null,
				// name: '', // 产品名称
        name: '', // 产品编码
				// area: 0, // 单位平方数(float only)
        typeId: null, // 产品类型id
        printModel: null, // 单位产品用时 (s)
        content: '', // 规格
        remark: '', // 单位id
      },
      printModelList: [
        {
          id: 1,
          name:'自动'
        },
        {
          id: 2,
          name: '手动'
        },
      ],
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 0,
			},
			dataRule: {
        typeId: [
					{
						required: true,
						message: '打印类型不能为空',
						trigger: 'blur',
					},
					// {
					// 	type: 'number',
					// 	message: '产品编码为数字类型',
					// 	trigger: 'blur',
					// 	transfom: 'val => Number(val)',
					// },
				],
				name: [
					{
						required: true,
						message: '模板名称不能为空',
						trigger: 'blur',
					},
				],
        printModel: [
					{
						required: true,
						message: '模板类型不能为空',
						trigger: 'blur',
					},
				],
				content: [
          {
            required: true,
            message: '模板不能为空',
            trigger: 'blur',
          },
				],
				processTime: [
					{
						required: true,
						message: '完成单位产品用时不能为空',
						trigger: 'blur',
					},
					{
						type: 'number',
						message: '请输入正确的数值',
						trigger: 'blur',
						transform: (val) => Number(val),
					},
				],
			},
			// isdetail: false,
		};
  },
  methods: {
    getModelData(data) {
      console.log(data)
      this.content = JSON.stringify(data)
      this.dataForm.content = JSON.stringify(data)
    },
    btnClickDesign() {
      console.log(11111)
      this.modelShow = true
      this.$nextTick(() => {
        this.$refs.printModelDesign.init(this.dataForm.content)
        console.log(this.dataForm.content)
      })
      // this.$router.push({
      //   path: '/printModelDesign'
      // })
    },
		// initData() {
		// 	this.productAttributeList.splice(0);
		// 	this.listQuery.total = 0;
		// },
    init(id) {
      this.getDict()
			// this.initData();
			// this.isdetail = isdetail || false;
			this.dataForm.id = id || null;
			this.visible = true;

			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();

				if (this.dataForm.id) {
					// 获取产品详情
          getPackingModel(id).then((response) => {
						this.dataForm = response.data;
					});
					// 获取产品的属性列表
					// this.getList();
				} else {
					// getCode().then((res) => {
          //   this.dataForm.packagingCode = res.data;
					// });
				}
			});
		},

		getDict() {
      // 获取产品的属性列表
      // getCustomerList().then((response) => {
      //   console.log(response);
      //   this.customerList = response.data
      //   // this.listQuery.total = response.data.total;
      // })
      getTypeList().then((response) => {
        console.log(response);
        this.typeList = response.data
        // this.listQuery.total = response.data.total;
      })
      // getWorkOrderList().then((response) => {
      //   // console.log(response);
      //   this.workOrderList = response.data
			// 	// this.listQuery.total = response.data.total;
			// })
		},
		// handleClick(raw) {
		// 	if (raw.type === 'delete') {
		// 		this.$confirm(
		// 			`确定对${
		// 				raw.data.name
		// 					? '[名称=' + raw.data.name + ']'
		// 					: '[序号=' + raw.data._pageIndex + ']'
		// 			}进行删除操作?`,
		// 			'提示',
		// 			{
		// 				confirmButtonText: '确定',
		// 				cancelButtonText: '取消',
		// 				type: 'warning',
		// 			}
		// 		)
		// 			.then(() => {
		// 				deleteProductAttr(raw.data.id).then(({ data }) => {
		// 					this.$message({
		// 						message: '操作成功',
		// 						type: 'success',
		// 						duration: 1500,
		// 						onClose: () => {
		// 							this.getList();
		// 						},
		// 					});
		// 				});
		// 			})
		// 			.catch(() => {});
		// 	} else {
		// 		this.addNew(raw.data.id);
		// 	}
		// },
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					// 修改的提交
					if (this.dataForm.id) {
            updatePackingModel(this.dataForm).then((response) => {
							this.$modal.msgSuccess('修改成功');
							this.visible = false;
							this.$emit('refreshDataList');
						});
						return;
					}
					// 添加的提交
          createPackingModel(this.dataForm).then((response) => {
						this.$modal.msgSuccess('新增成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
				}
			});
		},
		// goEdit() {
		// 	this.isdetail = false;
		// },
		// // 新增 / 修改
		// addNew(id) {
		// 	this.addOrUpdateVisible = true;
		// 	this.$nextTick(() => {
		// 		this.$refs.addOrUpdate.init(id);
		// 	});
		// },
		goback() {
			this.$emit('refreshDataList');
			this.visible = false;
			// this.initData();
		},
	},
};
</script>

<!-- <style scoped>
.drawer >>> .el-drawer {
	border-radius: 8px 0 0 8px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .el-form-item__label {
	padding: 0;
}

.drawer >>> .el-drawer__header {
	margin: 0;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #dcdfe6;
}
.drawer >>> .el-drawer__body {
	flex: 1;
	height: 1px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .content {
	padding: 30px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	/* height: 100%; */
}

.drawer >>> .visual-part {
	flex: 1 auto;
	max-height: 76vh;
	overflow: hidden;
	overflow-y: scroll;
	padding-right: 10px; /* 调整滚动条样式 */
}

.drawer >>> .el-form,
.drawer >>> .attr-list {
	padding: 0 16px;
}

.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 18px;
}
</style> -->
