<template>
  <div style="padding:20px;abackground-color:#F2F3F5">
    <div class="zhuti">
      <div style="border-bottom: 1px solid grey;">
        <div style="font-weight: bold;font-size: 14px;padding: 20px;padding-bottom: 20px">
          创建氛围方案
        </div>
      </div>
      <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;font-weight: bold;background-color: #FAFAFA">
              基本信息
            </div>
          </div>
          <div style="padding: 20px 40px 0px 20px">
            <el-form
              size="mini"
              label-position="top"
              ref="ruleFormInfo"
              :model="ruleForm"
              :rules="rulesInfo"
              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="shan"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="类型"
                    class="grid-content bg-purple"
                    prop="name"
                  >
                    <el-select v-model="options" placeholder="请选择" disabled
                               style="width: 100%">

                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item
                    label="氛围布设地点"
                    class="grid-content bg-purple"
                    prop="name"
                  >
                    <el-input
                      v-model="shan"
                      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"
                    style="position: relative"
                  >
                    <el-date-picker
                      style="width: 100%;"
                      v-model="value2"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      align="right">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="氛围主题"
                    class="grid-content bg-purple"
                    prop="name"
                  >
                    <el-input
                      v-model="shan"
                      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="shan"
                      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="shan"
                      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="shan"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <div style="padding: 10px">
                <el-row :gutter="20">
                  <el-form-item
                    label="氛围场景海报"
                    prop="name"
                    class="grid-content bg-purple"
                  >
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                  </el-form-item>
                </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;font-weight: bold;background-color: #FAFAFA">
              氛围明细信息
            </div>
            <div style="padding: 10px 0;font-weight: bold;color: #2d8a58">
              添加明细
            </div>
          </div>
          <!--          表格-->
          <div style="padding: 20px 20px 20px 20px">
            <el-table
              :data="tableData"
              :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
              :border="true"
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                width="auto"
                min-width="5%"
                prop="date"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="明细项名称"
                prop="coDe"
                width="auto"
                min-width="22%"
              >

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

              </el-table-column>
              <el-table-column
                label="预估费用"
                prop="coDe"
                width="auto"
                min-width="15%"
              >
              </el-table-column>
              <el-table-column
                prop="coDe"
                label="备注"
                width="auto"
                min-width="15%"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                width="auto"
                min-width="18%">
                <template slot-scope="scope">
                  <div @click="handleEdit(scope.$index, scope.row)" class="tableBtn greens">详情</div>
                  <div @click="handleDelete(scope.$index, scope.row)" class="tableBtn greens">删除</div>
                </template>
              </el-table-column>
            </el-table>





            <!--            结束-->
          </div>
        </div>
      </div>
      <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;font-weight: bold;background-color: #FAFAFA">
              氛围成本信息
            </div>
          </div>
          <div style="padding: 20px 40px 0px 20px">
            <el-form
              size="mini"
              label-position="top"
              ref="ruleFormInfo"
              :model="ruleForm"
              :rules="rulesInfo"
              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="shan"
                      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="shan"
                      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="shan"
                      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="shan"
                      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="shan"
                      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="shan"
                      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="shan"
                      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="shan"
                      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">
          <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
            <div style="padding: 10px 20px;font-weight: bold;background-color: #FAFAFA">
              预估效果
            </div>
          </div>
          <div style="padding: 20px 40px 0px 20px">
            <el-form
              size="mini"
              label-position="top"
              ref="ruleFormInfo"
              :model="ruleForm"
              :rules="rulesInfo"
              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="shan"
                      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="shan"
                      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="shan"
                      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="shan"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>

              </el-row>
            </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;font-weight: bold;background-color: #FAFAFA">
              相关附件信息
            </div>
            <div style="padding: 10px 0;font-weight: bold;color: #2d8a58">
              上传附件
            </div>
          </div>
          <!--          表格-->
          <div style="padding: 20px 20px 20px 20px">
            <el-table
              :data="tableData"
              :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
              :border="true"
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                width="auto"
                min-width="5%"
                prop="date"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="附件名称"
                prop="coDe"
                width="auto"
                min-width="77%"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                width="auto"
                min-width="18%">
                <template slot-scope="scope">
                  <div @click="handleEdit(scope.$index, scope.row)" class="tableBtn greens">详情</div>
                  <div @click="handleDelete(scope.$index, scope.row)" class="tableBtn greens">删除</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
        <el-button
          plain
          @click="onSubmit"
          size="mini"
          style="background-color: #89C1A3;color: #fff;"
        >保存
        </el-button>
        <el-button
          plain
          @click=""
          size="mini"
        >暂存
        </el-button>
        <el-button
          plain
          @click=""
          size="mini"
        >取消
        </el-button>
      </div>




    </div>

  </div>

  </div>
</template>

<script>
export default {
  name: 'atmosphereBz',
  data(){
    return{
      options:'活动策划', pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ''
    }
  }
}
</script>

<style scoped>
.zhuti{
  background-color: #Fff;
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width:108px;
  height: 108px;
  line-height: 108px;
  /*text-align: center;*/
}
.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
</style>
