<template>
  <div>
    <el-dialog :title='props.title' width="800px" v-model="props.addDiaShow" :before-close="handleClose">
      <!-- 培训计划新增或修改 -->
      <div class="config">
        <el-form ref="frombt" :model="dialogForm" :rules="rules" label-width="120px" :disabled="props.types == '01'">
          <el-form-item label="视频标题：" prop="title">
            <el-input style="width: 700px" v-model="dialogForm.title" maxlength="15" placeholder="不能超过15个字"
              show-word-limit type="textarea" />
          </el-form-item>
          <el-form-item label="视频分类：" prop="type">
            <el-select class="pxdx_box" v-model="dialogForm.type" clearable style="width:212px">
              <el-option v-for="item in D_BZ_WSPFL" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="视频说明：" prop="content">
            <el-input v-model="dialogForm.content" :rows="3" maxlength="500" placeholder="不能超过500个字" show-word-limit
              type="textarea" />
          </el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="dialogForm.bz" :rows="3" maxlength="500" placeholder="不能超过500个字" show-word-limit
              type="textarea" />
          </el-form-item>
          <el-form-item label="视频上传：" prop="spdz">
            <MOSTY.Upload :limit="1" :nopicer="true" :isImg="false" :isVideosp="true" :ShowfileList="true"
              v-model="dialogForm.spdz" :delrow="delrow" @filehandleChange="changeFile" :key="keys">
            </MOSTY.Upload>
          </el-form-item>
          <div style="margin-left:20%;color:red;"> <span> (仅支持视频格式文件上传)</span></div>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="saveFrom(frombt)">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watch,
  getCurrentInstance
} from "vue";
import { getItem } from "@/utils/storage";
import { useRouter } from "vue-router";
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_BZ_WSPFL } = proxy.$dict("D_BZ_WSPFL");
const loading = ref(false); //新增保存按钮截流
const dialogForm = ref({})
const keys = ref(1)
const frombt = ref()
const disabled = ref(false)
const otherfileList = ref([])
const ruleFormRef = ref()
const emits = defineEmits(["changeAddVi", "changeclose"]);
//规则校验
const rules = reactive({
  title: [
    { required: true, message: "视频标题不能为空", trigger: "blur" }
  ],
  type: [
    { required: true, message: "视频分类不能为空", trigger: "blur" }
  ],
  content: [
    { required: true, message: "视频说明不能为空", trigger: "blur" }
  ],
  spdz: [
    { trigger: "blur", required: true, message: "视频上传不能为空", }
  ],
});

const props = defineProps({
  addDiaShow: {
    type: Boolean,
    default: false
  },
  id: String,
  title: String,
  types: String,

});

watch(
  () => props.id,
  (newVal) => {
    if (newVal) {
      getwspxq(newVal)
    } else {
      dialogForm.value = {}
      keys.value++
    }
  }
)
onMounted(() => {
});
//获取详情
function getwspxq(id) {
  getApi({ id }, '/mosty-jcgl/video/getVideoInfo').then(res => {
    if (res) {
      dialogForm.value = res
      keys.value++
    }
  })
}



// 关闭
const handleClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      // 关闭上一次的表单校验
      frombt.value.clearValidate();
      emits("changeclose", false);
    })
    .catch(() => {
      // catch error
    })

};

// 关闭×
const closeDialog = () => {
  loading.value = false;
  emits("changeclose", false);
};
// 保存
const saveFrom = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      if (props.id) {
        postApi(dialogForm.value, '/mosty-jcgl/video/edit').then(res => {
          loading.value = false;
          ElMessage.success("修改成功");
          emits("changeAddVi", false);
          dialogForm.value = {}
          keys.value++
        })
      } else {
        postApi(dialogForm.value, '/mosty-jcgl/video/add').then(res => {
          loading.value = false;
          ElMessage.success("新增成功");
          emits("changeAddVi", false);
          dialogForm.value = {}
          keys.value++
        })
      }
    }
  })


};


</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}

.config {
  .el-form {
    padding: 10px 40px;
    display: block;
  }

  .el-form-item {
    text-align: center;
  }
}

.pxdx_box {
  width: 500px;
}

.titleBox {
  align-items: center;
  margin: 0;
  padding: 0;
  height: 60px;
  border: 1px solid rgb(32, 75, 54);
  padding: 20px;
}

.form>div {
  position: relative;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    align-items: center;

    .el-select {
      width: 65%;
    }
  }
}

.el-input {
  width: 75%;
}

.two .el-input {
  width: 65%;
}

.three {
  justify-content: flex-start !important;

  .el-select {
    width: 15%;
  }
}

.four {
  display: flex;
  align-items: center;

  span {
    width: 5%;
  }

  .el-textarea__inner {
    width: 95%;
  }
}

.group {
  margin-top: 50px;
  // background-color: red;
  position: relative;
}

.fj {
  margin-top: 50px;
  width: 100%;

  .content {
    width: 100%;
    display: flex;
    padding: 20px;

    div {
      display: flex;
      width: 85%;
      align-items: center;
    }

    justify-content: space-between;
  }
}

.jc {
  margin-top: 50px;
}

.tabBox {
  height: 300px !important;
}

.el-table {
  height: 300px !important;
  border: 1px solid var(--el-color-primary);
}

.el-form-item__content {
  flex-wrap: nowrap;
}

.el-collapse {
  border-color: var(--el-color-primary);
  height: 460px;
}

::v-deep .el-collapse-item__header {
  border-bottom-color: var(--el-color-primary);
  color: #000 !important;
}

::v-deep .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}

::v-deep .el-date-editor .el-range-input {
  color: #0c0b0b !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #000;
}
</style>
