<template>
  <div>
    <el-dialog
      :title="title2"
      :visible.sync="dialogVisible"
      :before-close="handleCloseDialog">
      <el-form :model="publicForm" ref="publicForm" :rules="publicRules" label-width="130px">
        <el-form-item label="标题：" prop="title">
          <el-input v-model="publicForm.title"  maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="开始时间：" prop="startT">
          <el-date-picker
            v-model="publicForm.startT"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间">
          </el-date-picker>
         <!-- <el-date-picker
            v-model="publicForm.startDate"
            type="date"
            placeholder="选择日期（必填）"
            format="yyyy年MM月dd日"
            value-format="yyyy年MM月dd日"
            :picker-options="pickerOptionsStart">
          </el-date-picker>
          <el-time-picker
            v-model="publicForm.startTime"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            placeholder="选择时间">
          </el-time-picker>-->
        </el-form-item>
        <el-form-item label="结束时间：" prop="endT">
          <el-date-picker
            v-model="publicForm.endT"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间">
          </el-date-picker>
         <!-- <el-date-picker
            v-model="publicForm.endDate"
            type="date"
            placeholder="选择日期（必填）"
            format="yyyy年MM月dd日"
            value-format="yyyy年MM月dd日"
            :picker-options="pickerOptionsEnd"
           >
          </el-date-picker>
          <el-time-picker
            v-model="publicForm.endTime"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            placeholder="选择时间">
          </el-time-picker>-->
        </el-form-item>
        <el-form-item label="地点：" prop="city">
          <el-input v-model="publicForm.city" maxlength="100"
                    show-word-limit></el-input>
         <!-- <el-row :gutter="5">
            <el-col :span="7">
              <el-select
                v-model="publicForm.province"
                filterable
                placeholder="省"
                @change="provinceSelectChangeHandler"
              >
                <el-option
                  v-for="(item,index) in provinceList"
                  :key="index"
                  :label="item.areaName"
                  :value="item.areaName"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-select
                v-model="publicForm.city"
                filterable
                placeholder="市"
              >
                <el-option
                  v-for="(item,index) in cityList"
                  :key="index"
                  :label="item.areaName"
                  :value="item.areaName"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>-->
        </el-form-item>
        <el-form-item label="注册/回放：" prop="enroll">
          <el-input v-model="publicForm.enroll" maxlength="200"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="团队：" prop="team">
          <el-input v-model="publicForm.team" maxlength="100"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="内容：" prop="content">
          <el-input v-model="publicForm.content" type="textarea" maxlength="500"
                    show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('publicForm')">提交</el-button>
        <el-button @click="handleCloseDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {request} from '@/api/fetch-api'


  let urls = {
    publicSaveUrl: '/tianbao_edu_api/admin/public/save',
    areaUrl: 'https://api.k.wxpai.cn/bizproxy/kdapi/area',
  }
  export default {
    props: ['dialogVisible', 'publicTemp'],
    data() {
      return {
        title2: '',
        publicForm: {},
        publicRules: {
          title: [{required: true, message: '请输入标题', trigger: 'blur'}],
          startT: [{required: true, message: '请选择开始时间', trigger: 'blur'}],
          endT: [{required: true, message: '请选择结束时间', trigger: 'blur'}],
          enroll: [{required: true, message: '请填写报名', trigger: 'blur'}],
          city: [{required: true, message: '请选择省市', trigger: 'blur'}],
          content: [{required: true, message: '请输入内容', trigger: 'blur'}],
          team: [{required: true, message: '请输入团队', trigger: 'blur'}],
        },
        provinceList: [],
        cityList: [],
        pickerOptionsStart: {
          disabledDate: time => {
            let endDateVal = this.publicForm.endDate;
            if (endDateVal) {
              return time.getTime() >= new Date(endDateVal).getTime();
            }
          }
        },
        pickerOptionsEnd: {
          disabledDate: time => {
            let beginDateVal =  this.publicForm.startDate;
            if (beginDateVal) {
              return (
                time.getTime() < new Date(beginDateVal).getTime()-24*60*60*1000
              );
            }
          },
        },
      }
    },
    methods: {
      handleCloseDialog() {
        this.$emit('closedialog', false)
      },
      init() {
        if (JSON.parse(JSON.stringify(this.publicTemp)) == null) {
          this.title2 = '创建'
        } else {
          this.title2 = "修改"
          this.publicForm = JSON.parse(JSON.stringify(this.publicTemp))
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            request.post(urls.publicSaveUrl, this.publicForm).then(response => {
              this.$emit('initPublic')
              this.$emit('closedialog', false)
              this.$message.success("保存成功")
            }).catch(() => {

            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getProvince() {
        request.post(urls.areaUrl, {}).then(res => {
          this.provinceList = res.content
        })
      },
      provinceSelectChangeHandler(province) {
        this.cityList = null
        let areaId = this.findAreaId(
          this.provinceList,
          province
        )
        request.post(urls.areaUrl, {parentId: areaId}).then(res => {
          this.cityList = res.content
        })
      },
      findAreaId(areaList, name) {
        let areaId = ''
        areaList.forEach(element => {
          if (element.areaName == name) {
            areaId = element.areaId
          }
        })
        return areaId
      },
      changeStart() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          // 可通过箭头函数的方式访问到this
          disabledDate: (time) => {
            var times = '';
            times = this.publicForm.endDate < time.getTime() || time.getTime() < new Date(new Date().toLocaleDateString())
              .getTime();
            return times
          }
        })

      },
      //开始时间 控制结束时间
      changeEnd() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            return time.getTime() > this.publicForm.startDate
          }
        })
      },
    },
    created() {
      this.init()
      this.getProvince()
    }
  }
</script>

<style scoped>

</style>