<template>
  <el-dialog title="编辑页" :visible.sync="showBian.bianshow" custom-class='bian_css' style="padding: 0;" width="65%"
    center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
  <div style="font-size: 12px;">
    <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  label-position="right" ref="jibenFrom" :model="secondData" :rules="rules" label-width="120px"
            style="position: relative">
            <el-row :gutter="20">
              <el-col :span="12">
                <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="12">
                <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-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="活动地点" class="grid-content bg-purple" prop="eventAddrs">
                  <el-input v-model="secondData.eventAddrs" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <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-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <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="12">
                <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="12">
                <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="12">
                <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="12">
                <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="12">
                    <el-form-item label="活动封面海报" prop="cover_poster" class="grid-content bg-purple">
                      <upimg v-model="secondData.coverPoster" :value="secondData.coverPoster==''?'':secondData.coverPoster" :limit="1" :fileSize="1" :isShowTip="false"></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: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
             style="width: 100%">
            <el-table-column label="序号" width="auto" min-width="5%" prop="date" 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">详情</div> -->
                <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  label-position="top" ref="ruleFormInfo" :model="secondData" label-width="130px"
            style="position: relative">
            <el-row :gutter="20">
              <el-col :span="12">
                <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="12">
                <el-form-item label="外部人力成本预估" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.externalLaborCostEstimation" placeholder="请输入" />
                </el-form-item>
              </el-col>


            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="商品成本预估" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.costEstimationGoods" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备成本" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.setCostEstimate" placeholder="请输入" />
                </el-form-item>
              </el-col>

            </el-row>
<el-row :gutter="20">
              <el-col :span="12">
                <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="12">
                <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="12">
                <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="12">
                <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  label-position="top" ref="ruleFormInfo" :model="secondData" label-width="130px"
            style="position: relative">
            <el-row :gutter="20">
              <el-col :span="12">
                <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="12">
                <el-form-item label="预估参与人数" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.expectedParticipation" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="预估直接收益" class="grid-content bg-purple" prop="name">
                  <el-input v-model="secondData.expectedDirectBenefits" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <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>
            <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%" prop="date" 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" class="buttonHover"  style="background-color: #fff;color: #000;border: 1px solid #dcdfe6;">返回
        </el-button>
        <el-button plain @click="bianji"  style="background-color: #3F9B6A;color: #fff">确定
        </el-button>
      </div>

  </div>
  <el-dialog title="新增明细" :visible.sync="addMing" custom-class='ming_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  label-position="right" 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"  style="background-color: #3F9B6A;color: #fff;">保存
        </el-button>
      <el-button plain @click="addMing=false"  style="background-color: #3F9B6A;color: #fff;">取消
      </el-button>
      </div>
   </el-dialog>
</el-dialog>
</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"
   export default {
     props:{
       showBian:{
           type: Object,
            default: () => ({})
       }
     },
     components: { 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:''
          },
        }
      },

      watch: {
            'showBian.acBian': {
                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: false // 立即执行一次处理函数
              }
        },
        created() {

          },
        mounted() {
          },
       methods: {
         //获取当前时间
          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
        let that = this
        Vue.delete(that.secondData,'createDate')
        let newobj = this.removeEmptyValues(this.secondData)
         this.$refs.jibenFrom.validate((valid) => {
           if (valid) {
             this.secondData.updateDate = this.updateCurrentTime()

            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 .bian_css{
   margin-top:9vh !important;
   margin-left:20%;
   height:600px;
   overflow-y: auto;
    .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: #000000e6;
    }
    .el-date-table td.available:hover{
      background-color:#3F9B6A;
    }
  .el-date-table td.start-date span{
      background-color:#3F9B6A;
    }
  }
  ::v-deep .ming_css{
     margin-top:9vh !important;
     margin-left:20%;
     height:400px;
     overflow-y: auto;
      .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: #000000e6;
      }
      .el-date-table td.available:hover{
        background-color:#3F9B6A;
      }
    .el-date-table td.start-date span{
        background-color:#3F9B6A;
      }
    }
  .greens {
    color: #3F9B6A;
  }
  .tableBtn {
    display: inline-block;
    margin-right: 10px;
  }
  .el-button--primary{
    background: #3F9B6A;
    border-color: #3F9B6A;
    color: #fff;
  }
  ::v-deep .el-button--primary:focus, .el-button--primary:hover{
    background: #3F9B6A;
    border-color: #3F9B6A;
    color: #fff;
  }
/* 修改 取消 按钮默认的边框颜色 */
::v-deep .oe-dialog-btn .el-button:first-child {
    border-color: #dcdfe6;
}
/* 修改 确认 按钮默认的边框颜色 */
::v-deep .oe-dialog-btn .el-button:last-child {
    background: #3F9B6A;
    border-color: #3F9B6A;
    color: #fff;
}
/* 修改 取消 按钮悬浮时的边框色、背景色和文字颜色 */
.oe-dialog-btn .el-button:first-child:hover{
    border-color: #dcdfe6;
    background: #fff;
    color: #000;
}
/* 修改 确认 按钮悬浮时的边框色、背景色和文字颜色 */
.oe-dialog-btn .el-button:last-child:hover{
   background: #3F9B6A;
   border-color: #3F9B6A;
   color: #fff;
}
/* 修改 取消 按钮点击时的边框色、背景色和文字颜色 */
.oe-dialog-btn .el-button:first-child:active{
 border-color: #dcdfe6;
 background: #fff;
 color: #000;
}
/* 修改 确认 按钮点击时的边框色、背景色和文字颜色 */
.oe-dialog-btn .el-button:last-child:active{
    background: #3F9B6A;
    border-color: #3F9B6A;
    color: #fff;
}
  ::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;
  }
  ::v-deep .el-form-item__label {
    font-weight: 100;
    font-size: 14px;
    color:#000000e6;
  }
  ::v-deep .el-form-item{
    margin-bottom:16px;
  }

</style>
