<template>
  <uni-row class="main" v-bind:style="{ height: client.win_height + 'px' }">
    <uni-col :span="24" class="one">
      <view class="one_1" v-if="view === 'noPermission'">
        <text>暂无入职企业，请入职企业之后再进行查询</text>
      </view>
      <view class="one_2" v-else>
        <u-cell-group>
          <u-cell v-for="(i, index) in fields" :key="`cell-${index}`">
            <view slot="title">
              <view v-if="i.type === 'line'" class="line">
                <span>{{ i.label }}</span>
              </view>
              <view v-else>
                <text>{{ i.label }}：</text> {{ getText(i) }}
              </view>
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </uni-col>
  </uni-row>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
const _ = require("lodash");
const { mapActions: companyBaoanWork } =
  createNamespacedHelpers("company_baoan_work");
const { mapActions: companyBase } = createNamespacedHelpers("company_base");
export default {
  data() {
    return {
      view: "info",
      info: {},
      fields: [
        { label: "企业名称", model: "company" },
        { label: "详细地址", model: "addres" },
        { label: "所属区县", model: "belong_city" },
        { label: "管辖单位", model: "tube_company" },
        {
          label: "保安服务类型",
          model: "baoan_sevicetype",
          format: (i) => {
            try {
              return JSON.parse(i).join(";");
            } catch (error) {}
            return i;
          },
        },
        { label: "社会统一社会信用代码", model: "company_yyzzzch" },
        { label: "保安服务许可证号", model: "company_xkzpzwh" },
        { label: "营业执照经营范围", model: "company_yyzzjyfw" },
      ],
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...companyBaoanWork(["fetch"]),
    ...companyBase({ getCompanyBase: "fetch" }),
    async search() {
      const { status, id } = this.user;
      if (!status || status !== "12") {
        this.view = "noPermission";
        return;
      }
      const obj = {
        security_guard_id: id,
        is_quit: "0",
      };
      const res = await this.fetch(obj);
      if (this.$checkRes(res)) {
        if (!res.data) return;
        const { company_id } = res.data;
        if (!company_id) return;
        const cbRes = await this.getCompanyBase({ id: company_id });
        if (this.$checkRes(cbRes)) {
          this.$set(this, "info", cbRes.data);
        }
      }
    },
    getText(field) {
      const { model, format } = field;
      if (!format) return _.get(this.info, model, "");
      return format(_.get(this.info, model, ""));
    },
  },
  computed: {
    ...mapState(["user"]),
    ...mapGetters(["client"]),
  },
};
</script>

<style lang="scss">
.main {
  background-color: #409eff;
  overflow-y: auto;
  .one {
    width: 97%;
    margin: 0 5px;

    .one_1 {
      text-align: center;
      font-family: cursive;
      margin: 10px 0;
    }
    .one_2 {
      .line {
        margin-top: 5px;
        color: #2979ff;
        height: 10px;
        border-top: 1px solid #2979ff;
        text-align: center;
        span {
          position: relative;
          top: -12px;
          background: #fff;
          padding: 0 20px;
        }
      }
    }
  }
}
</style>
