<template>
  <div class="app-container">
    <el-select v-model="searchParams.status">
      <el-option label="全部" value="" />
      <el-option label="未审核" :value="0" />
      <el-option label="已驳回" :value="2" />
      <el-option label="已通过" :value="1" />
      <el-option label="已取消" :value="3" />
    </el-select>
    <el-select v-model="searchParams.type">
      <el-option label="全部" value="" />
      <el-option label="升级" :value="1" />
      <el-option label="降级" :value="0" />
      <el-option label="删除" :value="2" />
    </el-select>
    <el-input
      v-model="searchParams.search_name"
      type="text"
      placeholder="代理昵称/手机号"
      style="width: 230px"
      clearable
      @keydown.enter="search"
    />
    <el-button type="primary" @click="search">搜索</el-button>
    <el-table
      :data="list"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
      style="margin: 20px 0;"
    >
      <el-table-column
        prop="headimgurl"
        label="头像"
        align="center"
        width="60"
      >
        <template slot-scope="{ row }">
          <el-image :src="row.get_apply_user && row.get_apply_user.headimgurl" fit="contain" class="hoverImg" />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" align="center" width="80">
        <template slot-scope="{ row }">
          <el-button type="text" @click="getOtherInfo(row.get_apply_user.id)">{{ row.get_apply_user && row.get_apply_user.nickname.slice(0,5) }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="真实姓名" align="center" width="80">
        <template slot-scope="{ row }">
          <el-button type="text" @click="getOtherInfo(row.get_apply_user.id)">{{ row.get_apply_user && row.get_apply_user.realname }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="手机号" align="center" width="110">
        <template slot-scope="{ row }">
          <span>{{ row.get_apply_user && row.get_apply_user.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="level"
        align="center"
        label="代理级别"
        width="100"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag
            :color="levelStatus(row.get_apply_user && row.get_apply_user.level).color"
            style="color:#ffffff;"
          >
            {{ levelStatus(row.get_apply_user && row.get_apply_user.level).name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="agent"
        label="申请人"
        align="center"
      >
        <template slot-scope="{ row }">
          <span class="buttonText" @click="getOtherInfo(row.get_user.id)">{{ row.get_user && row.get_user.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="agent"
        label="申请时间"
        align="center"
        width="160"
      >
        <template slot-scope="{ row }">
          <span>{{ row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="agent"
        label="申请类型"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.type === 1?'success':row.type === 0?'':'danger'"> {{ row.type | type }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="agent"
        label="申请原因"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="showApply(row, diaType = 0)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="agent"
        label="状态"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.apply_status == 1?'info':row.status == 1? 'success':row.status == 0? '' : 'danger'">
            {{ row.apply_status == 1?'已取消':row.status == 1? '已通过':row.status == 0? '未审核' : '已驳回' }}
          </el-tag><br>
          <el-button v-if="row.status === 2" type="text" size="medium" @click="showApply(row, diaType = 1)">查看驳回原因</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="agent"
        label="审核时间"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <span>{{ row.status == 0? '暂无审核时间' : row.op_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" :disabled="row.apply_status === 1 || (row.apply_status === 0 && row.status !== 0)" @click="examineSuccess(row.get_apply_user,row.type,row.id)">通过</el-button>
          <el-button type="danger" :disabled="row.apply_status === 1 || (row.apply_status === 0 && row.status !== 0)" @click="showExamineError(row.id)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看代理详情 -->
    <el-drawer :title="`${memberInfo.realname} - ${levelStatus(memberInfo.level).name}`" :visible.sync="visible.memberInfo" direction="rtl" size="600px">
      <MemberInfo :info="memberInfo" :team-type="true" :show-num="roles.includes(6) || user.role_name === 'root'" @getOtherInfo="changeOtherInfo" />
    </el-drawer>
    <pagination
      :total="total"
      :limit="searchParams.page_size"
      :page="searchParams.page_index"
      style="margin: 0 0 20px 0"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
    <el-dialog
      title="驳回"
      :visible.sync="dialogBack"
      width="30%"
      :before-close="resetBack"
    >
      <el-form>
        <el-form-item label="驳回原因:">
          <el-input
            v-model="examineParams.remark"
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
          />
        </el-form-item>
        <div class="desc" style="margin-bottom:15px">上传图片:</div>
        <div class="avatar-uploader-container">
          <template v-if="deleteUserImg.length > 0">
            <div v-for="(img, i) in deleteUserImg" :key="i" class="avatar">
              <el-image
                :src="img"
                fit="contain"
                style="width: 100%; height: 100%"
                :preview-src-list="[img]"
                :z-index="10000"
              />
              <div class="upload-delete" @click="removeDeleteUserImg(i)">
                <i class="el-icon-delete-solid" />
              </div>
            </div>
          </template>
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :multiple="true"
            :http-request="submitDeleteUploadImg"
          >
            <i class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </div>
      </el-form>
      <template slot="footer">
        <el-button @click="resetBack">取消</el-button>
        <el-button type="primary" @click="toSubmitBack">驳回</el-button>
      </template>
    </el-dialog>
    <!-- 申请原因弹窗 -->
    <el-dialog :title="diaType === 0? '申请原因':'驳回原因'" :visible.sync="dialogFormVisible" width="40%">
      <div class="applyBox">
        <div class="title">
          <h2 v-if="diaType === 0">{{ item.type | type }}原因:</h2>
          <h2 v-else>驳回原因:</h2>
          <div class="cause">{{ diaType === 0? item.cause : item.remark }}</div>
        </div>
        <div v-if="imgList" class="imgList">
          <el-image
            v-for="(imgs,index) in imgList"
            :key="index"
            :src="imgs"
            fit="fit"
            :preview-src-list="imgList"
            style="width:150px;height:150px;margin-right:15px"
            :z-index="10000"
          />
        </div>
      </div>
    </el-dialog>
    <!-- 删除/降级代理 -->
    <el-dialog
      :title="type === 0? '降级':'删除代理'"
      :visible.sync="dialogDel"
      :close-on-click-modal="false"
      :show-close="false"
      width="520px"
      class="dialog_delete"
    >
      <span class="desc">{{ type === 0? '请选择降级代理的原因:':'请选择删除代理的原因:' }}</span>
      <el-popover
        v-model="change_cause_vis"
        placement="bottom-start"
        trigger="click"
      >
        <div
          v-for="items in deleteReasonList"
          :key="items.id"
          class="options_item"
          @click="changeDelReason(items.cause)"
        >
          <p>{{ items.cause }}</p>
          <i class="el-icon-error" @click.stop="deleteReason(items.id)" />
        </div>
        <el-input
          slot="reference"
          v-model="deleteMemberInfo.remark"
          type="text"
          placeholder="请选择原因"
          :readonly="true"
          :suffix-icon="
            change_cause_vis ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
          "
          class="input_like_select"
        />
      </el-popover>
      <el-popover v-model="delete_cause_vis" placement="bottom" trigger="click">
        <div style="display: flex; align-items: center">
          <el-input
            v-model="delete_cause"
            type="textarea"
            :rows="1"
            resize="none"
            maxlength="10"
            show-word-limit
          />
          <el-button
            type="primary"
            size="small"
            style="margin-left: 10px"
            @click="addDeleteReason"
          >添加</el-button>
        </div>
        <el-button slot="reference" type="text">添加原因</el-button>
      </el-popover>
      <!-- <el-input v-model="deleteMemberInfo.remark" type="textarea" class="textarea_h" maxlength="250" show-word-limit /> -->
      <span class="desc">上传图片:</span>
      <div class="avatar-uploader-container">
        <template v-if="deleteUserImg.length > 0">
          <div v-for="(img, i) in deleteUserImg" :key="i" class="avatar">
            <el-image
              :src="img"
              fit="contain"
              style="width: 100%; height: 100%"
              :preview-src-list="[img]"
              :z-index="10000"
            />
            <div class="upload-delete" @click="removeDeleteUserImg(i)">
              <i class="el-icon-delete-solid" />
            </div>
          </div>
        </template>
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :multiple="true"
          :http-request="submitDeleteUploadImg"
        >
          <i class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </div>
      <el-button @click="resetDialogDelete">取消</el-button>
      <el-button type="primary" @click="submitDelete">确定</el-button>
    </el-dialog>
    <div v-show="popup">
      <!--这里是要展示的内容层-->
      <div class="box">
        <div class="box-left">提示</div>
        <div class="box-middle">确认审核通过？</div>
        <div class="box-right">
          <div />
          <div>
            <el-button @click="popup=false">取消</el-button>
            <el-button type="primary" @click="confirm">确认</el-button>
          </div>
        </div>
      </div>
      <!--这里是半透明背景层-->
      <div class="over" />
    </div>
  </div>
</template>
<script>
import { getList, UpdateApplyStatus, get_jj_cause, add_jj_cause, destory_jj_cause } from '@/api/team/apply'
import { getOtherInfo } from '@/api/team/common'
import { editLevel, deleteMemberReason, addDelReason, deleteUploadImg, delReason, deleteMember } from '@/api/team/member'
import { levelStatus } from '@/filters/common'
import { mapState } from 'vuex'
import MemberInfo from './components/MemberInfo'
export default {
  components: {
    MemberInfo
  },
  filters: {
    type(v) {
      if (v === 0) {
        return '降级'
      } else if (v === 1) {
        return '升级'
      } else if (v === 2) {
        return '删除'
      }
    }
  },
  data() {
    const roles = this.$route.meta.buttonAuthList ? this.$route.meta.buttonAuthList : []
    return {
      diaType: '',
      roles,
      show: '',
      popup: false,
      popupId: '',
      screenWidth: '',
      dialogFormVisible: false,
      dialogDel: false,
      detailForm: {
        invite: '',
        agency: ''
      },
      item: {},
      imgList: [],
      searchParams: {
        page_index: 1,
        page_size: 10,
        status: '',
        type: '',
        search_name: ''
      },
      dialogBack: false,
      examineParams: {
        id: '',
        remark: '',
        status: ''
      },
      list: [],
      total: 0,
      memberInfo: {
        realname: '',
        level: ''
      },
      visible: {
        memberInfo: false
      },
      reasonList: [],
      addReason: '',
      showAddReason: false,
      deleteMemberInfo: {
        id: '',
        remark: ''
      },
      type: '',
      deleteUserImg: [],
      deleteReasonList: [],
      delete_cause: '',
      delete_cause_vis: false,
      change_cause_vis: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    this.levelStatus = levelStatus
    this.getList()
  },
  methods: {
    // 审核通过
    examineSuccess(row, type, id) {
      this.examineParams.id = id
      console.log(row, type)
      if (type === 1) {
        if (row.level + 1 === 4) {
          this.$message.error('该代理已经是销售经理，无法再进行升级操作！')
          return false
        }
        this.handleEditLevel(row, row.level + 1)
      } else if (type === 0) {
        this.level = row.level - 1
        if (this.level === 0) {
          this.$message.error('该代理已经是销售主管，无法再进行降级操作！')
          return false
        }
        // this.handleEditLevel(row, row.level - 1)
        const _this = this
        this.type = 0
        this.getDeleteReason(() => {
          _this.deleteMemberInfo.id = row.id
          _this.dialogDel = true
        })
      } else if (type === 2) {
        const _this = this
        this.type = 2
        this.getDeleteReason(() => {
          _this.deleteMemberInfo.id = row.id
          _this.dialogDel = true
        })
      }
    },
    // 获取降级/删除代理的理由
    getDeleteReason(cb) {
      const loading = this.$loading()
      if (this.type === 0) {
        get_jj_cause()
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.deleteReasonList = res.data
              cb && cb()
            } else {
              this.$message.error(res.message || '获取降级代理原因失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('获取降级代理原因失败')
          })
      } else {
        deleteMemberReason()
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.deleteReasonList = res.data
              cb && cb()
            } else {
              this.$message.error(res.message || '获取删除代理原因失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('获取删除代理原因失败')
          })
      }
    },
    // 选择理由
    changeDelReason(val) {
      this.deleteMemberInfo.remark = val
      this.change_cause_vis = false
    },
    // 添加删除代理原因
    addDeleteReason() {
      if (!this.delete_cause) {
        this.$message.error('请选择原因')
        return false
      }
      const loading = this.$loading()
      if (this.type === 0) {
        add_jj_cause({
          cause: this.delete_cause
        })
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.$message.success('添加成功')
              this.delete_cause_vis = false
              this.delete_cause = ''
              this.getDeleteReason()
            } else {
              this.$message.error(res.message || '添加失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('添加失败')
          })
      } else {
        addDelReason({
          cause: this.delete_cause
        })
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.$message.success('添加成功')
              this.delete_cause_vis = false
              this.delete_cause = ''
              this.getDeleteReason()
            } else {
              this.$message.error(res.message || '添加失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('添加失败')
          })
      }
    },
    // 删除代理原因
    deleteReason(id) {
      const loading = this.$loading()
      if (this.type === 0) {
        destory_jj_cause({ id })
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.getDeleteReason()
            } else {
              this.$message.error(res.message || '删除原因失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('删除原因失败')
          })
      } else {
        delReason({ id })
          .then((res) => {
            loading.close()
            if (res.code === 200) {
              this.getDeleteReason()
            } else {
              this.$message.error(res.message || '删除原因失败')
            }
          })
          .catch(() => {
            loading.close()
            this.$message.error('删除原因失败')
          })
      }
    },
    // 删除代理上传图片
    submitDeleteUploadImg(params) {
      const { file } = params
      const formdata = new FormData()
      this.loadingFull = true
      formdata.append('file', file)
      deleteUploadImg(formdata)
        .then((res) => {
          this.loadingFull = false
          if (res.code === 200) {
            this.deleteUserImg.push(res.data)
          } else {
            this.$message.error(res.message || '上传图片失败')
          }
        })
        .catch(() => {
          this.loadingFull = false
          this.$message.error('上传图片失败')
        })
    },
    removeDeleteUserImg(i) {
      this.deleteUserImg.splice(i, 1)
    },
    // 删除/降级代理
    submitDelete() {
      const { id, remark } = this.deleteMemberInfo
      if (!remark) {
        this.$message.error('请选择原因')
      } else {
        this.loadingFull = true
        if (this.type === 0) {
          editLevel({
            id,
            remark,
            level: this.level,
            img: JSON.stringify(this.deleteUserImg)
          })
            .then((res) => {
              this.loadingFull = false
              if (res.code === 200) {
                this.getApply()
                this.resetDialogDelete()
              } else {
                this.$message.error(res.message)
              }
            })
            .catch((e) => {
              this.loadingFull = false
            })
        } else {
          deleteMember({
            id,
            remark,
            img: JSON.stringify(this.deleteUserImg)
          })
            .then((res) => {
              this.loadingFull = false
              if (res.code === 200) {
                this.getApply()
                this.resetDialogDelete()
              } else {
                this.$message.error(res.message)
              }
            })
            .catch((e) => {
              this.loadingFull = false
            })
        }
      }
    },
    resetDialogDelete() {
      this.deleteMemberInfo = {
        id: '',
        remark: ''
      }
      this.deleteUserImg = []
      this.dialogDel = false
    },
    // 变更销售级别
    handleEditLevel(row, next) {
      const { id, realname } = row
      let msg
      switch (next) {
        case 1:
          msg = '销售主管'
          break
        case 2:
          msg = '销售经理'
          break
        case 3:
          msg = '代理公司'
      }
      this.$confirm(
        `确认将代理${realname}的等级变更为-${msg}?`,
        '变更等级确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.editLevel({
          id,
          level: next
        })
      })
    },
    // 变更销售级别
    async editLevel(data) {
      const res = await editLevel(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.getApply()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`变更销售级别失败:${e}`)
      }
    },
    // 状态接口
    getApply() {
      this.examineParams.status = 1
      UpdateApplyStatus(this.examineParams).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.getList()
        } else {
          this.$message.error(res.message || '操作失败')
        }
      }).catch(() => {
        this.$message.error('操作失败')
      })
    },
    // 查看申请原因/驳回原因
    showApply(row) {
      this.imgList = []
      this.dialogFormVisible = true
      if (this.diaType === 0) {
        this.item = row
        if (this.item.imgList) {
          this.imgList = JSON.parse(this.item.imgList)
        }
      } else {
        this.item = row
        if (this.item.reject_imgList) {
          this.imgList = JSON.parse(this.item.reject_imgList)
        }
      }
    },
    changeOtherInfo(id) {
      this.getOtherInfo(id, data => {
        // this.listQuery.search_name = data.nickname
        this.listQuery.search_name = data.mobile
        this.getList()
      })
    },
    // 查看代理详情
    handleSeeMemberInfo(row) {
      this.memberInfo = row
      this.visible.memberInfo = true
    },
    // 获取上级销售或邀请人信息
    async getOtherInfo(id, cb) {
      if (!id) {
        this.$message.error('获取用户id失败')
        return false
      }
      this.loadingFull = true
      try {
        const res = await getOtherInfo({ id })
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          this.handleSeeMemberInfo(data)
          cb && cb(data)
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取邀请人或上级销售信息失败:${e}`)
      }
      this.loadingFull = false
    },
    // 分页
    changePagination({ page, limit }) {
      this.searchParams.page_index = page
      this.searchParams.page_size = limit
      this.getList()
    },
    // 搜索
    search() {
      this.searchParams.page_index = 1
      this.getList()
    },
    // 审核驳回
    showExamineError(id) {
      this.resetBack()
      this.examineParams.id = id
      this.examineParams.status = 2
      this.dialogBack = true
    },
    examineError() {
      if (!this.examineParams.reason) {
        this.$message.error('驳回时请填写原因')
        return false
      }
      this.$confirm('确认审核驳回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.toSubmitBack()
      }).catch(() => {})
    },
    confirm() {
      this.examineParams.id = this.popupId
      this.examineParams.status = 0
      this.popup = false
      this.toSubmitBack()
    },
    toSubmitBack() {
      if (!this.examineParams.remark) {
        this.$message.error('请填写驳回原因')
        return false
      }
      UpdateApplyStatus({
        id: this.examineParams.id,
        remark: this.examineParams.remark,
        status: this.examineParams.status,
        img: JSON.stringify(this.deleteUserImg)
      })
        .then(res => {
          if (res.code === 200) {
            this.$message.success('驳回成功')
            this.dialogBack = false
            this.resetBack()
            this.getList()
          } else {
            this.$message.error(res.message || '操作失败')
          }
        }).catch(() => {
          this.$message.error('操作失败')
        })
    },
    resetBack() {
      this.examineParams.id = ''
      this.examineParams.status = ''
      this.examineParams.remark = ''
      this.deleteUserImg = []
      this.dialogBack = false
    },
    getList() {
      const loading = this.$loading()
      getList(this.searchParams).then(res => {
        loading.close()
        if (res.code === 200) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(res.message || '获取政委审核列表失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('获取政委审核列表失败')
      })
    }
  }
}
</script>
<style lang="scss">
.avatar-uploader-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .upload-delete {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #cccccc;
    color: #ffffff;
    position: absolute;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
    font-size: 16px;
    &:hover {
      background: #409eff !important;
    }
  }
}
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  margin-right: 20px;
  margin-bottom: 15px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
  margin-right: 20px;
  margin-bottom: 15px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  position: relative;
}
.applyBox {
    width: 100%;
    background-color: #FAFAFC;
    padding: 30px;
    border-radius: 12px;
}
.title {
    margin-bottom: 30px;
}
.cause {
    font-size: 16px;
    text-indent: 32px;
    line-height: 22px;
}
.img {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  word-wrap:break-word;
  align-items: center;
}
.box {
  padding: 30px;
  position: fixed;
  font-size: 24px;
  height: 200px;
  width: 350px;
  background-color:#fff;
  border-radius: 0.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.box-left{
  font-size: 20px;
}
.box-middle{
  font-size: 15px;
  /* margin-top: 20px; */
}
.box-right{
  display: flex;
  justify-content: space-between
}
  .over {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 10000;
    background-color: #111111;
  }
  .button{
    width:65px;
    line-height: 28px;
    font-size: 12px;
    text-align: center;
    background-color: #1890ff;
    border-radius: 3px;
    color: #fff;
    margin-bottom: 5px;
  }
  .buttonT{
    width:65px;
    line-height: 28px;
    font-size: 12px;
    text-align: center;
    background-color: #13c166;
    border-radius: 3px;
    color: #fff;
  }
</style>
