<template>
  <div class="app-container">
    <el-form
        :model="queryParams"
        ref="queryFormRef"
        v-show="showSearch"
        :inline="true"
        @submit.native.prevent
    >
      <el-form-item label="数据名称" prop="title">
        <el-input
            v-model="queryParams.title"
            placeholder="请输入关键字"
            clearable
            size="default"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="归属导航:" prop="mode">
        <el-select
            size="default"
            style="width: 240px"
            v-model="queryParams.mode"
            placeholder="请选择"
            clearable
            @clear="delete queryParams.mode"
        >
          <!-- <el-option
            v-for="item in modeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> -->
          <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属站点" prop="tenantId">
        <SiteOptions v-model="queryParams.tenantId" :site-list="siteList"/>
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            icon="search"
            size="default"
            @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="refresh" size="default" @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="plus"
            size="default"
            @click="handleAdd"
        >新增
        </el-button
        >
      </el-col>
      <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="数据编号" prop="id" align="center"/>
      <el-table-column label="数据名称" prop="title" width="120"/>
      <el-table-column label="图片" align="center" width="120">
        <template #default="{ row }">
          <div>
            <el-image
                style="width: 100px; height: 100px"
                :src="resolveStaticUrl(row.image)"
                fit="cover"
            ></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="所属站点" align="center">
        <template #default="{ row }">
          {{ siteList.find((el) => el.id === row.tenantId)?.name ?? "无" }}
        </template>
      </el-table-column>

      <el-table-column label="归属导航" align="center">
        <template #default="{ row }">
          {{ categoryList.find((item) => item.id == row.mode)?.name }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center">
        <template #default="{ row }">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
      >
        <template #default="{ row }">
          <el-button
              size="small"
              type="text"
              icon="edit"
              @click="handleUpdate(row)"
          >编辑
          </el-button
          >
          <el-button
              size="small"
              type="text"
              icon="delete"
              @click="handleDelete(row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="showEditDialog" width="500px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="数据名称:" prop="title">
          <el-input v-model="form.title" placeholder="请输入数据名称"/>
        </el-form-item>
        <el-form-item label="所属站点:" prop="tenantId">
          <SiteOptions v-model="form.tenantId" :site-list="siteList"/>
        </el-form-item>
        <el-form-item label="归属导航:" prop="mode">
          <el-select v-model="form.mode" placeholder="请选择">
            <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
            <!-- <el-option
              v-for="item in modeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="服务介绍:" prop="description">
          <el-input
              v-model="form.description"
              placeholder="请输入服务介绍"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
        <el-form-item label="图片:" prop="image">
          <ImageUpload v-model="form.image" :isShowTip="false" :limit="1"/>
        </el-form-item>
        <!-- <el-form-item label="关联案例:" prop="name">
          <el-cascader
            v-model="form.tenant_id"
            clearable
            separator="-"
            placeholder="请选择，支持搜索"
            :options="caseOptions"
            filterable
            :props="{ emitPath: false, value: 'id', label: 'title' }"
          ></el-cascader>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup name="Service">
import {reactive, ref, toRefs} from "vue";
import {
  serviceList,
  serviceAdd,
  serviceEdit,
  serviceDelete,
} from "@/api/website/solution";
import {
  planCategoryList,
  planCategoryAdd,
  planCategoryDelete,
  planCategoryDetail,
  planCategoryUpdate,
} from "@/api/website/solution";
import {tenantSelect} from "@/api/subPlatform/tenant";
import {ElMessage, ElMessageBox} from "element-plus";
import {cloneDeep} from "lodash";
import SiteOptions from "@/views/components/SiteOptions";
import {resolveStaticUrl} from "@/utils/uri";

const dataList = ref([]);
// TODO:isSuper
// const is_super = this.$store.getters.is_super;
const loading = ref(true);
const siteList = ref([]); // 站点列表
const showSearch = ref(true);
const showEditDialog = ref(false); // 是否显示新增、修改弹窗
const title = ref(""); // 弹窗标题
const formRef = ref(null);
const queryFormRef = ref(null);
const modeOptions = ref([
  {
    value: "101",
    label: "中小企业服务",
  },
  {
    value: "102",
    label: "大型企业服务",
  },
  {
    value: "103",
    label: "政府企业服务",
  },
  {
    value: "104",
    label: "科研院所服务",
  },
]);
const total = ref(0);
const data = reactive({
  form: {},
  rules: {
    title: [{required: true, message: "数据名称不能为空", trigger: "blur"}],
    tenantId: [
      {
        required: true,
        message: "归属导航不能为空",
        trigger: ["blur", "change"],
      },
    ],
    image: [
      {
        required: true,
        message: "图片不能为空",
        trigger: ["blur", "change"],
      },
    ],
    mode: [
      {
        required: true,
        message: "模式不能为空",
        trigger: ["blur", "change"],
      },
    ],
    description: [
      {required: true, message: "服务介绍不能为空", trigger: "blur"},
    ],
  },
  queryParams: {
    title: undefined,
    mode: undefined,
    tenantId: undefined,
    pageNum: 1,
    pageSize: 10,
  },
});

const {queryParams, form, rules} = toRefs(data);

const resetQuery = () => {
  if (queryFormRef.value) {
    queryFormRef.value.resetFields();
  }
  handleQuery();
};

const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

// 获取服务列表
const getList = async () => {
  loading.value = true;
  const resp = await serviceList(queryParams.value);
  dataList.value = resp.rows;
  total.value = resp.total;
  loading.value = false;
};

// 获取站点列表
const getSiteList = async () => {
  const {rows} = await tenantSelect();
  siteList.value = rows;
};
// 取消按钮
const cancel = () => {
  showEditDialog.value = false;
  memberOpen.value = false;
  reset();
};
// 表单重置
const reset = () => {
  form.value = {
    id: undefined,
    tenantId: undefined,
    title: undefined,
    image: undefined,
    mode: undefined,
    description: undefined,
  };
  if (formRef.value) {
    formRef.value.resetFields();
  }
};
const categoryList = ref([]);
const getPlanCategoryList = async () => {
  const {data} = await planCategoryList();
  categoryList.value = data.map((el) => {
    return {...el, id: el.id.toString()};
  });
};
getPlanCategoryList();

const handleAdd = () => {
  reset();
  showEditDialog.value = true;
  title.value = "新增";
};

const handleUpdate = async (row) => {
  reset();
  form.value = cloneDeep(row);
  showEditDialog.value = true;
  title.value = "修改";
};

const submitForm = async () => {
  await formRef.value.validate();
  if (form.value.id != undefined) {
    serviceEdit(form.value).then((response) => {
      ElMessage.success("修改成功");
      showEditDialog.value = false;
      getList();
    });
  } else {
    serviceAdd(form.value).then((response) => {
      ElMessage.success("新增成功");
      showEditDialog.value = false;
      getList();
    });
  }
};

/** 删除按钮操作 */
const handleDelete = (row) => {
  ElMessageBox.confirm(`是否确认删除名为${row.title}的数据项？`)
      .then(async () => {
        await serviceDelete(row.id);
        getList();
        ElMessage.success("删除成功");
      })
      .catch(() => {
      });
};

getList();
getSiteList();
</script>
