<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="门店名称" :value="info.shopName"></ai-info-item>
            <ai-info-item label="门店地址" :value="info.address"></ai-info-item>
            <ai-info-item label="经营者姓名" :value="info.phone"></ai-info-item>
            <ai-info-item label="联系电话" :value="info.areaName"></ai-info-item>
            <ai-info-item label="评价人" :value="info.girdName"></ai-info-item>
            <ai-info-item label="评价人电话" :value="info.auditTime"></ai-info-item>
            <ai-info-item label="评价时间" :value="info.auditTime"></ai-info-item>
            <ai-info-item label="评价人类型" :value="info.auditTime"></ai-info-item>
            <ai-info-item label="评价类型" isLine :value="info.auditTime"></ai-info-item>
            <ai-info-item label="评语" isLine :value="info.auditTime"></ai-info-item>
            <ai-info-item label="现场图片" isLine :value="info.auditTime">
              <div class="files">
                <ai-uploader
                    :instance="instance"
                    fileType="img"
                    acceptType=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
                    v-model="info.images"
                    :limit="9" :disabled="true">
                </ai-uploader>
              </div>
            </ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="打分细则">
        <label class="aibar-left">1、正面清单</label>
        <ai-table
            class="mt-16"
            :tableData="tableData1"
            :is-show-pagination="false"
            :col-configs="colConfigs1">
        </ai-table>
        <label class="aibar-left">2、负面清单</label>
        <ai-table
            class="mt-16"
            :tableData="tableData2"
            :is-show-pagination="false"
            :col-configs="colConfigs2">
        </ai-table>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: "Detail",
  props: {
    instance: Function,
    dict: Object,
    params: Object
  },
  data() {
    return {
      info: {},
      tableData1:[],
      colConfigs1:[
        { prop: 'integralUserName',  label: '清单类型', align: 'center' },
        { prop: 'areaName',  label: '状态', align: 'center' },
        { prop: 'girdName',  label: '分数', align: 'center' },
      ],
      tableData2:[],
      colConfigs2:[
        { prop: 'integralUserName',  label: '清单类型', align: 'center' },
        { prop: 'areaName',  label: '状态', align: 'center' },
        { prop: 'girdName',  label: '分数', align: 'center' },
      ]
    }
  },

  created() {
    this.getDetail()
    this.getScoredetail()
  },

  methods: {
    async getScoredetail(){
      try {
        const {code,data} = await this.instance.post('/app/appscoredetails/queryDetailById',null,{
          params:{
            id:this.params.id
          }
        })
        if(code===0){
          console.log('data',data)
        }
      }catch (e) {
        console.error(e)
      }
    },

    async getDetail(){
      try {
        const {code,data} = await this.instance.post('/app/appshopassess/queryDetailById',null,{
          params:{
            id:this.params.id
          }
        })
        if(code===0){
          this.info = data
        }
      }catch (e) {
        console.error(e)
      }
    },

    cancel() {
      this.$emit('change', {
        type: 'List',
        isRefresh: true
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.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;
        }
      }
    }
  }

  .aibar-left{
    color: #222;
    font-size: 16px;
    font-weight: 700;
  }

  .mt-16{
    margin-top: 16px;
  }
}
</style>
