<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width="800"
    :visible="visible"
    :confirm-loading="loading"
    :title="'其他配置'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
    @cancel="cancel"
  >
    <a-form
      layout="horizontal"
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
    >
      <!-- <a-form-item label="作者:" name="author">
        <a-input v-model:value="form.author" placeholder="请输入作者" allow-clear autocomplete="off" />
      </a-form-item> -->

      <a-form-item label="直播平台:" v-if="form.detailType === 4">
        <a-radio-group v-model="livingType" @change="onLivngTypeChange">
          <a-radio :value="1">微吼</a-radio>
          <a-radio :value="2">百度</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="直播地址:" name="livingUrl" v-if="form.detailType === 4">
        <a-tooltip placement="bottom" title="参考格式：https://live.vhall.com/room/embedclient/....">
          <a-input v-model="form.livingUrl" placeholder="请输入会议直播地址" allow-clear autocomplete="off" />
        </a-tooltip>
      </a-form-item>

      <!-- <a-form-item label="回放地址:" name="replayUrl" v-if="form.detailType === 4">
        <a-input v-model:value="form.replayUrl" placeholder="请输入会议回放地址" allow-clear autocomplete="off" />
      </a-form-item> -->

      <!-- <a-form-item label="本条可见时间:" name="intervalTime">
        <a-range-picker
          v-model:value="intervalTime"
          format="YYYY-MM-DD HH:mm:ss"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{
            hideDisabledOptions: true,
            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')]
          }"
          placeholder="请选择本条可见时间"
        />
      </a-form-item> -->

      <a-form-item label="排序:" name="sort">
        <a-tooltip title="序号越小，排序越靠前">
          <div style="width: 100px">
            <a-input-number :min="0" class="ele-fluid" placeholder="请输入排序（正序排列）" v-model="form.sort" />
          </div>
        </a-tooltip>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { editFormDetailPage } from '@/api/common'
import moment from 'moment'
import startsWith from 'lodash/startsWith'

export default {
  name: 'TeDetailPageEdit',
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        // author: [{ required: true, message: '请输入作者', type: 'string', trigger: 'blur' }],
        livingUrl: [{ required: true, message: '请输入会议直播地址', type: 'string', trigger: 'blur' }],
        replayUrl: [{ required: false, message: '请输入会议回放地址', type: 'string', trigger: 'blur' }],
        intervalTime: [
          {
            required: true,
            validator: this.checkIntervalTime,
            //  以下这种写法也可以实现
            // validator: (rule, value, callback) => {
            //   console.log(value);
            // },
            message: '请选择本条可见时间',
            type: 'date',
            trigger: 'blur'
          }
        ],
        sort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }]
      },
      // 本条可见时间（日期控件显示）
      intervalTime: [],
      // 提交状态
      loading: false,
      // 计算时间
      moment,
      // 直播类型
      livingType: 0
    }
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data)
        // 判断是否有开始结束时间
        if (this.form.beginTime && this.form.endTime) {
          this.intervalTime = [
            moment(this.form.beginTime, 'YYYY-MM-DD HH:mm:ss'),
            moment(this.form.endTime, 'YYYY-MM-DD HH:mm:ss')
          ]
        } else {
          this.intervalTime = []
        }
        // 在线研讨会需要判断直播类型
        if (this.form.detailType === 4) {
          console.log(this.form.livingUrl)
          if (startsWith(this.form.livingUrl, 'https://live.vhall.com/room/embedclient/')) {
            this.livingType = 1
          }
        }
      } else {
        this.form = {}
      }
      if (this.$refs.form) {
        this.$refs.form.clearValidate()
      }
    }
  },
  methods: {
    /**
     * 校验日期范围选择框值
     */
    async checkIntervalTime() {
      if (!this.intervalTime || this.intervalTime.length != 2) {
        return Promise.reject('')
      }
      return Promise.resolve()
    },
    /**
     * 日期范围选择框确定事件
     * // @ok="value => changeIntervalTime(value)" <a-range-picker>加属性
     */
    // changeIntervalTime(value) {
    //   this.intervalTime = [moment(value[0], 'YYYY-MM-DD HH:mm:ss'), moment(value[1], 'YYYY-MM-DD HH:mm:ss')];
    // },
    /**
     * 保存和编辑
     *
     * @author zs
     * @date 2021/09/02 18:35
     */
    async save() {
      console.log(this.form)
      // 校验表单
      await this.$refs.form.validate()

      // 修改加载框为正在加载
      this.loading = true

      // 处理本条可见时间
      this.form.beginTime = this.intervalTime[0]
      this.form.endTime = this.intervalTime[1]

      // 执行编辑或修改
      const result = editFormDetailPage(this.form,111)

      result
        .then(result => {
          // 移除加载框
          this.loading = false

          // 提示添加成功
          this.$message.success(result.message)

          // 关闭弹框，通过控制visible的值，传递给父组件
          this.updateVisible(false)

          // 触发父组件done事件
          this.$emit('done')
        })
        .catch(() => {
          this.loading = false
        })
    },
    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author zs
     * @date 2021/09/02 18:35
     */
    updateVisible(value) {
      this.$emit('update:visible', value)
    },
    /**
     * 关闭弹框，恢复修改前的值
     */
    cancel() {
      this.form = Object.assign({}, this.data)
      // 判断是否有开始结束时间
      if (this.form.beginTime && this.form.endTime) {
        this.intervalTime = [
          moment(this.form.beginTime, 'YYYY-MM-DD HH:mm:ss'),
          moment(this.form.endTime, 'YYYY-MM-DD HH:mm:ss')
        ]
      } else {
        this.intervalTime = []
      }
      this.livingType = 0
    },
    /**
     * 直播类型改变
     */
    onLivngTypeChange() {
      // 微吼
      if (this.livingType === 1) {
        this.form.livingUrl = 'https://live.vhall.com/room/embedclient/'
      }
      // 百度
      if (this.livingType === 2) {
        this.form.livingUrl = ''
      }
    }
  }
}
</script>
