<template>
  <div class="operation-record" style="display: inline-block">
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      title="操作记录"
      append-to-body
      width="70%"
      top="12vh"
      class="record-dialog"
      @close="cancel"
    >
      <div class="operation-record-card">
        <div class="record-table" style="min-height:530px;">
          <el-table
            v-loading="loading"
            :data="data"
            border
            class="record-table-content"
            max-height="545"
          >
            <el-table-column label="序号" min-width="60" align="center" fixed>
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作时间"
              min-width="180"
              align="center"
              prop="totalProfitRate"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | timefilter }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作人账号"
              min-width="120"
              align="center"
              prop="staffNo"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.operateType !== 12">{{
                  scope.row.staffNo
                }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作人姓名"
              min-width="120"
              align="center"
              prop="operatorName"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.operateType !== 12">{{
                  scope.row.operatorName
                }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作人角色"
              min-width="120"
              align="center"
              prop="operatorRole"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.operateType !== 12">{{
                  scope.row.operatorRole
                }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作人动作"
              min-width="120"
              align="center"
              prop="operateType"
            >
              <template slot-scope="scope">
                <span>{{ actionType(scope.row.operateType) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="from === '管理'"
              label="备注"
              min-width="120"
              align="center"
              prop="operateType"
            >
              <template slot-scope="scope">
                <span v-if="type === 8 && scope.row.operateType === 103"
                  >{{ scope.row.operatorName }}: {{ scope.row.remark }}</span
                >
                <span v-else-if="scope.row.operateType === 104"
                  >{{ scope.row.operatorName }}: {{ scope.row.remark }}</span
                >
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          :total="total"
          :current-page="current"
          :page-size="size"
          style="margin-top: 20px;text-align: right;"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import dayjs from "dayjs";
import { queryOperationLogList } from "@/api/adviser";

export default {
  props: {
    // 业务类型：0投顾 1观点包 2单篇观点 3视频 4课程 5交易圈 6图文直播 7投资组合 8股票池 9套餐产品 21三方产品
    type: {
      type: Number,
      default: 0
    },
    from: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      id: null,
      // 列表数据
      data: [],
      // 分页
      total: 1,
      current: 1,
      size: 10
    };
  },
  created() {},
  computed: {
    ...mapGetters(["user"])
  },
  filters: {
    timefilter(date) {
      return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  methods: {
    // 查询
    onSubmit() {
      this.current = 1;
      this.data = [];
      this.getNavigation();
    },
    // 获取操作记录
    async fetchData() {
      try {
        this.loading = true;
        const params = {};
        params.businessId = this.id;
        params.businessType = this.type;
        params.current = this.current;
        params.size = this.size;
        const { data, code, message } = await queryOperationLogList(params);
        if (code === 0) {
          this.data = data.list;
          this.total = data.total;
        } else {
          this.$message.error(message);
        }
        // console.log(data)
      } catch (error) {
        console.warn(error);
      } finally {
        this.loading = false;
      }
    },
    // 判断操作人动作类型
    actionType(val) {
      // 股票池
      if (this.type === 8) {
        return this.operateStatus(val);
      }
      switch (val) {
        case 2:
          if (this.type === 21) {
            return "上架";
          }
          return val;
        case 3:
          if (this.type === 21) {
            return "下架";
          }
          return val;
        case 98:
          return "新增";
        case 99:
          return "修改";
        case 101:
          return "提交";
        case 102:
          return "撤回";
        case 103:
          return "通过";
        case 104:
          return "驳回";
        case 105:
          return "上架";
        case 106:
          return "下架";
        default:
          return val;
      }
      // // 投顾
      // if (this.type === 0) {
      //   return this.operateStatus0(val)
      // }
      // // 观点包
      // if (this.type === 1) {
      //   return this.operateStatus1(val)
      // }
      // // 投资组合
      // if (this.type === 6) {
      //   return this.operateStatus6(val)
      // }
      // // 观点
      // if (this.type === 7) {
      //   return this.operateStatus7(val)
      // }
      // return val
    },
    operateStatus(val) {
      switch (val) {
        case 98:
          return "新增";
        case 99:
          return "修改";
        case 102:
          return "通过";
        case 103:
          return "驳回";
        case 104:
          return "下架";
        case 105:
          return "删除";
        default:
          return val;
      }
    },
    // // 投顾动作文本
    // operateStatus0(val) {
    //   switch (val) {
    //     case 0:
    //       return '上架申请撤回'
    //     case 1:
    //       return '提交上架申请'
    //     case 2:
    //       return '上架审核通过'
    //     case 3:
    //       return '上架审核驳回'
    //     case 4:
    //       return '直接下架'
    //     case 5:
    //       return '直接上架'
    //     case 99:
    //       return '修改'
    //     case -1:
    //       return '删除'
    //     default:
    //       return val
    //   }
    // },
    // // 观点包动作文本
    // operateStatus1(val) {
    //   switch (val) {
    //     case 0:
    //       return '上架申请撤回'
    //     case 1:
    //       return '提交上架申请'
    //     case 2:
    //       return '上架审核通过'
    //     case 3:
    //       return '上架审核驳回'
    //     case 4:
    //       return '直接下架'
    //     case 5:
    //       return '提交下架申请'
    //     case 6:
    //       return '下架审核驳回'
    //     case 7:
    //       return '下架审核通过'
    //     case 8:
    //       return '直接上架'
    //     case 9:
    //       return '下架申请撤回'
    //     case 99:
    //       return '修改'
    //     case -1:
    //       return '删除'
    //     default:
    //       return val
    //   }
    // },
    // // 投资组合动作文本
    // operateStatus6(val) {
    //   switch (val) {
    //     case 0:
    //       return '上架申请撤回'
    //     case 1:
    //       return '提交上架申请'
    //     case 2:
    //       return '上架审核通过'
    //     case 3:
    //       return '上架审核驳回'
    //     case 4:
    //       return '直接下架'
    //     case 5:
    //       return '提交下架申请'
    //     case 6:
    //       return '下架审核驳回'
    //     case 7:
    //       return '下架审核通过'
    //     case 8:
    //       return '直接上架'
    //     case 9:
    //       return '下架申请撤回'
    //     case 99:
    //       return '修改'
    //     case -1:
    //       return '删除'
    //     default:
    //       return val
    //   }
    // },
    // // 观点动作文本
    // operateStatus7(val) {
    //   switch (val) {
    //     case 1:
    //       return '上架申请撤回'
    //     case 2:
    //       return '发布'
    //     case 3:
    //       return '发布'
    //     case 4:
    //       return '上架审核驳回'
    //     case 5:
    //       return '直接下架'
    //     case 6:
    //       return '已删除'
    //     case 7:
    //       return '提交下架申请'
    //     case 8:
    //       return '下架审核驳回'
    //     case 9:
    //       return '撤回发布'
    //     case 10:
    //       return '直接上架'
    //     case 11:
    //       return '下架申请撤回'
    //     case 12:
    //       return '系统自动审核通过'
    //     case 13:
    //       return '撤回发布'
    //     case 99:
    //       return '修改'
    //     case -1:
    //       return '删除'
    //     default:
    //       return val
    //   }
    // },
    cancel() {
      this.resetForm();
    },
    resetForm() {
      this.id = null;
      this.current = 1;
      this.size = 10;
      this.total = 0;
      this.data = [];
      this.loading = false;
      this.dialog = false;
    },
    // 更改分页数量
    sizeChange(e) {
      this.current = 1;
      this.size = e;
      this.fetchData();
    },
    // 更改页码
    pageChange(e) {
      this.current = e;
      this.fetchData();
    }
  },
  watch: {
    dialog: {
      handler(newName) {
        if (newName) {
          this.fetchData();
        }
      },
      deep: true
    }
  }
};
</script>

<style scoped lang="scss">
.operation-record {
  .operation-record-card {
    .el-pagination {
      text-align: right;
    }
  }
}
.record-dialog {
  ::v-deep .el-dialog {
    min-width: 700px;
    max-width: 1000px;
  }
}
</style>
