<template>
  <div>
    <el-dialog title="服务商设置" v-model="dialogVisible">
      <div>
        <el-form>
          <el-form-item label="设置服务商" required>
            <el-select
              v-model="state.roleIds"
              filterable
              placeholder="选择角色"
              clearable
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in state.roleList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
import { request } from "@/utils";
import { ElMessage } from "element-plus";

const state = reactive({
  roleList: [],
  roleIds: undefined
});
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:show", "success"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      init();
      getList();
    } else {
    }
  }
);

const init = () => {
  state.roleIds = undefined;
};
const getList = () => {
  request
    .get("/mechanism/role/list", {})
    .then(resp => {
      // getProcessors();
      state.roleList = resp.data.list;
    })
    .finally(() => {});
};
const getProcessors = () => {
  request.get("/articleService/demand/processors").then(resp => {
    state.roleIds = resp.data.map(v => v.sn)?.[0];
  });
};
const handleSubmit = () => {
  if (!state.roleIds) {
    return ElMessage.error("请选择服务商");
  }
  request
    .post("/articleService/demand/role", {
      roleIds: [state.roleIds]
    })
    .then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
      emits("success");
    });
};
</script>
