<template>
  <div v-loading="loading" style="padding: 1em">
    <el-row :gutter="12" v-if="detail">
      <el-col :span="span">
        <el-card class="box-card" header="申请信息">
          <el-descriptions :column="2">
            <el-descriptions-item label="提交时间">{{detail.createTime | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="申请类型">
              <dict-tag :options="dict.type.store_apply_type" :value="detail.applyType" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="申请状态">
              <dict-tag :options="dict.type.store_apply_status" :value="detail.status" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="审核人">{{detail.verifyName | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="审核时间">{{detail.verifyTime | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="审核意见" :span="2">{{detail.verifyRemark | defaultValue}}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-card class="box-card" header="变更字段">
          <ul class="list-group list-group-striped" style="margin-top: 0">
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="店铺名称" prop="name" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="店铺图片" prop="picture" >
              <template #old="{value}">
                <image-preview :width="24" :height="24" :src="value"/>
              </template>
              <template #new="{value}">
                <image-preview :width="24" :height="24" :src="value"/>
              </template>
            </change-field>
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="店铺类型" prop="type" >
              <template #old="{value}">
                <dict-tag :value="value" :options="dict.type.ss_store_type" size="small"/>
              </template>
              <template #new="{value}">
                <dict-tag :value="value" :options="dict.type.ss_store_type" size="small"/>
              </template>
            </change-field>
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="地址" prop="address" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="联系人" prop="contactName" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="联系电话" prop="contactMobile" />
          </ul>
        </el-card>
      </el-col>
    </el-row>
    <el-empty v-else description="暂无审核信息"/>
  </div>
</template>

<script>
import { approvalStoreApply, getStoreApply } from '@/api/ss/storeApply'
import { StoreApplyStatus } from '@/utils/constants'
import ChangeField from '@/views/ss/storeApply/component/ChangeField.vue'
import StoreLink from '@/components/Business/Store/StoreLink.vue'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import { getLastStoreApplyByStore, mchGetLastStoreApplyByStore, mchGetStoreApply } from '@/api/mch/storeApply'

export default {
  name: "MchStoreApplyDetail",
  components: { UserLink, StoreLink, ChangeField },
  dicts: ['store_apply_type', 'store_apply_status', 'ss_store_type'],
  props: {
    id: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      span: 24,
      loading: false,
      detail: {
        oldData: {},
        newData: {}
      },
      rules: {},
      form: {}
    }
  },
  watch: {
    id(nv, ov) {
      this.getDetail(nv)
    }
  },
  created() {
    this.getDetail(this.id);
  },
  methods: {
    getDetail(id) {
      this.loading = true;
      mchGetStoreApply(id).then(res => {
        this.detail = res.data;
        this.reset();
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}
</script>
