<template>
  <div>
    <cr-radio-group v-model="selectCode">
      <cr-index-list v-if="list.length" :toast="true" :sticky-title="false">
        <cr-index-list-item
          v-for="(item, index) in list"
          :key="index"
          :title="item.title"
          :list="item.list"
        >
          <cr-cell
            v-for="it in item.list"
            :key="it.companyCode"
            clickable
            :title="it.title"
            @click="onCompanySelect(it)"
          >
            <template #right-icon>
              <cr-radio :name="it.companyCode" />
            </template>
          </cr-cell>
        </cr-index-list-item>
      </cr-index-list>
    </cr-radio-group>
  </div>
</template>
<script>
import order from '../../api/order.api';
import { EventBus } from '@/service/utils.service';
import localStorage from '@/service/localStorage.service';
const EVENT_EXPRESS_COMPANY = 'get_company';
const LOGISTICS_LIST = 'logisticsList';
export default {
  data() {
    return {
      list: localStorage.get(LOGISTICS_LIST) || [],
      selectCode: ''
    };
  },
  mounted() {
    this.companyList();
  },
  methods: {
    async companyList() {
      if (this.list.length > 0) return;
      const [res] = await order.companyList();
      this.list = res.companyInfoLists.map(item => {
        return {
          title: item.codeStart,
          list: item.companyInfoList.map(it => {
            it.title = it.companyName || '';
            return it;
          })
        };
      });
      localStorage.set(LOGISTICS_LIST, this.list);
    },
    onCompanySelect(info) {
      this.selectCode = info.companyCode;
      EventBus.$emit(EVENT_EXPRESS_COMPANY, info);
      setTimeout(() => {
        this.$router.back();
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
@{deep} .cr-radio__icon .cr-icon {
  border-color: transparent;
}
</style>
