<template>
  <div class="bg-white rounded-md h-screen" v-loading="loading">
    <h3 class="text-hex-00A3FF px-15 py-6">{{ title }}</h3>
    <div style="height: calc(70% - 50px)" class="overflow-auto">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="140px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="名称：" prop="tx_mc" class="w-420px">
          <el-input size="small" v-model="ruleForm.tx_mc" />
        </el-form-item>
        <el-form-item label="资源封面：">
          <file-upload-progress
            v-model:part="ruleForm.tx_img"
            :limit="1"
            accept=".jpg,.jpeg,.webp,.png"
            :size-limit="500 * 1024"
          >
            <el-button type="primary"> 点击上传 </el-button>
            <template #tip>
              <div class="mt-2 text-xs">
                只能上传jpg/png文件，且不超过500kb，建议尺寸600x337
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>

        <el-form-item label="资源封面（地址）：" prop="tx_img" class="w-612px">
          <el-input size="small" v-model="ruleForm.tx_img" />
        </el-form-item>
        <el-form-item label="资源文件：">
          <file-upload-progress
            v-model:part="ruleForm.tx_file"
            :limit="1"
            accept=".jpg,.jpeg,.webp,.png"
            :size-limit="500 * 1024"
          >
            <el-button type="primary"> 点击上传 </el-button>
            <template #tip>
              <div class="mt-2 text-xs">
                只能上传jpg/png文件，且不超过500kb，建议尺寸600x337
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="资源文件（地址）：" prop="tx_file" class="w-612px">
          <el-input size="small" v-model="ruleForm.tx_file" />
        </el-form-item>
        <div class="flex">
          <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="tx_cb">
            <el-select size="small" v-model="ruleForm.tx_cb">
              <el-option
                v-for="b in cb_list"
                :key="b.v"
                :label="b.n"
                :value="b.v"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="学科:" prop="tjzx_id">
            <remote-select
              size="small"
              v-model="ruleForm.tjzx_id"
              v-model:model-name="ruleForm.tjzx_xkmc"
              to="jcxxgl_zyflgl_xk"
              :fields="['tjzx_id', 'tjzx_xkmc']"
            ></remote-select>
          </el-form-item>
          <el-form-item label="单元：" prop="tx_dy">
            <el-select size="small" v-model="ruleForm.tx_dy">
              <el-option
                v-for="d in dy_list"
                :key="d.v"
                :label="d.n"
                :value="d.v"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="小节：" prop="tx_xj">
            <el-select size="small" v-model="ruleForm.tx_xj">
              <el-option
                v-for="j in xj_list"
                :key="j.v"
                :label="j.n"
                :value="j.v"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="资源类型：" prop="tx_zylx">
          <el-radio-group size="small" v-model="ruleForm.tx_zylx">
            <el-radio
              v-for="item in resource_type"
              :key="item.v"
              :label="item.n"
              :value="item.v"
            ></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="资源格式：" prop="tx_zygs">
          <el-radio-group size="small" v-model="ruleForm.tx_zygs">
            <el-radio
              v-for="item in resource_format"
              :key="item.v"
              :label="item.n"
              :value="item.v"
            ></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="资源教师姓名:" prop="tx_zyjsxm">
          <remote-user-select
            class="w-full"
            size="small"
            v-model="ruleForm.tx_zyjs_user_id"
            v-model:model-real-name="ruleForm.tx_zyjsxm"
            :d="{ user_role_id: '75' }"
          ></remote-user-select>
        </el-form-item>
        <el-form-item label="描述：" prop="tx_ms">
          <TinymceVue
            :other_options="{ menubar: '' }"
            v-model="ruleForm.tx_ms"
          ></TinymceVue>
        </el-form-item>
        <div class="flex">
          <el-form-item label="所属名师工作室：:" prop="tx_ssmcgzs_id">
            <remote-select
              size="small"
              v-model="ruleForm.tx_ssmcgzs_id"
              v-model:model-name="ruleForm.tx_ssmcgzs_mc"
              to="msgzs"
              :fields="['tm_id', 'tm_gzsmc']"
            ></remote-select>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="text-center">
      <el-button @click="handleFormCancel">取消</el-button>
      <el-button
        type="primary"
        :disabled="isButton"
        @click="handleSubmit(ruleFormRef)"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { xkzy_add, xkzy_edit, xkzy_detail, sjzd_list } from "./api";
const route = useRoute();
const router = useRouter();
let id = route.params.id;
const ruleFormRef = ref(null);
let isEdit = id === undefined ? false : true;
let title = $ref("");
title = isEdit === false ? "新增" : "编辑";
let ruleForm = $ref({
  tx_img: "",
  tx_file: "",
  tx_mc: "",
  tx_cb: "",
  tx_zylx: "",
  tx_zygs: "",
  tx_zyjsxm: "",
  tx_zyjs_user_id: "",
  tx_ms: "",
  tjzn_id: "",
  tjzn_name: "",
  tjzx_xkmc: "",
  tjzx_id: "",
  tx_xj: "",
  tx_dy: "",
  tx_ssmcgzs_ud: "",
  tx_ssmcgzs_mc: "",
});
let resource_type = $ref([]);
let resource_format = $ref([]);
let dy_list = $ref([]);
let cb_list = $ref([]);
let xj_list = $ref([]);

const loading = ref(false);
let rules = $ref({
  tx_mc: [{ required: true, message: "请输入名称", trigger: "submit" }],
  tx_zylx: [{ required: true, message: "请选择资源类型", trigger: "blur" }],
});
let detailData = $ref({});

function initData() {
  const data = {
    tx_id: route.params.id,
  };
  xkzy_detail(data).then((res) => {
    if (res.code == "1") {
      detailData = res.data.one_info;
      ruleForm = {
        tx_mc: detailData.tx_mc,
        tx_img: detailData.tx_img,
        tx_file: detailData.tx_file,
        tjzn_id: detailData.tjzn_id,
        tjzn_name: detailData.tjzn_name,
        tjzx_id: detailData.tjzx_id,
        tjzx_xkmc: detailData.tjzx_xkmc,
        tx_cb: detailData.tx_cb,
        tx_dy: detailData.tx_dy,
        tx_xj: detailData.tx_xj,
        tx_zylx: detailData.tx_zylx,
        tx_zygs: detailData.tx_zygs,
        tx_zyjsxm: detailData.tx_zyjsxm,
        tx_zyjs_user_id: detailData.tx_zyjs_user_id,
        tx_ms: detailData.tx_ms,
        tx_ssmcgzs_id: detailData.tx_ssmcgzs_id,
        tx_ssmcgzs_mc: detailData.tx_ssmcgzs_mc,
      };
    }
  });
}
initData();

//数据字典
function sjzdData() {
  const data = {
    cs_code: "TXWXZYLX",
  };
  sjzd_list(data).then((res) => {
    if (res.code == "1") {
      resource_type = res.data.option;
    }
  });
  const data1 = {
    cs_code: "TXWXZYGS",
  };
  sjzd_list(data1).then((res) => {
    if (res.code == "1") {
      resource_format = res.data.option;
    }
  });
  const data2 = {
    cs_code: "TXWXDY",
  };
  sjzd_list(data2).then((res) => {
    if (res.code == "1") {
      dy_list = res.data.option;
    }
  });
  const data3 = {
    cs_code: "TXWXCB",
  };
  sjzd_list(data3).then((res) => {
    if (res.code == "1") {
      cb_list = res.data.option;
    }
  });
  const data4 = {
    cs_code: "TXWXXJ",
  };
  sjzd_list(data4).then((res) => {
    if (res.code == "1") {
      xj_list = res.data.option;
    }
  });
}
sjzdData();

//提交
const handleSubmit = async (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let obj = {
        tx_mc: ruleForm.tx_mc,
        tx_zylx: ruleForm.tx_zylx,
        tx_zygs: ruleForm.tx_zygs,
        tjzn_id: ruleForm.tjzn_id,
        tjzn_name: ruleForm.tjzn_name,
        tx_zyjsxm: ruleForm.tx_zyjsxm,
        tx_zyjs_user_id: ruleForm.tx_zyjs_user_id,
        tx_ms: ruleForm.tx_ms,
        tx_img: ruleForm.tx_img,
        tx_file: ruleForm.tx_file,
        tjzx_id: ruleForm.tjzx_id,
        tjzx_xkmc: ruleForm.tjzx_xkmc,
        tx_cb: ruleForm.tx_cb,
        tx_dy: ruleForm.tx_dy,
        tx_xj: ruleForm.tx_xj,
        tx_ssmcgzs_id: ruleForm.tx_ssmcgzs_id,
        tx_ssmcgzs_mc: ruleForm.tx_ssmcgzs_mc,
      };
      const data = {
        txwx_xkzy: obj,
        tx_id: route.params.id,
      };
      if (data.tx_id == "" || data.tx_id == undefined) {
        xkzy_add(data).then((res) => {
          loading.value = false;
          if (res.code == 1) {
            ElMessage({
              message: "添加成功",
              type: "success",
            });
            router.go(-1);
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        data.tx_id = route.params.id;
        xkzy_edit(data).then((res) => {
          loading.value = false;
          if (res.code == 1) {
            ElMessage({
              message: "编辑成功",
              type: "success",
            });
            router.go(-1);
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
function handleFormCancel() {
  router.go(-1);
}
</script>

<style lang="scss" scoped>
.demo-ruleForm {
  width: 860px;
  margin: 10px auto;
}
:deep() .el-form-item__content {
  width: 290px;
}
:deep() .el-select {
  width: 290px;
}
</style>