<template>
   <div class="g-main">
      <el-form :inline="true" :label-position="labelPosition" :model="formData" :rules="rules"
         style="overflow: scroll;">
         <el-row>
            <el-col :span="12">
               <el-form-item label="标题" label-width="150px" required>
                  <el-input class="item_width_1" v-model="formData.awardName" placeholder="请输入内容"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="分类" required label-width="150px">
                  <el-select class="item_width_1" v-model="formData.classKey" placeholder="请选择">
                     <el-option v-for="item in TypeList" :key="item.classKey" :label="item.className"
                        :value="item.classKey">
                     </el-option>
                  </el-select>
               </el-form-item>
            </el-col>

            <el-col :span="12">
               <el-form-item label="发布范围" label-width="150px" required>
                  <el-cascader class="list_item_width_1" ref="myCascader" clearable size="small" style="width:300px ;"
                     v-model.trim="formData.redeemerOrgId" :options="orgOptions" :props="orgOptionProps"
                     @change="handleChangeAgency"></el-cascader>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item required label="兑换积分" label-width="150px">
                  <el-input style="width:300px ;" v-model="formData.points" placeholder="请输入"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="赞助单位" label-width="150px">
                  <el-input v-model="formData.sponsorName" placeholder="请输入" style="width:300px ;"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="联系电话" label-width="150px" prop="sponsorMobile">
                  <el-input style="width:300px ;" v-model="formData.sponsorMobile" placeholder="请输入"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="库存" label-width="150px">
                  <div style="width:195px;height: 40px;" class="flex flex-x  flex-center2">
                     <el-radio v-model="radio" label="1" style="margin-right:20px">不限数目</el-radio>
                     <div class="flex flex-x  flex-center2">
                        <el-radio v-model="radio" label="2" style="margin-right: 10px;">自定义</el-radio>
                        <el-input v-if="radio == '2'" type="number" v-model="formData.stockQty" style="width: 125px;"
                           placeholder="请输入数量"></el-input>
                     </div>
                  </div>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="可兑换次数" label-width="150px">
                  <div style="height: 40px;" class="flex flex-x  flex-center2">
                     <el-input-number :disabled="checked" v-model.trim="formData.redeemTimesEveryone" :min="0"
                        label="描述文字" type="number"></el-input-number>
                     <el-checkbox style="margin-left: 20px;" v-model="checked">不限名额</el-checkbox>
                  </div>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="有效期至" label-width="150px">
                  <el-date-picker style="width:300px ;" v-model="formData.expireTime" type="datetime"
                     placeholder="请选择日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
               </el-form-item>
            </el-col>

            <el-col :span="12">
               <el-form-item label="星级专属"  label-width="150px">
                  <el-select class="item_width_1" v-model="formData.starLevel" placeholder="请选择">
                     <el-option v-for="item in starList" :key="item.id" :label="item.name" :value="item.id">
                     </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="级别" required label-width="150px">
                  <el-select class="item_width_1" v-model="formData.Servicelevel" placeholder="请选择">
                     <el-option v-for="item in serviceLevelList" :key="item.id" :label="item.name" :value="item.id">
                     </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
         

            <el-form-item :inline="true" required v-if="formData.classKey == 'zkq'" label="折扣" label-width="150px">
               <div class="item_width_2" style="display: flex;">
             
                  <el-input v-model="formData.worthAmount" placeholder="请输入折扣"></el-input>
                  <div>折</div>
               </div>
            </el-form-item>
            <el-form-item :inline="true" required v-if="formData.classKey == 'mjq'|| formData.classKey == 'cxdjq'" label="金额" label-width="150px">
               <div class="item_width_2" style="display: flex;">
                  <div>￥</div>
                  <el-input v-model="formData.worthAmount" placeholder="请输入"></el-input>
               </div>
            </el-form-item>
            <el-form-item required v-if="formData.classKey == 'hwjh'" label="原价" label-width="150px">
               <div style="display: flex;">
                  <div>￥</div>
                  <el-input v-model="formData.worthAmount" placeholder="请输入内容"></el-input>
               </div>
            </el-form-item>
            <el-col :span="12" v-if="formData.classKey == 'hwjh'">
               <el-form-item label="展示图" required label-width="150px" >
                  <template>
                                <upload-image :defaultFileList="fileList" :limit="3" @change="onChangeFileList"
                                    v-if="!showdisabled" @file-removed="removedImg"></upload-image>
                                <div v-else>
                                    <img v-for="(item, index) in this.formData.attrs" :key="index" :src="item.url" style="width: 100px; height: 100px;">
                                </div>
                            </template>
               </el-form-item>
            </el-col>
            <el-form-item label="规则说明" label-width="150px">
               <Tinymce style="width: 763px;" class="tinymce_view" v-model="formData.description" :height="250"
                  placeholder="请输入活动内容" />
            </el-form-item>
            <el-col :span="24">
               <el-form-item label="上架" label-width="150px" inline="false">
                  <el-switch v-model="formData.shelveStatus" active-color="#13ce66" inactive-color="" active-value="1"
                     inactive-value="0">
                  </el-switch>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <div class="flex  flex-center1 flex-center2">
         <el-button type="primary" @click="submitForm()">提交</el-button>
         <el-button @click="handlecancel">取消</el-button>
      </div>
   </div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import Tinymce from '@c/tinymce2/index.vue'
import UploadImage from '@/views/modules/plugins/rent/upload-image.vue'
export default {
   components: { Tinymce, UploadImage },
   name: "see",
   data() {
      return {
         checked:false,
         serviceLevelList: [
            {
               id: 3,
               name: "市区级"
            },
            {
               id: 4,
               name: "街道级"
            },
            {
               id: 5,
               name: "社区级"
            },
            {
               id: 99,
               name: "市场运营"
            }

         ],

         starList: [
            {
               id: 1,
               name: "一星"
            },
            {
               id: 2,
               name: "二星"
            },
            {
               id: 3,
               name: "三星"
            },
            {
               id: 4,
               name: "四星"
            },
            {
               id: 5,
               name: "五星"
            }

         ],
         fileList:[],
         formData: {
            imgAttachments:[],
            Servicelevel:"",
            starLevel:"",
            redeemTimesEveryone:'',
            level:'',
            rating:'',
            serviceLevel: "",
            classKey: "",
            awardName: "",
            worthAmount: "",
            points: "",
            redeemerOrgId: "",
            expireTime: "",
            description: "",
            stockQty: '',
            sponsorName: "",
            sponsorMobile: "",
            shelveStatus: ''
         },
         orgOptionProps: {
            value: 'agencyId',
            label: 'agencyName',
            children: 'subAgencyList',
            emitPath: false,
            multiple: false,
            checkStrictly: true
         },
         labelPosition: 'right',
         TypeList: [

         ],
         radio: '1',
         orgOptions: [],
         rules: {
            sponsorMobile: [
               { required: false, message: '联系电话不能为空', trigger: 'blur' },
               // { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
               { 
                    pattern: /^(\+?\d{1,4}[\s-]?)?(\(?\d{2,5}\)?[\s-]?)?[\d\s-]{5,15}$/, 
                    message: '请输入正确的手机号码或座机号码', 
                    trigger: 'blur' 
                }
            ]
         }
      };

   },

   watch: {
'checked'(newValue) {
  console.log(newValue,'newvalue');
  // 当 notQuota 变为 '0' 时，清空 quota
  //不限为0，限为1
  if (newValue) {
    this.formData.redeemTimesEveryone = "";

  }
  console.log( this.formData.quota);
  
}
},
   created() {
      this.getclasses()
      this.getOrgTreeList()
   },
   methods: {
      //删除图片
      removedImg() {
              this.formData.coverPic = ''
          },
      //上传图片
      onChangeFileList(e) {
              console.log(e, 'sssssb');
              this.fileList = e.length > 0 ? e.map(item => ({
                  fileType: '0',
                  type:'image',
                  fileType: '0',
                  name:item.response.data.fileName,
                  fileUrl: item.response.data.url,
                  format: item.response.data.fileName.split('.').pop(),
                  url: item.response.data.url
              })) : []; // 当e为空时清空fileList
              if (e.length > 0) {
                  console.log(this.fileList,"this.fileList");
                  this.formData.imgAttachments=this.fileList;
                 console.log(this.formData.imgAttachments,"this.fileList");
                
              } else {
                  this.formData.coverPic = '';
              }
          },
   
      //获取当前组织
      getOrgTreeList() {
         this.$http
            .post("/gov/org/customeragency/agencygridtree", {})
            .then(({ data: res }) => {
               if (res.code !== 0) {
                  return this.$message.error(res.msg);
               } else {
                  this.orgOptions = [];
                  this.orgOptions= this.filterTreeDataByLevel([res.data]);
                  console.log(this.orgOptions, "this.orgOptions");

               }
            })
            .catch(() => {
               return this.$message.error("网络错误");
            });
      },
      filterTreeDataByLevel(data) {
         return data.map(node => {
         // 如果当前节点的 level 是 "community"，则将 children 设置为空
         if (node.level === 'community') {
            node.subAgencyList = null;
         } else if (node.subAgencyList && node.subAgencyList.length > 0) {
            // 递归处理子节点
            node.subAgencyList = this.filterTreeDataByLevel(node.subAgencyList);
         }
         
         return node;
         });
      },
      handleChangeAgency(val) {
         console.log(val);
         this.redeemerOrgId = val

      },
      //获取物品分类信息
      async getclasses() {
         // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/project-list";
         const url = "/voluntary/pointsAward/classes/list";
         let params = {
         }
         const { data, code, msg } = await requestGet(url, params)
         if (code === 0) {
            console.log("列表请求成功！！！！！！！！！！！！！！");
            this.TypeList = data
         } else {
            this.$message.error(msg || "列表请求失败");
         }
      },
      handlecancel() {
         this.formData = {}
         console.log(this.formData, "formData");

         this.$emit('closeDialog')
      },
      //提交
      async submitForm() {
         if (this.formData.classKey == '') {
            this.$message.error('请选择分类');
            return;
         }
         if (this.formData.awardName == '') {
            this.$message.error('请输入标题');
            return;
         }
         if (this.formData.points == '') {
            this.$message.error('请输入积分');
            return;
         }
         if (this.formData.redeemerOrgId == '') {
            this.$message.error('请选择发布乏味');
            return;
         }
         const url = "/voluntary/pointsAward/admin/add";
         let params = {
            ...this.formData
         }
         const { data, code, msg } = await requestPost(url, params)
         if (code === 0) {

            this.$emit('closeDialog')

         } else {
            this.$message.error(msg || "提交失败");
         }

      }

   },

}

</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/volunteet.scss";

.g-main {
   padding: 30px;
}

.item_width_1 {
   width: 300px;

   /deep/.tox .tox-dialog {
      z-index: 20000;
   }
}

.item_width_2 {
   width: 150px;

   /deep/.tox .tox-dialog {
      z-index: 20000;
   }
}
</style>