<template>
  <div class="box-border bg-white m-4 py-4 rounded-6px overflow-auto" style="height: calc(100% - 48px - 10px - 1rem);">
    <el-scrollbar class="px-4" view-class="h-full">
      <div class="title ml-4 mb-4">新增/编辑直播课程</div>
      <div class="zbkcEditContent">
        <el-form ref="ruleFormRef" :rules="rules" label-position="right" label-width="150px" :model="ruleForm">
          <div class="grid grid-cols-2 gap-x-10">
            <el-form-item label="课程标题:" prop="tz_kcbt">
              <el-input v-model="ruleForm.tz_kcbt" size="small"></el-input>
            </el-form-item>
            <el-form-item label="所属单位:" prop="tz_ssdw_id">
              <remote-select size="small" v-model="ruleForm.tz_ssdw_id" v-model:model-name="ruleForm.tz_ssdw_mc" url="/school/main/index" :fields="['id', 'sm_name']"></remote-select>
            </el-form-item>
          </div>
          <el-form-item class="formFlex" label="责任教师:" prop="tz_zjr_user_id">
            <remote-user-select style="width: auto;" placeholder="责任教师账号" size="small" v-model="ruleForm.tz_zjr_user_id" v-model:model-name="ruleForm.tz_zjr_user_name" v-model:model-real-name="ruleForm.tz_zjrxm" :d="{user_role_id:'75'}" showKey="user_name"></remote-user-select>
            <el-input v-model="ruleForm.tz_zjrxm" size="small" placeholder="责任教师姓名"></el-input>
          </el-form-item>
          <el-form-item label="课程封面图:" prop="tz_img">
            <file-upload-progress v-model:part="ruleForm.tz_img" :limit="1" class="w-520px" accept=".jpg,.jpeg,.png" :size-limit="500 * 1024">
              <template #default>
                <el-button type="primary" size="large">点击上传</el-button>
              </template>
              <template #tip>
                <div class="mt-2 text-xs">
                  只能上传jpg/png/jpeg文件，且不超过500kb，建议尺寸600x337
                </div>
              </template>
            </file-upload-progress>
            <!-- <el-input v-model="ruleForm.tz_img" size="small" placeholder="可直在输入框填写图片地址" style="width: 520px;"></el-input> -->
          </el-form-item>
          <div class="grid grid-cols-2 gap-x-10">
            <el-form-item label="年级:" prop="tjzn_id">
              <remote-select size="small" v-model="ruleForm.tjzn_id" v-model:model-name="ruleForm.tjzn_name" to="jcxxgl_zyflgl_nj" :fields="['tjzn_id', 'tjzn_njmc']"></remote-select>
            </el-form-item>
            <el-form-item label="学科:" prop="tjzx_id">
              <remote-select size="small" v-model="ruleForm.tjzx_id" v-model:model-name="ruleForm.tjzx_name" to="jcxxgl_zyflgl_xk" :fields="['tjzx_id', 'tjzx_xkmc']"></remote-select>
            </el-form-item>
            <el-form-item label="册别:" prop="tjzx_cb">
              <el-select size="small" v-model="ruleForm.tjzx_cb">
                <el-option v-for="(item, index) in fieldData.tjzx_cb" :key="index" :label="item.n" :value="item.v" />
              </el-select>
            </el-form-item>
            <el-form-item label="单元:" prop="tjzx_dy">
              <el-select size="small" v-model="ruleForm.tjzx_dy" filterable>
                <el-option v-for="(item, index) in fieldData.tjzx_dy" :key="index" :label="item.n" :value="item.v" />
              </el-select>
            </el-form-item>
            <el-form-item label="直播课程开启时间:" prop="tjzx_zbkqsj">
              <el-date-picker size="small" v-model="ruleForm.tjzx_zbkqsj" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="权限设置:" prop="tjzx_qxsz">
              <el-radio-group v-model="ruleForm.tjzx_qxsz">
                <el-radio v-for="(item, index) in fieldData.tjzx_qxsz" :key="index" :label="item.v">{{ item.n }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item label="课程简介：" prop="tjzx_kcjj">
            <el-input v-model="ruleForm.tjzx_kcjj" type="textarea" rows="5" />
          </el-form-item>
        </el-form>
        <div class="mt-5 pb-8 text-center">
          <el-button type="primary" plain @click="handleCancel">取消</el-button>
          <el-button style="margin-left: 50px;" type="primary" @click="handleSubmit(ruleFormRef)">确定</el-button>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { Close, CircleClose, ArrowDownBold, Back, Right } from '@element-plus/icons-vue'
const router = useRouter();
const parentId = router.currentRoute.value.params.id;

initFieldData();

const ruleForm = ref({
  tz_kcbt: "",
  tz_ssdw_id: "",
  tz_ssdw_mc: "",
  tz_zjr_user_id: "",
  tz_zjr_user_name: "",
  tz_zjrxm: "",
  tz_img: "",
  tjzn_id: "",
  tjzn_name: "",
  tjzx_id: "",
  tjzx_name: "",
  tjzx_cb: "",
  tjzx_dy: "",
  tjzx_zbkqsj: "",
  tjzx_qxsz: "",
  tjzx_kcjj: ""
});
const ruleFormRef = ref(null);
const rules = reactive({
  tz_kcbt: [{ required: true, message: "请输入课程标题", trigger: "blur" }],
  tz_ssdw_id: [{ required: true, message: "请选择所属单位", trigger: "change" }],
  tz_zjr_user_id: [{ required: true, message: "请选择责任教师", trigger: "change" }],
  tz_img: [{ required: true, message: "请选择课程封面图", trigger: "submit" }],
  tjzn_id: [{ required: true, message: "请选择年级", trigger: "change" }],
  tjzx_id: [{ required: true, message: "请选择学科", trigger: "change" }],
  tjzx_cb: [{ required: true, message: "请选择册别", trigger: "change" }],
  tjzx_dy: [{ required: true, message: "请选择单元", trigger: "change" }],
  tjzx_zbkqsj: [{ required: true, message: "直播课程开启时间", trigger: "change" }],
  tjzx_qxsz: [{ required: true, message: "请选择课程权限设置", trigger: "change" }]
})

const fieldData = ref({});
async function initFieldData() {
  let { code, data } = await request({ url: "/txwx/zbkc/index" });
  if (code == 1) {
    let fields = data.table_structure.field;
    for (let key in fields) {
      if (fields[key].type == "radio") {
        fieldData.value[key] = fields[key].option;
      }
    }
    if (parentId) {
      initDetailInfo();
    }
  }
}


async function initDetailInfo() {
  let { code, data } = await request({ url: "/txwx/zbkc/detail", data: { tz_id: parentId } });
  if (code == 1) {
    for (let key in ruleForm.value) {
      ruleForm.value[key] = data.one_info[key];
    }
    ruleForm.value.tjzx_qxsz = data.one_info.tjzx_qxsz_option_k;
    ruleForm.value.tjzx_cb = data.one_info.tjzx_cb_option_k;
    ruleForm.value.tjzx_dy = data.one_info.tjzx_dy_option_k;
  }
}


const handleCancel = () => {
  router.back();
}

const handleSubmit = async (formEl) => {
  if (!formEl) return;

  formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        txwx_zbkc: ruleForm.value
      }
      let res = {};
      if (!parentId) {
        res = await request({ url: "/txwx/zbkc/add", data });
      } else {
        data.tz_id = parentId;
        res = await request({ url: "/txwx/zbkc/edit", data });
      }
      if (res.code == 1) {
        ElMessage.success("保存成功！");
        handleCancel();
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}
</script>

<style lang="scss" scoped>
@use "~/styles/scroll.scss";
.title {
  font-size: 16px;
  font-weight: 400;
  color: var(--el-color-primary);
  line-height: 22px;
}
.zbkcEditContent {
  width: 900px;
  margin: auto;
  :deep() {
    .formFlex {
      .el-form-item__content {
        display: flex;
        .el-input {
          width: 200px;
          margin-right: 20px;
        }
      }
    }
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      &.el-input {
        width: 100%;
      }
      .el-input__wrapper {
        width: 100%;
      }
    }
  }

  .el-button--primary.is-plain {
    background: unset;
    &:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>