<template>
  <div class="bg-white rounded-md overflow-auto pb-4" style="height: calc(100% - 48px - 10px - 1rem)">
    <el-scrollbar view-class="h-full">
      <h3 class="text-blue-500 p-6">{{ title }}</h3>
      <div class="">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
          <div class="flex">
            <el-form-item label="名称" prop="tz_mc">
              <el-input v-model="ruleForm.tz_mc" />
            </el-form-item>
            <el-form-item label="年级" prop="tjzn_json">
              <el-select v-model="ruleForm.tjzn_json" multiple>
                <el-option v-for="z in gradeList" :label="z.tjzn_njmc" :key="z.tjzn_id" :value="z.tjzn_id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="册别" prop="tz_cb">
              <el-select v-model="ruleForm.tz_cb">
                <el-option v-for="(t, i) in cbList" :key="i" :label="t.n" :value="t.v"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学科" prop="tjzx_id">
              <el-select v-model="ruleForm.tjzx_id">
                <el-option v-for="(t, i) in subjectList" :key="i" :label="t.tjzx_xkmc" :value="t.tjzx_id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="单元" prop="tz_dy">
              <el-select v-model="ruleForm.tz_dy">
                <el-option v-for="(t, i) in unitList" :key="i" :label="t.n" :value="t.v"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="小节" prop="tz_xj">
              <el-select v-model="ruleForm.tz_xj">
                <el-option v-for="(t, i) in xjList" :key="i" :label="t.n" :value="t.v"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="主讲用户" prop="tz_zjyh_user_id">
            <!-- <el-input v-model="ruleForm.tz_zjyhmc" /> -->
            <remote-user-select class="w-200px h-40px py-5px" size="small" v-model="ruleForm.tz_zjyh_user_id"
              v-model:model-real-name="ruleForm.tz_zjyhmc" :d="{ user_role_id: '75' }"></remote-user-select>
          </el-form-item>
          <el-form-item label="封面图片">
            <file-upload-progress v-model:full="ruleForm.tz_img" :limit="1" accept=".jpg,.jpeg,.webp,.png"
              :size-limit="500 * 1024">
              <template #default>
                <el-button type="primary">点击上传</el-button>
              </template>
              <template #tip>
                <div class="mt-2 text-xs text-gray-500">
                  只能上传jpg/png文件，且不超过500kb，建议尺寸600x337
                </div>
              </template>
            </file-upload-progress>
          </el-form-item>
          <el-form-item label="封面图片(地址)">
            <el-input v-model="ruleForm.tz_img" />
          </el-form-item>
          <el-form-item label="点播次数" prop="tz_dbcs">
            <el-input v-model="ruleForm.tz_dbcs" min="0"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <TinymceVue class="w-750px" v-model="ruleForm.tz_jj"></TinymceVue>
          </el-form-item>
          <el-form-item label="视频" prop="tz_video_file">
            <file-upload-progress :limit="1" v-model:full="ruleForm.tz_video_file" accept=".mp4"
              :size-limit="500 * 1024 * 1024">
              <template #tip>
                <div class="mt-2 text-xs text-gray-500">
                  支持格式：mp4（500M以内）
                  <span class="text-orange-500">请上传源文件</span>
                </div>
              </template>
            </file-upload-progress>
          </el-form-item>
          <el-form-item label="视频(地址)">
            <el-input v-model="ruleForm.tz_video_file"></el-input>
          </el-form-item>
          <el-form-item label="所属名师工作室" prop="tz_ssmsgzs_id">
            <el-select v-model="ruleForm.tz_ssmsgzs_id">
              <el-option v-for="g in gzsList" :key="g.tm_id" :label="g.tm_gzsmc" :value="g.tm_id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="text-center">
        <el-button @click="cancelForm">取消</el-button>
        <el-button type="primary" :disabled="isButton" @click="submitForm(ruleFormRef)">确定</el-button>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { omit } from "lodash";
import { useRoute, useRouter } from "vue-router";
import { useSlots } from "vue";
const slots = useSlots();
const route = useRoute();
const router = useRouter();
let id = route.params.id;
console.log(id);
let isEdit = id === undefined ? false : true;
let title = $ref("");
title = isEdit === false ? "新增" : "编辑";
let cbList = $ref([])
request({
  url: '/common/sjzd/option',
  data: {
    cs_code: 'TXWXCB'
  }
}).then(res => {
  if (res.code == '1') {
    cbList = res.data.option
  }
})
let ruleForm = $ref({
  tz_mc: "",
  tjzn_json: [],
  tz_cb: "",
  tjzx_id: "",
  tz_dy: "",
  tz_xj: "",
  tz_zjyhmc: "",
  tz_zjyh_user_id: "",
  tz_img: "",
  tz_dbcs: "",
  tz_jj: "",
  tz_video_file: "",
  tz_ssmsgzs_id: "",
});
if (!isEdit) {
  Object.keys(ruleForm).forEach(key => {
    ruleForm[key] = '';
  })
  ruleForm.tjzn_json = [];
} else {
  request({
    url: '/txwx/zyfd/detail',
    data: {
      tz_id: id,
    }
  }).then(res => {
    if (res.code == '1') {
      Object.keys(ruleForm).forEach(key => {
        ruleForm[key] = res.data.one_info[key];
      })
      let tjzn = JSON.parse(res.data.one_info.tjzn_json)
      console.log(tjzn);
      let t_json = [];
      tjzn.forEach(item => {
        t_json.push(item.tjzn_id)
      })
      ruleForm.tjzn_json = t_json;
    }
  })
}
// #region 下拉框数据
// 年级
let gradeList = $ref([]);
request({
  url: "/txwx/jcxxgl_zyflgl_nj/index",
  data: {
    limit: "9999",
    page: "1",
  },
}).then((res) => {
  if (res.code == "1") {
    gradeList = res.data.page_data;
  }
});
// 学科
let subjectList = $ref([]);
request({
  url: "/txwx/jcxxgl_zyflgl_xk/index",
  data: {
    limit: "9999",
    page: "1",
  },
}).then((res) => {
  if (res.code == "1") {
    subjectList = res.data.page_data;
  }
});
// 单元
let unitList = $ref([]);
request({
  url: '/common/sjzd/option',
  data: {
    cs_code: 'TXWXDY'
  }
}).then(res => {
  if (res.code == '1') {
    unitList = res.data.option
  }
})
// 小节
let xjList = $ref([]);
request({
  url: '/common/sjzd/option',
  data: {
    cs_code: 'TXWXXJ'
  }
}).then(res => {
  if (res.code == '1') {
    xjList = res.data.option
  }
})
// 名师工作室
let gzsList = $ref([])
request({
  url: "/txwx/msgzs/index",
  data: {
    limit: '9999',
    page: '1',
  },
}).then((res) => {
  if (res.code == "1") {
    gzsList = res.data.page_data;
  }
});
// #endregion
const rules = $ref({
  tz_mc: [
    {
      required: true,
      message: "请填写名称",
      trigger: "submit",
    },
  ],
  tz_zjyh_user_id: [{ required: true, message: "请填写主讲用户", trigger: "submit" }],
  tz_video_file: [{ required: true, message: "请上传视频", trigger: "submit" }]
});
const ruleFormRef = $ref();
let isButton = $ref(false);
// 提交
function submitForm(formName) {
  if (!formName) return;
  formName.validate((valid) => {
    if (valid) {
      let tjzn_json = [];
      gradeList.forEach(item => {
        ruleForm.tjzn_json.forEach(key => {
          if (item.tjzn_id === key) {
            tjzn_json.push({
              tjzn_id: key,
              tjzn_njmc: item.tjzn_njmc
            })
          }
        })
      })
      let tz_ssmsgzs_mc = '';
      gzsList.forEach(item => {
        if (item.tm_id === ruleForm.tz_ssmsgzs_id) {
          tz_ssmsgzs_mc = item.tm_gzsmc
        }
      })
      let tjzx_name = '';
      subjectList.forEach(item => {
        if (item.tjzx_id === ruleForm.tjzx_id) {
          tjzx_name = item.tjzx_xkmc
        }
      })
      let data = {
        txwx_zyfd: {
          ...omit(ruleForm, 'tjzn_json'),
          tjzn_json: JSON.stringify(tjzn_json),
          tz_ssmsgzs_mc,
          tjzx_name,
        }
      }
      console.log(data);
      if (!isEdit) {
        isButton = true;
        request({
          url: '/txwx/zyfd/add',
          data,
        }).then(res => {
          if (res.code == '1') {
            isButton = false;
            ElMessage.success(res.msg)
            router.push({ name: 'zyfd' });
          } else {
            isButton = false;
            ElMessage(res.msg)
          }
        })
      } else {
        Object.assign(data, {
          tz_id: id
        })
        request({
          url: '/txwx/zyfd/edit',
          data,
        }).then(res => {
          if (res.code == '1') {
            isButton = false;
            ElMessage.success(res.msg)
            router.push({ name: 'zyfd' });
          } else {
            isButton = false;
            ElMessage(res.msg)
          }
        })
      }
    } else {
      isButton = false;
    }
  });
}
// 取消
function cancelForm() {
  router.go(-1);
}
</script>
<style lang="scss" scoped>
.el-input,
.el-select {
  width: 290px;
  height: 32px;
}

.demo-ruleForm {
  width: 800px;
  margin: 10px auto;
}

:deep .el-select {
  .el-input__wrapper {
    height: 32px;
  }
}
</style>