<template>
  <div>
    <el-card shadow="never">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-button type="primary" @click="handleCreate">新建需求</el-button>
        </el-col>
        <el-col :span="18" class="text-right">
          <div class="flex">
            <el-select
              v-model="state.query.status"
              placeholder="处理情况"
              class="mr-2"
            >
              <el-option label="全部处理情况" :value="undefined"></el-option>
              <el-option
                v-for="item in state.statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="state.query.search"
              placeholder="输入搜索内容"
              class="mr-2"
            >
              <template #prepend>
                <el-select
                  v-model="state.query.searchKey"
                  placeholder="处理情况"
                  class="mr-2"
                >
                  <el-option label="提交人姓名" value="name"></el-option>
                  <el-option label="提交人档案号" value="archiveSn"></el-option>
                  <el-option label="提交人手机号" value="mobile"></el-option>
                </el-select>
              </template>
            </el-input>

            <el-button type="primary" :icon="Search" @click="onSearch"
              >搜索</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" class="mt-4">
      <div>
        <el-table :data="state.tableData" style="width: 100%">
          <el-table-column prop="createdAt" label="提交时间"> </el-table-column>
          <el-table-column prop="name" label="需求类型">
            <template #default="{ row }">
              {{ row.category.name }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="需求状态">
            <template #default="{ row }">
              <el-tag v-if="!row.status" type="danger">待处理</el-tag>
              <el-tag v-else-if="row.status == 2" type="success">已处理</el-tag>
              <el-tag v-else>处理中</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="processorName" label="服务商">
          </el-table-column>
          <el-table-column prop="name" label="提交人信息" width="350">
            <template #default="{ row }">
              <div class="flex items-center">
                <el-text>姓名： </el-text>
                <el-text tag="b">{{ row.archive.name }} </el-text>
                （<el-text tag="b">{{ row.archiveSn }}</el-text>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="复制"
                  placement="top"
                >
                  <ComponentCopy
                    :content="row.archiveSn"
                  ></ComponentCopy> </el-tooltip
                >）
              </div>
              <div class="mt-2 flex items-center">
                <el-text>性别：</el-text>
                <el-tag type="" v-if="row.archive.gender == 1" effect="plain"
                  >男</el-tag
                >
                <el-tag type="danger" v-else effect="plain">女</el-tag>
              </div>
              <div class="mt-2 flex items-center">
                <el-text>年龄：</el-text>
                <el-text tag="b">{{ formatAge(row.archive.birthday) }}</el-text>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="提交人手机号">
            <template #default="{ row }">
              <el-row class="flex items-center" v-if="row.mobile"
                >{{ row.mobile }}
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="复制"
                  placement="top"
                >
                  <ComponentCopy
                    :content="row.mobile"
                  ></ComponentCopy> </el-tooltip
              ></el-row>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="提交人住址" width="250">
            <template #default="{ row }">
              <el-text v-if="row.archive?.community">
                {{
                  row.archive?.province +
                  row.archive?.city +
                  row.archive?.area +
                  row.archive?.subDistrict +
                  row.archive?.community +
                  row.archive?.village +
                  row.archive?.building +
                  row.archive?.houseNumber
                }}
              </el-text>
              <el-text v-else>-</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="" label="需求内容">
            <template #default="{ row }">
              {{ row.content }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleEdit(row)"
                >处理</el-button
              >
              <el-popconfirm title="是否确定删除?" @confirm="handleDelete(row)">
                <template #reference>
                  <el-button type="danger" link :disabled="row.source != 1"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="mt-4 justify-end"
          background
          layout="prev, pager, next"
          :total="state.pagination.total"
          @current-change="changePage"
        />
      </div>
    </el-card>
    <ComponentDialogEditDemand
      v-model:show="state.visible"
      :rowData="state.rowData"
      @success="getTableData"
    ></ComponentDialogEditDemand>
    <ComponentDialogHandle
      v-model:show="state.visibleHandle"
      :rowData="state.rowData"
      @success="getTableData"
    ></ComponentDialogHandle>
  </div>
</template>
<script lang="ts" setup>
import { request, formatAge } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive } from "vue";
import ComponentDialogEditDemand from "./components/DialogEditDemand.vue";
import ComponentDialogHandle from "./components/DialogHandle.vue";
import ComponentCopy from "@/components/Copy/index.vue";

import { Search } from "@element-plus/icons-vue";

const state = reactive({
  query: {
    status: undefined,
    page: 1,
    pageSize: 15,
    searchKey: "name",
    search: ""
  },
  pagination: {
    total: 0
  },
  tableData: [],
  visible: false,
  visibleHandle: false,
  rowData: {},
  statusList: [
    {
      value: 0,
      label: "待处理"
    },
    {
      value: 1,
      label: "处理中"
    },
    {
      value: 2,
      label: "已处理"
    }
  ]
});
const init = () => {
  getTableData();
};
const onSearch = () => {
  state.query.page = 1;
  getTableData();
};
const getTableData = () => {
  request
    .get("articleService/demand/paginate", {
      params: state.query
    })
    .then(resp => {
      state.tableData = resp?.data.list;
      state.pagination.total = resp.data.total;
    });
};

const updateSort = async row => {
  let resp = await request.post("/articleService/demand/category/sort", {
    id: row.id,
    sort: row.sort
  });
  ElMessage.success(resp.message);
  getTableData();
};

const onChangeStatus = row => {
  ElMessageBox.confirm(
    row.status ? "确定要启用此类别吗？" : "确定要关闭此类别吗？",
    "",
    {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消"
    }
  )
    .then(async () => {
      await request.post("/articleService/demand/category/status", row);
      ElMessage.success("操作成功");
      getTableData();
    })
    .catch(err => {
      row.status = row.status ? 0 : 1;
    });
};
const handleCreate = () => {
  state.visible = true;
  state.rowData = {};
  console.log("state.rowData", state.rowData);
};
const handleEdit = row => {
  state.visibleHandle = true;
  state.rowData = row;
};
const handleDelete = row => {
  request.post("articleService/demand/delete", { id: row.id }).then(resp => {
    ElMessage.success(resp.message);
    getTableData();
  });
};
const changePage = page => {
  state.query.page = page;
  getTableData();
};
init();
</script>
