<template>
  <div class="app-container" v-loading="loading" >
    <el-card header="基础信息" class="card-box">
      <el-descriptions :column="4">
        <el-descriptions-item label="名称">
          {{ detail.name }}
          <dict-tag :options="dict.type.area_status" :value="detail.status" size="small" />
        </el-descriptions-item>
        <el-descriptions-item label="运营时间">
          {{ detail.areaTimeStart | dv }} - {{ detail.areaTimeEnd | dv }}
        </el-descriptions-item>
        <el-descriptions-item label="运营商">
          <user-link :id="detail.userId" :text="detail.userName" />
        </el-descriptions-item>
        <el-descriptions-item label="创建人">
          <user-link :id="detail.createId" :text="detail.createName" />
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detail.createTime | dv }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ detail.remark | dv }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card v-if="detail.id" class="card-box">
      <el-tabs>
        <el-tab-pane label="电子围栏" lazy v-if="checkPermi(['bst:areaSub:list'])">
          <area-sub :area-id="detail.id"/>
        </el-tab-pane>
        <el-tab-pane label="车辆列表" lazy v-if="checkPermi(['bst:device:list'])">
          <device :query="{areaId: detail.id}" />
        </el-tab-pane>
        <el-tab-pane label="订单列表" lazy v-if="checkPermi(['bst:order:list'])">
          <order :query="{areaId: detail.id}" />
        </el-tab-pane>
        <el-tab-pane label="加盟列表" lazy v-if="checkPermi(['bst:areaJoin:list'])">
          <area-join :query="{areaId: detail.id, types: [AreaJoinType.JOIN, AreaJoinType.COOPERATE]}" />
        </el-tab-pane>
        <el-tab-pane label="运维列表" lazy v-if="checkPermi(['bst:areaJoin:list'])">
          <area-join :query="{areaId: detail.id, types: [AreaJoinType.OPERATION]}" />
        </el-tab-pane>
        <el-tab-pane label="客服列表" lazy v-if="checkPermi(['bst:customerService:list'])">
          <customer-service :query="{areaId: detail.id}"/>
        </el-tab-pane>
        <el-tab-pane label="公告协议" lazy v-if="checkPermi(['bst:agreement:list'])">
          <agreement :query="{areaId: detail.id}"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getArea } from '@/api/bst/area';
import UserLink from '@/components/Business/User/UserLink.vue';
import AreaSub from '@/views/bst/areaSub/index.vue';
import Device from '@/views/bst/device/index.vue';
import Order from '@/views/bst/order/index.vue';
import AreaJoin from '@/views/bst/areaJoin/index.vue';
import { AreaJoinType } from '@/utils/enums';
import CustomerService from '@/views/bst/customerService/index.vue';
import Agreement from '@/views/bst/agreement/index.vue';

export default {
  name: 'AreaView',
  dicts: ['area_status'],
  components: {
    UserLink,
    AreaSub,
    Device,
    Order,
    AreaJoin,
    CustomerService,
    Agreement
  },
  data() {
    return {
      AreaJoinType,
      detail: {},
      loading: false,
      id: null,
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.loading = true;
      getArea(this.id).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}
</script>