<template>
  <div style="width: 100%;">
    <template>
      <div class="search">
        <div class="left">
          <el-button type="primary" @click="handleAddStore">新增店铺</el-button>
        </div>
        <div class="right" style="width: auto;">
          <div>
            <el-input
              v-model="search.name"
              placeholder="请输入店铺/企业名称"
              clearable
              style="width: 180px !important; margin-right: 10px;"
            ></el-input>
            <el-select
              v-model="search.status"
              placeholder="请选择店铺状态"
              clearable
              style="width: 200px !important;"
            >
              <el-option
                v-for="item in constant.shopStatus"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>
          <div class="leftBtn">
            <el-button type="primary" @click="fetchData">查询</el-button>
          </div>
        </div>
      </div>
      <cy-comm-table
        ref="commTable"
        v-loading="loading"
        :columns="columns"
        :table-options="tableOptions"
        :data="tableData"
        :count="total"
        parent-component="StoreList"
      />
    </template>
    <AddStroe ref="addStoreRef" @goEnterprise="changeEnterprise" />
    <BindEnterprise ref="bindEnterpriseRef" :name="curShopName" :status="curShopStatus" :shop-id="curShopId" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getStoreList, unBindEnterprise } from '@/api/myStoreEnterprise'

export default {
  name: 'StoreList',
  components: {
    AddStroe: () => import('./AddStoreDialog.vue'),
    BindEnterprise: () => import('./BindEnterprise.vue')
  },
  data() {
    return {
      search: {
        name: '',
        status: ''
      },
      transCodeList: [],
      total: 0,
      loading: false,
      tableData: [],
      tableOptions: {
        sortTable: true,
        maxHeight: 'calc(100vh - 395px)',
        height: 'calc(100vh - 395px)'
      },
      curShopName: '',
      curShopStatus: '',
      curShopId: '',
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '平台',
          showTooltip: true,
          render: (h, row) => {
            return <div>{ this.getPlatformName(row.platformType) }</div>
          }
        },
        {
          label: '企业名称',
          prop: 'companyName',
          showTooltip: true
        },
        {
          label: '统一社会信用代码',
          width: 160,
          prop: 'code',
          showTooltip: true
        },
        {
          label: '店铺ID',
          showTooltip: true,
          prop: 'platformShopId'
        },
        {
          label: '店铺名称',
          prop: 'shopName',
          showTooltip: true
        },
        {
          label: '店铺状态',
          prop: 'shopStatus',
          showTooltip: true,
          render: (h, row) => {
            return <div>{ this.getShopStatus(row.shopStatus) }</div>
          }
        },
        {
          label: '准入状态',
          prop: 'zrStatus',
          showTooltip: true,
          render: (h, row) => {
            return <div>{ row.zrStatus === null ? '' : row.zrStatus ? '准入' : '不准入' }</div>
          }
        },
        {
          label: '绑定账户名称',
          prop: 'registrationName',
          width: 160,
          showTooltip: true
        },
        {
          label: '绑定账号',
          prop: 'registrationAccount',
          showTooltip: true
        },
        {
          label: '最后更新日期',
          prop: 'gmtModified',
          width: 160,
          showTooltip: true
        },
        {
          label: '操作',
          show: true,
          render: (h, row) => {
            const btnList = [
              {
                msg: '解绑企业',
                icon: 'iconfont icon-a-Group1046',
                power: '', // viewFinancingLoanInfo
                rowPower: [],
                category: 'unBindEnterprise'
              },
              {
                msg: '绑定企业',
                icon: 'el-icon-connection',
                power: '', // viewFinancingLoanInfo
                rowPower: [],
                category: 'bindEnterprise'
              }
              // {
              //   msg: '绑定账户',
              //   icon: 'el-icon-connection',
              //   power: '', // viewFinancingLoanInfo
              //   rowPower: [],
              //   category: 'bindAccount'
              // }
            ]
            const options = btnList.map(item => {
              return (
                this.tablePower({ item, 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} style='font-size: 21px;' onClick={() => { this.handlerOperate(item.category, row, item.msg) }}></i>
                  </span>
                </el-tooltip>
              )
            })
            return <div>{ options }</div>
          },
          width: 150
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['constant']),
    tablePower() {
      return ({ item, row }) => {
        const { category } = item
        if (category === 'unBindEnterprise') {
          if (row.code !== null) {
            return true
          }
          return false
        } else if (category === 'bindEnterprise') {
          if (row.code === null || row.code === '') {
            return true
          }
          return false
        }
        return true
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    handleAddStore() {
      this.$refs.addStoreRef.showAddStore()
    },
    changeEnterprise(val) {
      if (val) {
        this.$emit('changeTab', 'enterprise')
      }
    },
    async fetchData() {
      const params = {
        page: this.page,
        rows: this.size,
        name: this.search.name
      }

      if (this.search.status !== '') {
        params.status = this.search.status
      }

      this.loading = true

      const res = await getStoreList(params)

      this.loading = false
      if (res.success) {
        this.tableData = res.rows || []
        this.total = res.records
      }
    },
    async queryAllTransCode() {
      // const res = await getAllTransCode()

      // if (res.data.length) {
      //   this.transCodeList = res.data
      // }
    },
    handlerOperate(type, row, msg) {
      if (type === 'unBindEnterprise') {
        console.log('unBindEnterprise')
        this.$confirm('解绑该企业后，融资时该店铺数据将不可进行融资', '解绑企业', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.unbindEnterprise(row.id)
        }).catch(() => {})
      } else if (type === 'bindEnterprise') {
        this.curShopName = row.shopName
        this.curShopStatus = row.shopStatus
        this.curShopId = row.id
        this.$refs.bindEnterpriseRef.showAddEnterprise()
      } else if (type === 'bindAccount') {
        console.log('bindAccount')
      }
    },
    async unbindEnterprise(enterpriseId) {
      const res = await unBindEnterprise(enterpriseId)

      if (res.success) {
        this.$message.success('解绑企业成功')
        this.$router.go(0)
      }
    },
    getPlatformName(type) {
      const map = {
        'pinduoduo': '拼多多',
        'kuaishou': '快手',
        'douyin': '抖音',
        'meituan': '美团'
      }
      return map[type] || ''
    },
    getShopStatus(status) {
      const map = {
        0: '关闭',
        1: '正常'
      }
      return map[status] || ''
    }
  }
}
</script>

<style lang="scss">

</style>
