<template>
  <div class="app-container">
    <!-- 头部搜索栏 -->
    <div class="head-container">
      <el-input
        v-model="tgName"
        clearable
        placeholder="搜索投顾名称"
        style="width: 150px"
        class="filter-item"
        @keyup.enter.native="toQuery"
      />
      <el-input
        v-model="staffNo"
        clearable
        placeholder="搜索投顾员工号"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="toQuery"
      />
      <el-select
        v-model="status"
        clearable
        placeholder="全部状态"
        class="filter-item"
        style="width: 130px"
      >
        <el-option
          v-for="item in queryTypeOptions"
          :key="item.key"
          :label="item.display_name"
          :value="item.key"
        />
      </el-select>
      <!-- 搜索图标 icon="el-icon-search" -->
      <el-button class="filter-item" size="mini" type="primary" @click="toQuery"
        >查询</el-button
      >
      <!-- <el-button
      class="filter-item"
      size="mini"
      type="success"
      style="margin-left:0px;"
      @click="added"
      >新增</el-button> -->
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%">
      <el-table-column
        label="序号"
        width="60"
        align="center"
        type="index"
        fixed
      />
      <el-table-column prop="staffNo" align="center" label="登录账号" />
      <el-table-column
        prop="upId"
        align="center"
        label="员工号"
        min-width="100"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="name"
        label="投顾姓名"
        align="center"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="showName"
        label="投顾展业姓名"
        align="center"
        min-width="100"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="phone"
        label="投顾手机号"
        align="center"
        min-width="100"
      />
      <el-table-column
        label="投顾执业证号"
        :show-overflow-tooltip="true"
        align="center"
        prop="license"
        min-width="100"
      />
      <el-table-column label="展示头像" align="center" prop="avatar">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" width="50" height="50" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="false"
        label="性别"
        align="center"
        prop="sex"
        width="50"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.sex === 0 ? "男" : "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="deptName"
        label="营业部名称"
        align="center"
      />
      <el-table-column
        label="首次上线时间"
        align="center"
        prop="auditTime"
        min-width="100"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.auditTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span>{{ getStatus(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="驳回理由" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.reason }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="225">
        <template slot-scope="scope">
          <el-button
            v-if="tgAuthObj.admin[scope.row.status].includes('上架')"
            size="mini"
            type="primary"
            class="inline-btn"
            style="margin-left: 10px;"
            @click="operateInfo(scope.row, 105)"
            >上架</el-button
          >
          <el-button
            v-if="tgAuthObj.admin[scope.row.status].includes('下架')"
            type="primary"
            size="mini"
            class="inline-btn"
            @click="operateInfo(scope.row, 106)"
            >下架</el-button
          >
          <el-button
            v-if="tgAuthObj.admin[scope.row.status].includes('查看')"
            type="primary"
            size="mini"
            class="inline-btn"
            @click="see(scope.row)"
            >查看</el-button
          >
          <el-button
            v-if="tgAuthObj.admin[scope.row.status].includes('审核')"
            size="mini"
            type="primary"
            class="inline-btn"
            @click="audit(scope.row)"
            >审核</el-button
          >
          <el-button
            v-if="tgAuthObj.admin[scope.row.status].includes('编辑')"
            size="mini"
            type="primary"
            class="inline-btn"
            @click="edit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
      <!-- v-if="user.user.deptId === 5000" -->
      <el-table-column label="操作记录" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="record(scope.row)"
            >查看记录</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 50px"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
    <!-- 编辑 -->
    <updateAdviser ref="update" />
    <!-- 审核 -->
    <auditAdviser ref="audit" />
    <!-- 查看 -->
    <checkAdviser ref="check" />
    <!-- 新增投顾 -->
    <addedAdviser ref="added" />
    <!-- 查看记录 -->
    <OperationRecord ref="operationRecord" :type="0"></OperationRecord>
  </div>
</template>

<script>
import keyBy from "lodash/keyBy";
import updateAdviser from "./components/updateAdviser";
import auditAdviser from "./components/auditAdviser";
import checkAdviser from "./components/checkAdviser";
import addedAdviser from "./components/addedAdviser.vue";
import OperationRecord from "@/components/OperationRecord/index";
import { parseTime } from "@/utils/index";
import { tgList, updateTgStatus } from "@/api/adviser.js";
import { mapGetters } from "vuex";
import { tgAuthObj } from "./config";

export default {
  name: "投顾管理",
  components: {
    updateAdviser,
    auditAdviser,
    checkAdviser,
    addedAdviser,
    OperationRecord
  },
  activated() {
    this.getTgInfoList();
  },
  data() {
    return {
      tgAuthObj,
      total: 0,
      page: 1,
      size: 10,
      loading: false,
      tgName: "",
      staffNo: "",
      status: null,
      query: {},
      queryTypeOptions: [
        { key: 1, display_name: "待提交" },
        { key: 2, display_name: "待审核" },
        { key: 3, display_name: "已上架" },
        { key: 4, display_name: "已驳回" },
        { key: 5, display_name: "已下架" }
      ],
      data: []
    };
  },

  mounted() {
    this.getTgInfoList();
  },
  computed: {
    ...mapGetters(["user"])
  },

  methods: {
    parseTime,
    async getTgInfoList() {
      this.loading = true;
      const { data, code, message } = await tgList({
        size: this.size,
        current: this.page,
        name: this.tgName,
        staffNo: this.staffNo,
        status: this.status
      });
      if (code === 0) {
        this.data = data.list;
        this.total = data.total;
      } else {
        this.$message.error(message);
      }
      // console.log(this.data)
      this.loading = false;
    },
    getStatus(status) {
      const statusObj = keyBy(this.queryTypeOptions, "key")[status];
      return statusObj ? statusObj.display_name : "";
    },
    async operateInfo(params, status) {
      const data = await updateTgStatus({
        id: params.id,
        event: status
      });
      if (data.code === 0) {
        this.$message.success("操作成功");
        this.getTgInfoList();
      } else {
        this.$message.error(data.message);
      }
    },
    edit(data) {
      const _this = this.$refs.update;
      console.log("_this", _this);
      _this.form.id = data.id;
      _this.dialog = true;
    },
    audit(data) {
      const _this = this.$refs.audit;
      _this.form.id = data.id;
      _this.dialog = true;
    },
    see(data) {
      const _this = this.$refs.check;
      _this.form.id = data.id;
      _this.dialog = true;
    },
    // 操作记录
    record(row) {
      // console.log(row)
      const _this = this.$refs.operationRecord;
      _this.id = row.id;
      _this.dialog = true;
    },
    resetFields() {
      this.content = "";
      this.$nextTick(() => this.$refs.tinymce.setContent(""));
    },
    // 查询功能
    toQuery() {
      this.page = 1;
      this.getTgInfoList();
    },
    // 新增
    added() {
      const _this = this.$refs.added;
      // _this.form.id = data.id
      _this.dialog = true;
    },
    // 分页器
    sizeChange(e) {
      this.page = 1;
      this.size = e;
      this.getTgInfoList();
    },
    pageChange(e) {
      this.page = e;
      this.getTgInfoList();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-table .cell {
  text-align: center;
}
::v-deep .el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
