<template>
  <div>
    <div class="grid">
      <div class="row">
        <div class="col">机构名称：</div>
        <div class="col">{{ clubInfo.authParty }}</div>
      </div>
      <div class="row">
        <div class="col">联系电话：</div>
        <div class="col">{{ clubInfo.mobile }}</div>
      </div>
      <div class="row">
        <div class="col">所在地区：</div>
        <div class="col">{{ clubInfo.area }}</div>
      </div>
      <div class="row">
        <div class="col">详细地址：</div>
        <div class="col">{{ clubInfo.address }}</div>
      </div>
      <div class="row">
        <div class="col">所在位置：</div>
        <div class="col">
          <div class="map" @click="initMap">
            <i class="el-icon-map-location" />
            <span>点击查看</span>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">运营联系人：</div>
      <div class="col">{{ clubInfo.linkMan }}</div>
    </div>
    <div class="row">
      <div class="col">运营联系人手机号：</div>
      <div class="col">{{ clubInfo.linkMobile }}</div>
    </div>
    <div class="row">
      <div class="col">logo：</div>
      <div class="col">
        <preview-image v-if="clubInfo.logo" class="preview-image" :src="clubInfo.logo" />
      </div>
    </div>
    <div class="row">
      <div class="col">门头照：</div>
      <div class="col">
        <template v-for="(image, index) in clubInfo.bannerList">
          <preview-image :key="index" class="preview-image" :src="image" :preview-src-list="clubInfo.bannerList" />
        </template>
      </div>
    </div>
    <div class="row">
      <div class="col">机构类型：</div>
      <div class="col">
        <el-radio-group v-model="clubInfo.firstClubType">
          <el-radio
            v-for="item in clubTypeList"
            :key="item.id"
            :label="item.id"
            :disabled="clubInfo.firstClubType !== item.id"
          >{{ item.name }}</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div v-if="clubInfo.firstClubType === 1" class="row">
      <div class="col">医美类型：</div>
      <div class="col">
        <el-radio-group v-model="clubInfo.secondClubType">
          <el-radio
            v-for="item in medicalTypeList1"
            :key="item.id"
            :label="item.id"
            :disabled="clubInfo.secondClubType !== item.id"
          >{{ item.name }}</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div v-if="clubInfo.firstClubType === 2" class="row">
      <div class="col">生美类型：</div>
      <div class="col">
        <el-radio-group v-model="clubInfo.secondClubType">
          <el-radio
            v-for="item in medicalTypeList2"
            :key="item.id"
            :label="item.id"
            :disabled="clubInfo.secondClubType !== item.id"
          >{{ item.name }}</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div v-if="clubInfo.firstClubType === 1" class="row">
      <div class="col">医疗许可证：</div>
      <div class="col">
        <preview-image v-if="clubInfo.medicalLicenseImage" class="preview-image" :src="clubInfo.medicalLicenseImage" />
      </div>
    </div>
    <div class="row">
      <div class="col">员工人数：</div>
      <div class="col">{{ clubInfo.empNum }}人</div>
    </div>

    <div class="row">
      <div class="col">自定义属性：</div>
      <div class="col">
        <el-radio-group v-model="clubInfo.customFlag">
          <el-radio :label="1" :disabled="clubInfo.customFlag !== 1">是</el-radio>
          <el-radio :label="0" :disabled="clubInfo.customFlag !== 0">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div v-if="clubInfo.customFlag > 0" class="row">
      <div class="col">店铺备注：</div>
      <div class="col">{{ clubInfo.remarks }}人</div>
    </div>

    <div class="row">
      <div class="col">审核状态：</div>
      <div class="col">
        <audit-status :status="clubInfo.shopAuditStatus || clubInfo.auditStatus" :reason="clubInfo.invalidReason" />
      </div>
    </div>

    <!-- 地图坐标拾取 -->
    <el-dialog class="map-dialog" title="地图信息" :visible.sync="dialogMapVisible" width="80%">
      <a-map ref="aMap" :lnglat="lnglat" />
    </el-dialog>
  </div>
</template>

<script>
import SimpleAMap from '@/components/SimpleAMap'
import { getAuthFormData } from '@/api/auth'
export default {
  name: 'ClubDetail',
  components: {
    [SimpleAMap.name]: SimpleAMap
  },
  props: {
    authId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogMapVisible: false,
      clubTypeList: [
        { id: 1, name: '医美' },
        { id: 2, name: '生美' },
        { id: 3, name: '项目公司' },
        { id: 4, name: '个人' },
        { id: 5, name: '其他' }
      ],
      medicalTypeList1: [
        { id: 1, name: '诊所' },
        { id: 2, name: '门诊' },
        { id: 3, name: '医院' },
        { id: 4, name: '其他' }
      ],
      medicalTypeList2: [
        { id: 5, name: '美容院' },
        { id: 6, name: '养生馆' },
        { id: 7, name: '其他' }
      ],
      clubInfo: {
        secondClubType: 1,
        firstClubType: 1,
        medicalLicenseImage: '',
        empNum: '',
        address: '',
        area: '',
        authId: '',
        authParty: '',
        bannerList: [],
        cityId: '',
        lngAndLat: '',
        logo: '',
        mobile: '',
        provinceId: '',
        townId: '',
        customFlag: 0,
        remarks: ''
      }
    }
  },
  computed: {
    // 位置坐标
    lnglat() {
      return this.clubInfo.lngAndLat ? this.clubInfo.lngAndLat.split(',') : null
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 地图定位
    initMap() {
      this.dialogMapVisible = true
      if (this.lnglat) {
        this.$nextTick(() => {
          this.$refs.aMap.init()
        })
      }
    },
    // 数据回显
    getDetail() {
      getAuthFormData({ authId: this.authId }).then((res) => {
        this.clubInfo = { ...this.clubInfo, ...res.data }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  cursor: pointer;
  span {
    margin-left: 4px;
    color: #409eff;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 25px;
  .col {
    font-size: 14px;
    color: #333;
    &:first-child {
      min-width: 140px;
      text-align: right;
      margin-right: 8px;
      font-weight: bold;
      color: #666;
    }
  }
}

.preview-image {
  display: inline-block;
  margin-left: 12px;
  &:first-child {
    margin-left: 0;
  }
}
</style>
