<template>
  <div style="padding: 20px">
    <h3 class="model-title">
      企业信息
      <!-- 大华说不需要刷新企业 -->
      <el-button v-if="false" type="text" @click="onRefresh">刷新企业</el-button>
    </h3>
    <el-form label-width="140px" @submit.native.prevent>
      <el-form-item label="小程序版本">免费版</el-form-item>
      <el-form-item label="企业名称">
        <span>{{ enterpriseDetail.wxEnterpriseName }}</span>
        <el-tag :type="enterpriseDetail.corpType == 'verified' ? '' : 'info'" effect="plain" style="margin: 0 10px;">
          {{ enterpriseDetail.corpType == 'verified' ? '已认证' : '未认证' }}
        </el-tag>
        <span class="end-time" v-if="enterpriseDetail.verifiedEndTime">
          认证到期 {{ enterpriseDetail.verifiedEndTime | timeStampToYmd }}
        </span>
      </el-form-item>
      <el-form-item label="企业ID">{{ enterpriseDetail.corpId || '--' }}</el-form-item>
      <el-form-item label="行业类型">{{ formatCorpIndustry() }}</el-form-item>
      <el-form-item label="应用可见范围">
        {{ Array.isArray(enterpriseDetail.displayRange) && enterpriseDetail.displayRange.length > 0 ? enterpriseDetail.displayRange.map(el => el.name).join('，') : '--' }}
      </el-form-item>
    </el-form>
    <template v-if="enterpriseDetail.secret.secretName">
      <h3 class="model-title">好办自建应用</h3>
      <div class="hb-app">
        <div class="hb-app-name">{{ enterpriseDetail.secret.secretName }}</div>
        <el-form label-width="150px" class="hb-app-info" @submit.native.prevent>
          <el-form-item class="hb-app-info-item" label="Agentld">{{ enterpriseDetail.secret.agentId }}</el-form-item>
          <el-form-item class="hb-app-info-item" label="Secret">{{ enterpriseDetail.secret.secretVal }}</el-form-item>
          <el-form-item class="hb-app-info-item" label="应用可见范围">
            {{ Array.isArray(enterpriseDetail.secret.displayRange) && enterpriseDetail.secret.displayRange.length > 0 ? enterpriseDetail.secret.displayRange.map(item => item.name).join('，') : '--' }}
          </el-form-item>
        </el-form>
      </div>
    </template>
    <h3 class="model-title">授权信息</h3>
    <el-table :data="enterpriseDetail.enterpriseList">
      <el-table-column label="授权商户">
        <div slot-scope="{ row }" class="store-info">
          <div class="store-logo" v-if="row.enterpriseLogo">
            <img :src="row.enterpriseLogo" alt="">
          </div>
          <span class="store-name">{{ row.enterpriseName }}</span>
        </div>
      </el-table-column>
      <el-table-column label="门店绑定授权范围">
        <template slot-scope="{ row }">
          <!-- 0 全部 1部分分组 2 部分门店 -->
          <span v-if="row.bindStoreMode == 0">所有门店</span>
          <el-button type="text" v-else-if="row.bindStoreMode > 0" @click="getBindDetail(row, 0)">
            {{ row.bindCount }}{{ row.bindStoreMode == 1 ? '个分组' : row.bindStoreMode == 2 ? '家门店' : '' }}
          </el-button>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="门店共享授权范围">
        <template slot-scope="{ row }">
          <!-- 0 全部 1部分分组 2 部分门店 -->
          <span v-if="row.shareStoreMode == 0">所有门店</span>
          <el-button type="text" v-else-if="row.shareStoreMode > 0" @click="getBindDetail(row, 1)">
            {{ row.shareCount }}{{ row.shareStoreMode == 1 ? '个分组' : row.shareStoreMode == 2 ? '家门店' : '' }}
          </el-button>
          <span v-else>无</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="bindInfo.show" title="门店授权范围" width="600px" @closed="onBindInfoClose">
      <el-form label-width="140px" @submit.native.prevent>
        <el-form-item :label="bindInfo.type == 0 ? '门店绑定授权范围' : '门店共享授权范围'">
          <el-select style="width: 392px" disabled multiple :value="bindInfo.selected">
            <el-option v-for="el in bindInfo.data" :key="el.id" :value="el.id" :label="el.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/enterprise.js';

const { getEnterpriseDetail, refreshEnterpriseInfo, storeRangeDetail } = api;

export default {
  name: 'EnterpriseDetail',
  data() {
    return {
      bread: [
        { path: '/enterprise-list', name: '企业列表' },
        { name: '查看' }
      ],
      enterpriseId: '',
      enterpriseDetail: {
        displayRange: [], // 企业信息-应用可见范围
        secret: {}, // 好办自建应用
        enterpriseList: [], // 授权信息表格
      },
      bindInfo: {
        show: false,
        type: 0,
        data: [],
        selected: []
      }
    };
  },
  created() {
    const { enterpriseId } = this.$route.query;
    if (!enterpriseId) {
      return this.$router.go(-1);
    }
    this.enterpriseId = enterpriseId;
    this.getEnterpriseDetail();
    this.$emit('updateBread', this.bread);
    this.$emit('showTab', '/enterprise-list');
  },
  methods: {
    getEnterpriseDetail() {
      getEnterpriseDetail({ wxEnterpriseId: this.enterpriseId }).then(res => {
        Object.assign(this.enterpriseDetail, res.result);
      });
    },
    onRefresh() {
      refreshEnterpriseInfo().then(this.getEnterpriseDetail);
    },
    formatCorpIndustry() {
      const result = [];
      if (this.enterpriseDetail.corpIndustry) {
        result.push(this.enterpriseDetail.corpIndustry);
      }
      if (this.enterpriseDetail.corpSubIndustry) {
        result.push(this.enterpriseDetail.corpSubIndustry);
      }
      return result.length > 0 ? result.join('/') : '--';
    },
    getBindDetail(storeData, type) {
      const { wxEnterpriseId, enterpriseId } = storeData;
      const params = {
        wxEnterpriseId,
        enterpriseId,
        operationType: type, // 0 门店绑定 1门店分享
      };
      this.bindInfo.show = true;
      this.bindInfo.type = type;
      storeRangeDetail(params).then(res => {
        this.bindInfo.data = res.result || [];
        this.bindInfo.selected = this.bindInfo.data.map(el => el.id);
      });
    },
    onBindInfoClose() {
      this.bindInfo.data = [];
      this.bindInfo.selected = [];
    }
  }
};
</script>

<style lang="less" scoped>
.model-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 15px;
  font-size: 14px;
  font-weight: 700;
  color: @gray01;
  line-height: 20px;
  &:first-child {
    margin-top: 0;
  }
}
.end-time {
  font-size: 12px;
  font-weight: 400;
  color: @gray03;
  line-height: 17px;
}
.hb-app {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: 789px;
  min-height: 115px;
  border: 1px solid #E4E7ED;
  +.hb-app {
    margin-top: 10px;
  }
  .hb-app-name {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 126px;
    border-right: 1px solid #E4E7ED;
  }
  .hb-app-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 12px 0;
    .hb-app-info-item {
      margin-bottom: 10px;
      font-size:14px;
      font-weight: 400;
      &:last-child {
        margin-bottom: 0;
      }
      /deep/.el-form-item__label, /deep/.el-form-item__content {
        line-height: 20px;
      }
    }
  }
}
.store-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .store-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    img {
      max-width: 100%;
      max-height: 100%;
      border-radius: 2px;
    }
  }
  .store-name {
    display: block;
    width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
