<template>
  <div>
    <el-card title="服务设置">
      <template #header>
        <div class="flex justify-between">
          <h3>服务设置</h3>
          <el-button
            type="primary"
            :icon="Setting"
            link
            @click="state.visibleRemark = true"
            >申请须知设置</el-button
          >
        </div>
      </template>
      <el-form label-width="auto">
        <el-form-item label="咨询电话" required>
          <div class="flex items-center w-full">
            <el-input
              v-model="state.hotline"
              clearable
              placeholder="输入咨询电话方便服务申请商进行咨询，该电话会显示在服务商申请页面"
              class="w-1/2"
            ></el-input>
            <el-button
              class="ml-4"
              type="primary"
              plain
              @click="handleSaveHotline"
              >保存</el-button
            >
            <el-button link type="danger" :icon="Warning"
              >要开启服务商功能，必须设置这一项</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="服务商权限" required>
          <div class="flex items-center w-full">
            <el-select
              v-model="state.roleIds"
              filterable
              placeholder="请选择服务商所属系统权限角色"
              clearable
              class="w-1/4"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in state.roleList"
                :key="item.id"
              ></el-option>
            </el-select>
            <el-button
              class="ml-4"
              type="primary"
              plain
              @click="handleSubmitRole"
              >保存</el-button
            >
            <el-button link type="danger" :icon="Warning"
              >要开启服务商功能，必须设置这一项，可在权限管理内新增角色：服务商，服务商登录账号在权限内管理</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <ComponentServiceCategory @success="init"></ComponentServiceCategory>
    <ComponetAuditData></ComponetAuditData>
    <ComponentDialogRemark
      v-model:show="state.visibleRemark"
    ></ComponentDialogRemark>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { Setting } from "@element-plus/icons-vue";

import { ElMessage } from "element-plus";

import { reactive } from "vue";
import ComponentServiceCategory from "./Components/ServiceCategory.vue";
import ComponetAuditData from "./Components/AuditData.vue";
import ComponentDialogRemark from "./Components/DialogRemark.vue";

import { useUserStoreHook } from "@/store/modules/user";
const channelId = useUserStoreHook()?.profile.id;

const state = reactive({
  roleList: [],
  roleIds: undefined,
  visibleSet: false,
  hotline: "",
  permission: undefined,
  visibleRemark: false
});

const handleSaveHotline = () => {
  if (!state.hotline) {
    return ElMessage.error("请输入咨询电话");
  }
  request
    .post("/articleService/serviceProvider/hotline", {
      hotline: state.hotline
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getHotline();
    });
};
const getHotline = () => {
  request
    .get("/articleService/open/serviceProvider", {
      params: {
        mechanismId: channelId
      }
    })
    .then(resp => {
      state.hotline = resp.data.hotline;
    });
};

const handleSubmitRole = () => {
  if (!state.roleIds) {
    return ElMessage.error("请选择服务商");
  }
  request
    .post("/articleService/demand/role", {
      roleIds: [state.roleIds]
    })
    .then(resp => {
      ElMessage.success(resp.message);
    });
};
const onSetupRequest = () => {
  state.visibleSet = true;
};

const getProcessors = () => {
  // request.get("/articleService/demand/processors").then(resp => {
  //   state.roleIds = resp.data.map(v => v.sn)?.[0];
  // });
  request.get("articleService/demand/roles", {}).then(resp => {
    state.roleIds = resp.data?.[0];
  });
};
const getDemandRoles = () => {
  request.get("mechanism/role/list", {}).then(resp => {
    state.roleList = resp.data.list;
    getProcessors();
  });
  // request.get("articleService/demand/roles", {}).then(resp => {
  //   state.roleList = resp.data.list;
  //   getProcessors();
  // });
};
const init = () => {
  getHotline();
  getDemandRoles();
};
init();
</script>
