<template>
  <div>
    <div class="search-wrapper">
      <el-form
        :inline="true"
        :model="searchForm"
        class="search_form"
        style="text-align: left"
      >
        <el-form-item label="求助类型">
          <el-select
            v-model="searchForm.categoryId"
            clearable
            placeholder="请选择求助类型"
            size="medium"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="searchForm.content"
            placeholder="请输入描述"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入电话"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <br />
        <el-form-item label="审核状态" style="margin-top: 10px">
          <el-radio-group v-model="searchForm.state" @change="onSubmit">
            <el-radio label="">全部</el-radio>
            <el-radio :label="0">未审核</el-radio>
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="4">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <br />

        <el-form-item label="启用状态" style="margin-top: 10px">
          <el-radio-group v-model="searchForm.delFlag" @change="onSubmit">
            <el-radio label="">全部</el-radio>
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-wrapper">
      <table-template
        :tableData="tableData"
        :tableColumns="tableColumns"
        :loading="loading"
        :pagination="pagination"
        @Jump="jumpPage"
      >
        <el-table-column slot="state" label="审核状态" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="
                scope.row.state == 0 ||
                scope.row.state == 1 ||
                scope.row.state == 4
              "
              :type="
                scope.row.state == 4
                  ? 'danger'
                  : scope.row.state == 1
                  ? 'success'
                  : ''
              "
              >{{ scope.row.stateName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column slot="delFlag" label="启用状态" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.delFlag == 0 || scope.row.delFlag == 1"
              :type="
                scope.row.delFlag == 1
                  ? 'danger'
                  : scope.row.delFlag == 0
                  ? 'success'
                  : ''
              "
              >{{ scope.row.flagName }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="350" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" round @click="view(scope.row)"
              >查看</el-button
            >
            <el-button
              @click="delFlagHandle(scope.row)"
              :type="scope.row.delFlag == 0 ? 'warning' : 'success'"
              size="mini"
              round
              slot="reference"
              >{{ scope.row.delFlag == 0 ? "禁用" : "启用" }}
            </el-button>
          </template> </el-table-column
        >s
      </table-template>
    </div>

    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="30%"
      destroy-on-close
    >
      <div class="cell">
        <p class="label">求助类型</p>
        <p class="value">{{ detail.categoryName }}</p>
      </div>
      <div class="cell">
        <p class="label">描述</p>
        <p class="value">{{ detail.content }}</p>
      </div>
      <div class="cell">
        <p class="label">详细地址</p>
        <p class="value">{{ detail.address }}</p>
      </div>
      <div class="cell">
        <p class="label">区</p>
        <p class="value">{{ detail.district }}</p>
      </div>
      <div class="cell">
        <p class="label">电话</p>
        <p class="value">{{ detail.phone }}</p>
      </div>

      <div class="cell">
        <p class="label">创建时间</p>
        <p class="value">{{ detail.createTime }}</p>
      </div>
      <div class="cell">
        <p class="label">审核状态</p>
        <p class="value">
          <el-tag
            v-if="detail.state == 0 || detail.state == 1 || detail.state == 4"
            :type="
              detail.state == 4 ? 'danger' : detail.state == 1 ? 'success' : ''
            "
            >{{
              detail.state == 4
                ? "审核拒绝"
                : detail.state == 1
                ? "审核通过"
                : "未审核"
            }}</el-tag
          >
        </p>
      </div>
      <div class="cell">
        <p class="label">启用状态</p>
        <p class="value">
          <el-tag
            v-if="detail.delFlag == 0 || detail.delFlag == 1"
            :type="detail.delFlag == 1 ? 'danger' : 'success'"
            >{{ detail.delFlag == 1 ? "禁用" : "启用" }}</el-tag
          >
        </p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="detail.state == 0"
          :disabled="detail.state != 0"
          type="success"
          round
          slot="reference"
          @click="reviewHandle('pass', detail)"
          >通过
        </el-button>

        <el-button
          type="danger"
          round
          v-if="detail.state == 0"
          :disabled="detail.state != 0"
          slot="reference"
          @click="reviewHandle('refuse', detail)"
          >拒绝
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableTemplate from "@/components/Table";
import {
  categoryList,
  helpList,
  helpReview,
  helpEnable,
  helpDetail,
} from "@/api/livingCircle";

export default {
  name: "enter",
  components: { tableTemplate },
  data() {
    return {
      dialogVisible: false,
      detail: {},
      typeList: [],
      searchForm: {
        state: "",
        categoryId: "",
        content: "",
        phone: "",
        delFlag: "",
      },
      // taskData: {
      //   myTask: 1,
      //   finishedTask: 2,
      //   allTask: 3,
      // },
      // activeName: "1",
      loading: false,
      tableData: [],
      userName: "",
      tableColumns: [
        {
          key: "categoryName",
          label: "求助类型",
        },
        {
          key: "content",
          label: "描述",
        },
        {
          key: "address",
          label: "详细地址",
          width: 220,
        },
        {
          key: "phone",
          label: "电话",
        },
        {
          key: "district",
          label: "区",
        },
        {
          key: "createTime",
          label: "创建时间",
          width: 180,
        },
        {
          key: "state",
          label: "审核状态",
          type: "slot",
        },
        {
          key: "delFlag",
          label: "启用状态",
          type: "slot",
        },
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  created() {
    this.userName = localStorage.getItem("userName");

    this.getCategoryList();
    this.init();
  },
  methods: {
    init() {
      let params = {
        categoryId: this.searchForm.categoryId,
        state: this.searchForm.state,
        delFlag: this.searchForm.delFlag,
        phone: this.searchForm.phone,
        content: this.searchForm.content,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
      };
      helpList(params).then((res) => {
        if (res.code == 200) {
          this.tableData =
            res.data.list && res.data.list.length > 0
              ? res.data.list.map((item) => {
                  return {
                    ...item,
                    stateName:
                      item.state == 0
                        ? "未审核"
                        : item.state == 1
                        ? "审核通过"
                        : item.state == 4
                        ? "审核拒绝"
                        : "",
                    flagName:
                      item.delFlag == 0
                        ? "启用"
                        : item.delFlag == 1
                        ? "禁用"
                        : "",
                  };
                })
              : [];
          this.pagination.total = res.data.total;
        } else {
          this.$message.warning(res.msg || "查询列表失败");
        }
      });
    },
    reviewHandle(type, row) {
      let params = {};
      if (type === "pass") {
        this.$prompt(`确定通过该申请吗?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPlaceholder: "请输入原因",
          inputType: "textarea",
        }).then(({ value }) => {
          if (!value) {
            this.$message.error("未输入原因");
            return;
          } else {
            params = {
              id: row.id,
              state: 1,
              user: this.userName,
              reason: value,
            };
            helpReview(params).then((res) => {
              if (res.code == 200) {
                this.$message.success("审核成功");
                this.init();
                this.dialogVisible = false;
              } else {
                this.$message.warning(res.msg || "审核失败");
              }
            });
          }
        });
      } else {
        this.$prompt(`确定拒绝该申请吗?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPlaceholder: "请输入原因",
          inputType: "textarea",
        }).then(({ value }) => {
          if (!value) {
            this.$message.error("未输入原因");
            return;
          } else {
            params = {
              id: row.id,
              state: 4,
              user: this.userName,
              reason: value,
            };
            helpReview(params).then((res) => {
              if (res.code == 200) {
                this.$message.success("审核成功");
                this.init();
                this.dialogVisible = false;
              } else {
                this.$message.warning(res.msg || "审核失败");
              }
            });
          }
        });
      }
    },

    view(row) {
      helpDetail(row.id).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;
          this.dialogVisible = true;
        } else {
          this.$message.warning(res.msg || "获取详情失败");
        }
      });
    },
    delFlagHandle(row) {
      helpEnable({
        id: row.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.init();
        } else {
          this.$message.warning(res.msg || "操作失败");
        }
      });
    },
    getCategoryList() {
      categoryList().then((res) => {
        if (res.code == 200) {
          this.typeList = res.data;
        } else {
          this.$message.warning(res.msg || "获取求助类型失败");
        }
      });
    },
    handleClick() {
      this.loading = true;
      this.init();
      this.loading = false;
    },
    jumpPage() {
      this.init();
    },
    onSubmit() {
      this.init();
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/stylus/common';
.btn{
    margin-right 10px
}
.cell {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;

  .label {
    width: 150px;
    color: #999;
    text-align: left;

    span {
      color: red;
      font-size: 12px;
    }
  }

  .value {
    color: #000;
    text-align: left;
  }

  .value1 {
    color: red;
  }

  .value2 {
    color: green;
  }

  .info {
    .item {
      width: 100%;
      text-align: left;
      color: #000;
      margin-bottom: 10px;
    }

    .item:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
