<template>
  <div
    class="bg-white rounded-md h-screen"
    style="height: calc(100% - 48px - 10px - 1rem)"
  >
    <el-scrollbar class="px-4" view-class="h-full">
      <h3 class="text-blue-500 p-6">{{ title }}</h3>
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          size="small"
          status-icon
        >
          <div class="flex">
            <el-form-item label="类别" prop="tmg_lb">
              <el-select v-model="ruleForm.tmg_lb">
                <el-option
                  v-for="t in typeList"
                  :key="t.v"
                  :label="t.n"
                  :value="t.v"
                ></el-option>
              </el-select>
            </el-form-item>
            <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>
          </div>
          <div class="flex">
            <el-form-item label="发布者姓名" prop="tmg_fbr_user_id">
               <remote-user-select class="w-200px h-40px py-5px" size="small" v-model="ruleForm.tmg_fbr_user_id"
               v-model:model-real-name="ruleForm.tmg_fbr" :d="{ user_role_id: '75' }" @change="initCreateName"></remote-user-select>
              <!-- <el-input @input="fbrSearch" v-model="ruleForm.tmg_fbr" /> -->
            </el-form-item>
            <el-form-item label="发布者账号" prop="tmg_fbr_user_name">
              <el-input v-model="ruleForm.tmg_fbr_user_name" />
              <!-- <el-select
                v-model="ruleForm.tmg_fbr_user_name"
                filterable
                :loading="fbrLoading"
                loading-text="正在加载中"
                no-data-text="无该用户信息"
              >
                <el-option
                  v-for="a in accountList"
                  :label="a.user_name"
                  :key="a.user_id"
                  :value="a.user_id"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </div>
          <el-form-item label="标题" prop="tmg_title">
            <el-input v-model="ruleForm.tmg_title" />
          </el-form-item>
          <el-form-item label="内容" prop="tmg_content">
            <TinymceVue
              class="w-520px"
              v-model="ruleForm.tmg_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>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { omit } from "lodash";
const route = useRoute();
const router = useRouter();
let id = route.params.id;
let isEdit = id === undefined ? false : true;
let title = $ref("");
title = isEdit === false ? "新增" : "编辑";
console.log(title);
let ruleForm = $ref({
  tmg_lb: "",
  tm_id: '',
  tmg_fbr_user_id: "",
  tmg_fbr_user_name:'',
  tmg_fbr: "",
  tmg_title: "",
  tmg_content: "",
});
let tmt_cymc;
let detailData = $ref({});
if (!isEdit) {
  Object.keys(ruleForm).forEach((key, item) => {
    ruleForm[key] = "";
  });
} else {
  request({
    url: "/txwx/msgzs_gwz/detail",
    data: {
      tmg_id: id,
    },
  }).then((res) => {
    if (res.code == "1") {
      detailData = res.data.one_info;
      Object.keys(ruleForm).forEach((key, item) => {
        ruleForm[key] = res.data.one_info[key];
      });
      ruleForm.tmg_lb = res.data.one_info.tmg_lb_option_k;
      initCreateName(detailData.tmg_fbr_user_id)
    }
  });
}
let fbrLoading = $ref(false);
let accountList = $ref([]);
let time = null;
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;
      }
    });
}
fbrSearch();

function initCreateName(data) {
  if (typeof data == "string") {
    accountList.forEach(item => {
      if (item.user_id === data) {
        ruleForm.tmg_fbr_user_name = item.user_name
      }
      console.log(ruleForm, 22222);
    })
  }
}
const typeList = $ref([
  {
    v: "1",
    n: "名师工作室公告",
  },
  {
    v: "2",
    n: "名师工作室文章",
  },
  {
    v: "3",
    n: "名师工作室资讯",
  },
]);
let gzsList = $ref([]);
request({
  url: "/txwx/msgzs/index",
  data: {
    limit: "9999",
    page: "1",
  },
}).then((res) => {
  if (res.code == "1") {
    gzsList = res.data.page_data;
  }
});
const ruleFormRef = $ref();
const rules = $ref({
  tmg_lb: [
    {
      required: true,
      message: "请选择类别",
      trigger: "submit",
    },
  ],
  tm_id: [{ required: true, message: "请选择工作室", trigger: "submit" }],
  tmg_fbr_user_name: [
    { required: true, message: "请填写发布人账号", trigger: "submit" },
  ],
  tmg_fbr: [{ required: true, message: "请填写发布人", trigger: "submit" }],
  tmg_title: [{ required: true, message: "请填写标题", trigger: "submit" }],
  tmg_content: [{ required: true, message: "请填写内容", trigger: "submit" }],
});

let isButton = $ref(false);
// 提交
function submitForm(formName) {
  if (!formName) return;
  formName.validate((valid) => {
    if (valid) {
      // let tmg_fbr_user_name = '';
      // accountList.forEach((item) => {
      //   if (item.user_id == ruleForm.tmg_fbr_user_id) {
      //     tmg_fbr_user_name = item.user_name;
      //   }
      // });
      let tm_gzsmc;
      gzsList.forEach(item => {
        if (item.tm_id == ruleForm.tm_id) {
          tm_gzsmc = item.tm_gzsmc
        }
      })
      let data = {
        txwx_msgzs_gwz: {
          ...ruleForm,
          tmt_cymc: tm_gzsmc,
        },
      };
      console.log(data);
      if (!isEdit) {
        isButton = true;
        request({
          url: "/txwx/msgzs_gwz/add",
          data,
        }).then((res) => {
          if (res.code == "1") {
            ElMessage({
              type: "success",
              message: res.msg,
            });
            router.push({
              name: "ggwzzx_index",
            });
            isButton = false;
          }
        });
      } else {
        Object.assign(data, {
          tmg_id: id,
        });
        console.log(data);
        isButton = true;
        request({
          url: "/txwx/msgzs_gwz/edit",
          data,
        }).then((res) => {
          ElMessage({
            type: "success",
            message: res.msg,
          });
          router.push({
            name: "ggwzzx_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>