<template>
  <ai-detail class="detail">
    <template slot="title">
      <ai-title title="档案详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #content>
          <ai-wrapper>
            <ai-info-item label="经营者姓名" isLine :value="form.name"></ai-info-item>
            <ai-info-item label="身份证号" :value="form.idNumber"></ai-info-item>
            <ai-info-item label="性别" :value="form.sex"></ai-info-item>
            <ai-info-item label="联系电话" :value="form.phone"></ai-info-item>
            <ai-info-item label="出生日期" :value="form.birthday"></ai-info-item>
            <ai-info-item label="年龄" :value="form.age"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="门店信息">
        <template #content>
          <ai-wrapper>
            <ai-info-item label="门店名称" isLine :value="form.shopName"></ai-info-item>
            <ai-info-item label="门店照片" isLine>
              <div class="files">
                <ai-uploader
                    :instance="instance"
                    fileType="img"
                    acceptType=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
                    v-model="form.fileUrl"
                    :limit="9" :disabled="true">
                </ai-uploader>
              </div>
            </ai-info-item>
            <ai-info-item label="经营类型" isLine :value="form.operatorTypes"></ai-info-item>
            <ai-info-item label="所属片区" isLine :value="form.girdName"></ai-info-item>
            <ai-info-item label="社会信用代码" isLine :value="form.creditCode"></ai-info-item>
            <ai-info-item label="门店住址" isLine :value="form.address"></ai-info-item>
            <ai-info-item label="门店描述" isLine :value="form.description"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: 'Detail',

  props: {
    instance: Function,
    dict: Object,
    params: Object
  },

  data() {
    return {
      form: {
        name: '',
        idNumber: '',
        sex: '',
        phone: '',
        birthday: '',
        age: '',
        shopName: '',
        operatorTypes: '',
        creditCode: '',
        girdName: '',
        address: '',
        description: '',
      },
    }
  },

  created() {
    this.getDetail()
  },

  methods: {
    async getDetail() {
      try {
        const {code, data} = await this.instance.post('/app/appshoparchives/queryDetailById', null, {
          params: {
            id: this.parmas.id
          }
        })
        if (code === 0) {
          this.form = {...data}
        }
      } catch (e) {
        console.error(e)
      }
    },
    cancel() {
      this.$emit('change', {
        type: 'List',
        isRefresh: true
      })
    }
  }
}
</script>

<style scoped lang="scss">
.detail {
  .files {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .file-item {
      width: 118px;
      height: 118px;
      margin: 0 20px 20px 0;

      img, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      img {
        cursor: pointer;
        transition: all ease 0.3s;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
}
</style>
