<template>
  <div>
    <el-card shadow="never">
      <div class="text-right flex items-center justify-end">
        <el-select placeholder="全部状态类型" v-model="state.query.status">
          <el-option label="全部状态类型" :value="-1" />
          <el-option
            :label="item.k"
            :value="item.v"
            v-for="item in statusList"
            :key="item.v"
          />
        </el-select>
        <el-input
          v-model="state.query.name"
          placeholder="输入服务商名称"
          clearable
          class="w-1/3 ml-2"
        ></el-input>
        <el-button class="ml-2" type="primary" @click="onSearch"
          >搜索</el-button
        >
      </div>
    </el-card>
    <el-card shadow="never" class="mt-2">
      <el-table :data="state.list" style="width: 100%">
        <el-table-column
          label="服务商名称"
          prop="serviceProviderName"
          width=""
        ></el-table-column>
        <el-table-column
          label="服务类别"
          prop="categories"
          width=""
        ></el-table-column>
        <el-table-column
          label="负责人姓名"
          prop="principalName"
          width=""
        ></el-table-column>
        <el-table-column
          label="负责人电话"
          prop="PrincipalMobile"
          width=""
        ></el-table-column>
        <el-table-column
          label="申请时间"
          prop="createdAt"
          width=""
        ></el-table-column>
        <el-table-column label="审核进度查询码" prop="code" width="">
          <template #default="{ row }">
            <div class="flex items-center">
              {{ row.code }}
              <ComponentCopy :content="row.code"></ComponentCopy>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" prop="code" width="">
          <template #default="{ row }">
            <span :class="statusList[row.status].class">{{
              statusList[row.status].k
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注信息">
          <template #default="{ row }">
            <el-input
              type="textarea"
              v-model="row.comment"
              placeholder="备注"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">{{
              row.status ? "查看" : "审核"
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="mt-4 justify-end"
        background
        layout="prev, pager, next"
        :total="state.total"
        @current-change="changePage"
      />
    </el-card>

    <ComponentDialogExamine
      v-model:show="state.visible"
      :rowData="state.rowData"
      @success="getList"
    ></ComponentDialogExamine>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import ComponentCopy from "@/components/Copy/index.vue";
import ComponentDialogExamine from "./Components/DialogExamine.vue";
import { reactive } from "vue";
const state = reactive({
  visible: false,
  rowData: {},
  query: {
    page: 1,
    pageSize: 10, //
    status: -1, // -1:所有状态；0:可用；1:不可用
    name: undefined
  },
  list: [],
  total: 0
});
const statusList = [
  {
    k: "待审核",
    v: 0
  },
  {
    k: "审核通过",
    v: 1,
    class: "text-green-400"
  },
  {
    k: "审核不通过",
    v: 2,
    class: "text-red-400"
  }
];
const getList = () => {
  request
    .get("/articleService/serviceProvider/apply/paginate", {
      params: state.query
    })
    .then(resp => {
      state.list = resp.data.list;
      state.total = resp.data.total;
    });
};
const changePage = page => {
  state.query.page = page;
  getList();
};
const handleEdit = rowData => {
  state.rowData = rowData;
  state.visible = true;
};
const onSearch = () => {
  state.query.page = 1;
  getList();
};
const init = () => {
  getList();
};
init();
</script>
