<template>
  <div class="bg-white rounded-md h-screen">
    <h3 class="text-blue-500 p-6">{{ title }}</h3>
    <div style="height: calc(70% - 50px)" class="overflow-auto">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm" status-icon size="small">
        <div class="flex">
          <el-form-item label="发布者姓名" prop="tmy_fbr_user_id">
            <remote-user-select class="w-200px py-5px" size="small" v-model="ruleForm.tmy_fbr_user_id"
             v-model:model-real-name="ruleForm.tmy_fbr" :d="{ user_role_id: '75' }" @change="initCreateName"></remote-user-select>
          </el-form-item>
          <el-form-item label="发布者账号">
            <el-input v-model="ruleForm.tmy_fbr_user_name" />
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="所属名师工作室" prop="tm_id">
            <el-select v-model="ruleForm.tm_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-item label="标题" prop="tmy_title">
            <el-input v-model="ruleForm.tmy_title" />
          </el-form-item>
        </div>
        <el-form-item label="封面" prop="tmy_img">
          <file-upload-progress v-model:part="ruleForm.tmy_img" :limit="1" class="w-500px" accept=".jpg,.jpeg,.webp,.png"
            :size-limit="500 * 1024">
            <template #default>
              <div class="
                      flex_center
                      w-65px
                      h-65px
                      border border-dashed border-hex-E4E6E8
                      bg-hex-F9F9F9
                      text-hex-9D9AB9
                    ">
                <i-akar-icons:plus class="text-xl" />
              </div>
            </template>
            <template #tip>
              <div class="mt-2 text-xs">
                只能上传jpg/png文件，且不超过500kb，建议尺寸600x337
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="封面地址">
          <el-input v-model="ruleForm.tmy_img" />
        </el-form-item>
        <el-form-item label="内容" prop="tmy_content">
          <TinymceVue class="w-520px h-200px overflow-auto" v-model="ruleForm.tmy_content"></TinymceVue>
        </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>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let id = route.params.id;
console.log(route);
let isEdit = id === undefined ? false : true;
let title = $ref("");
title = isEdit === false ? "新增" : "编辑";

let ruleForm = $ref({
  tm_id: "",
  tmy_fbr_user_id: '',
  tmy_fbr_user_name:'',
  tmy_fbr: "",
  tmy_title: "",
  tmy_content: "",
  tmy_img: "",
});
let gzsList = $ref([]);
request({
  url: "/txwx/msgzs/index",
  data: {
    limit: "9999",
    page: "1",
  },
}).then((res) => {
  if (res.code == "1") {
    gzsList = res.data.page_data;
  }
});
fbrSearch();
let detailData = $ref({});

request({
  url: "/txwx/msgzs_yxcg/detail",
  data: {
    tmy_id: id,
  },
}).then((res) => {
  if (res.code == "1") {
    detailData = res.data.one_info;
    let info = res.data.one_info;
    Object.keys(ruleForm).forEach((key, item) => {
      ruleForm[key] = detailData[key];
    });
    console.log(ruleForm, 1111111);
    initCreateName(detailData.tmy_fbr_user_id)
  }
});


let fbrLoading = $ref(false);
let accountList = $ref([]);
function fbrSearch() {
  request({
    url: "/user/main/index",
    data: {
      limit: "100",
      page: 1,
      user_role_id: '75'
    },
  }).then((res) => {
    if (res.code == "1") {
      accountList = res.data.page_data;
    }
  });
}

function initCreateName(data) {
  console.log(data);
  if (typeof data == "string") {
    accountList.forEach(item => {
      if (item.user_id === data) {
        ruleForm.tmy_fbr_user_name = item.user_name
      }
      console.log(ruleForm, 22222);
    })
  }
}

const ruleFormRef = $ref();
const rules = $ref({
  tm_id: [{ required: true, message: "请选择工作室", trigger: "submit" }],
  tmy_img: [{ required: true, message: "请上传封面", trigger: "submit" }],
  tmy_title: [{ required: true, message: "请填写标题", trigger: "submit" }],
  tmy_fbr_user_name: [
    { required: true, message: "请填写发布人账号", trigger: "submit" },
  ],
  tmy_fbr_user_id: [{ required: true, message: "请填写发布人姓名", trigger: "submit" }],
  tmy_content: [{ required: true, message: "请输入内容", trigger: "submit" }],
});
let isButton = $ref(false);
// 提交
function submitForm(formName) {
  if (!formName) return;
  formName.validate((valid) => {
    if (valid) {
      let tm_gzsmc;
      gzsList.forEach(item => {
        if (item.tm_id == ruleForm.tm_id) {
          tm_gzsmc = item.tm_gzsmc
        }
      })
      let data = {
        txwx_msgzs_yxcg: {
          tmy_title: ruleForm.tmy_title,
          tm_id: ruleForm.tm_id,
          tm_gzsmc,
          tmy_fbr_user_name: ruleForm.tmy_fbr_user_name,
          tmy_fbr_user_id: ruleForm.tmy_fbr_user_id,
          tmy_fbr: ruleForm.tmy_fbr,
          tmy_title: ruleForm.tmy_title,
          tmy_content: ruleForm.tmy_content,
          tmy_img: ruleForm.tmy_img,
        },
      };
      console.log(data);
      if (!isEdit) {
        isButton = true;
        request({
          url: "/txwx/msgzs_yxcg/add",
          data,
        }).then((res) => {
          if (res.code == "1") {
            ElMessage({
              type: "success",
              message: res.msg,
            });
            router.push({
              name: "yxcg_index",
            });
            isButton = false;
          }
        });
      } else {
        isButton = true;
        Object.assign(data, {
          tmy_id: id,
        });
        request({
          url: "/txwx/msgzs_yxcg/edit",
          data,
        }).then((res) => {
          if (res.code == "1") {
            ElMessage({
              type: "success",
              message: res.msg,
            });
            router.push({
              name: "yxcg_index",
            });
            isButton = false;
          }
        });
      }
    } else {
      isButton = false;
    }
  });
}
// 取消
function cancelForm() {
  router.go(-1);
}
</script>
<style lang="scss" scoped>
.el-input,
.el-select {
  width: 200px;
}

.demo-ruleForm {
  width: 800px;
  margin: 10px auto;
}
</style>