<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <t-tabs v-model="tabIndex" @change="tabIndexChange">
        <t-tab-panel :value="0" label="待审核" :destroyOnHide="false"></t-tab-panel>
        <t-tab-panel :value="1" label="已审核" :destroyOnHide="false"></t-tab-panel>
        <t-tab-panel :value="2" label="已拒绝" :destroyOnHide="false"></t-tab-panel>
      </t-tabs>
      <t-table
        rowKey="index"
        :data="list"
        :columns="columns"
        :stripe="false"
        :bordered="false"
        :hover="true"
        size="large"
        table-layout="auto"
        cellEmptyContent="-" c
      >
        <template #photo_image="{ row }">
          <img v-if="row.photo_image" :src="$store.state.user.apiUrl+row.photo_image" style="width: 50px;height: 50px">
        </template>
        <template #gender="{ row }">
          {{ row.gender == 1 ? "男" : "女" }}
        </template>
        <template #if_xianshi="{ row }">
          <t-tag theme="primary" v-if="row.if_xianshi==0">待审核</t-tag>
          <t-tag theme="success" v-if="row.if_xianshi==1">审核通过</t-tag>
          <t-tag theme="danger" v-if="row.if_xianshi==2">已拒绝</t-tag>
        </template>
        <template #select="{ row }">
          <t-space size="24px">
            <t-button theme="default" v-if="row.if_xianshi==0" @click="openMode(row,1)">审核</t-button>
            <t-button theme="default" v-if="row.if_xianshi!=0" @click="openMode(row,0)">详情</t-button>
          </t-space>
        </template>
      </t-table>
      <div style="margin-top: 30px">
        <t-pagination
          :total="total"
          :page-size="size"
          @current-change="onCurrentChange"
          :showPageSize="false"
        ></t-pagination>
      </div>
    </div>
    <t-dialog header="信息审核" :confirmBtn="null" :visible="ShenMode" :onClose="onCloseMy" :cancelBtn="null"
              width="1000px" top="50px">
      <div style="text-align: center;width: 900px;height: 700px;margin: 0 auto;position: relative;overflow-y: scroll;">
        <t-space direction="vertical">
          <t-row>
            <t-col :span="2">
              <div style="font-size: 16px;font-weight: 600">类别</div>
            </t-col>
            <t-col :span="4">
              <div style="font-size: 16px;font-weight: 600">原信息</div>
            </t-col>
            <t-col :span="2">
            </t-col>
            <t-col :span="4">
              <div style="font-size: 16px;font-weight: 600">新信息</div>
            </t-col>
          </t-row>
          <t-row style="font-size: 16px">
            <t-col :span="2">
              <t-space direction="vertical">
                <div style="height: 100px;text-align: center;line-height: 100px" v-if="typeof (updateInfo.member_log.background_image) !='undefined'">名片背景图：</div>
                <div style="height: 100px;text-align: center;line-height: 100px" v-if="typeof (updateInfo.member_log.photo_image) !='undefined'">形象照：</div>
                <div v-if="typeof (updateInfo.member_log.position_name) !='undefined'">协会职务：</div>
                <div v-if="typeof (updateInfo.member_log.nikename) !='undefined'">姓名：</div>
                <div v-if="typeof (updateInfo.member_log.gender_name) !='undefined'">性别：</div>
                <div v-if="typeof (updateInfo.member_log.phone) !='undefined'">联系方式：</div>
                <div style="height: 200px" v-if="typeof (updateInfo.member_log.introduction) !='undefined'">个人经历：</div>
                <div style="height: 100px;text-align: center;line-height: 100px" v-if="typeof (updateInfo.member_log.company_image) !='undefined'">公司图标：</div>
                <div v-if="typeof (updateInfo.member_log.enterprise_name) !='undefined'">公司名称：</div>
                <div v-if="typeof (updateInfo.member_log.industry_id) !='undefined'">公司行业：</div>
                <div v-if="typeof (updateInfo.member_log.enterprise_location) !='undefined'">公司地址：</div>
                <div style="height: 200px" v-if="typeof (updateInfo.member_log.enterprise_Introduction) !='undefined'">公司介绍：</div>
              </t-space>
            </t-col>
            <t-col :span="4">
              <t-space direction="vertical">
                <div v-if="typeof (updateInfo.member.background_image) !='undefined'" style="height: 100px;">
                  <img v-if="updateInfo.member.background_image!=''"
                       :src="$store.state.user.apiUrl+updateInfo.member.background_image"
                       style="height: 100px;width:100%">
                  <div v-if="updateInfo.member.background_image==''"
                       style="height: 100px;text-align: center;line-height: 100px">
                    无
                  </div>
                </div>
                <div v-if="updateInfo.member.photo_image" style="height: 100px;"><img
                  :src="$store.state.user.apiUrl+updateInfo.member.photo_image"
                  style="width: 100px;height: 100px"></div>
                <div v-if="typeof (updateInfo.member.position_name) !='undefined'">{{ updateInfo.member.position_name }}</div>
                <div v-if="typeof (updateInfo.member.nikename) !='undefined'">{{ updateInfo.member.nikename }}</div>
                <div v-if="typeof (updateInfo.member.gender_name) !='undefined'">{{ updateInfo.member.gender_name }}</div>
                <div v-if="typeof (updateInfo.member.phone) !='undefined'">{{ updateInfo.member.phone }}</div>
                <div style="height: 200px;overflow: scroll;" v-if="typeof (updateInfo.member.introduction) !='undefined'">{{ updateInfo.member.introduction }}</div>
                <div v-if="typeof (updateInfo.member.company_image) !='undefined'" style="height: 100px;">
                  <img v-if="updateInfo.member.company_image!=''"
                       :src="$store.state.user.apiUrl+updateInfo.member.company_image"
                       style="height: 100px">
                  <div v-if="updateInfo.member.company_image==''"
                       style="height: 100px;text-align: center;line-height: 100px">
                    无
                  </div>
                </div>
                <div v-if="typeof (updateInfo.member.enterprise_name) !='undefined'">{{ updateInfo.member.enterprise_name }}</div>
                <div v-if="typeof (updateInfo.member.industry_id) !='undefined'">{{updateInfo.member.industry_id==-1?'其他行业':updateInfo.member.industry_name }}</div>
                <div v-if="typeof (updateInfo.member.enterprise_location) !='undefined'">{{ updateInfo.member.enterprise_location==''?'无':updateInfo.member.enterprise_location }}</div>
                <div style="height: 200px;overflow: scroll;" v-if="typeof (updateInfo.member.enterprise_Introduction) !='undefined'">{{ updateInfo.member.enterprise_Introduction }}</div>
              </t-space>
            </t-col>
            <t-col :span="2">
              <div style="position: absolute;width: 100%;">
                <SwapRightIcon size="2em"/>
              </div>
            </t-col>
            <t-col :span="4">
              <t-space direction="vertical">
                <div v-if="updateInfo.member_log.background_image" style="height: 100px;"><img
                  :src="$store.state.user.apiUrl+updateInfo.member_log.background_image"
                  style="height: 100px;width:100%"></div>
                <div v-if="updateInfo.member_log.photo_image" style="height: 100px;"><img
                  :src="$store.state.user.apiUrl+updateInfo.member_log.photo_image"
                  style="width: 100px;height: 100px"></div>
                <div v-if="typeof (updateInfo.member_log.position_name) !='undefined'">{{ updateInfo.member_log.position_name }}</div>
                <div v-if="typeof (updateInfo.member_log.nikename) !='undefined'">{{ updateInfo.member_log.nikename }}</div>
                <div v-if="typeof (updateInfo.member_log.gender_name) !='undefined'">{{ updateInfo.member_log.gender_name }}</div>
                <div v-if="typeof (updateInfo.member_log.phone) !='undefined'">{{ updateInfo.member_log.phone }}</div>
                <div style="height: 200px;overflow: scroll;" v-if="typeof (updateInfo.member_log.introduction) !='undefined'">{{ updateInfo.member_log.introduction }}</div>
                <div v-if="typeof (updateInfo.member_log.company_image) !='undefined'" style="height: 100px;">
                  <img v-if="updateInfo.member_log.company_image!=''"
                       :src="$store.state.user.apiUrl+updateInfo.member_log.company_image"
                       style="width: 100px;height: 100px">
                  <div v-if="updateInfo.member_log.company_image==''"
                       style="height: 100px;text-align: center;line-height: 100px">
                    无
                  </div>
                </div>
                <div v-if="typeof (updateInfo.member_log.enterprise_name) !='undefined'">{{ updateInfo.member_log.enterprise_name }}</div>
                <div v-if="typeof (updateInfo.member_log.industry_id) !='undefined'">{{updateInfo.member_log.industry_id==-1?'其他行业':updateInfo.member_log.industry_name }}</div>
                <div v-if="typeof (updateInfo.member_log.enterprise_location) !='undefined'">{{ updateInfo.member_log.enterprise_location }}</div>
                <div style="height: 200px;overflow: scroll;" v-if="typeof (updateInfo.member_log.enterprise_Introduction) !='undefined'">{{ updateInfo.member_log.enterprise_Introduction }}</div>
              </t-space>
            </t-col>
          </t-row>
        </t-space>
        <div style="text-align: center;margin-top: 50px" v-if="type==1">
          <t-popconfirm content="确定要审核通过吗？" v-model="v1" @confirm="shenDo(1)">
            <t-button theme="success">审核通过</t-button>
          </t-popconfirm>
          <t-popconfirm theme="danger" v-model="v2" @confirm="shenDo(2)">
            <template slot="content">
              <p class="title">拒绝理由</p>
              <p class="describe" style="margin-top: 10px">
                <t-input v-model="content" placeholder="请输入拒绝理由"/>
              </p>
            </template>
            <t-button theme="danger" style="margin-left: 30px">审核拒绝</t-button>
          </t-popconfirm>
        </div>
      </div>
    </t-dialog>
  </t-card>
</template>
<script lang="ts">
import store from "@/store";
import {SwapRightIcon} from "tdesign-icons-vue";

export default {
  components: {SwapRightIcon},
  data() {
    return {
      v1: false,
      v2: false,
      association: {},
      ShenMode: false,
      list: [],
      tabIndex: 0,
      columns: [
        {colKey: 'nikename', title: '会员姓名'},
        {colKey: 'createtime', title: '申请时间'},
        {colKey: 'if_xianshi', title: '状态'},
        {colKey: 'select', title: '操作', width: 200},
      ],
      total: 0,
      page: 1,
      size: 10,
      updateInfo: {
        member: {},
        member_log: {}
      },
      member_id: 0,
      id: 0,
      content: '',
      type: 0,
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    tabIndexChange(d){
      console.log(d);
      this.list = [];
      this.total = 0;
      this.getList();
    },
    shenDo(dis) {
      if (dis == 2 && this.content == '') {
        this.$message.error('请填写拒绝理由！');
        return;
      }
      if (dis == 1) {
        this.content = '您提交的信息修改已通过审核！';
      }else{

      }
      this.$request
        .post("/member_log/update", {
          member_id: this.member_id,
          id: this.id,
          if_xianshi: dis,
          if_member: dis,
          content: this.content,
          member_log: JSON.stringify(this.updateInfo.member_log)
        })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.ShenMode = false;
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    openMode(d, index) {
      this.type = index;
      this.member_id = d.member_id;
      this.id = d.id;
      this.$request
        .post("/member_log/find", {member_id: d.member_id, id: d.id})
        .then((res) => {
          this.ShenMode = true;
          console.log(res);
          this.updateInfo = res.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onCloseMy() {
      this.ShenMode = false;
    },
    getList() {
      this.$request
        .post("/member_log/index", {page: this.page, size: this.size,if_xianshi:this.tabIndex})
        .then((res) => {
          console.log(res);
          this.list = res.data.ret;
          this.total = res.data.count;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onCurrentChange(d) {
      this.page = d;
      this.getList();
    },
    onSubmit() {
      this.page = 1;
      this.list = [];
      this.getList();
    },
  }
}
</script>
<style scoped lang="less">
::-webkit-scrollbar {
  width: 2px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent; /* 可以设置轨道的颜色 */
}

/* 滚动条 thumb（可拖动的部分） */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5); /* 可以设置 thumb 的颜色 */
  border-radius: 4px; /* 可以设置 thumb 的圆角 */
}

/* 滚动条 hover 状态 */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.8);
}
</style>
