<template>
    <div>
	<div style="height:58px;line-height:58px;background:#fff;padding-left:20px;">
	  <div style="color:#0006"> <span>品牌策划</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">氛围方案编辑</span></div>
	</div>
  <div style="font-size: 14px;background:#fff;">
    <div style="padding: 20px">
      <div style="border: solid 1px #E5E5E5;border-radius: 5px">
        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
          <div style="padding: 10px 20px;background-color: #FAFAFA">
            基本信息
          </div>
        </div>
        <div style="padding: 20px 40px 20px 20px">
          <el-form size="mini" label-position="top" ref="jibenFrom" :model="secondData" :rules="rules" label-width="120px"
            style="position: relative">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="方案名称" class="grid-content bg-purple device-from" prop="planName">
                  <el-input v-model="secondData.planName" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="类型" class="grid-content bg-purple" prop="planType">
                  <el-select v-model="secondData.planType" placeholder="请选择" disabled style="width: 100%">
                    <el-option label="活动策划" value="活动策划"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="活动地点" class="grid-content bg-purple" prop="eventAddrs">
                  <el-input v-model="secondData.eventAddrs" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="活动时间" class="grid-content bg-purple" prop="planTime"
                  style="position: relative">
                  <el-date-picker style="width: 100%;" v-model="planTime" value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    align="right" @change="dateFormat">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="活动主题" class="grid-content bg-purple" prop="eventTheme">
                  <el-input v-model="secondData.eventTheme" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="活动主办方" class="grid-content bg-purple" prop="sponsor">
                  <el-input v-model="secondData.sponsor" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="活动参与方" prop="participants" class="grid-content bg-purple">
                  <el-input v-model="secondData.participants" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="活动主要目的" prop="mainPurpose" class="grid-content bg-purple">
                  <el-input v-model="secondData.mainPurpose" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="范围设置" class="grid-content bg-purple" prop="sponsor">
                  <el-select v-model="secondData.rangeSetting" placeholder="请选择"  style="width: 100%">
                    <el-option label="活动绿道段内" value="活动绿道段内"></el-option>
                    <el-option label="活动场地内" value="活动场地内"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <div style="padding: 10px">
              <el-row :gutter="20">
                <el-col :span="24">
                <el-form-item label="活动封面海报" prop="coverPoster" class="grid-content bg-purple">
                  <upimg filePath="act" :value="secondData.coverPoster==''?'':secondData.coverPoster" inputtype="coverPoster" :limit="1" @changimg="e=>changimg(e,'coverPoster')"></upimg>
                </el-form-item>
                   </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div style="padding: 0px 20px 20px 20px">
      <div style="border: solid 1px #E5E5E5;border-radius: 5px">
        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px;display: flex">
          <div style="padding: 10px 20px;background-color: #FAFAFA">
            活动明细信息
          </div>
          <div style="padding: 10px 0;color: #2d8a58" @click="addMing = true">
            添加明细
          </div>
        </div>
        <div style="padding: 20px 20px 20px 20px">
          <el-table :data="tableDa"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
             style="width: 100%">
            <el-table-column label="序号" width="auto" min-width="5%" align="center">
              <template slot-scope="scope">
                {{scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column label="明细项名称" prop="detailLtemName" width="auto" min-width="22%">

            </el-table-column>
            <el-table-column label="预估数量" prop="estimatedQuantity" width="auto" min-width="15%">

            </el-table-column>
            <el-table-column label="预估费用(/元)" prop="estimatedCost" width="auto" min-width="15%">
            </el-table-column>
            <el-table-column prop="notes" label="备注" width="auto" min-width="15%">
            </el-table-column>
            <el-table-column label="操作" width="auto" min-width="18%">
              <template slot-scope="scope">
                <div class="tableBtn greens" @click="mingDel(scope.row)">删除</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div style="padding: 20px">
      <div style="border: solid 1px #E5E5E5;border-radius: 5px;padding-bottom: 20px;">
        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
          <div style="padding: 10px 20px;background-color: #FAFAFA">
            活动成本信息
          </div>
        </div>
        <div style="padding: 20px 40px 0px 20px">
          <el-form size="mini" label-position="top" ref="ruleFormInfo" :model="secondData" label-width="120px"
            style="position: relative">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="内部人力成本预估(/元)" class="grid-content bg-purple device-from" prop="name">
                  <el-input v-model="secondData.internalLaborCostEstimation" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="外部人力成本预估(/元)" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.externalLaborCostEstimation" placeholder="请输入" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="商品成本预估(/元)" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.costEstimationGoods" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="设备成本(/元)" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.setCostEstimate" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="宣传费用(/元)" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.estimatedPromotionalExpenses" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="其他成本(/元)" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.otherNecessaryEstimates" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="总成本(/元)" prop="name" class="grid-content bg-purple">
                  <el-input v-model="secondData.totalCostEstimation" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="备注" prop="name" class="grid-content bg-purple">
                  <el-input v-model="secondData.notes" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>

    <div style="padding: 20px">
      <div style="border: solid 1px #E5E5E5;border-radius: 5px;padding-bottom: 20px;">
        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
          <div style="padding: 10px 20px;background-color: #FAFAFA">
            预估效果
          </div>
        </div>
        <div style="padding: 20px 40px 0px 20px">
          <el-form size="mini" label-position="top" ref="ruleFormInfo" :model="secondData" label-width="120px"
            style="position: relative">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="预估吸引流量" class="grid-content bg-purple device-from" prop="name">
                  <el-input v-model="secondData.expectedAttractTraffic" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预估参与人数" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.expectedParticipation" placeholder="请输入" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="预估直接收益(/元)" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.expectedDirectBenefits" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="预估间接收益(/元)" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.expectedIndirectBenefits" placeholder="请输入" />
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>
      </div>
    </div>

    <div style="padding: 20px">
      <div style="border: solid 1px #E5E5E5;border-radius: 5px;padding-bottom: 20px;">
        <div style="border-bottom: 1px solid #E5E5E5;padding: 1px;display: flex">
          <div style="padding: 10px 20px;background-color: #FAFAFA">
            相关附件信息
          </div>
          <div>
            <upfile filePath="act" inputtype="otherImageVideos" :islist="false" :accept="'.docx'" :value="ruleForm.otherImageVideos" @changimg="e=>changimg(e,'otherImageVideos')"></upfile>
            <!-- <el-upload class="upload-demo" ref="upload"
            :action="uploadFileUrl"
            :on-success="handleUploadSuccess"
              :file-list="fileData" :show-file-list="false">
              <div style="color: #2d8a58;margin-left: 10px;margin-top: 10px;" slot="trigger">
                上传附件
              </div>
            </el-upload> -->
          </div>
        </div>
        <div style="padding: 20px 40px 0px 20px">
          <el-table :data="dataList"
            :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
             style="width: 100%">
            <el-table-column label="序号" width="auto" min-width="7%" align="center">
              <template slot-scope="scope">
                {{scope.$index +1}}
               </template>
            </el-table-column>
            <el-table-column label="附件名称" prop="attachmentName" width="auto" min-width="75%">
            </el-table-column>
            <el-table-column label="操作" width="auto" min-width="18%">
              <template slot-scope="scope">
                <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

      <div style="padding: 20px;display:flex;justify-content: flex-end">
        <el-button plain @click="close" size="mini" style="background-color: #fff;color: #000;border: 1px solid #dcdfe6;" class="buttonHover">取消
        </el-button>
        <el-button plain @click="bianji" size="mini" style="background-color: #3F9B6A;color: #fff">保存
        </el-button>
      </div>
  </div>
  <el-dialog title="新增明细" :visible.sync="addMing" custom-class='dialog_css' style="padding: 0;" width="50%"
  append-to-body
      center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <div style="padding: 15px;width:100%">
        <div style="">
          <div style="padding: 15px;">
            <el-form size="mini" label-position="left" ref="ruleFormInfo" :model="mingFrom" label-width="140px"
              style="position: relative">
                  <el-form-item label="明细项名称" class="grid-content bg-purple device-from" prop="planName">
                    <el-input v-model="mingFrom.detailLtemName" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item label="预估数量" class="grid-content bg-purple" prop=" planType">
                    <el-input v-model="mingFrom.estimatedQuantity" placeholder="请输入" />
                  </el-form-item>

                  <el-form-item label="预估费用(/元)" class="grid-content bg-purple" prop="eventAddrs">
                    <el-input v-model="mingFrom.estimatedCost" placeholder="请输入" />
                  </el-form-item>
            <el-form-item label="备注" class="grid-content bg-purple device-from" prop="planName">
              <el-input v-model="mingFrom.notes" placeholder="请输入" />
            </el-form-item>
            </el-form>
          </div>
        </div>

      </div>
      <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
		  <el-button plain @click="addMing=false" size="mini" style="background-color: #3F9B6A;color: #fff;">取消
		  </el-button>
        <el-button plain @click="addming" size="mini" style="background-color: #3F9B6A;color: #fff;">保存
        </el-button>
      
      </div>
   </el-dialog>
</div>
</template>

<script>
 import {
  deleteById,
  queryByPage,
  xiangByPage,
  fujiaTable,
  mingTable,
  danqueryById,
  xiangedit,
  Mingdan,
  MingAdd,
  MingDel,
  fujiaAdd,
  fujiaDel
  } from '../../api/activityBz'
  import Vue from 'vue'
  import { uploadUrl } from '@/utils/request'
  import upimg from "@/components/ImageUpload/index"
  import upfile from "@/components/fujianUpload/fujianList"

   export default {
     props:{
       showBian:{
           type: Object,
            default: () => ({})
       }
     },
      components: { upfile,upimg},
      data() {
        return {
          uploadFileUrl: uploadUrl, // 请求地址
          secondData:{},
          rules:{
            planName:[{ required: true, message: '请输入方案名称', trigger: 'blur' }],
            planType:[{ required: true, message: '请选择方案类型', trigger: 'change' }],
            eventAddrs:[{ required: true, message: '请输入活动地点', trigger: 'blur' }],
            plan_Time:[{ required: true, message: '请选择活动时间', trigger: 'change' }],
            eventTheme:[{ required: true, message: '请输入活动主题', trigger: 'blur' }],
            sponsor:[{ required: true, message: '请输入活动主办方', trigger: 'blur' }],
          },
         ggXin:true,
         addMing:false,
         tableDa:[],
         planTime:'',
         dataList:[],
         fileData:[],
         mingFrom:{
           detailLtemName:'',
           estimatedQuantity:'',
           estimatedCost:'',
           notes:''
         },
		  ruleForm:{}
        }
      },

      watch: {
            'showBian': {
                handler(newValue) {
                  // 当 showBian.acBian 发生变化时，更新 secondData
                  this.secondData = { ...newValue };
                   this.planTime = [newValue.eventStartTime, newValue.eventEndTime]
                  this.fucha(this.secondData.id)
                  this.mingcha(this.secondData.id)
                },
                immediate: true // 立即执行一次处理函数
              }
        },
        created() {

          },
        mounted() {
          },
       methods: {
         changimg(e,type) {
           this.secondData[type] = e

           if(type=='otherImageVideos'){
          const parts = e.split('/');
          const filename = parts[parts.length - 1];
             // let file ={
             //   url:e,
             //   attachmentName:filename
             // }
             let fuji={
                            detailsId:this.secondData.id,
                            attachmentName:filename,
                            attachmentUrl:e,
                          }
                          fujiaAdd(fuji).then(res=>{
             this.fucha(this.secondData.id)
                          })
             // this.dataList.push(file)
           }
         },
         //获取当前时间
          updateCurrentTime() {
               const now = new Date();
               const year = now.getFullYear();
               const month = (now.getMonth() + 1).toString().padStart(2, '0');
               const day = now.getDate().toString().padStart(2, '0');
               const hours = now.getHours().toString().padStart(2, '0');
               const minutes = now.getMinutes().toString().padStart(2, '0');
               const seconds = now.getSeconds().toString().padStart(2, '0');

               return  `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
             },
         dateFormat(){

         },
         // 附件新增
                  handleUploadSuccess(response, file, fileList){
                      let fuji={
                        detailsId:this.secondData.id,
                        attachmentName:file.name,
                        attachmentUrl:file.response.data.url,
                      }
                      fujiaAdd(fuji).then(res=>{
         this.fucha(this.secondData.id)
                      })

                  },
                  // 查询明细
                  mingcha(id){
                    mingTable({detailsId:id,pageNumber:1,pageSize:10}).then(res=>{
                      this.tableDa = res.data.content
                    })
                  },
                  // 新增明细
                async addming(){
                    this.mingFrom.detailsId = this.secondData.id
                      await MingAdd(this.mingFrom)
                     this.mingcha(this.secondData.id)
                     this.mingFrom = {
                           detailLtemName:'',
                           estimatedQuantity:'',
                           estimatedCost:'',
                           notes:''
                         }
                     this.addMing = false
                  },
                  // 删除明细
                  mingDel(item){
                    const h = this.$createElement;
                            this.$msgbox({
                              title: '消息',
                              message: h('p', null, [
                                h('span', null, '是否删除 '),
                              ]),
                              showCancelButton: true,
                              showClose:false,
                              confirmButtonText: '确定',
                              cancelButtonText: '取消',
                              customClass:'oe-dialog-btn',
                              beforeClose: (action, instance, done) => {
                                if (action === 'confirm') {
                                  MingDel({id:item.id}).then(res=>{
                                     this.mingcha(this.secondData.id)
                                    done();
                                  })
                                } else {
                                  done();
                                }
                  }
                  })
                 },
                 // 附件查询
                 fucha(id){
                   fujiaTable({detailsId:id,pageNumber:1,pageSize:10}).then(res=>{
                     this.dataList = res.data.content
                   })
                 },

                 // 附件删除
                 handleDelete(item){
                      const h = this.$createElement;
                              this.$msgbox({
                                title: '消息',
                                message: h('p', null, [
                                  h('span', null, '是否删除 '),
                                ]),
                                showCancelButton: true,
                                showClose:false,
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                customClass:'oe-dialog-btn',
                                beforeClose: (action, instance, done) => {
                                  if (action === 'confirm') {
                                    fujiaDel({id:item.id}).then(res=>{
                                       this.fucha(this.secondData.id)
                                      done();
                                    })
                                  } else {
                                    done();
                                  }
                    }
                    })

                 },
       bianji() {
        this.secondData.pageNumber = 1
        this.secondData.pageSize = 10
		this.secondData.updateDate = this.updateCurrentTime()
		this.secondData.updateUser = localStorage.getItem('roleName')
        let that = this
        Vue.delete(that.secondData,'createDate')
        let newobj = this.removeEmptyValues(this.secondData)
         this.$refs.jibenFrom.validate((valid) => {
           if (valid) {
            xiangedit(newobj).then(res=>{
              this.$emit('BianchildClose', false)
            })

           }else{
             return false;
           }
         })

      },
      removeEmptyValues(obj) {
        if (typeof obj !== 'object' || obj === null) {
          return obj;
        }
        const newObj = Array.isArray(obj) ? [] : {};

        for (const key in obj) {
          if (Object.prototype.hasOwnProperty.call(obj, key)) {
            const value = obj[key];
            if (value !== null && value !== undefined && value !== '' && !this.isEmptyObject(value)) {
              if (Array.isArray(newObj)) {
                newObj.push(this.removeEmptyValues(value));
              } else {
                newObj[key] = this.removeEmptyValues(value);
              }
            }
          }
        }
        return newObj;
      },
      isEmptyObject(obj) {
        return Object.keys(obj).length === 0 && obj.constructor === Object;
      },
      close(){
        this.$emit('BianchildClose', false);
      }
       }
   }
</script>

<style lang="scss" scoped>
::v-deep .dialog_css{
   margin-top:11vh;
   margin-left:13%;
    .el-dialog__body {
      padding: 0px;
      background-color: #fff;
    }
    .el-dialog__header {
      background-color: #fff;
      padding:10px 20px 10px 20px;
      border-bottom: 1px solid #EFEFEF;
    }

    .el-dialog__title {
      font-size:14px;
      color: #000;
    }
  }
  .greens {
    color: #3f9b6a;
  }
  .tableBtn {
    display: inline-block;
    margin-right: 10px;
  }
  ::v-deep .buttonHover:hover{
    color:#3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
  ::v-deep .el-input__inner{
    height:32px;
    line-height:32px;
  }
</style>
