<template>
  <div class="app-container" style="display: flex">
    <div style="flex: 1; padding-right: 20px">
      <h1>服装吊牌</h1>
      <el-divider />
      <el-form :model="form" ref="subForm">
        <el-form-item prop="genre">
          <el-radio-group v-model="form.genre">
            <el-radio size="large" :key="0" :label="0">常规</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="title">材质</div>
        <el-form-item prop="material">
          <el-radio-group v-model="form.material">
            <el-radio v-for="item in material_data" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="display: flex; align-items: center">
          <div class="title">尺寸(CM/厘米)</div>
          <span style="color: rgb(248, 9, 9); font-size: 14px; font-weight: bold">输入格式: 长 * 宽</span>
        </div>
        <div style="display: flex">
          <el-form-item prop="size">
            <el-input v-model="form.size" placeholder="格式：长*宽" />
          </el-form-item>
          <el-form-item prop="isMulti" style="margin-left: 50px">
            <el-radio-group v-model="form.isMulti">
              <el-radio :key="true" :label="true">组合</el-radio>
              <el-radio :key="false" :label="false">单面</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item prop="size2" v-if="form.isMulti">
          <el-input v-model="form.size2" placeholder="格式：长*宽" />
        </el-form-item>
        <div class="title">数量(张)</div>
        <el-form-item prop="count">
          <el-input v-model="form.count" placeholder="请输入整数" />
        </el-form-item>
        <div class="title">款数</div>
        <el-form-item prop="number">
          <el-input v-model="form.number" placeholder="请输入整数" />
        </el-form-item>
        <div class="title">客户旺旺</div>
        <el-form-item prop="wangwang">
          <el-input v-model="form.wangwang" placeholder="请输入客户旺旺" />
        </el-form-item>
        <div class="title">工艺</div>
        <div style="display: flex; align-items: center">
          <el-form-item prop="productSlice" v-if="form.material == 0" class="border-right">
            <el-radio-group v-model="form.productSlice" size="large">
              <el-radio v-for="item in productSlice_data" size="large" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="productMembrane" v-if="form.material == 0" class="border-right">
            <el-radio-group v-model="form.productMembrane">
              <el-radio v-for="item in productMembrane_data" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="technique">
            <el-radio-group v-model="form.technique">
              <template v-for="item in technique_data">
                <el-radio :key="item.value" :label="item.value" v-if="!item.require || item.require.material == form.material">{{ item.name }}</el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item prop="isRope" v-if="form.material == 1">
          <el-radio-group v-model="form.isRope">
            <el-radio :key="true" :label="true">加棉绳</el-radio>
            <el-radio :key="false" :label="false">不加棉绳</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-divider />
      <div style="display: flex">
        <el-button @click="computeProduct">计算</el-button>
        <el-button type="primary">充值</el-button>
      </div>

      <ExpressFee />
    </div>
    <div style="flex: 1; background-color: rgb(5, 38, 66)">
      <h3>服装吊牌</h3>
    </div>
  </div>
</template>
<script setup>
import ExpressFee from '@/components/ExpressFee/index.vue';
const material_data = [
  { value: 0, name: '350克铜版纸' },
  { value: 1, name: '600克铜版纸' },
];
const productSlice_data = [
  { value: 1, name: '直角打孔' },
  { value: 3, name: '异形模切' },
];
const productMembrane_data = [
  { value: 0, name: '不覆膜' },
  { value: 1, name: '双面覆哑膜' },
];
const technique_data = [
  { value: 0, name: '无工艺' },
  { value: 1, name: '单面烫金' },
  { value: 2, name: '凹凸' },
  { value: 3, name: '双面烫金', require: { material: 1 } },
  { value: 4, name: '单面烫金+凹凸', require: { material: 0 } },
];
const count = [200, 500, 1000, 2000, 3000, 4000, 5000, 10000];
const form = ref({
  genre: 0,
  material: 0,
  size: undefined,
  isMulti: false,
  size2: undefined,
  count: undefined,
  modelsNumber: 1,
  wangwang: undefined,
  productSlice: 1,
  productMembrane: 1,
  technique: 0,
  isRope: undefined,
});

function computeProduct() {
  let submit_data = {};

  if (form.value.material == 0) {
    let { material, size, isMulti, size2, count, modelsNumber, productSlice, productMembrane, technique, wangwang } = form.value;
    submit_data = { material, size, isMulti, size2, count, modelsNumber, productSlice, productMembrane, technique, wangwang };
  }
  compute({ productEnum: 0, productClothingTag: submit_data }).then(res => {
    console.log('🚀 ~ file: clothingTag.vue:128 ~ compute ~ res:', res);
  });
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 28px;
  font-weight: bold;
}
.border-right {
  border-right: 1px solid #ccc;
  margin-right: 10px;
  padding-right: 10px;
}
</style>
