<template>
  <div v-loading="loading" style="padding: 1em">
    <el-row :gutter="12">
      <el-col :span="span">
        <el-card class="box-card" header="申请信息">
          <el-descriptions :column="2">
            <el-descriptions-item label="店铺">
              <store-link :id="detail.storeId" :name="detail.storeName" @click="$emit('click-link')"/>
            </el-descriptions-item>
            <el-descriptions-item label="申请人">
              <user-link :id="detail.userId" :name="detail.userName" @click="$emit('click-link')"/>
            </el-descriptions-item>
            <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>
        </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="contactName" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="联系电话" prop="contactMobile" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="地址" prop="address" />
          </ul>

          <place-search-map
            v-if="detail.newData != null && detail.newData.lng != null && detail.newData.lat != null"
            :key="detail.id"
            width="100%"
            height="300px"
            :init-lat="detail.newData.lat"
            :init-lng="detail.newData.lng"
            enable-geo
            marker-type="store"
          />
          <place-search-map
            v-else-if="detail.oldData != null && detail.oldData.lng != null && detail.oldData.lat != null"
            :key="detail.id"
            width="100%"
            height="300px"
            :init-lat="detail.oldData.lat"
            :init-lng="detail.oldData.lng"
            enable-geo
            marker-type="store"
          />

        </el-card>
      </el-col>
      <el-col :span="24 - span">
        <el-card header="审核操作" v-if="detail.status === StoreApplyStatus.WAIT_AUDIT">
          <el-form :model="form" :rules="rules">
            <el-form-item label-width="0" prop="verifyRemark">
              <el-input v-model="form.verifyRemark" type="textarea" :rows="3" :maxlength="200" show-word-limit placeholder="请输入审核意见"/>
            </el-form-item>
          </el-form>
          <el-row type="flex" style="justify-content: center">
            <el-button type="success" plain icon="el-icon-check" @click="handleApproval(true)">通过</el-button>
            <el-button type="danger" plain icon="el-icon-close" @click="handleApproval(false)">驳回</el-button>
          </el-row>
        </el-card>
        <el-card header="审核信息" v-else>
          <el-descriptions :column="2">
            <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-col>
    </el-row>
  </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 PlaceSearchMap from '@/components/Map/PlaceSearch/PlaceSearchMap.vue'

export default {
  name: "StoreApplyDetail",
  components: { PlaceSearchMap, UserLink, StoreLink, ChangeField },
  dicts: ['store_apply_type', 'store_apply_status', 'ss_store_type'],
  props: {
    id: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      span: 14,
      loading: false,
      detail: {
        oldData: {},
        newData: {}
      },
      rules: {},
      form: {}
    }
  },
  computed: {
    StoreApplyStatus() {
      return StoreApplyStatus
    },
  },
  watch: {
    id(nv, ov) {
      this.getDetail(nv)
    }
  },
  created() {
    this.getDetail(this.id);
  },
  methods: {
    handleApproval(pass) {
      this.form.pass = pass;
      this.$confirm(`确定要${pass ? '通过' : '驳回'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        approvalStoreApply(this.form).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功")
            this.getDetail(this.id);
          }
        })
      })
    },
    getDetail(id) {
      this.loading = true;
      getStoreApply(id).then(res => {
        this.detail = res.data;
        this.reset();
      }).finally(() => {
        this.loading = false;
      })
    },
    reset() {
      this.form = {
        id: this.detail.id,
        verifyRemark: this.detail.verifyRemark,
        pass: null
      }
    }
  }
}
</script>
