<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" class="order-details">
    <div>
      <el-form :model="form" ref="form" label-width="120px">
        <div>
          <div><span><h3>基础信息</h3></span></div>
          <div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="标题:">
                  <el-input v-model="form.title" placeholder="请输入峰会标题"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="封面图:">
                  <el-upload
                    class="upload-demo"
                    :headers="getHeaderWithToken"
                    :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :on-progress="uploadProcess"
                    list-type="picture">
                    <el-progress v-show="imgFlag == true" type="circle" :percentage="percent"
                                 style="margin-top: 20px"></el-progress>
                    <img v-if="$utils.isString(form.banner) && !$utils.isEmpty(form.banner) && !imgFlag"
                         :src="form.banner"
                         style="width:300px;max-height:300px;">
                    <i v-else-if="!imgFlag" class="el-icon-plus avatar-uploader-icon"
                       style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="峰会时间:">
                  <el-date-picker
                    v-model="form.startTime"
                    type="datetime"
                    :editable="true"
                    placeholder="开始时间"
                  ></el-date-picker>
                  -
                  <el-date-picker
                    v-model="form.endTime"
                    type="datetime"
                    :editable="true"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <el-form-item label="报名截止时间:">
                  <el-date-picker
                    v-model="form.bmCloseTime"
                    type="datetime"
                    placeholder="报名截止时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="地点:">
                  <el-input v-model="form.address" placeholder="请输入峰会举办地点"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-input class=" content" v-model="form.longitude" placeholder="经度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" class=" content">
                <el-form-item>
                  <el-input class=" content" v-model="form.latitude" placeholder="纬度"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="状态:">
                  <el-radio-group v-model="form.state">
                    <el-radio-button label="默认"></el-radio-button>
                    <el-radio-button label="自定义"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="9" v-if="form.state==='自定义'">
                <el-radio-group v-model="form.status">
                  <el-radio class="status" :label="0">默认</el-radio>
                  <el-radio class="status" :label="1">报名中</el-radio>
                  <el-radio class="status" :label="2">进行中</el-radio>
                  <el-radio class="status" :label="3">已结束</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="活动id:">
                  <el-input v-model="form.rid" placeholder="请输入签到/抽奖活动的id"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div>
          <div><span><h3>报名页面</h3></span></div>
          <div>
            <el-row>
              <el-col :span="10">
                <el-form-item label="峰会简介:">
                  <el-input class="fhjj" v-model="form.content" :rows="9" type="textarea"
                            placeholder="请输入车型简介"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="峰会流程:">
                  <el-row class="height" v-for="(item, index) in processJson" :key="index">
                    <el-col :span="6">
                      <el-date-picker
                        v-model="item.time"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择时间">
                      </el-date-picker>
                    </el-col>
                    <el-col :span="8">
                      <el-input class="content" v-model="item.content" placeholder="请输入内容"></el-input>
                    </el-col>
                    <el-col class="content" :span="8">
                      <el-button type="danger" size="small" style="margin-left: 10px;" @click="deleteItem(item,index)">
                        删除
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item>
                <el-button size="small" type="button" icon="plus" @click="addTag()">添加流程</el-button>
              </el-form-item>
            </el-row>
          </div>
        </div>
      </el-form>

    </div>
    <div slot="footer" class="dialog-footer1">
      <el-button class="button" @click="cancelHandel">取 消</el-button>
      <el-button class="button" type="primary" v-if="titleNme=='创建峰会'" @click="create()">确 定</el-button>
      <el-button class="button" type="primary" v-if="titleNme=='编辑峰会'" @click="update1()">确 定</el-button>
    </div>
    <!--    <div class="modal_modal" v-show="resetCarVisible"></div>-->
  </el-dialog>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElInput from "../../../../node_modules/element-ui/packages/input/src/input.vue";
  import ElCol from "element-ui/packages/col/src/col";
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
  import {
    getOne,
    update,
    add
  } from 'src/api/summit/activity';
  import {getToken} from 'src/utils/auth';
  import {mapGetters} from 'vuex';
  export default {
    props: ["popupShow", "popupRow", "titleNme"],
    name: 'summitPopup',
    components: {
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        dialogVisible: false,
        title: '',
        BASE_API: process.env.BASE_API,
        percent: 0,//上传进度
        imgFlag: false,
        form: {
          title: undefined,
          banner: undefined,
          startTime: undefined,
          endTime: undefined,
          bmCloseTime: undefined,
          address: undefined,
          longitude: undefined,
          latitude: undefined,
          state: '默认',
          rid: undefined
        },
        result:false,
        processJson: []
      }
    },

    mounted() {
      this.cleanForm();
      this.getOrderInfo();
    },
    computed: {
      ...mapGetters([
        'elements'
      ]),

      getHeaderWithToken() {
        return {Authorization: getToken()};
      },
    },
    watch: {
      dialogVisible(newValue, oldValue) {
        if (!newValue) {
          this.$emit("summitDialogEvent",this.result);
        }
      },
    },
    methods: {
      getOrderInfo() {
        this.title = this.titleNme
        if (this.title === "编辑峰会") {
          getOne(this.popupRow.id).then(res => {
            res.data.state = this.getState(res.data.status)
            res.data.bmCloseTime=res.data.bmCloseTime
            this.form = res.data
            if (res.data.processJson) {
              this.processJson = JSON.parse(res.data.processJson)
            }
            this.dialogVisible = true
          })
        }
        if (this.title === "创建峰会") {
          this.dialogVisible = true
        }
      },
      /**
       * 封面图上传进度
       * */
      uploadProcess(event, file, fileList) {
        this.imgFlag = true;
        this.percent = Math.floor(event.percent);
      },
      /**
       * 封面图上传
       * **/
      handleAvatarSuccess(res, file) {
        this.percent = 0;
        this.imgFlag = false;
        this.form.banner = res.data;
      },
      getState(status) {
        if (this.$utils.isInteger(status)) {
          if (status == 0) {
            return '默认'
          } else {
            return '自定义'
          }
        }
        return ''
      },
      setSummitDialogEvent(e) {
        this.cleanForm();
        this.result=e
        this.dialogVisible = false
      },
      addTag() {
        let t = {
          time: undefined,
          content: ''
        };
        this.processJson.push(t);
      },
      /**
       * 保存修改
       *
       * */
      update1() {

        this.dataProcessing()
        update(this.form).then(res => {
          this.responseResult(res)

        })
      },
      create() {
        this.dataProcessing()
        add(this.form).then(res => {
          this.responseResult(res)
        })
      },
      dataProcessing() {
        if (this.form.state === '默认') {
          this.form.status = 0;
        }
        this.form.processJson = JSON.stringify(this.processJson)
      },
      /**
       * 请求结果判断
       * */
      responseResult(res) {
        if (res.status === 200) {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          });

          this.setSummitDialogEvent(true)
        } else {
          this.$notify({
            title: '失败',
            message: '操作失败！',
            type: 'error',
            duration: 2000
          });
        }
      },
      /**
       * 删除时间
       * */
      deleteItem(obj, index) {
        debugger
        this.processJson.splice(index, 1)
      },
      /**
       * 弹框-取消
       * */
      cancelHandel() {
        this.setSummitDialogEvent(false)
      },

      cleanForm() {
        this.form = {
          title: undefined,
          banner: undefined,
          startTime: undefined,
          endTime: undefined,
          bmCloseTime: undefined,
          address: undefined,
          longitude: undefined,
          latitude: undefined,
          state: '默认',
          rid: undefined
        }
      }
    }
  }
</script>
<style>
  .label-text {
    margin-left: 10px;
    margin-right: 20px;
  }

  .label-title {
    margin-top: 10px;
  }

  .orderDetail tr th {
    background: #eef1f6;
  }

  .orderDetail tr td, .orderDetail tr th {
    width: 500px;
    text-align: center;
    border: 1px solid #dfe6ec;
    margin-left: 100px;
    margin-right: 100px;
    padding: 10px;
  }

  .label-value {
    margin-left: 80px;
    margin-right: 100px;
  }

  #license-img {
    width: 50px;
    height: 50px;
  }

  .order-details .el-form-item {
    margin-bottom: 10px !important;
  }

  .el-dialog__footer .dialog-footer1 {
    position: relative;
    text-align: center;
  }

  .fhjj {
    width: 500px;
  }

  .content {
    margin-left: 4%;
  }

  .height {
    margin-bottom: 2%;
  }

  . el-form-item__content {
    margin-left: 5% !important;
  }

  .status {
    margin-top: 4%;
  }
</style>

