<template>
  <div class="add-product-wrapper">
    <el-form label-width="108px" :model="form" ref="form" :rules="rules">

      <el-card style="margin: 20px 20px; font-size: 14px">

        <el-col  :span="24">
          <el-form-item label="所属宠物ID" prop="petId">
            <el-input v-model="form.petId"
                      oninput ="value=value.replace(/[^\d]/g,'')"
            placeholder="请输入所属宠物ID" />
          </el-form-item>
        </el-col>
        <div slot="header">
          <span>喂养要求</span>
        </div>
        <el-col  :span="24">
          <el-form-item label="是否有喂养要求" prop="feed">
            <el-switch v-model="form.feedRequirements">是否有喂养要求</el-switch>
          </el-form-item>
        </el-col>
        <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.feedRequirements">
          <el-col  :span="24">
          <el-form-item label="是否包含干粮" prop="includeDryFood">
              <el-switch v-model="form.includeDryFood">是否包含干粮</el-switch>
          </el-form-item>
          </el-col>
          <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.includeDryFood">
            <el-col  :span="6">
              <el-form-item label="干粮摆放位置" prop="dryFoodLocation">
                <oss-image-upload v-model="form.dryFoodLocation" :limit="1"></oss-image-upload>
              </el-form-item>
            </el-col>
            <el-col  :span="12">
              <el-form-item label="干粮喂养重量" prop="dryFoodFeedWeight">
                <el-input v-model="form.dryFoodFeedWeight"
                          oninput ="value=value.replace(/[^0-9.]/g,'')"
                placeholder="请输入干粮喂养重量" />
              </el-form-item>
              <el-form-item label="干粮喂养批次_天" prop="dryFoodFeedFrequencyDays">
                <el-input v-model="form.dryFoodFeedFrequencyDays"
                          oninput ="value=value.replace(/[^\d]/g,'')"
                          placeholder="请输入干粮喂养批次_天" />
              </el-form-item>
              <el-form-item label="干粮喂养批次_次" prop="dryFoodFeedFrequencyTimes">
                <el-input v-model="form.dryFoodFeedFrequencyTimes"
                          oninput ="value=value.replace(/[^\d]/g,'')"
                          placeholder="请输入干粮喂养批次_次" />
              </el-form-item>
              <el-form-item label="干粮备注" prop="dryFoodRemarks">
                <el-input v-model="form.dryFoodRemarks" placeholder="请输入干粮备注" />
              </el-form-item>
            </el-col>
          </el-card>
          <el-col  :span="24">
            <el-form-item label="是否包含湿粮" prop="includeWetFood">
              <el-switch v-model="form.includeWetFood">是否包含干粮</el-switch>
            </el-form-item>
          </el-col>
          <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.includeWetFood">
            <el-col  :span="6">
              <el-form-item label="湿粮摆放位置" prop="wetFoodLocation">
                <oss-image-upload v-model="form.wetFoodLocation" :limit="1"></oss-image-upload>
              </el-form-item>
            </el-col>
            <el-col  :span="12">
              <el-form-item label="湿粮喂养重量" prop="wetFoodFeedWeight">
                <el-input v-model="form.wetFoodFeedWeight"
                          oninput ="value=value.replace(/[^0-9.]/g,'')"
                          placeholder="请输入湿粮喂养重量" />
              </el-form-item>
              <el-form-item label="湿粮喂养批次_天" prop="wetFoodFeedFrequencyDays">
                <el-input v-model="form.wetFoodFeedFrequencyDays"
                          oninput ="value=value.replace(/[^\d]/g,'')"
                          placeholder="请输入湿粮喂养批次_天" />
              </el-form-item>
              <el-form-item label="湿粮喂养批次_次" prop="wetFoodFeedFrequencyTimes">
                <el-input v-model="form.wetFoodFeedFrequencyTimes"
                          oninput ="value=value.replace(/[^\d]/g,'')"
                          placeholder="请输入湿粮喂养批次_次" />
              </el-form-item>
              <el-form-item label="湿粮备注" prop="wetFoodRemarks">
                <el-input v-model="form.wetFoodRemarks" placeholder="请输入湿粮备注" />
              </el-form-item>
            </el-col>
          </el-card>

          <el-col  :span="24">
            <el-form-item label="是否包含自制食品" prop="includeHomemadeFood">
              <el-switch v-model="form.includeHomemadeFood">是否包含自制食品</el-switch>
            </el-form-item>
          </el-col>
          <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.includeHomemadeFood">
            <el-col  :span="6">
              <el-form-item label="自制食品摆放位置" prop="homemadeFoodLocation">
                <oss-image-upload v-model="form.homemadeFoodLocation" :limit="1"></oss-image-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="自制饭制作和喂食说明" prop="homemadeFoodInstructions">
                <el-input v-model="form.homemadeFoodInstructions" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-card>

          <el-col  :span="24">
            <el-form-item label="是否包含生骨肉" prop="includeRawMeat">
              <el-switch v-model="form.includeRawMeat">是否包含生骨肉</el-switch>
            </el-form-item>
          </el-col>
          <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.includeRawMeat">
            <el-col  :span="24">
              <el-form-item label="生骨肉摆放位置" prop="rawMeatLocation">
                <oss-image-upload v-model="form.rawMeatLocation" :limit="1"></oss-image-upload>
              </el-form-item>
              <el-form-item label="生骨肉喂食说明" prop="rawMeatFeedingInstructions">
                <el-input v-model="form.rawMeatFeedingInstructions" type="textarea" placeholder="请输入内容" />
              </el-form-item>
              </el-col>
          </el-card>

          <el-col  :span="24">
            <el-form-item label="是否包含保健品" prop="includeHealthSupplements">
              <el-switch v-model="form.includeHealthSupplements">是否包含保健品</el-switch>
            </el-form-item>
          </el-col>
          <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.includeHealthSupplements">
            <el-col  :span="24">
              <el-form-item label="保健品摆放位置" prop="healthSupplementsLocation">
                <oss-image-upload v-model="form.healthSupplementsLocation" :limit="1"></oss-image-upload>
              </el-form-item>
              <el-form-item label="保健品喂养方式说明" prop="healthSupplementsFeedingInstructions">
                <el-input v-model="form.healthSupplementsFeedingInstructions" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-card>

          <el-col  :span="24">
            <el-form-item label="是否包含零食" prop="includeSnacks">
              <el-switch v-model="form.includeSnacks">是否包含保健品</el-switch>
            </el-form-item>
          </el-col>
          <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.includeSnacks">
            <el-col  :span="24">
              <el-form-item label="零食摆放位置" prop="snacksLocation">
                <oss-image-upload v-model="form.snacksLocation" :limit="1"></oss-image-upload>
              </el-form-item>
              <el-form-item label="零食喂养方式" prop="snacksFeedingMethod">
                <el-input v-model="form.snacksFeedingMethod" placeholder="请输入零食喂养方式" />
              </el-form-item>
              <el-form-item label="其它备注" prop="otherRemark">
                <el-input v-model="form.otherRemark" placeholder="请输入其它备注" />
              </el-form-item>
            </el-col>
          </el-card>


          <el-card style="margin: 20px 20px; font-size: 14px">
            <el-col  :span="24">
              <el-form-item label="食盆/自动喂食器摆放位置" prop="feedingTrayAutomaticFeederLocation">
                <oss-image-upload v-model="form.feedingTrayAutomaticFeederLocation" :limit="1"></oss-image-upload>
              </el-form-item>
              <el-form-item label="其他信息" prop="feedingTrayAutomaticFeederRemarks">
                <el-input v-model="form.feedingTrayAutomaticFeederRemarks" placeholder="请输入其他信息" />
              </el-form-item>
            </el-col>
          </el-card>

          <el-card style="margin: 20px 20px; font-size: 14px">
            <el-col  :span="24">
            <el-form-item label="饮用水摆放位置" prop="waterBowlLocation">
              <oss-image-upload v-model="form.waterBowlLocation" :limit="1"></oss-image-upload>
            </el-form-item>
            <el-form-item label="饮用水添加要求" prop="waterBowlRemarks">
              <el-input v-model="form.waterBowlRemarks" placeholder="请输入饮用水添加要求" />
            </el-form-item>
            </el-col>
          </el-card>
      </el-card>
      </el-card>
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>清洁要求</span>
        </div>
        <el-col  :span="24">
          <el-form-item label="是否有清洁要求" prop="cleaningRequirements">
            <el-switch v-model="form.cleaningRequirements">是否有清洁要求</el-switch>
          </el-form-item>
        </el-col>
        <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.cleaningRequirements">
          <el-col  :span="24">
            <el-card style="margin: 20px 20px; font-size: 14px">
              <el-col  :span="24">
                <el-form-item label="厕所、猫砂摆放位置" prop="litterBoxLocation">
                  <oss-image-upload v-model="form.litterBoxLocation" :limit="1"></oss-image-upload>
                </el-form-item>
                <el-form-item label="猫砂更换频次_天" prop="litterBoxChangeFrequencyDays">
                  <el-input v-model="form.litterBoxChangeFrequencyDays"
                            oninput ="value=value.replace(/[^\d]/g,'')"
                            placeholder="请输入猫砂更换频次_天" />
                </el-form-item>
                <el-form-item label="猫砂更换频次_次" prop="litterBoxChangeFrequencyTimes">
                  <el-input v-model="form.litterBoxChangeFrequencyTimes"
                            oninput ="value=value.replace(/[^\d]/g,'')"
                            placeholder="请输入猫砂更换频次_次" />
                </el-form-item>
                <el-form-item label="其他信息" prop="litterBoxRemarks">
                  <el-input v-model="form.litterBoxRemarks" placeholder="请输入其他信息" />
                </el-form-item>
              </el-col>
            </el-card>
            <el-card style="margin: 20px 20px; font-size: 14px">
              <el-col  :span="24">
                <el-form-item label="尿垫摆放位置" prop="peePadLocation">
                  <oss-image-upload v-model="form.peePadLocation" :limit="1"></oss-image-upload>
                </el-form-item>
                <el-form-item label="是否更换尿垫" prop="changePeePad">
                  <el-switch v-model="form.changePeePad">是否更换尿垫</el-switch>
                </el-form-item>
                <el-form-item label="尿垫备注" prop="peePadRemarks">
                  <el-input v-model="form.peePadRemarks" placeholder="请输入尿垫备注" />
                </el-form-item>
              </el-col>
            </el-card>
          </el-col>
        </el-card>

      </el-card>

      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>遛狗要求</span>
        </div>
        <el-col  :span="24">
          <el-form-item label="是否有遛狗要求" prop="walkDog">
            <el-switch v-model="form.walkDog">是否有遛狗要求</el-switch>
          </el-form-item>
        </el-col>
        <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.walkDog">
          <el-col  :span="24">
            <el-card style="margin: 20px 20px; font-size: 14px">
              <el-col  :span="24">
                <el-form-item label="遛狗用品摆放位置" prop="walkDogToolsLocation">
                  <oss-image-upload v-model="form.walkDogToolsLocation" :limit="1"></oss-image-upload>
                </el-form-item>
                <el-form-item label="下雨天是否遛狗" prop="walkDogRainyDay">
                  <el-switch v-model="form.walkDogRainyDay">下雨天是否遛狗</el-switch>
                </el-form-item>
                <el-form-item label="遛狗时长" prop="litterBoxChangeFrequencyTimes">
                  <el-input v-model="form.walkDogDuration"
                            oninput ="value=value.replace(/[^\d]/g,'')"
                            placeholder="请输入遛狗时长" />
                </el-form-item>
                <el-form-item label="狗狗行为" prop="dogBehavior">
                  <el-input v-model="form.dogBehavior" placeholder="请输入狗狗行为" />
                </el-form-item>
                <el-form-item label="偏好区域" prop="favoriteRegion">
                  <el-input v-model="form.favoriteRegion" placeholder="请输入偏好区域" />
                </el-form-item>
                <el-form-item label="偏好路线" prop="favoriteRoute">
                  <el-input v-model="form.favoriteRoute" placeholder="请输入偏好路线" />
                </el-form-item>
              </el-col>
            </el-card>
          </el-col>
        </el-card>

      </el-card>

      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>附加服务</span>
        </div>
        <el-col  :span="24">
          <el-form-item label="是否选择附加服务" prop="additionalService">
            <el-switch v-model="form.additionalService">是否选择附加服务</el-switch>
          </el-form-item>
        </el-col>
        <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.additionalService">
          <el-col  :span="24">
            <el-card style="margin: 20px 20px; font-size: 14px">
              <el-col  :span="24">
                <el-form-item label="是否选择陪玩服务" prop="playtimeService">
                  <el-switch v-model="form.playtimeService">是否选择陪玩服务</el-switch>
                </el-form-item>
                <el-card style="margin: 20px 20px; font-size: 14px" v-show="form.playtimeService">
                  <el-col  :span="24">
                    <el-form-item label="陪玩用具摆放位置" prop="playtimeToolsLocation">
                      <oss-image-upload v-model="form.playtimeToolsLocation" :limit="1"></oss-image-upload>
                    </el-form-item>
                    <el-form-item label="希望的互动方式和要求" prop="playtimeRequirements">
                      <el-input v-model="form.playtimeRequirements" type="textarea" placeholder="请输入内容" />
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>
            </el-card>
            <el-card style="margin: 20px 20px; font-size: 14px">
              <el-col  :span="24">
                <el-form-item label="是否选择活动区吸毛" prop="furCleaningService">
                  <el-switch v-model="form.furCleaningService">是否选择活动区吸毛</el-switch>
                </el-form-item>
                <el-card style="margin: 20px 20px; font-size: 14px"  v-show="form.furCleaningService">
                  <el-col  :span="24">
                    <el-form-item label="吸毛用品摆放位置" prop="furCleaningToolsLocation">
                      <oss-image-upload v-model="form.furCleaningToolsLocation" :limit="1"></oss-image-upload>
                    </el-form-item>
                    <el-form-item label="请说明吸毛区和要求" prop="furCleaningRequirements">
                      <el-input v-model="form.furCleaningRequirements" type="textarea" placeholder="请输入内容" />
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>
            </el-card>
            <el-card style="margin: 20px 20px; font-size: 14px">
              <el-col  :span="24">
                <el-form-item label="是否选择毛发梳理" prop="groomingService">
                  <el-switch v-model="form.groomingService">是否选择毛发梳理</el-switch>
                </el-form-item>
                <el-card style="margin: 20px 20px; font-size: 14px"  v-show="form.groomingService">
                  <el-col  :span="24">
                    <el-form-item label="毛发梳理用品摆放位置" prop="groomingToolsLocation">
                      <oss-image-upload v-model="form.groomingToolsLocation" :limit="1"></oss-image-upload>
                    </el-form-item>
                    <el-form-item label="请说明毛发梳理要求" prop="groomingRequirements">
                      <el-input v-model="form.groomingRequirements" type="textarea" placeholder="请输入内容" />
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>
            </el-card>


            <el-card style="margin: 20px 20px; font-size: 14px">
              <el-col  :span="24">
                <el-form-item label="是否选择食具深度清洁" prop="deepCleaningService">
                  <el-switch v-model="form.deepCleaningService"></el-switch>
                </el-form-item>
                <el-card style="margin: 20px 20px; font-size: 14px"  v-show="form.deepCleaningService">
                  <el-col  :span="24">
                    <el-form-item label="需深度清洁用具及消毒剂摆放位置" prop="deepCleaningToolsLocation">
                      <oss-image-upload v-model="form.deepCleaningToolsLocation" :limit="1"></oss-image-upload>
                    </el-form-item>
                    <el-form-item label="食具深度清洁备注" prop="deepCleaningRemarks">
                      <el-input v-model="form.deepCleaningRemarks" placeholder="请输入食具深度清洁备注" />
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>
            </el-card>


            <el-card style="margin: 20px 20px; font-size: 14px">
              <el-col  :span="24">
                <el-form-item label="是否选择喂药上药" prop="administerMedication">
                  <el-switch v-model="form.administerMedication"></el-switch>
                </el-form-item>
                <el-card style="margin: 20px 20px; font-size: 14px"  v-show="form.administerMedication">
                  <el-col  :span="24">
                    <el-form-item label="药品摆放位置" prop="administerMedicationLocation">
                      <oss-image-upload v-model="form.administerMedicationLocation" :limit="1"></oss-image-upload>
                    </el-form-item>
                    <el-form-item label="喂药上药备注" prop="administerMedicationRemarks">
                      <el-input v-model="form.administerMedicationRemarks" placeholder="喂药上药备注" />
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>
            </el-card>



            <el-card style="margin: 20px 20px; font-size: 14px">
              <el-col  :span="24">
                <el-form-item label="附加服务用品摆放位置" prop="additionalServicesPlacement">
                  <oss-image-upload v-model="form.additionalServicesPlacement" :limit="1"></oss-image-upload>
                </el-form-item>
                <el-form-item label="附加服务用品摆放备注" prop="additionalServicesPlacementRemark">
                  <el-input v-model="form.additionalServicesPlacementRemark" placeholder="请输入附加服务用品摆放备注" />
                </el-form-item>

                <el-form-item label="服务用品摆放备注" prop="additionalServicesRemarks">
                  <el-input v-model="form.additionalServicesRemarks" placeholder="请输入服务用品摆放备注" />
                </el-form-item>
              </el-col>
            </el-card>
          </el-col>
        </el-card>
      </el-card>
      <div class="tc">
        <el-button type="primary" @click="submitForm">{{ buttonLabel }}</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {addPmsProduct, getPmsProduct, updatePmsProduct} from "@/api/pms/product";
import ProductCategorySelect from "@/views/components/ProductCategorySelect";
import BrandSelect from "@/views/components/BrandSelect";
import {addPetCare, getPetCare, updatePetCare} from "@/api/ums/petCare";

export default {
  name: "AddPetCare",
  dicts: ['pms_publish_status'],
  components: {BrandSelect, ProductCategorySelect},
  data() {
    return {
       buttonLabel: '确 定', // 默认按钮标签
       rules: {
         petId: [
            { required: true, message: '请选择宠物', trigger: 'blur' },
          ],
       },
      form: {
         publishStatus: 0,
         sort: 1000
      },
      skuAttr:[],
      albumPics:null,
      productAttr: [
        {
          name: '颜色',
          options: [
            {name: '红'},
            {name: null}
          ]
        }
      ],
      maxOptionNum: 44
    }
  },
  created() {
    const {id} = this.$route.query
    if (id) {
      this.getInfo(id);
      this.buttonLabel = '修 改'; // 修改按钮标签
    }
  },
  methods: {
    refreshSku(){
      let skus = [];
      let skuMap = new Map()
      this.skuAttr=[...this.productAttr]
      if(this.form.skuList){
        this.form.skuList.forEach(sku=>{
          skuMap.set(sku.spData,sku)
        })
      }
      this.productAttr.forEach((attr, index) => {
        const attrSku = [];
        attr.options.forEach((option) => {
          if (!option.name) {
            return
          }
          if (index === 0) {
            attrSku.push({[attr.name]: option.name});
          } else {
            skus.forEach(it3 => {
              attrSku.push({...it3, [attr.name]: option.name })
            })
          }
        })
        skus = attrSku;
      })
      skus.forEach(it => {
        if(it){
          it.spData=JSON.stringify(it)
        }
      })
      skus.forEach(it => {
        let sku = skuMap.get(it.spData);
        if(sku){
          it.outSkuId = sku.outSkuId;
          it.price = sku.price;
          it.pic = sku.pic;
          it.stock = sku.stock;
          it.id = sku.id
        }else{
          it.outSkuId = null;
          it.price = null;
          it.pic = null;
          it.stock = null;
          it.id = null
        }

      })
      this.form.productAttr = JSON.stringify(this.productAttr)
      this.form.skuList= skus
    },
    categoryChange(value){
      if(Array.isArray(value)){
        console.log(value.toString())
        this.form.productCategoryName=value.toString()
      }else{
        this.form.productCategoryName=null
      }

    },
    onBrandChange(value){
      this.form.brandName = value
    },
    getInfo(id) {
      getPetCare(id).then(response => {
        this.form = response.data;
        console.log("-------------------------");
        console.log(response);
        if(this.form.productAttr){
          this.productAttr =JSON.parse(this.form.productAttr)
        }
        // this.refreshSku()
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            // 弹出确认框
            this.$confirm('确定要修改服务档案信息吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 用户确认后执行修改操作
              updatePetCare(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.cancel(); // 操作完成后取消
              });
            }).catch(() => {
              // 用户取消时的处理（可选）
              this.$modal.msgInfo("已取消修改");
            });
          } else {
            addPetCare(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
            });
          }
        }else{
          this.$alert('输入宠物ID', '提示', {
            confirmButtonText: '确定',
          });
        }
      });
    },
    cancel() {
      this.$tab.closeOpenPage({ path: '/member/petCare' })
    },
    changeName(s, idx, val) {
      s.options[idx].name = val;
      if (s.options.length - 1 !== idx || s.options.length >= this.maxOptionNum) {
        return
      }
      s.options.push({name: null})
    },
    addSkuSort() {
      this.productAttr.push({
        name: null,
        options: [{name: null}]
      })
    },
    deleteSkuSort(idx) {
      this.productAttr.splice(idx);
    },
    deleteOption(s, idx) {
      s.options.splice(idx, 1);
    }
  }
}
</script>

<style lang="stylus">
.add-product-wrapper
  padding 12px
  .content
    margin 0 auto
    width 75%
    min-width 800px
  .sku-wrapper
    background-color #f7f8fa
    padding 12px
    .sku_sorts
      .sku_sort
        background-color white
        margin-bottom 12px
        .label
          padding 8px
        .values
          padding 8px 0 0 8px
          border-top 1px solid $border-color
          display flex
          flex-wrap wrap
          .value
            padding 0 32px 8px 0
            width 200px!important
            display flex
            align-items center
  .img-upload-mini .el-upload--picture-card
    width: 48px;
    height: 48px;
    line-height: 57px;
</style>
