<template>
  <div class="user-list-con">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入商户ID"
          class="search-input"
          v-model="searchContent.merchantId"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="请输入登录账号"
          class="search-input"
          v-model="searchContent.account"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="请输入联系人"
          class="search-input"
          v-model="searchContent.linkMan"
          style="width: 200px"
          clearable
        />
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">查找</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
      <bigImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc" @click="viewImg"></bigImg>
    </Card>
    <Modal
      title="商户审核"
      v-model="modelStatus"
    >
      <div class="model-item">
        <label class="label">结果：</label>
        <RadioGroup v-model="check">
          <Radio :label=5>通过</Radio>
          <Radio :label=4>拒绝</Radio>
        </RadioGroup>
      </div>
      <div class="model-item">
        <label class="label">备注：</label>
        <Input
          placeholder="请输入备注"
          type="textarea"
          class="search-input"
          v-model="reason"
          style="width:200px"
        />
      </div>
      <div slot="footer">
        <Button
          type="primary"
          @click="handleSure"
        >
          确定
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'
import bigImg from '../good-mgr/big-img.vue'
import { formatTime } from '@/libs/tools'
import { MerchantType, MerchantTypeObject, MerchantLevelObj, MerchantLevel } from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables,
    bigImg
  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    }
  },
  data () {
    return {
      MerchantType,
      MerchantTypeObject,
      MerchantLevelObj,
      MerchantLevel,
      modelStatus: false,
      check: 5,
      reason: '',
      imgSrc: '',
      showImg: false,
      searchContent: {
        merchantId: '',
        account: '',
        linkMan: '',
        pageNum: 1,
        pageSize: 10
      },
      createTime: [],

      columns: [
        { title: 'UID', key: 'merchantId', align: 'left', minWidth: 180 },
        { title: '手机号', key: 'registerPhone', align: 'center', width: 120 },
        {
          title: '联系人',
          key: 'linkMan',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h('span', params.row.linkMan ? params.row.linkMan : '--')
          }
        },
        { title: 'idCard',
          key: 'registerCode',
          align: 'center',
          minWidth: 140,
          render: (h, params) => {
            let idCard = params.row.idCard
            let emptySpan = h('span', '--')
            let labelSpan = h('span', idCard)
            let searchIdCard = h('Icon', {
              props: {
                size: 20,
                type: 'ios-eye-off',
                color: '#000'
              },
              style: {
                marginLeft: '5px',
                cursor: 'pointer'
              }
            })
            let contentDiv = h(
              'div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '30px'
                }
              },
              // this.isBrand ? [labelSpan] : [labelSpan, clearIcon]
              [labelSpan]
            )
            const statusPoptip = h(
              'Poptip',
              {
                props: {
                  confirm: true,
                  title: `确定要查询当前商户idCard吗`,
                  transfer: true
                },
                on: {
                  'on-ok': () => {
                    this.handleSeacrhId(params.row)
                  }
                }
              },
              [searchIdCard]
            )

            return idCard ? [contentDiv, statusPoptip] : emptySpan
          }
        },
        { title: '商户类型',
          key: 'type',
          align: 'center',
          width: 140,
          render: (h, params) => {
            let statusObj = MerchantTypeObject[params.row.type]
            return h('span', statusObj.name ? statusObj.name : '--')
          }
        },
        { title: '商户等级',
          key: 'level',
          align: 'center',
          width: 140,
          render: (h, params) => {
            let statusObj = MerchantLevelObj[params.row.level]
            return h('span', statusObj.label)
          }
        },
        { title: '企业名称',
          key: 'enterpriseName',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('span', params.row.enterpriseName || '--')
          }
        },
        { title: '社会统一信用码',
          key: 'creditCode',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('span', params.row.creditCode || '--')
          }
        },
        { title: '营业执照',
          key: 'businessLicense',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '70px',
                  visibility: params.row.businessLicense ? 'visiable' : 'hidden'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: params.row.businessLicense

                  },
                  style: {
                    width: '70px',
                    height: '50px'
                  },
                  on: {
                    click: () => {
                      // console.log(params)
                      this.showImg = true
                      this.imgSrc = params.row.businessLicense
                    }
                  }
                })
              ])
          }
        },
        { title: '身份证正面照',
          key: 'businessLicense',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '70px',
                  visibility: params.row.frontCardImg ? 'visiable' : 'hidden'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: params.row.frontCardImg

                  },
                  style: {
                    width: '70px',
                    height: '50px'
                  },
                  on: {
                    click: () => {
                      // console.log(params)
                      this.showImg = true
                      this.imgSrc = params.row.frontCardImg
                    }
                  }
                })
              ])
          }
        },
        { title: '身份证反面照',
          key: 'businessLicense',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '70px',
                  visibility: params.row.afterCardImg ? 'visiable' : 'hidden'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: params.row.afterCardImg

                  },
                  style: {
                    width: '70px',
                    height: '50px'
                  },
                  on: {
                    click: () => {
                      // console.log(params)
                      this.showImg = true
                      this.imgSrc = params.row.afterCardImg
                    }
                  }
                })
              ])
          }
        },
        { title: '注册时间',
          key: 'registerTime',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('span', formatTime(params.row.registerTime))
          }
        },
        {
          title: '操作',
          key: 'status',
          align: 'center',
          fixed: 'right',
          minWidth: 100,
          render: (h, params) => {
            let checkBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleCheck(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '审 核'
            )
            return h('div', [checkBtn])
          }
        }
      ],
      tableData: [],
      totalSize: 0,
      loading: false,
      merchantId: '',
      newRecommend: ''
    }
  },
  methods: {
    viewImg () {
      this.showImg = false
    },
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getMerchantCheckList',
        postdata: this.searchContent,
        success: (res) => {
          this.totalSize = res.data.total
          this.tableData = res.data.records
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    handleDateChange (createTime) {
      if (
        createTime &&
          createTime.length == 2 &&
          createTime[0] &&
          createTime[1]
      ) {
        this.searchContent.startTime = new Date(createTime[0]).getTime()
        this.searchContent.endTime =
            new Date(createTime[1]).getTime() + 24 * 60 * 60 * 1000 - 1
      } else {
        this.searchContent.startTime = ''
        this.searchContent.endTime = ''
      }
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },

    handleSeacrhId (row) {
      let registerPhone = row.registerPhone
      this.api({
        apiName: 'searchMerchangIdCard',
        postdata: { registerPhone },
        success: (res) => {
          this.$Modal.success({
            title: 'idCard',
            content: res.data
          })
        }
      })
    },

    handleUpdateRecommend (row, newRecommend) {
      if (!newRecommend) {
        this.$Notice.warning({ title: '邀请人UID不能为空！' })
        return
      }

      let uid = row.uid
      this.api({
        apiName: 'updateUserInviteCode',
        postdata: {
          uid,
          inviteUid: newRecommend
        },
        success: () => {
          row.recommend = newRecommend
          this.$Notice.success({ title: '修改成功！' })
        }
      })
    },
    handleCheck (row) {
      return () => {
        this.modelStatus = true
        this.merchantId = row.merchantId
      }
    },
    handleSure () {
      let { merchantId, check, reason } = this
      this.api({
        apiName: 'checkMerchant',
        postdata: { merchantId, check, reason },
        success: (res) => {
          this.requestData()
          this.$Notice.success({ title: '操作成功！' })
          this.modelStatus = false
        }
      })
    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style lang="less">
  .user-list-con .search-con {
    padding: 10px 0;
    .search {
      &-col {
        display: inline-block;
        width: 150px;
        margin-right: 5px;
      }
      &-input {
        display: inline-block;
        width: 150px;
        margin-right: 5px;
      }
      &-date {
        margin-right: 5px;
      }
      &-btngroup {
        margin-right: 5px;
      }
    }
  }
  .model-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  .label {
    display: inline-block;
    width: 50px;
    text-align: right;
  }
}
</style>
