<template>
  <div class="member-main-content">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="待处理" name="pending"> </el-tab-pane>
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <!-- <el-tab-pane label="已录入" name="entered"></el-tab-pane> -->
      <div v-if="activeName === 'all'" class="search">
        <div />
        <div class="right">
          <div>
            <el-input v-model="search.keyword" style="width: 280px;" placeholder="请输入客户号/平台流水号" />
          </div>
          <div>
            <el-input v-model="search.customerName" placeholder="请输入客户名称" />
          </div>
          <div>
            <el-select v-model="search.status" placeholder="请选择客户状态" clearable>
              <el-option
                v-for="item in constant.bocomCustomerStatus"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </div>
          <div>
            <el-select v-model="search.customerType" placeholder="请选择客户类别" clearable>
              <el-option
                v-for="item in [
                  { value: 0, label: '企业' },
                  { value: 1, label: '个体工商户' },
                  // { value: 2, label: '个人' },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div>
            <el-select v-model="search.stage" placeholder="请选择阶段" clearable>
              <el-option
                v-for="item in constant.bocomCustomerStages"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </div>
          <div>
            <el-button type="primary" @click="fetchData('all')">查询</el-button>
            <el-button v-power="'addBocom'" type="primary" @click="handlerOperate('add')">新建会员信息</el-button>
          </div>
        </div>
      </div>
      <cy-comm-table
        ref="commTable"
        v-loading="loading"
        parent-component="MemberInfoManageMainContent"
        :columns="columns"
        :data="tableData"
        :count="total"
        :table-options="getTableOptions"
      />
    </el-tabs>
    <cy-dialog ref="timeAxisDialog" title="进度时间轴" top="15vh">
      <cy-time-axis ref="timeAxis" :time-axis-params="timeAxisParams"></cy-time-axis>
    </cy-dialog>
    <authorization ref="authorizationRef" :active-info="authActiveInfo" :go-list="true" />
    <cy-dialog ref="failreasonDialog" title="报错原因" top="15vh">
      <cy-comm-table
        :columns="reasonColumns"
        :data="reasonList"
      />
      <div class="submit-btn">
        <el-button @click="() => { this.$refs.failreasonDialog.show = false }">取消</el-button>
      </div>

    </cy-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPendingList, getAllList, terminationData, requeryMemberInfo, getEnteredList, getFailList } from '@/api/cyAccountManage/memberInfoManage'
import { addMemberRegister } from '@/api/cyAccountManage/memberAccountManage/index'

export default {
  name: 'MemberInfoManageMainContent',
  components: {
    Authorization: () => import('../memberAccountManage/components/Authorization.vue')
  },
  data() {
    return {
      activeName: 'pending',
      loading: false,
      total: 0,
      search: {
        stage: '',
        keyword: '',
        customerName: '',
        status: '',
        customerType: ''
      },
      tableData: [],
      timeAxisParams: {
        businessKey: '',
        businessType: 'BocomBasicInfo'
      },
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '客户来源',
          prop: 'customerSource',
          showTooltip: true
        },
        // {
        //   label: '平台业务编号',
        //   prop: 'businessNumber',
        //   showTooltip: true
        // },
        {
          label: '平台流水号',
          prop: 'platformSerialNumber',
          showTooltip: true,
          width: 120
        },
        {
          label: '客户号',
          prop: 'customerNumber',
          showTooltip: true
        },
        {
          label: '客户类别',
          prop: 'customerType',
          showTooltip: true,
          render: (h, row) => {
            return (<span>{row.customerType === 0 ? '企业' : row.customerType === 1 ? '个体工商户' : '个人'} </span>)
          }
        },
        {
          label: '客户名称',
          prop: 'customerName',
          showTooltip: true
        },
        {
          label: '客户状态',
          prop: 'customerStatus',
          showTooltip: true
        },
        {
          label: '客户核验状态',
          prop: 'verificationStatus',
          showTooltip: true,
          width: 120
        },
        {
          label: '通知推送对象',
          prop: 'pushPerson',
          showTooltip: true,
          width: 120
        },
        {
          label: '渠道',
          showTooltip: true,
          render: (h, row) => {
            return (<span>交通银行</span>)
          }
        },
        {
          label: '阶段',
          prop: 'stageStr',
          showTooltip: true
        },
        {
          label: '法人授权状态',
          prop: 'userAtuhSts',
          showTooltip: true,
          width: 120
        },
        {
          label: '提示',
          showTooltip: true,
          render: (h, row) => {
            if (row.customerStatus === '生效') {
              if (row.userAtuhSts === '待用户授权') {
                return <div>去授权</div>
              } else if (row.userAtuhSts === '银行审核中' || row.userAtuhSts === '授权失败') {
                return <div>联系客户</div>
              }
            }
          }
        },
        {
          label: '报错原因',
          prop: 'reason',
          showTooltip: true,
          render: (h, row) => {
            return (<span onClick={() => { this.reasonClick(row) }} style={{ color: row.reason ? 'red' : '#333', cursor: 'pointer' }}>{row.reason ? '有' : '无'}</span>)
          }
        },
        {
          label: '执行人',
          prop: 'assigner',
          showTooltip: true
        },
        {
          label: '最后修改时间',
          prop: 'gmtModified',
          showTooltip: true,
          width: 120
        },
        {
          label: '操作',
          render: (h, row) => {
            const btnList = [
              {
                msg: '时间进度轴',
                icon: 'iconfont icon-timeAxis',
                power: '',
                tabPower: ['all', 'pending'],
                category: 'timeAxis'
              },
              {
                msg: '审批',
                icon: 'iconfont icon-xiugai',
                power: '',
                tabPower: ['pending'],
                rowPower: ['审核中'],
                category: 'approve'
              },
              {
                msg: '新建会员账户',
                icon: 'iconfont icon-shenhe',
                power: 'addBocomVip',
                tabPower: ['all'],
                rowPower: ['核验成功'], // 客户核验状态  - 核验成功
                category: 'addAccount'
              },
              {
                msg: '完成修改',
                icon: 'iconfont icon-xiugai',
                power: 'updateBocom',
                tabPower: ['all'],
                rowPower: [null],
                category: 'finishEdit'
              },
              {
                msg: '变更',
                icon: 'iconfont icon-change',
                power: 'updateBocom',
                tabPower: ['all'],
                rowPower: [null],
                category: 'finishChange'
              },
              {
                msg: 'B端新增的修改',
                icon: 'iconfont icon-xiugai',
                power: '',
                tabPower: ['pending', 'all'],
                rowPower: ['暂存', '审批退回'],
                category: 'edit'
              },
              {
                msg: '查看',
                icon: 'iconfont icon-Magnifier',
                power: 'viewSupplierInfo',
                tabPower: ['all', 'pending'],
                category: 'see'
              },
              {
                msg: '终止',
                icon: 'iconfont icon-finish',
                power: 'terminationBocom',
                tabPower: ['all'],
                rowPower: ['审核中', '审批退回', '开户中', ''],
                category: 'stop'
              },
              {
                msg: '重新查询会员信息',
                icon: 'iconfont icon-shuaxin',
                power: 'researchBocomInfo',
                tabPower: ['all'],
                rowPower: ['开户中', null], //
                category: 'requery'
              },
              {
                msg: '去授权',
                icon: 'iconfont icon-jihuo',
                power: '',
                category: 'auth',
                tabPower: ['all'],
                rowPower: ['待用户授权']
              }
            ]
            const options = btnList.map(item => {
              return (
                this.tablePower({ item, tab: this.activeName, row }) && <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
                  <span class='table-icon-box' v-power={item.power}>
                    <i class={item.icon} onClick={() => { this.handlerOperate(item.category, row) }}></i>
                  </span>
                </el-tooltip>
              )
            })
            return <div>{ options }</div>
          },
          width: 210
        }
      ],
      authActiveInfo: {},
      reasonColumns: [{
        label: '序号',
        index: true,
        width: 200
      },
      {
        label: '报错原因',
        prop: 'reason',
        showTooltip: true
      }],
      reasonList: []
    }
  },
  computed: {
    ...mapGetters(['constant']),
    tablePower() {
      return ({ item, tab, row }) => {
        const { tabPower, rowPower, msg } = item
        if (rowPower && rowPower.length) {
          if (tabPower.includes(tab)) {
            if (msg === '新建会员账户') {
              return rowPower.includes(row.verificationStatus)
            } else if (msg === '去授权') {
              return row.customerStatus === '生效' && rowPower.includes(row.userAtuhSts)
            } else if (row.stageStr === '暂存' || row.stageStr === '审批退回') {
              if (this.activeName === 'pending') {
                return rowPower.includes(row.stageStr)
              } else {
                return row.button && rowPower.includes(row.stageStr)
              }
            } else {
              return rowPower.includes(row.stageStr)
            }
          }
        } else {
          if (tabPower.includes(tab)) {
            return true
          }
        }
      }
    },
    getTableOptions() {
      if (this.activeName === 'all') {
        return {
          sortTable: true,
          maxHeight: 'calc(100vh - 406px)',
          height: 'calc(100vh - 406px)'
        }
      }
      if (this.total > 0) {
        return {
          sortTable: true,
          maxHeight: 'calc(100vh - 360px)',
          height: 'calc(100vh - 360px)'
        }
      }
      return {
        sortTable: true,
        maxHeight: 'calc(100vh - 306px)',
        height: 'calc(100vh - 306px)'
      }
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['bocomCustomerStatus', 'bocomCustomerStages'])
    this.fetchData('pending')
  },
  methods: {
    fetchData(type) {
      this.loading = true
      if (type === 'pending' || this.activeName === 'pending') {
        const params = {
          page: this.page || 1,
          rows: this.size || 10,
          simpleClassName: 'BocomBasicInfo'
        }
        getPendingList(params).then(({ rows, records }) => {
          this.loading = false
          this.tableData = rows
          this.total = records
        })
      }
      if (type === 'all' || this.activeName === 'all') {
        const allParams = {
          page: this.page,
          rows: this.size,
          ...this.search
        }
        getAllList(allParams).then(({ rows, records }) => {
          this.loading = false
          this.tableData = rows
          this.total = records
        })
      }
      if (type === 'entered' || this.activeName === 'entered') {
        const enteredParams = {
          page: this.page || 1,
          rows: this.size || 10
        }
        getEnteredList(enteredParams).then(({ rows, records }) => {
          this.loading = false
          this.tableData = rows
          this.total = records
        })
      }
    },
    handleTabClick(tab) {
      this.activeName = tab.name
      this.page = 1
      this.size = 10
      this.fetchData(tab.name)
    },
    handlerOperate(type, row) {
      if (type === 'timeAxis') {
        this.timeAxisClick(row)
        return
      } else if (type === 'stop') {
        this.stopClick(row)
      } else if (type === 'requery') {
        this.requeryClick(row)
      } else if (type === 'add') {
        this.$router.push({
          name: 'CyAccountMemberInfoManageDetails',
          params: {
            id: 'add'
          },
          query: {
            type: 'add'
          }
        })
      } else if (type === 'edit') {
        this.$router.push({
          name: 'CyAccountMemberInfoManageDetails',
          params: {
            id: row.id
          },
          query: {
            id: row.id,
            type: 'edit'
          }
        })
      } else if (type === 'see') {
        this.$router.push({
          name: 'CyAccountMemberInfoManageSee',
          params: {
            id: row.id
          },
          query: {
            id: row.id,
            type: 'see'
          }
        })
      } else if (type === 'approve') {
        this.$router.push({
          name: 'CyAccountMemberInfoManageApprove',
          params: {
            id: row.id
          },
          query: {
            id: row.id,
            type: 'approve',
            taskId: row.taskId
          }
        })
      } else if (type === 'finishEdit') {
        this.$router.push({
          name: 'CyAccountMemberInfoManageDetails',
          params: {
            id: row.id
          },
          query: {
            id: row.id,
            type: 'finishEdit'
          }
        })
      } else if (type === 'addAccount') {
        // 新建会员账户
        this.handleAddAccount(row)
      } else if (type === 'auth') {
        // 去授权
      } else if (type === 'finishChange') {
        // 完成变更
        const str = row.customerType === 0 ? '只有单位名称、法人证件号、授权代理人证件号可进行变更' : row.customerType === 1 ? '只有单位名称、负责人证件号码、授权代理人证件号码可进行变更' : ''
        this.$confirm(str, '变更', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.$router.push({
            name: 'CyAccountMemberInfoManageDetails',
            params: {
              id: row.id
            },
            query: {
              id: row.id,
              type: 'finishChange'
            }
          })
        })
      }
    },
    requeryClick(row) {
      this.$confirm('确认重新查询会员信息么？', '重新查询会员信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requeryMemberInfo({ id: row.id }).then(() => {
          this.fetchData('all')
          this.$message.success('重新查询会员信息成功')
        })
      })
    },
    stopClick(row) {
      this.$confirm('确认终止该条数据么？', '终止', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        terminationData({ id: row.id }).then(() => {
          this.fetchData('all')
        })
      })
    },
    timeAxisClick(row) {
      this.timeAxisParams.businessKey = row.id
      this.$refs.timeAxisDialog.show = true
      this.$nextTick(() => {
        this.$refs.timeAxis.fetchData()
      })
    },
    async handleAddAccount(row) {
      const res = await addMemberRegister({ bocomBasicInfoId: row.id, Loading: true })
      if (res.success && res.data && res.data.authorizationStatus !== 4) {
        this.authActiveInfo = {
          name: res.data.authenticator,
          qrcodeUrl: res.data.qrCode,
          effectTime: res.data.qrCodeEffectTime
        }
        // 回调触发微信授权
        this.$refs.authorizationRef.openDialog(true)
      }
    },
    reasonClick(row) {
      if (row.reason) {
        this.$refs.failreasonDialog.show = true
        getFailList({ id: row.id }).then((data) => {
          this.reasonList = data.data.map(item => {
            return {
              reason: item
            }
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
